Come creare sezioni di post di blog dinamiche belle e coinvolgenti con Divi

Ogni volta che esce un nuovo aggiornamento, le possibilità di design che hai aumentano. La combinazione di contenuto dinamico e opzioni al passaggio del mouse, ad esempio, può portare a risultati sorprendenti. Per dimostrarlo, ti mostreremo come creare 3 straordinarie sezioni dinamiche di post sul blog utilizzando solo le opzioni integrate di Divi. Ti guideremo passo dopo passo attraverso ciascuno degli esempi che ti ispireranno anche a creare le tue variazioni.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo un'occhiata al risultato finale di tutti e tre gli esempi che creeremo.

Esempio 1

Esempio #2

Esempio #3

Aggiungi un nuovo post sul blog

Dettagli del post

Per prima cosa, inizia creando un nuovo post sul blog. Aggiungi il titolo, la categoria scelta e l'immagine in primo piano. Fatto ciò, abilita Divi Builder.

Impostazioni pagina Divi

Prima di passare a Visual Builder, modifica le impostazioni della pagina Divi nell'angolo in alto a destra del nuovo post del blog.

• Layout di pagina: a tutta larghezza
• Titolo del messaggio: Nascondi

Passa a Visual Builder

È ora di passare al Visual Builder per iniziare a creare i diversi esempi!

Creazione dei moduli

Aggiungi una nuova sezione + riga a una colonna

Prima di immergerci in ciascuno degli esempi separatamente, inizieremo creando i moduli di testo contenenti contenuti dinamici. In tutti e tre gli esempi, utilizzeremo questi moduli predefiniti per completare il progetto. Dopo aver aggiunto una nuova sezione, aggiungi una nuova riga utilizzando la seguente struttura a colonne:

Modulo di testo del titolo del post

Seleziona il contenuto dinamico del titolo del post

Il primo modulo dinamico di cui abbiamo bisogno conterrà il titolo del post. Aggiungi un nuovo modulo di testo e seleziona Titolo del post nell'elenco dei contenuti dinamici.

Impostazioni testo

Quindi, vai alle impostazioni del testo e apporta alcune modifiche.

• Carattere del testo: Lato
• Peso del carattere del testo: grassetto
• Colore del testo: #000000
• Dimensioni del testo: 58 px (desktop), 45 px (tablet), 35 px (telefono)
• Altezza riga di testo: 1em
• Orientamento del testo: al centro

Spaziatura

Modifica anche i valori di spaziatura.

• Margine inferiore: 50 px
• Imbottitura superiore: 10px
• Imbottitura inferiore: 10px

Modulo di testo della data di pubblicazione successiva

Seleziona il contenuto dinamico della data di pubblicazione post

Il secondo modulo di cui avremo bisogno è un modulo di testo contenente la data di pubblicazione successiva. Vai avanti e aggiungine uno e seleziona Post pubblicazione data nell'elenco dei contenuti dinamici.

Impostazioni testo

Modifica le impostazioni del testo di questo modulo in seguito.

• Peso del carattere del testo: leggero
• Colore del testo: #000000
• Dimensioni del testo: 30 px (desktop), 20 px (tablet), 16 px (telefono)
• Spaziatura delle lettere del testo: 14px
• Orientamento del testo: al centro

Spaziatura

Aggiungi anche un margine inferiore.

• Margine inferiore: 50 px

Categorie di messaggi Modulo di testo

Seleziona Categorie Contenuto dinamico

L'ultimo modulo che aggiungeremo è un modulo di testo contenente il contenuto dinamico delle categorie di post.

Impostazioni testo

Vai alle impostazioni del testo e cambia l'orientamento del testo.

• Orientamento del testo: al centro

Link alle impostazioni del testo

Quindi, applica alcune modifiche alle impostazioni del testo del collegamento.

• Peso del carattere del collegamento: Ultra grassetto
• Stile del carattere del collegamento: maiuscolo
• Colore del testo del collegamento: #000000
• Dimensione del testo del collegamento: 15 px
• Spaziatura delle lettere del collegamento: 5px

