Come includere un blocco di layout Divi della casella di riepilogo nel tuo post di Gutenberg

La creazione di post di blog di valore richiede tempo e fatica. Oltre a trovare i migliori argomenti di cui scrivere nella tua nicchia, è anche importante coinvolgere i lettori e consentire loro di trovare rapidamente le informazioni che stanno cercando. Ora, un buon modo per avvicinarsi a questo tipo di esperienza utente è condividere una casella di riepilogo visiva alla fine del post del tuo blog, subito prima dei pensieri finali. Con i nuovi blocchi di layout di Divi, ora puoi creare facilmente una casella di riepilogo con le opzioni integrate di Divi. In questo tutorial, ti guideremo attraverso il processo e potrai anche scaricare gratuitamente il file JSON del layout!

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 blocco di layout Divi della casella di riepilogo

Per mettere le mani sul blocco di layout Divi della casella di riepilogo dell'eroe gratuito, devi 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!

Importazione del blocco di layout JSON

Carica layout nella libreria Divi

Per importare il file JSON che hai potuto scaricare sopra, vai alla tua libreria Divi nel backend della dashboard di WordPress e fai clic su "Importa ed esporta".

Quindi, seleziona il file JSON all'interno della cartella di download e fai clic su "Importa layout Divi Builder".

Aggiungi un nuovo blocco Divi Block all'interno del post di Gutenberg

Una volta che il tuo layout è stato importato, puoi andare al tuo post di Gutenberg e aggiungere un nuovo blocco di layout Divi.

Importa file JSON da layout salvati

Quindi, fai clic su "Carica dalla libreria", vai a "I tuoi layout salvati" e seleziona il layout per importare la casella di riepilogo nel post del tuo blog. Questo è tutto!

Iniziamo a ricreare!

Usa il sesto modello di post del pacchetto di creazione di temi

Scarica il sesto pacchetto di creazione di temi

La casella di riepilogo che ricreeremo durante questo tutorial corrisponde perfettamente al modello di post del sesto pacchetto generatore di temi gratuito. Vai al post del blog e scarica l'intero pacchetto.

Vai a Divi Theme Builder

Quindi, vai al Divi Theme Builder.

Carica modello di post

Fai clic sull'icona nell'angolo in alto a destra e carica il modello di post del pacchetto di creazione di temi. Assicurati di cambiare tutte le modifiche al generatore di temi in seguito.

Apri un post di Gutenberg esistente o creane uno nuovo

Ora, una volta aggiunto il modello di post corrispondente, è il momento di creare la casella di riepilogo. Apri o crea un nuovo post usando Gutenberg.

Aggiungi il titolo del sommario H2

Verso la fine del post del blog, aggiungeremo un nuovo titolo H2.

Aggiungi nuovo blocco Divi in ​​linea

Quindi, aggiungeremo un nuovo blocco di layout Divi.

Crea un nuovo layout all'interno del blocco Divi

Una volta aggiunto il blocco, avrai due opzioni. Scegli di costruire un nuovo layout.

Impostazioni della sezione

Colore di sfondo

All'interno dell'editor di blocchi di layout Divi, noterai una sezione. Apri quella sezione e usa uno sfondo bianco per essa.

• Colore di sfondo: #FFFFFF

Spaziatura

Passa alla scheda di progettazione della sezione e aggiungi alcuni margini personalizzati e valori di riempimento.

• Margine superiore: 100 px
• Margine sinistro: -10% (desktop), 0% (tablet e telefono)
• Margine destro: -10% (desktop), 0% (tablet e telefono)
• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Frontiera

Aggiungi anche un raggio di bordo.

• In basso a sinistra: 16px
• In basso a destra: 16 px

Scatola ombra

Insieme a un'ombra sottile della scatola.

• Forza sfocatura ombra scatola: 60 px
• Forza di diffusione dell'ombra della scatola: 10 px
• Colore ombra: rgba (0,0,0,0.08)

Aggiungi nuova riga

Struttura della colonna

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

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e consenti alla riga di occupare l'intera larghezza del contenitore della sezione.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì
• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Successivamente, rimuovi l'imbottitura superiore e inferiore predefinita della riga.

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

Impostazioni colonna 1

Colore di sfondo

Quindi, apri le impostazioni della colonna 1 e usa un colore di sfondo bianco per esso.

• Colore di sfondo: #FFFFFF

Spaziatura

Aggiungi anche alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 70px
• Imbottitura inferiore: 70px
• Imbottitura sinistra: 70px
• Imbottitura destra: 70px

Scatola ombra

Continua aggiungendo un'ombra sottile della scatola con un diverso colore di ombra predefinito e al passaggio del mouse.

• Forza sfocatura ombra scatola: 50 px
• Colore ombra predefinito: rgba (0,0,0,0)
• Colore ombra al passaggio del mouse: rgba(0,0,0,0.15)

Scala di trasformazione al passaggio del mouse

Al passaggio del mouse, vogliamo anche ridimensionare leggermente la colonna.

• Destra: 105%
• Fondo: 105%

Indice Z al passaggio del mouse

