Evidenziazione del prodotto Divi: Divi Designer Pack

Divi Designer Pack è un pacchetto di layout con oltre 720 elementi di design che puoi utilizzare con Divi Builder per creare facilmente il tuo prossimo sito web. Viene fornito con layout sia chiari che scuri e una varietà di design per ogni sezione della tua pagina. In questo post, daremo un'occhiata ad alcuni dei layout forniti con Divi Designer Pack per vedere se questo è il prodotto giusto per te.

Iniziamo!

Installazione di Divi Designer Pack

Divi Designer Pack si presenta come un file .ZIP contenente i file .json della libreria Divi. I layout sono impacchettati in modo da poter installare tutti i layout, tutti i layout di una determinata categoria o tutti i layout chiari o scuri di una determinata categoria a seconda delle esigenze.

Per installare i layout, inizia decomprimendo il file .ZIP nel tuo file manager. Quindi, apri la dashboard di WordPress e vai alla pagina Libreria Divi. Fai clic su Importa ed esporta in alto, quindi seleziona la scheda Importa. Scegli un file pacchetto di layout .json da importare, quindi seleziona Importa layout Divi Builder.

Una volta che il layout è stato importato, apri la tua pagina in Divi Builder. Fai clic sull'icona più blu per aggiungere una nuova sezione, quindi seleziona Aggiungi dalla libreria.

Individua il layout che desideri utilizzare nella Libreria Divi.

Quindi, fai clic sul pulsante Usa questa sezione per caricare il layout sulla tua pagina.

Pacchetto progettista Divi

Divi Designer Pack viene fornito con oltre 720 layout per varie sezioni del sito Web con design sia chiari che scuri. Ognuno dei layout può essere personalizzato a proprio piacimento e il contenuto può essere sostituito con il proprio. Poiché ci sono così tanti layout diversi forniti con questo pacchetto, non possiamo coprirli tutti in questo post. Daremo un'occhiata ad alcuni layout di ogni categoria per darti un'idea di quali design puoi ottenere con Divi Designer Pack. Puoi anche visualizzare tutti i layout sul sito web della demo live.

Sezioni di progettazione Divi Designer

Divi Designer Informazioni sulle sezioni

Ci sono circa 25 layout di sezione in totale. Il layout 2 ha un'immagine e una casella di testo sovrapposta con un numero. C'è del testo sul lato destro, insieme ad alcuni moduli blurb.

Ecco la versione oscura del layout 2.

Il layout 11 presenta un design bicolore con del testo a sinistra e un'immagine a destra, un pulsante CTA e alcuni moduli blurb con icone dei social media.

Informazioni sul layout 17 utilizza forme sfumate attorno a un'immagine. C'è del testo e un pulsante CTA sulla sinistra, insieme ad alcuni moduli blurb con icone a forma di freccia.

Sezioni del blog Divi Designer

Ci sono 7 sezioni del blog in totale, con variazioni scure e chiare. Queste sezioni mostrano una selezione di post sul tuo blog. Il layout 1 ha un design semplice e minimalista, con un effetto al passaggio del mouse ingrandito sulle immagini e un effetto al passaggio del mouse sottolineato sul titolo del post.

Il terzo layout del blog presenta un pulsante CTA in alto a destra e carte con un leggero effetto al passaggio del mouse.

Ecco la variazione oscura del layout del blog 5. Presenta un effetto al passaggio del mouse che aggiunge una sottolineatura al titolo del post e sposta leggermente la scheda verso l'alto.

Il layout del blog 7 presenta una scheda con le informazioni sul post in alto, l'immagine al centro e un pulsante Leggi di più in basso.

Sezioni del carosello di Divi Designer

Ci sono 16 diversi modelli di carosello, con diversi tipi di carosello. Il primo esempio è il carosello 4, un carosello dei membri del team. Ogni scheda membro del team presenta un'immagine, un nome, un titolo professionale, una descrizione e icone dei social media.

Il layout 7 è un carosello di testimonianze. Questo è il layout scuro. Ogni elemento del carosello presenta una foto del profilo, un testo di testimonianza, un nome e un titolo professionale.

Carousel 13 è un carosello di post sul blog. È un semplice layout di scheda con la categoria del blog nell'angolo in alto a destra dell'immagine e il titolo del post in basso.

