Come fondere l'intestazione e il corpo utilizzando il modulo di contenuto dei post di Divi e i divisori di sezione

Ormai, ci siamo tutti abituati al divisore di sezione integrato di Divi. Aiutano ad aggiungere quel tocco in più ai siti web che creiamo. Servono anche come transizione graduale tra due diverse sezioni, ma con Divi's Theme Builder, l'approccio alla creazione di quella transizione è leggermente diverso. In questo post, ti guideremo attraverso i passaggi che devi compiere per arrivarci. Potrai anche scaricare gratuitamente il file JSON del modello!

Andiamo ad esso.

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Scarica GRATUITAMENTE il modello di pagina del divisore di sezione

Per mettere le mani sul modello di pagina divisore di sezione gratuito, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Iscriviti al nostro canale Youtube

1. Vai a Divi Theme Builder e aggiungi un nuovo modello

Vai a Divi Theme Builder

Inizia andando al Divi Theme Builder.

Aggiungi nuovo modello per le pagine

Lì, crea un nuovo modello facendo clic sull'icona più.

Seleziona "Tutte le pagine" se desideri applicare l'effetto di fusione a tutte le tue pagine. Puoi far funzionare lo stesso effetto anche su altri tipi di modelli, ma dovrai includere separatamente il divisore della sezione superiore in ciascuno dei tuoi modelli. Dopo aver creato un nuovo modello, inizia a creare l'intestazione personalizzata.

2. Crea intestazione personalizzata

Impostazioni della sezione

Sfondo sfumato

All'interno dell'editor del modello, noterai una sezione. Apri quella sezione e aggiungi uno sfondo sfumato.

• Colore 1: #d13232
• Colore 2: #fc6a3c

Spaziatura

Aggiungi anche un'imbottitura personalizzata superiore e inferiore alla sezione.

• Imbottitura superiore: 1vw (desktop), 2vw (tablet e telefono)
• Imbottitura inferiore: 1vw (desktop), 2vw (tablet e telefono)

Indice Z

E per assicurarci che la tua intestazione rimanga in primo piano rispetto a tutti i contenuti, aumenteremo l'indice z nelle impostazioni di visibilità.

• Indice Z: 99999

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga alla tua sezione utilizzando la seguente struttura a colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica le impostazioni di dimensionamento come segue:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Rimuovere anche tutta l'imbottitura superiore e inferiore.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Elemento principale

Ultimo ma non meno importante, centra il contenuto della colonna e consenti alle colonne di rimanere l'una accanto all'altra su schermi di dimensioni più piccole aggiungendo due singole righe di codice CSS all'elemento principale della riga.

display: flex;
align-items: center;

Aggiungi modulo immagine alla colonna 1

Carica logo

Dopo aver completato tutte le impostazioni di sezione e riga, è il momento di aggiungere moduli, iniziando con un Modulo immagine nella colonna 1. Carica un logo con uno sfondo trasparente.

Allineamento

Quindi, vai alla scheda di progettazione del modulo e modifica l'allineamento dell'immagine.

• Allineamento immagine: centro

Dimensionamento

Modifica anche la larghezza del modulo su schermi di diverse dimensioni.

• Larghezza: 6vw (desktop), 13vw (tablet), 17vw (telefono)

Aggiungi modulo menu alla colonna 2

Seleziona Menu

Nella seconda colonna, avremo bisogno di un modulo menu. Seleziona un menu a tua scelta.

Rimuovi colore di sfondo

Continua rimuovendo il colore di sfondo del modulo.

Disposizione

Passa alla scheda Design e modifica il layout.

• Stile: allineato a sinistra
• Direzione del menu a discesa: verso il basso

Testo del menu

Quindi, modella il testo del menu di conseguenza:

• Carattere del menu: Oswald
• Peso del carattere del menu: leggero
• Stile del carattere del menu: maiuscolo
• Colore testo menu: #ffffff (desktop), #202332 (tablet e telefono)
• Dimensione del testo del menu: 0.8vw (desktop), 2vw (tablet), 2.5vw (telefono)
• Spaziatura delle lettere del menu: 0.1vw