Completa le impostazioni della colonna aggiungendo un indice z al passaggio del mouse.

• Indice Z al passaggio del mouse: 11

Aggiungi il modulo di testo n. 1 alla colonna

Aggiungi numero alla casella del contenuto

È ora di aggiungere moduli, iniziando con un primo modulo di testo. Aggiungi un numero alla casella del contenuto.

Sfondo sfumato

Quindi, aggiungi uno sfondo sfumato.

• Colore 1: #ff5e92
• Colore 2: #ffd4b6
• Direzione del gradiente: 165 gradi

Impostazioni testo

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo come segue:

• Carattere del testo: Poppins
• Colore del testo: #ffffff
• Dimensione del testo: 26px
• Allineamento del testo: Centro

Dimensionamento

Assegna successivamente una larghezza e un'altezza.

• Larghezza: 150 px
• Altezza: 150 px

Frontiera

Aggiungi anche un raggio di bordo.

• In basso a sinistra, in alto a destra e in basso a destra: 100 px

Elemento principale CSS

Per centrare il testo nel nostro contenitore, dovremo aggiungere alcune righe di codice CSS all'elemento principale del modulo nella scheda avanzata.

display: flex;
align-items: center;
justify-content: center;

Posizione

E completeremo le impostazioni del modulo riposizionando il modulo.

• Posizione: Assoluta
• Posizione: in alto a sinistra

Aggiungi il modulo di testo n. 2 alla colonna

Aggiungi contenuto H3

Al prossimo modulo di testo. Aggiungi alcuni contenuti H3 a tua scelta.

Impostazioni testo H3

Modificare successivamente la dimensione del testo H3 del modulo.

• Intestazione 3 Dimensioni del testo: 23 px

Spaziatura

Modifica anche le impostazioni di spaziatura.

• Margine superiore: 100 px
• Margine inferiore: 20 px

Aggiungi modulo divisore alla colonna

Visibilità

Il modulo successivo di cui abbiamo bisogno è un modulo divisore. Assicurati che l'opzione "Mostra divisore" sia abilitata.

• Mostra divisore: Sì

Impostazioni linea

Passa alla scheda di progettazione del modulo e modifica le impostazioni della linea come segue:

• Colore linea: #ff5e92
• Stile linea: solido
• Posizione della linea: in alto

Dimensionamento

Modifica anche il dimensionamento del modulo.

• Peso del divisore: 2px
• Larghezza: 20%

Aggiungi il modulo di testo n. 3 alla colonna

Aggiungi contenuto

Al prossimo e ultimo modulo di testo. Aggiungi alcuni contenuti a tua scelta.

Clona colonna

Una volta completata la colonna e tutti i suoi moduli, puoi clonare l'intera colonna.

Cambia colore ombra riquadro predefinito

Apri le impostazioni della colonna 2 e modifica il colore dell'ombra predefinito.

• Colore ombra: rgba(0,0,0,0.06)

Modifica lo sfondo sfumato del modulo di testo n. 1

Apri il primo modulo di testo nella colonna 2 e cambia lo sfondo sfumato.

• Colore 1: #7e5ce6
• Colore 2: #25b8ee

Modifica il bordo del modulo n. 1 di testo

Modifica anche le impostazioni del bordo del modulo.

• In alto a sinistra, in basso a sinistra e in basso a destra: 100 px

Modifica la posizione del modulo di testo n. 1

E riposiziona il modulo nella scheda Avanzate.

• Posizione: in alto a destra

Cambia colore divisore

Continua aprendo le impostazioni del modulo divisore. Cambia il colore della linea in modo che corrisponda alla nuova tavolozza dei colori.

• Colore linea: #7e5ce6

Cambia tutto il contenuto

Ultimo ma non meno importante, cambia tutto il contenuto del modulo nella colonna 2.

Clona l'intera sezione due volte

Una volta completata l'intera prima sezione, puoi clonarla due volte.

Modifica la spaziatura della prima sezione duplicata

Apri le impostazioni della prima sezione duplicata e modifica i valori dei margini di conseguenza:

• Margine sinistro: -5% (desktop), 0% (tablet e telefono)
• Margine destro: -5% (desktop), 0% (tablet e telefono)

Modifica la spaziatura della seconda sezione duplicata

Apri anche il secondo duplicato, rimuovi tutti i valori dei margini e aggiungi invece un margine inferiore.

• Margine inferiore: 100 px

Cambia tutto il contenuto

Ultimo ma non meno importante, cambia tutto il contenuto del modulo.

Salva layout nella libreria Divi per il riutilizzo

Se hai intenzione di utilizzare questa casella di riepilogo all'interno di altri post del blog, assicurati di salvarla nella tua libreria Divi in ​​modo da potervi accedere facilmente! Questo è tutto!

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 aggiungere una casella di riepilogo al tuo post di Gutenberg con i nuovi blocchi di layout di Divi. Le caselle di riepilogo sono un ottimo modo visivo per aiutare i tuoi visitatori a trovare le informazioni che stanno cercando. Sei stato anche in grado di scaricare gratuitamente il file JSON del layout! Se hai domande, 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.