Spaziatura

Aggiungi l'imbottitura inferiore successiva.

• Imbottitura inferiore: 20px

Frontiera

E finisci con un sottile bordo inferiore.

• Larghezza bordo inferiore: 1px
• Colore bordo inferiore: #000000

Creazione dell'Esempio #1

Aggiungi nuova sezione

Spaziatura

Iniziamo a creare il primo esempio! Proprio sotto la sezione precedente che hai creato, vai avanti e aggiungine una nuova. Apri le sue impostazioni e rimuovi tutto il riempimento personalizzato predefinito.

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

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga con la seguente struttura a colonne:

Dimensionamento

Apri le impostazioni di dimensionamento di questa riga e cambia le cose.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì

Spaziatura

Aggiungi successivamente alcuni valori di spaziatura personalizzati.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px
• Imbottitura superiore colonna 2: 130 px
• Imbottitura inferiore colonna 2: 130 px
• Imbottitura sinistra colonna 2: 50 px
• Imbottitura destra colonna 2: 50 px

Aggiungi modulo immagine alla colonna 1

Seleziona il contenuto dinamico dell'immagine in primo piano

Procedi aggiungendo un Modulo Immagine alla prima colonna. Invece di caricare un'immagine, collega il modulo all'immagine dinamica in primo piano.

Bordo predefinito

Stiamo anche aggiungendo un bordo destro al passaggio del mouse. Per fare ciò, scegli prima la seguente larghezza del bordo predefinita:

• Larghezza bordo destro: 0px

Confine al passaggio del mouse

E aggiungi le seguenti impostazioni al passaggio del mouse:

• Larghezza bordo destro: 24 px
• Colore bordo destro: #FFFFFF

Ombra casella predefinita

Lo stesso vale per l'ombra della scatola, applica le seguenti impostazioni predefinite dell'ombra della scatola:

• Posizione verticale dell'ombra del riquadro: 0px
• Forza sfocatura ombra scatola: 0px
• Forza di diffusione dell'ombra della scatola: 80 px
• Colore ombra: rgba (255,255,255,0)

Box Shadow Hover

E cambia le cose al passaggio del mouse:

• Posizione orizzontale dell'ombra del riquadro: 600 px
• Posizione verticale dell'ombra del riquadro: 0px
• Forza sfocatura ombra scatola: 0px
• Forza di diffusione dell'ombra della scatola: 80 px
• Colore ombra: # E4BAC7

transizioni

Per creare una transizione graduale, modifica la durata della transizione nella scheda Avanzate.

• Durata della transizione: 1200 ms

Posiziona moduli dinamici nella colonna 2

L'unica cosa rimasta da fare per completare questo esempio è posizionare i moduli che abbiamo creato nella prima parte di questo tutorial nella seconda colonna.

Creazione dell'esempio n. 2

Aggiungi nuova sezione

Divisore superiore predefinito

Alla prossima! Aggiungi una nuova sezione con il seguente divisore superiore:

• Stile divisore: trova nell'elenco
• Colore divisorio: #FFFFFF
• Altezza divisore: 50 px
• Disposizione dei divisori: in cima al contenuto della sezione

Divisore superiore al passaggio del mouse

Modificare l'altezza del divisore al passaggio del mouse.

• Altezza divisore: 174 px

Spaziatura

Rimuovi tutto il riempimento personalizzato della sezione successiva. Ciò consentirà alla riga e alla sezione di scontrarsi in uno dei passaggi successivi.

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

transizioni

Per creare una transizione uniforme del divisore, modifica la durata della transizione nella scheda Avanzate.

• Durata della transizione: 500 ms

Aggiungi nuova riga

Struttura della colonna

Ora vai avanti e aggiungi una riga alla tua sezione usando la seguente struttura a colonne:

Colore di sfondo predefinito

Aggiungi il seguente colore di sfondo:

• Colore di sfondo: #FFFFFF

Colore di sfondo al passaggio del mouse