Menu a discesa

Cambia anche il colore della linea del menu a discesa nelle impostazioni del menu a discesa.

• Colore linea menu a discesa: #ffffff

Icone

E completa le impostazioni del modulo utilizzando il colore dell'icona del menu dell'hamburger bianco.

• Colore icona menu hamburger: #ffffff

Aggiungi modulo pulsante alla colonna 3

Aggiungi copia

All'ultima colonna! Lì, l'unico modulo di cui avremo bisogno è un modulo pulsante. Aggiungi una copia a tua scelta.

Allineamento

Passa alla scheda di progettazione del modulo e modifica l'allineamento del pulsante.

• Allineamento dei pulsanti: centro

Impostazioni dei pulsanti

Continua applicando uno stile al pulsante nelle impostazioni del pulsante.

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 0.6vw (desktop), 1vw (tablet), 1.5vw (telefono)
• Colore del testo del pulsante: #000000
• Colore di sfondo del pulsante: #FFFFFF
• Larghezza bordo pulsante: 0px

• Raggio del bordo del pulsante: 100 px
• Spaziatura delle lettere dei pulsanti: 2px
• Carattere pulsante: Open Sans
• Peso del carattere del pulsante: grassetto
• Stile carattere pulsante: maiuscolo

Spaziatura

E completa le impostazioni del modulo aggiungendo del riempimento personalizzato su diverse dimensioni dello schermo.

• Imbottitura superiore: 0.8vw (desktop), 1.6vw (tablet), 2.2vw (telefono)
• Imbottitura inferiore: 0.8vw (desktop), 1.6vw (tablet), 2.2vw (telefono)
• Imbottitura sinistra: 1.5vw (desktop), 2.5vw (tablet), 3.5vw (telefono)
• Imbottitura destra: 1.5vw (desktop), 2.5vw (tablet), 3.5vw (telefono)

3. Costruisci un corpo personalizzato e aggiungi un divisore superiore

Una volta completata l'intestazione personalizzata del modello, vai avanti e inizia a creare il corpo personalizzato.

Impostazioni della sezione

Divisore superiore

Noterai, ancora una volta, una sezione nella pagina. Apri quella sezione e aggiungi un divisore superiore.

• Stile divisore: trova nell'elenco
• Colore divisore: #fc6a3c
• Altezza divisore: 6vw
• Ripetizione orizzontale divisore: 15x
• Capovolgimento divisore: verticale
• Disposizione dei divisori: in cima al contenuto della sezione

Spaziatura

Passa alla scheda Progettazione della sezione e rimuovi tutte le imbottiture superiori e inferiori predefinite.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga alla tua sezione utilizzando la seguente struttura a colonne:

Dimensionamento

Apri le impostazioni della riga e modifica le impostazioni di dimensionamento come segue:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Rimuovi anche tutta l'imbottitura superiore e inferiore predefinita.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi modulo contenuto post alla colonna

Ora, per far apparire tutto il contenuto della tua pagina, dovrai aggiungere un modulo di contenuto del post alla tua riga. Questo modulo rappresenta il layout che hai costruito all'interno della pagina stessa usando Divi. Se aggiungi questa transizione a una pagina di prodotto, ad esempio un modello in cui è coinvolto il contenuto dinamico, avviene un approccio diverso. L'unica cosa importante da ricordare è che dovrai aggiungere un divisore superiore alla prima sezione del corpo del modello. Assicurati che il colore del tuo divisore sia lo stesso del colore utilizzato per lo sfondo dell'intestazione globale.

3. Salva le modifiche del generatore e visualizza il risultato

Una volta completato il corpo del modello, puoi salvare le modifiche e visualizzare il risultato sul tuo sito web!

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Pensieri finali

In questo post, ti abbiamo mostrato come unire l'intestazione e il corpo del tuo modello utilizzando i divisori di sezione di Divi e il modulo contenuto post. La transizione del divisore si applica immediatamente a tutte le tue pagine. Sei stato anche in grado di scaricare il file JSON gratuitamente! Se hai domande o suggerimenti, non esitare a lasciare un commento nella sezione commenti qui sotto.

Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.