Sezioni di contatto di Divi Designer

Divi Designer viene fornito con 20 layout di sezione dei contatti. Questo è il layout 4, che presenta alcuni testi e informazioni di contatto sulla sinistra e un modulo di contatto sulla destra.

Il layout dei contatti 6 è una sezione semplice con un numero di telefono, del testo e un pulsante CTA a sinistra, con un'immagine a destra.

Il layout 15 presenta il modulo di contatto a sinistra con le informazioni di contatto a destra su uno sfondo sfumato.

Questa è la variazione scura del layout 15.

Sezioni contatore Divi Designer

Ci sono 16 layout di banco in totale. Il primo layout è per ottenere un preventivo gratuito e ha del testo e un pulsante CTA sulla sinistra e un'immagine e alcuni contatori numerici sotto.

Il layout 9 presenta del testo in alto e contatori numerici con icone in basso.

Il layout contatore 11 ha una barra contatore che si riempie man mano che la pagina viene caricata. Questo è il layout scuro.

Il layout contatore 15 presenta testo a sinistra e un pulsante CTA, con altro testo a destra seguito da contatori numerici.

Sezioni CTA di Divi Designer

Ci sono 15 layout CTA nel Divi Designer Pack. Questo primo esempio è il layout 5. Si tratta di una sezione CTA che evidenzia un'app mobile e presenta immagini che possono essere collegate al Google Play Store e all'App Store.

Questo è il layout CTA 7 nella variazione oscura. Ha un'immagine scura sovrapposta con un'icona, un testo e due pulsanti CTA.

Il layout 9 presenta un modulo blurb con del testo e un pulsante CTA sovrapposto a un'immagine con angoli arrotondati.

Il layout 10 presenta alcune icone di testo e social media.

Sezioni delle domande frequenti su Divi Designer

Ci sono 15 layout di sezione FAQ. Questa è la prima sezione delle FAQ. Presenta una grande immagine su un lato e domande frequenti in stile interruttore sulla destra.

E questa è la versione oscura della prima sezione delle FAQ.

Il layout FAQ 4 ha un layout di commutazione a tutta larghezza.

Infine, il layout delle FAQ 7 presenta le domande delle FAQ a sinistra e un'immagine, del testo e un pulsante CTA a destra.

Sezioni Eroe di Divi Designer

Ci sono 30 layout di sezioni degli eroi in totale. Il primo, layout 8, presenta del testo sul lato sinistro con un'immagine trasparente di una persona sulla destra.

Il layout dell'eroe 9 presenta un'immagine di sfondo oscurata con un testo dell'eroe di grandi dimensioni e una barra di ricerca. Sotto la barra di ricerca ci sono tre schede immagine con testo descrittivo e un pulsante per saperne di più.

Il layout 19 utilizza una grande immagine di sfondo oscurata e presenta del testo e due pulsanti.

Sezioni sui prezzi di Divi Designer

Ci sono anche 20 layout di prezzi. Questo è il layout dei prezzi 7. Presenta uno sfondo rosa e due cartellini dei prezzi con del testo a destra. Ogni scheda prezzo ha un titolo e un sottotitolo, un prezzo, dettagli e un pulsante Acquista ora.

Il layout dei prezzi 8 presenta tre livelli di prezzo. Il titolo e il prezzo, insieme al sottotitolo, sono sulla sinistra. Le funzionalità sono sulla destra, presentate con segni di spunta, e il pulsante Acquista ora è sulla destra. L'opzione centrale è evidenziata in verde.

Il layout 12 presenta tre carte con un'icona, titolo e sottotitolo e prezzo nella parte superiore di ogni carta. C'è un banner verde che separa la parte superiore dalle funzionalità, quindi un elenco di funzionalità seguito da un pulsante. Ogni carta ha un effetto al passaggio del mouse che sposta la carta verso l'alto al passaggio del mouse.

Ecco la versione oscura del layout dei prezzi 19. Ha alcune icone blurb in alto per evidenziare le funzionalità e tre blocchi di piani tariffari.

Sezioni dei servizi Divi Designer

Divi Designer Pack viene fornito con 25 layout di servizi. Il layout 3 presenta un'intestazione, tre moduli blurb su uno sfondo scuro con testo descrittivo e un pulsante.

