La creazione di preziosi post sul blog richiede tempo e impegno. Oltre a trovare gli argomenti migliori da scrivere nella tua nicchia, è anche importante mantenere i lettori coinvolti 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 visivo alla fine del post sul blog, subito prima delle considerazioni 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 sarai anche in grado di scaricare gratuitamente il file JSON di layout!
Iniziamo a ricreare!
Utilizzare il modello di pubblicazione per il sesto pacchetto di temi
Scarica il Sixth Theme Builder Pack
Il riquadro di riepilogo che ricreeremo in questo tutorial si abbina perfettamente al modello di post del Sixth Theme Builder Pack gratis. Accedi alarticolo del blog e scarica l'intero pacchetto.
Vai a Divi Theme Builder
Quindi vai al Divi Theme Builder.
Scarica il modello di pubblicazione
Fai clic sull'icona nell'angolo in alto a destra e scarica il modello di post dal Theme Building Pack. Assicurati di modificare le modifiche al generatore di temi in seguito.
Apri una pubblicazione Gutenberg esistente o creane una nuova
Ora, una volta aggiunto il modello di post corrispondente, è il momento di creare la casella di riepilogo. Apri o crea un nuovo post utilizzando Gutenberg.
Aggiungi un riassunto del titolo H2
Verso la fine del post del blog, aggiungeremo un nuovo titolo H2.
Aggiungi un nuovo blocco Divi online
Successivamente aggiungeremo un nuovo blocco di layout Divi.
Crea un nuovo layout all'interno del blocco Divi
Dopo aver aggiunto il blocco, avrai due opzioni. Scegli di creare un nuovo layout.
Impostazioni della sezione
Colore di sfondo
All'interno dell'editor dei blocchi di layout Divi, noterai una sezione. Apri questa sezione e usa uno sfondo bianco.
- Colore di sfondo: #FFFFFF
spaziatura
Passa alla scheda di progettazione della sezione e aggiungi i valori di margine e riempimento personalizzati.
- Margine superiore: 100px
- Margine sinistro: -10% (ufficio), 0% (tablet e telefono)
- Margine destro: -10% (ufficio), 0% (tablet e telefono)
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
confine
Aggiungi anche un raggio del bordo.
- In basso a sinistra: 16px
- In basso a destra: 16px
Scatola delle ombre
Con una sottile ombra della scatola.
- Resistenza della sfocatura dell'ombra della scatola: 60px
- Forza di propagazione dell'ombra del riquadro: 10 px
- Colore dell'ombra: rgba (0,0,0,0,08)
Aggiungi una nuova linea
Struttura a colonne
Continua ad aggiungere una nuova riga alla sezione utilizzando la seguente struttura di colonne:
dimensionamento
Senza aggiungere ancora un modulo, apri le impostazioni della riga e lascia che la riga occupi l'intera larghezza del contenitore della sezione.
- Usa una larghezza della grondaia personalizzata: Sì
- Larghezza della grondaia: 1
- Equalizza le altezze delle colonne: Sì
- Larghezza: 100%
- Larghezza massima: 100%
spaziatura
Quindi rimuovere l'imbottitura superiore e inferiore predefinita dalla linea.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Impostazioni della colonna 1
Colore di sfondo
Quindi aprire le impostazioni nella colonna 1 e utilizzare un colore di sfondo bianco per questo.
- Colore di sfondo: #FFFFFF
spaziatura
Aggiungi anche valori di riempimento personalizzati.
- Imbottitura superiore: 70px
- Imbottitura inferiore: 70px
- Imbottitura sinistra: 70 px
- Imbottitura destra: 70px
Scatola delle ombre
Continua aggiungendo un'ombra a scatola sottile con un colore dell'ombra predefinito e al passaggio del mouse diverso.
- Resistenza della sfocatura dell'ombra della scatola: 50px
- 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%
- Basso: 105%
Indice Z al passaggio del mouse
Completa i parametri della colonna aggiungendo un indice hover z.
- Hover Index Z: 11
Aggiungi il modulo di testo # 1 alla colonna
Aggiungi un numero all'area del contenuto
Ăˆ ora di aggiungere moduli, iniziando con un primo modulo di testo. Aggiungi un numero alla casella contenuto.
Sfondo sfumato
Quindi aggiungi uno sfondo sfumato.
- Colore 1: # ff5e92
- Colore 2: # ffd4b6
- Direzione gradiente: 165 gradi
Impostazioni del testo
Vai alla scheda di progettazione del modulo e modifica le impostazioni del testo come segue:
- Carattere testo: Poppins
- Colore del testo: #ffffff
- Dimensione del testo: 26px
- Allineamento del testo: centro
dimensionamento
Quindi assegnare una larghezza e un'altezza.
- Larghezza: 150 px
- Altezza: 150px
confine
Aggiungi anche un raggio del bordo.
- In basso a sinistra, in alto a destra e in basso a destra: 100 pixel
Elemento principale CSS
Per centrare il testo nel nostro contenitore, dovremo aggiungere alcune righe di codice CSS all'elemento del modulo principale nella scheda avanzata.
display: flex;align-items: center;justify-content: center;
Posizione
E finiremo i parametri del modulo riposizionando il modulo.
- Posizione: assoluta
- Posizione: in alto a sinistra
Aggiungi il modulo di testo # 2 alla colonna
Aggiungi contenuto H3
Passiamo al modulo di testo successivo. Aggiungi un po contenuto H3 a tua scelta.
Impostazioni di testo H3
Quindi modificare la dimensione del testo H3 del modulo.
- Titolo 3 Dimensioni testo: 23px
spaziatura
Modificare anche le impostazioni di spaziatura.
- Margine superiore: 100px
- Margine inferiore: 20px
Aggiungi un modulo di separazione alla colonna
visibilitĂ
Il prossimo modulo di cui abbiamo bisogno è un modulo di separazione. Assicurati che l'opzione "Mostra separatore" sia abilitata.
- Mostra separatore: Sì
Impostazioni linea
Passare alla scheda di progettazione del modulo e modificare le impostazioni della riga come segue:
- Colore linea: # ff5e92
- Stile della linea: solido
- Posizione della linea: alta
dimensionamento
Modificare anche il dimensionamento del modulo.
- Peso del divisore: 2px
- Larghezza: 20%
Aggiungi il modulo di testo # 3 alla colonna
Aggiungi contenuto
Passiamo al modulo testuale successivo e finale. Aggiungi un po contenuto de votre choix.
Colonna di clonazione
Dopo aver completato la colonna e tutti i suoi moduli, è possibile clonare l'intera colonna.
Cambia il colore dell'ombra della casella predefinita
Apri le impostazioni nella colonna 2 e cambia il colore dell'ombra predefinito.
- Colore dell'ombra: rgba (0,0,0,0,06)
Cambia lo sfondo sfumato del modulo di testo n ° 1
Apri il primo modulo di testo nella seconda colonna e cambia lo sfondo sfumato.
- Colore 1: # 7e5ce6
- Colore 2: # 25b8ee
Modifica il bordo del modulo di testo n ° 1
Modificare anche le impostazioni del bordo del modulo.
- In alto a sinistra, in basso a sinistra e in basso a destra: 100 pixel
Modifica la posizione del modulo di testo n. 1
E riposiziona il modulo nella scheda avanzata.
- Posizione: in alto a destra
Cambia il colore del separatore
Continuare aprendo le impostazioni per il modulo separatore. Cambia il colore della linea per adattarla alla nuova combinazione di colori.
- Colore della linea: # 7e5ce6
Cambia tutto il contenuto
Infine, modifica l'intero contenuto del modulo nella colonna 2.
Clona l'intera sezione due volte
Una volta completata la prima sezione, è possibile clonarla due volte.
Modifica la spaziatura della prima sezione duplicata
Apri le impostazioni nella prima sezione duplicata e modifica i valori dei margini di conseguenza:
- Margine sinistro: -5% (computer desktop), 0% (tablet e telefono)
- Margine destro: -5% (ufficio), 0% (tablet e telefono)
Modificare la spaziatura della seconda sezione duplicata
Apri anche il secondo duplicato, elimina tutti i valori di margine e aggiungi un margine inferiore.
- Margine inferiore: 100px
Cambia tutto il contenuto
Infine, modifica l'intero contenuto del modulo.
Salvare il layout nella libreria Divi per il riutilizzo
Se prevedi di utilizzare questa casella di riepilogo in altri post del blog, assicurati di salvarla nella tua libreria Divi in ​​modo da potervi accedere facilmente! Questo è tutto !
Panoramica
Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata a come appare su schermi di dimensioni diverse.
Considerazioni finali
In questo articolo, 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 aiutarti Visitatori per trovare le informazioni che stanno cercando.
Puoi anche scaricare gratuitamente il file JSON per il layout! Se hai domande, non esitare a lasciare un commento nella sezione commenti qui sotto.
