20 Testa di Flexbox per Divi 5 (Download gratuito!)

Flexbox rende più facile che mai creare intestazioni che sembrano pulite, adattate magnificamente alle diverse dimensioni dello schermo e sono semplici da personalizzare in Divi 5. In questo pacchetto gratuito, troverai 20 design di intestazione Flexbox unici, ognuno costruito con il sistema di layout Flex di Divi 5 per un allineamento preciso e un controllo reattivo. Sia che tu voglia utilizzare gli stili globali esistenti del tuo sito o iniziare con un design pronto, troverai entrambe le opzioni qui.

Anteprima e demo dal vivo

Diamo un'occhiata a tutte le 20 intestazioni Flexbox in questo pacchetto. Questo pacchetto è gratuito per il download più in basso.

Iscriviti al nostro canale YouTube

Visualizza la demo dal vivo

Scarica 20 intestazioni Flexbox per Divi 5

Ottieni tutte e 20 le intestazioni Flexbox gratuite, comprese le versioni predefinite e prestinato. Ogni intestazione è pronta per importare nella libreria Divi e utilizzare nel Builder del tema. Basta scaricare e iniziare a costruire.

Scarica i file

Scarica gratuitamente

Unisciti alla newsletter Divi e ti invieremo una copia del pacchetto di layout della pagina di destinazione di Divi, oltre a tonnellate di altre risorse, suggerimenti e trucchi di Divi straordinari e gratuiti. Segui e sarai un Master Divi in ​​pochissimo tempo. Se sei già sottoscritto, digita semplicemente il tuo indirizzo email di seguito e fai clic su Download per accedere al pacchetto di layout.

SCARICAMENTO

Ti sei iscritto con successo. Controlla il tuo indirizzo email per confermare l'abbonamento e accedere ai pacchetti di layout Divi settimanali gratuiti!

Cosa è incluso (42 esportazioni)

Una volta scaricata e decomprimente la cartella, troverai tutte le 42 esportazioni di layout organizzate in modo ordinato in versioni predefinite e prestinuate come singole intestazioni e come pacchetti completi "All Headers".

Predefinito - singole intestazioni (20) → usa i tuoi stili globali.
Predefinito - Tutte le intestazioni (1) → Pacchetto completo utilizzando i tuoi stili globali.

PRESYLED-singoli intestazioni (20) → Include lo stile in linea per un aspetto immediato e pronto.
Prestyled - Tutte le intestazioni (1) → Pacchetto completo con stile in linea applicato.

Come installare i layout

Tieni la cartella di download nelle vicinanze per iniziare a importarli sul tuo sito Web Divi.

1. Importa layout nella libreria Divi

Vai alla libreria Divi → Divi.

Una volta lì, fare clic sul pulsante Importa ed esporta per installare i file.

Cerca il file di layout di intestazione Flexbox (All) e fai clic per importarlo.

2. Crea un nuovo modello di intestazione

Vai a Divi → Tema Builder.

Crea un nuovo modello di intestazione o apri uno esistente.

3. Carica layout dell'intestazione

Una volta che sei all'interno dell'area di intestazione, puoi utilizzare la libreria Divi per selezionare il layout di intestazione. Fai clic sul pulsante Aggiungi layout nell'angolo in alto a sinistra del Builder a tema.

Seleziona layout salvato .

Fai clic sul layout dell'intestazione che si desidera aggiungere al builder del tema.

Fare clic sul pulsante Usa questo layout per caricare l'intestazione.

Assicurati di salvare le modifiche alla tua nuova intestazione e al costruttore di temi.

Predefinito vs Prestyled: quale dovresti scegliere?

Quando apri la cartella di download, vedrai due versioni di ogni intestazione: ** predefinito ** e ** Prestyled **. Sono costruiti esattamente allo stesso modo, la differenza è nel modo in cui gestiscono lo stile.

Le intestazioni predefinite ereditano il loro look dai tuoi stili globali. I colori, i caratteri e gli stili di pulsanti del tuo marchio vengono applicati automaticamente. Se hai già impostato i tuoi stili globali, il valore predefinito è il modo più rapido per aggiungere queste intestazioni al tuo sito e abbinare immediatamente il tuo design.

Le intestazioni prestinuali sono dotate di tutti i loro stili cotti: colori, caratteri e disegni di pulsanti sono in linea. Sembrano esattamente come le anteprime appena uscite. Questo è fantastico se stai costruendo una dimostrazione rapida, testare idee o vuoi prendere il design esatto che vedi negli screenshot senza toccare le tue variabili.