Il layout dei servizi 14 ha tre schede con un'icona nella parte superiore, del testo descrittivo, un elenco di testo numerato e un collegamento per visualizzare i dettagli.

Il layout 19 presenta un testo di intestazione e testo di descrizione, insieme a sei moduli blurb con icone che rappresentano ciascun servizio.

Questa è la versione oscura del layout dei servizi 25. Presenta quattro sezioni di servizi con un effetto al passaggio del mouse che rende la carta scura.

Sezioni del dispositivo di scorrimento Divi Designer

Ci sono un totale di 15 layout di slider. Il layout del dispositivo di scorrimento 1 presenta un piccolo dispositivo di scorrimento del testo con un numero, testo e un pulsante su ciascuna diapositiva. C'è una sezione del titolo con sfondo verde sopra il cursore e un'immagine sul lato destro.

Il layout del dispositivo di scorrimento 8 è un dispositivo di scorrimento dell'immagine di grandi dimensioni con una sovrapposizione scura. C'è del testo a sinistra e un pulsante sotto.

Il layout del cursore 12 ha una grande immagine di sfondo e diapositive di testo su uno sfondo bianco che cambia con ogni diapositiva. C'è anche un pulsante su ogni diapositiva.

Sezioni del team Divi Designer

Ci sono 25 layout di sezione del team in totale. Il layout 8 presenta un'intestazione e tre immagini dei membri del team con un effetto al passaggio del mouse. Quando passi il mouse sopra l'immagine, c'è una sovrapposizione scura e vengono mostrati il ​​nome del membro del team, il titolo di lavoro e le icone dei social media.

Ecco la versione oscura del layout 8.

Il layout 13 ha un'intestazione e un testo sul lato sinistro, insieme a un pulsante CTA. Sulla destra ci sono tre immagini circolari dei membri del team. Simile all'ultimo design, quando passi il mouse sopra l'immagine vengono rivelati il ​​nome del membro del team, il titolo di lavoro e le icone dei social media.

Questo design è il layout 18 e presenta schede con foto dei membri del team, titoli di lavoro e collegamenti ai social media. Sulla destra c'è un'intestazione e una descrizione, seguite da un pulsante CTA.

Sezioni di testimonianze di Divi Designer

Ci sono 25 diverse sezioni di testimonianze. Questo è il layout 1 e presenta l'intestazione e il corpo del testo in alto, seguiti da tre sezioni di testimonianze. Ogni testimonianza ha un'icona, un'immagine, un corpo del testo, un nome, un titolo professionale e un'azienda.

Questa sezione è il layout 2. Presenta due schede di testimonianza con un'icona di citazione, testo, un'immagine, nome, titolo professionale e titolo dell'azienda su uno sfondo dell'immagine con una sovrapposizione scura. Sulla sinistra puoi trovare il testo dell'intestazione, il corpo del testo e un pulsante CTA.

Questa è la versione oscura del layout 5, con sezioni colorate contenenti testimonianze dei clienti.

Il layout 7 presenta un cursore di testimonianza sulla sinistra con un'immagine, un testo di testimonianza e un nome in basso. Sulla destra c'è il testo dell'intestazione, il corpo del testo e un pulsante CTA.

Modelli Divi Designer Theme Builder

Successivamente ci sono i modelli di generatore di temi. Questi sono modelli di intestazione, piè di pagina e corpo che possono essere caricati dal generatore di temi nelle impostazioni Divi nella dashboard di WordPress.

Modelli di piè di pagina Divi Designer

Ci sono un totale di 20 modelli di piè di pagina. Il primo è il layout del piè di pagina 4. Questo design presenta un logo, icone dei social media e un avviso di copyright sulla sinistra. Sulla destra ci sono due colonne di voci di menu.

Il layout del piè di pagina 13 ha un modulo di contatto sulla sinistra e le informazioni di contatto e le icone dei social media sulla destra. C'è anche una barra a piè di pagina con informazioni sul copyright.

Il layout del piè di pagina 19 presenta un logo, un indirizzo e orari di apertura sul lato sinistro. Al centro c'è una barra dei menu e sulla destra c'è un modulo di iscrizione alla newsletter e collegamenti ai social media. In fondo c'è un avviso di copyright.