Cambia il colore di sfondo al passaggio del mouse.

• Colore di sfondo: rgba (255,255,255,0,56)

Immagine in primo piano Immagine di sfondo dinamica

Carica anche l'immagine in primo piano come immagine di sfondo della riga dinamica. Dopo averlo fatto, cambia la fusione dell'immagine di sfondo.

• Miscela immagine di sfondo: schermo

Dimensionamento

Consenti alla riga di occupare l'intera larghezza dello schermo modificando le impostazioni di dimensionamento.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Spaziatura

E aggiungi alcuni valori di spaziatura di riempimento personalizzati.

• Imbottitura superiore: 200 px
• Imbottitura inferiore: 200 px
• Imbottitura sinistra: 100 pixel (desktop), 50 pixel (tablet), 20 pixel (telefono)
• Imbottitura destra: 100 px (desktop), 50 px (tablet), 20 px (telefono)

transizioni

Ultimo ma non meno importante, crea una transizione graduale modificando la durata della transizione.

• Durata della transizione: 700 ms

Posiziona moduli dinamici in colonna

Ora puoi posizionare tutti i moduli dinamici nella colonna della riga e hai finito con il secondo esempio!

Creazione dell'esempio n. 3

Aggiungi nuova sezione

Immagine in primo piano Immagine di sfondo dinamica

All'ultimo esempio! Aggiungi una nuova sezione e seleziona l'immagine in primo piano come immagine di sfondo della sezione.

Spaziatura predefinita

Quindi, rimuovi tutto il riempimento personalizzato predefinito della sezione.

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

Spaziatura al passaggio del mouse

Aggiungi un margine personalizzato al passaggio del mouse per creare un effetto di restringimento.

• Imbottitura sinistra: 150 pixel (desktop), 50 pixel (tablet), 30 pixel (telefono)
• Imbottitura destra: 150 px (desktop), 50 px (tablet), 30 px (telefono)

transizioni

Modifica anche la durata della transizione.

• Durata della transizione: 500 ms

Aggiungi nuova riga

Struttura della colonna

Dopo aver modificato le impostazioni della sezione, continua aggiungendo una nuova riga con la seguente struttura a colonne:

Colore di sfondo predefinito

Aggiungi il seguente colore di sfondo:

• Colore di sfondo: #ffffff

Colore di sfondo al passaggio del mouse

Cambia il colore di sfondo al passaggio del mouse.

• Colore di sfondo: rgba (255,255,255,0.46)

Sfondo sfumato

Aggiungi anche uno sfondo sfumato radiale.

• Colore 1: RGB (41,196,169,0)
• Colore 2: #ffffff
• Tipo di gradiente: radiale
• Posizione di partenza: 29%
• Posizione finale: 29%

Dimensionamento

Modificare le impostazioni di dimensionamento della riga successiva.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Spaziatura

E aggiungi alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 200 px
• Imbottitura inferiore: 200 px
• Imbottitura sinistra: 100 pixel (desktop), 50 pixel (tablet), 20 pixel (telefono)
• Imbottitura destra: 100 px (desktop), 50 px (tablet), 20 px (telefono)

transizioni

Ultimo ma non meno importante, cambia la durata della transizione per una transizione graduale.

• Durata della transizione: 500 ms

Posiziona moduli dinamici in colonna

Vai avanti e posiziona tutti i moduli predefiniti nella colonna della riga.

Modifica l'orientamento del testo di tutti i moduli

L'unica cosa che dovrai cambiare su questi moduli è l'orientamento del testo e il gioco è fatto!

• Orientamento del testo: a sinistra

Anteprima

Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata a tutti e tre gli esempi che abbiamo creato.

Esempio 1

Esempio #2

Esempio #3

Pensieri finali

In questo post, ti abbiamo mostrato come combinare contenuti dinamici con le opzioni al passaggio del mouse di Divi per creare straordinarie sezioni di post sul blog. Questi esempi ti ispireranno innegabilmente a creare le tue varianti e personalizzare il post del blog che pubblichi. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!