Una panoramica e una revisione del pacchetto di layout dell'intestazione di Divi Life

L'Header Layout Pack di Divi Life è un insieme di intestazioni per Divi Theme Builder che possono essere stilizzati per adattarsi bene a qualsiasi sito Web Divi. Le intestazioni si distinguono dalla massa con il nuovo stile aggiunto con il codice. Il pacchetto di layout include sei design di intestazione con tre stili per ciascuno. In questo articolo, esamineremo il pacchetto di layout dell'intestazione per aiutarti a decidere se si adatta alle tue esigenze.

Importazione del pacchetto layout intestazione Divi Life

Prima di utilizzare i layout con Divi Theme Builder, dovrai importarli nella tua libreria Divi. Fortunatamente, questo è un processo semplice e diretto:

1. Scarica e decomprimi i layout in una cartella sul tuo computer.
2. Vai su Divi > Libreria Divi nel menu della dashboard di WordPress.
3. Seleziona Importa ed esporta nella parte superiore dello schermo.
4. Seleziona Importa nel popup, seleziona Scegli file e vai al layout che desideri caricare (seleziona ALL-Divi-Life-Header-Templates se desideri caricarli tutti contemporaneamente.
5. Fare clic su Importa layout Divi Builder e attendere il completamento del caricamento.

I layout saranno ora disponibili nella tua libreria. Nell'esempio sopra, ho scelto di caricare tutti i modelli. Il Theme Builder ora ha accesso a tutti i layout. Dovrai solo apportare modifiche al codice e al menu dell'Intestazione 1. Il resto funziona così com'è.

Creazione di un'intestazione globale in Divi Theme Builder

Apri Divi Theme Builder e fai clic per aggiungere un'intestazione globale. Seleziona Aggiungi da libreria .

Seleziona la scheda denominata I tuoi layout salvati e scegli il layout che desideri. Attendi che venga importato.

Fare clic sull'icona di modifica per personalizzare il layout.

Ho selezionato Intestazione-1-a. Questo mostra il layout nella vista wireframe. Include un modulo di codice con CSS e JS personalizzati. Molti dei moduli includono ID di classe per il CSS personalizzato. Parte del codice potrebbe non essere eseguita nell'anteprima del generatore di temi. Consiglio di visualizzare l'intestazione sul front-end.

Se desideri apportare modifiche e non vuoi che l'intestazione venga visualizzata fino a quando non vengono apportate le modifiche, potresti prendere in considerazione la creazione di una pagina di prova e l'assegnazione dell'intestazione a quella pagina prima di renderla un'intestazione globale.

Modifica del contenuto e dello stile

Successivamente, devi solo scegliere il tuo menu, aggiungere il tuo logo e personalizzare i colori in modo che corrispondano al tuo sito web. L'intestazione utilizza i moduli standard, quindi funziona come qualsiasi intestazione. Ho selezionato il mio menu nell'esempio sopra.

Il pulsante utilizza già stili personalizzati. Aggiungi semplicemente i colori e i caratteri progettati. Fare clic per salvare le modifiche.

Inoltre, assicurati di salvare le modifiche nella schermata principale. Ho aggiunto una versione dell'intestazione a un post specifico in modo da poter testare l'intestazione prima di rilasciarla nel modello di sito Web predefinito e renderla globale.

Esempi di intestazione

Ecco uno sguardo a come appaiono i modelli con il mio sito di prova. I 6 layout hanno una versione pre-stilata di colori chiari, scuri e luminosi. Ciò semplifica la scelta di un'intestazione che si adatta al tuo design e quindi la modifica in base alle tue esigenze. Hanno anche pulsanti che cambiano colore al passaggio del mouse.

Ne esamineremo un mix con diversi colori di sfondo e dimensioni dello schermo. Sto usando i layout della home page e della pagina di destinazione dal pacchetto di layout Pizzeria.

Intestazione 1 Layout

L'intestazione 1 include un modulo di codice, menu, ricerca e un pulsante per creare il CTA.

Il processo di importazione non mantiene i valori correttamente, quindi sarà necessario modificare tre righe nel CSS.

Inoltre, il menu dovrà essere rinominato e la classe CSS dovrà essere aggiunta al menu. Fortunatamente, tutte queste regolazioni sono facili da fare. Le istruzioni sono nella documentazione. Questa è l'unica volta che ho avuto bisogno della documentazione durante questa recensione.

Il risultato è un menu elegante con linee di divisione per le tre voci principali del menu a sinistra, il resto del menu a destra, una casella di ricerca con un'icona all'interno del campo di ricerca e un grande pulsante CTA. Ecco come appare con lo sfondo chiaro. Un'ombra separa l'intestazione dalla pagina.

Ecco lo sfondo scuro. Sto passando sopra il CTA per mostrare che cambia colore.

L'intestazione si riduce in altezza durante lo scorrimento. Gli elementi rimangono della stessa dimensione.

Ecco la vista tablet. Le voci del menu sono posizionate all'interno del menu a discesa. I tre elementi con la classe CSS includono uno stile che li distingue dal resto.

La vista del telefono impila l'invito all'azione sotto il logo e mantiene anche lo stile per gli elementi con la classe CSS.

Layout intestazione 2

L'intestazione 2 utilizza un modulo di codice con moduli CSS e JS, blurb, immagini, testo, social media, menu e pulsanti.

Questa è l'intestazione 2A. Ecco come appare su una pagina scura. L'intestazione non copre l'intera larghezza del sito. Il menu in alto è trasparente e include i pulsanti social. Il fondo ha il CTA e le informazioni di contatto. Il numero di telefono è cliccabile.

Ecco il design su una pagina chiara. Mi piace come si distingue questo CTA.

Dopo lo scorrimento, il menu in alto scorre con la pagina e il menu in basso rimane in alto.

Ecco la vista tablet. Il menu in alto scorre con la pagina mentre il menu in basso rimane fisso.

Ecco la vista del telefono. Il CTA è impilato sotto il menu. L'intestazione scorre via con la pagina.

Layout intestazione 3

I moduli per l'intestazione 3 includono codice, follower sui social media, menu e un pulsante.

Ecco l'intestazione 3B con uno sfondo chiaro. La sezione superiore include i pulsanti social e la ricerca, mentre la sezione inferiore aggiunge il CTA.

Ecco come appare su uno sfondo scuro.

Il menu in alto scorre via con la pagina mentre il menu in basso si attacca alla parte superiore dello schermo.

Ecco la vista tablet.

Ecco come la vista del telefono impila gli elementi.

Intestazione 4 Layout

L'intestazione 3 include codice, diversi blurb, un pulsante, un menu e moduli per seguire i social media.

Ecco l'intestazione 3C su uno sfondo chiaro. La parte superiore include le informazioni di contatto e CTA, mentre la parte inferiore mostra i pulsanti social.

Ecco come appare con uno sfondo scuro. I colori originali stanno benissimo con questo sfondo. Sto passando sopra il CTA in questo esempio.

Ecco come appare questo dopo lo scorrimento. La sezione superiore scorre con il sito e la sezione inferiore si attacca.

Questa è la visualizzazione del tablet.

La vista del telefono impila gli elementi.

Intestazione 5 Layout

L'intestazione 5 include un modulo di codice, un paio di blurb, follower sui social media e moduli di menu.

Ecco l'intestazione 5C su uno sfondo scuro. La parte superiore include un numero di telefono cliccabile, pulsanti social e un collegamento al modulo di contatto. Il rosso e il grigio scuro risaltano bene.

Sembra anche bello sullo sfondo chiaro. L'ombra della scatola è più evidente.

La metà superiore del menu continua a scorrere mentre la metà inferiore si attacca alla parte superiore dello schermo.

Ecco la vista tablet.

Questa è la vista del telefono. Mi piace il modo in cui si impila il contenuto della sezione superiore.

Intestazione 6 Layout

L'intestazione 6 include un modulo di codice, 4 blurb, un modulo di follow sui social media e un modulo di menu.

Questa è l'intestazione 6B su uno sfondo scuro. Questo ha tre sezioni: la parte superiore include i pulsanti social, la parte centrale include le informazioni di contatto e la parte inferiore ha i collegamenti al menu.

Ecco l'intestazione su uno sfondo chiaro.

Le prime 2 sezioni dell'intestazione scorrono via e la sezione inferiore è appiccicosa. Aggiunge un'ombra di casella al menu in basso quando si attacca alla parte superiore dello schermo.

Ecco la vista tablet. Sposta il numero di telefono in alto.

Ecco il design nella vista del telefono.

Acquistare

L'Header Layout Pack è disponibile da Divi Life per $ 49 (in vendita a $ 5 per il resto dell'anno). Può essere utilizzato su siti illimitati per te e i tuoi clienti e include l'accesso a tutti gli aggiornamenti futuri. Include anche supporto e documentazione.

Pensieri finali

L'Header Layout Pack per Divi Theme Builder è un interessante insieme di layout. Il CSS e JavaScript aggiungono uno stile che normalmente non è disponibile in un'intestazione. Questo aiuta a dare all'intestazione un aspetto molto diverso rispetto alle intestazioni standard. Poiché ogni design ha più opzioni preimpostate, è facile trovare qualcosa che si adatti al tuo sito Web senza dover apportare molte modifiche. Lo stile si adatta già ai layout Divi gratuiti di ET.

Le intestazioni sembrano progettate in modo professionale e le ho trovate facili da usare. Ne ho guardati solo alcuni. Lavorare con l'intestazione 1 è l'unico layout che richiede passaggi complicati. Non è così difficile se leggi le istruzioni (indovina come lo so). Tieni presente che richiede più passaggi rispetto agli altri.

Se sei interessato a intestazioni progettate professionalmente per Divi Theme Builder, vale la pena dare un'occhiata a The Header Layout Pack di Divi Life.

Vogliamo sentire da voi. Hai provato l'Header Layout Pack di Divi Life? Fateci sapere cosa ne pensate nei commenti.

Immagine in primo piano tramite PureSolution / shutterstock.com