Modelli di intestazione Divi Designer

Ci sono anche 20 modelli di intestazione nel Divi Designer Pack. Questa è l'intestazione 7. Presenta una barra dei menu secondaria in verde con informazioni di contatto e un pulsante CTA. La barra dei menu principale presenta un logo a sinistra e voci di menu allineate a destra.

Il layout dell'intestazione 8 presenta le informazioni di contatto con un logo in linea nella parte superiore. Di seguito le voci del menù.

Il layout dell'intestazione 13 presenta alcune icone dei social media a sinistra, un logo al centro e un pulsante CTA a destra. Di seguito sono riportate le voci di menu, allineate a sinistra, e una barra di ricerca allineata a destra.

Modelli Divi Designer 404

Sono disponibili 25 diversi modelli di pagina 404. Il primo design, il layout 6, presenta le lettere "OOPS" dietro il testo dell'errore 404. Questo layout ha anche un pulsante arancione per andare alla home page.

Questo è il layout 9. Presenta del testo ombreggiato di grandi dimensioni e l'errore 404, insieme a un pulsante per tornare alla home page seguito da alcune icone dei social media.

Il layout 12 presenta i numeri 404 in caratteri grandi e ha un pulsante per tornare alla home page.

Modelli di blog Divi Designer

Modelli di pagina del blog Divi Designer

Ci sono 20 modelli di blog forniti con Divi Designer Pack. Il layout del blog 1 presenta un'intestazione dell'immagine con un titolo e un pulsante. I post sono elencati a sinistra con l'immagine in primo piano, le informazioni sul post e il pulsante Leggi di più. C'è una barra laterale sulla destra con una barra di ricerca, post recenti e commenti recenti. In fondo c'è un'altra immagine con testo sovrapposto.

Ecco la versione oscura del layout del blog 1.

Il layout del blog 8 presenta alcuni divisori curvi e una sezione di intestazione con testo e un pulsante in alto. I post del blog hanno un layout in stile scheda con un'immagine, i dettagli del post e un pulsante per saperne di più. In fondo alla pagina c'è un'altra sezione di testo.

Il layout del blog 18 presenta una sezione di intestazione con testo e un pulsante, seguita da due colonne del blog. La colonna di sinistra mostra i post con una grande immagine in primo piano. La colonna di destra presenta solo i dettagli del post e un pulsante per saperne di più. Infine, c'è del testo aggiuntivo nel piè di pagina.

Modelli di post di Divi Designer

Ci sono 20 diversi modelli di post forniti con il pacchetto. Il layout del post 4 ha l'immagine in primo piano nella parte superiore della pagina, con il titolo del post, le informazioni sul post e un pulsante sovrapposto. Di seguito è riportato il contenuto del post e i commenti. C'è una barra laterale sulla destra che presenta una barra di ricerca, post recenti e commenti recenti. In fondo alla pagina c'è del testo aggiuntivo.

Ecco la versione scura del layout del post 5. L'immagine in primo piano è in alto con un divisore curvo. Il contenuto e i commenti del post sono su uno sfondo scuro, seguiti da una sezione con un'immagine e un testo sovrapposto che promuove un'offerta.

Il layout 11 inizia con il titolo del post in alto, quindi la grande immagine in primo piano. Quindi, puoi trovare il contenuto del post e i commenti. Sulla destra c'è una scheda contenente le informazioni sulla posta.

Il layout del post 13 presenta anche il titolo in alto, seguito dall'immagine in primo piano. Le informazioni sul post sono elencate sotto l'immagine. Il prossimo è il contenuto del post e i commenti, e infine c'è una sezione dei post correlati che mostra le schede con altri post del blog.

Modelli Divi Designer Woo

I modelli Woo sono layout che funzionano con il plug-in Woo Commerce.

Modelli di carrello Divi Designer

Ci sono 13 modelli di carrello forniti con il pacchetto. Il layout del carrello 1 presenta un tema di colore blu. C'è un'intestazione in alto, seguita dal carrello dove puoi vedere il contenuto del carrello, applicare un coupon e aggiornare il carrello. C'è un pulsante di ritorno al negozio sotto questo. Sulla destra c'è il totale del carrello, seguito dal pulsante procedi al checkout.