In breve, vai con predefinito se vuoi che le intestazioni si fondono perfettamente con gli stili del sito esistenti. Scegli Prestyled se si desidera il look già pronto mostrato nelle anteprime.

Personalizzare le intestazioni

Il sistema di layout Flexbox di Divi 5 offre potenti strumenti per modificare i layout mantenendo tutto reattivo. Ecco come personalizzare queste intestazioni per adattarsi allo stile del tuo sito.

1. Regola le impostazioni flessibili

Selezionare la riga contenente gli elementi di intestazione. Nella scheda Design, individuare il menu a discesa layout. Espanderlo per rivelare le impostazioni Flexbox.

Qui, è possibile modificare la direzione di layout da riga a riga inversa, colonna o inversa colonna. Questa funzione consente di cambiare la direzione del layout.

Le impostazioni di contenuto giustificati consentono di controllare come gli elementi Flex sono distribuiti lungo l'asse principale: la direzione primaria del contenitore flessibile definita dalla direzione del layout. Determina la spaziatura e l'allineamento degli elementi orizzontalmente o verticalmente, a seconda della direzione del layout.

Gli elementi allineati consentono di controllare il modo in cui gli elementi Flex sono allineati all'interno di una colonna, riga o sezione. Determina come gli oggetti flessibili sono posizionati l'uno rispetto all'altro lungo l'asse incrociato all'interno del contenitore. Puoi scegliere Start, Center, End e Allungle.

Infine, il layout di avvolgimento controlla se gli elementi in un contenitore flessibile sono forzati su una singola riga o lasciati avvolgere su più linee quando superano la larghezza del contenitore (o altezza se la direzione del layout è impostata sulla colonna).

2. Mostra/nascondi elementi in diversi punti di interruzione

Divi 5 consente di attivare la visibilità di sezioni, righe, colonne o singoli moduli in specifici punti di interruzione. Questo è utile per semplificare i layout su schermi più piccoli, come nascondere un pulsante CTA secondario o sostituire un menu completo con uno mobile.

Ad esempio, potresti voler nascondere le icone dei social media in un'intestazione per risparmiare spazio sugli schermi mobili. Durante il punto di interruzione del desktop, vai alla scheda avanzata. Espandi il menu a discesa visibilità. Quindi, fai clic sui punti di interruzione del telefono e del tablet per nascondere l'elemento.

Usa l'anteprima reattiva di Divi 5 per visualizzare l'intestazione. Quando si visualizza il layout nel punto di interruzione del telefono, l'elemento nascosto sarà visibile, ma in grigio, indicando che sarà nascosto sulla parte anteriore.

3. Aggiungi collegamenti ove necessario

Sebbene ogni layout di intestazione sia pronto per uscire dalla scatola, dovrai comunque aggiungere collegamenti. In questo esempio, aggiungeresti collegamenti ai social media Follow Module. Fare clic per espandere le impostazioni del modulo. Nella scheda Contenuto, fai clic sulla prima icona dei social media per rivelare le sue impostazioni.

Espandi il menu a discesa Link e aggiungi il link al tuo account di social media nel campo URL del collegamento dell'account .

Assicurati di salvare l'intestazione prima di uscire dal costruttore di temi.

Se non l'hai già fatto, dovrai creare un menu per il tuo sito web. Esci dal Builder visivo e naviga verso l'aspetto → menu. Aggiungi un nome al campo Nome menu .

Fare clic sulla casella di controllo del menu principale , quindi fare clic su Crea menu .

Per aggiungere pagine al menu, fai clic sulla scheda Visualizza tutte le pagine che desideri visualizzare nel menu. Fare clic su Aggiungi al menu per assegnarli.

Di nuovo nel builder del tema, apportare ulteriori modifiche, se necessario. Ad esempio, se l'intestazione utilizza il costruttore Loop, potrebbe essere necessario regolare l'ordine dei collegamenti.

Usa Divi 5 per costruire le tue intestazioni oggi

Queste 20 intestazioni Flexbox sono un modo rapido per accelerare le tue build Divi 5, sia che tu stia lavorando dai tuoi stili globali stabiliti o a partire da un look predefinito. Scaricali, lasciali nel builder del tema e rendili propri. Flexbox gestisce l'allineamento in modo da poter concentrarti sul design.