Il layout del carrello 2 ha un'intestazione con l'icona del carrello. Poi c'è il carrello dove puoi vedere i prodotti. Seguendo questo sulla sinistra ci sono alcune informazioni sul coupon, e sulla destra c'è il totale del carrello e il pulsante Procedi al pagamento.

Il layout del carrello 8 inizia con un'intestazione, seguita dal contenuto del carrello. Al di sotto di queste ci sono alcune icone blurb e un pulsante di ritorno al negozio. Di seguito è riportato il totale del carrello e un pulsante per procedere al pagamento. Sulla destra c'è un modulo fisarmonica con alcune FAQ.

Ed ecco la versione oscura del layout del carrello 8.

Modelli di pagamento Divi Designer

Ci sono 13 modelli di checkout in totale. Il layout di checkout 3 presenta collegamenti al negozio e alle pagine del carrello nella parte superiore, seguiti da una sezione di inserimento coupon. In basso a sinistra sono riportati i dettagli di fatturazione e le informazioni aggiuntive, mentre a destra sono riportati il ​​totale dell'ordine e il pagamento. Questa è la versione oscura.

Questo è il 4° modello. Presenta diverse icone nella parte superiore che sono collegate al carrello e al negozio, seguite da un codice coupon. Sulla sinistra sono riportati i dettagli di fatturazione e le informazioni aggiuntive, mentre sulla destra sono presenti il ​​totale dell'ordine e il metodo di pagamento.

Ecco la versione oscura del layout di cassa 4.

Il layout di pagamento 10 presenta un titolo e una voce del coupon in alto, seguiti dai dettagli di fatturazione e da informazioni aggiuntive. Sulla destra ci sono il totale dell'ordine, il pagamento e alcuni moduli di blurb.

Modelli di prodotti Divi Designer

Ci sono anche 13 modelli di prodotto. Questo è il layout 2, che presenta una grande immagine del prodotto in alto. Di seguito sono riportati il ​​nome del prodotto, il costo, la descrizione e il pulsante Aggiungi al carrello. Di seguito sono riportati prodotti e recensioni correlati.

Il layout del prodotto 6 ha uno sfondo più scuro e presenta la foto del prodotto a sinistra e le informazioni sul prodotto a destra, con il pulsante aggiungi al carrello. Di seguito sono riportati la descrizione, le recensioni e i prodotti correlati.

Il layout del prodotto 10 ha un layout della scheda con le informazioni sul prodotto e il pulsante Aggiungi al carrello sulla sinistra. A destra l'immagine del prodotto. Di seguito sono recensioni e prodotti correlati.

Ecco la versione oscura del layout del prodotto 10.

Modelli Divi Designer Shop

Infine, ci sono anche 10 modelli di negozio forniti con il Divi Designer Pack. Questo è il layout 4, che presenta un'intestazione con un'immagine, seguita da una barra laterale e dai prodotti. In fondo ci sono alcuni moduli blurb con icone grandi.

Il layout del negozio 8 presenta un'intestazione con testo e un'immagine, prodotti sotto con un bordo, seguiti da alcuni moduli blurb.

Questa è la versione oscura del layout del negozio 8.

Infine, il layout del negozio 9 presenta un'intestazione con un'immagine, seguita da prodotti a sinistra e una barra laterale a destra, quindi alcuni moduli blurb in basso.

Acquista il pacchetto Designer Divi

Divi Designer Pack è disponibile nel Divi Marketplace. Costa $ 19 per l'utilizzo illimitato del sito Web e gli aggiornamenti a vita. Il prezzo include anche una garanzia di rimborso di 30 giorni.

Pensieri finali

Abbiamo appena toccato la punta dell'iceberg in questo articolo, ci sono così tanti altri layout da scoprire nel Divi Designer Pack, tutti con stili e usi diversi. Ovviamente, ogni layout può essere completamente personalizzato con i tuoi contenuti e modificato per adattarsi al tuo caso d'uso specifico, e puoi combinare molti layout di sezione diversi per creare facilmente layout a pagina intera. Per visualizzare in anteprima tutti i diversi layout che ottieni con Divi Designer Pack, dai un'occhiata alla demo live.

Ci piacerebbe avere tue notizie! Hai provato Divi Designer Pack? Fateci sapere cosa ne pensate nei commenti!