Quando snellisci il modo in cui crei i post del blog sul tuo sito web, è probabile che tu voglia includere un CTA attraente da qualche parte nel tuo articolo. Ora con la nuova integrazione Gutenberg Layout Block di Divi, puoi facilmente aggiungere un nuovo blocco creato da Divi ovunque nel tuo post sul blog Gutenberg. Ciò ti consente di mantenere il contenuto post generale del blog nell'ambiente Gutenberg, creando allo stesso tempo un CTA Divi personalizzato utilizzando le opzioni integrate di Divi. Il meglio dei due mondi! In questo tutorial, ti mostreremo come aggiungere un blocco di layout Divi CTA animato in linea al tuo post di Gutenberg. Condivideremo gratuitamente anche il file JSON del blocco layout Divi CTA!
Andiamo.
Possibile risultato
Prima di immergerci nel tutorial, diamo un'occhiata al risultato su schermi di dimensioni diverse.
Importazione del blocco layout JSON
Scarica il layout nella libreria Divi
Per importare il file JSON che sei riuscito a scaricare sopra, vai alla tua libreria Divi nel back-end della dashboard di WordPress e fai clic su "Importa ed esporta".
Quindi selezionare il file JSON nella cartella di download e fare clic su "Importa layout Divi Builder".
Aggiungi un nuovo blocco Divi all'interno di Gutenberg
Una volta importato il layout, è possibile accedere al messaggio Gutenberg e aggiungere un nuovo blocco di layout Divi.
Importa un file JSON da presentazioni salvate
Quindi, fai clic su "Carica dalla libreria", vai su "I tuoi layout salvati" e seleziona il layout per importare il blocco del layout Divi CTA nel tuo post sul blog. Questo è tutto!
Iniziamo a ricreare!
Utilizzare il modello di pubblicazione per il terzo pacchetto di temi
Usa il terzo pacchetto di temi a tema
È ora di iniziare a creare da zero! Prima di tutto, il design che stiamo ricreando corrisponde al terzo pacchetto di creazione del tema che è stato pubblicato sul blog Divi. Vai all'articolo e scarica i file JSON per questo pacchetto di creazione del tema.
Vai a Divi Theme Builder
Dopo aver scaricato il terzo pacchetto di creazione del tema, è possibile accedere a Divi Theme Builder.
Scarica il modello di pubblicazione
Scarica il modello di post del Theme Building Pack facendo clic sull'icona nell'angolo in alto a destra.
Quindi seleziona il modello di post e fai clic su "Importa modelli Divi Theme Builder". Assicurati di salvare anche le modifiche nel generatore di temi. A questo punto, abbiamo assegnato il modello di post del blog dal Theme Building Pack a tutti i nostri post.
Apri una pubblicazione Gutenberg esistente o creane una nuova
Il passaggio successivo consiste nell'aggiungere il blocco del layout Divi CTA al nostro post Gutenberg. Per fare ciò, apri un articolo esistente o creane uno nuovo.
Aggiungi un nuovo blocco Divi online
Una volta all'interno del messaggio, puoi aggiungere un nuovo blocco di layout Divi.
Crea un nuovo layout all'interno del blocco Divi
Quindi avrai due opzioni. Seleziona l'opzione "Crea un nuovo layout".
Impostazioni della sezione
spaziatura
Una volta all'interno dell'editor dei blocchi di layout Divi, noterai una sezione. Apri questa sezione e aggiungi valori di margine personalizzati per creare spazio attorno al contenitore della sezione.
- Margine superiore: 50px
- Margine inferiore: 50px
- Margine sinistro: -10%
- Margine destro: -10%
Aggiungi riga n. 1
Struttura a colonne
Continua ad aggiungere una nuova riga utilizzando la seguente struttura di colonne:
dimensionamento
Senza aggiungere più moduli, apri i parametri della linea e aumenta la larghezza e la larghezza massima.
- Larghezza: 100%
- Larghezza massima: 100%
Aggiungi il separatore n. 1 alla colonna
visibilità
È ora di aggiungere moduli, iniziando con un modulo di separazione. Assicurati che l'opzione "Mostra separatore" sia abilitata.
- Mostra separatore: Sì
Linea
Passare alla scheda di progettazione del modulo e modificare le impostazioni della riga come segue:
- Colore linea: # fc526e
- Stile della linea: solido
- Posizione della linea: alta
dimensionamento
Modificare anche i parametri di dimensionamento.
- Peso del divisore: 3px
- Larghezza: 30%
- Allineamento del modulo: giusto
- Altezza: 3px
Animazione
E modifica le impostazioni di animazione di conseguenza:
- Stile animazione: diapositiva
- Direzione dell'animazione: sinistra
- Durata dell'animazione: 2000 ms
- Ritardo dell'animazione: 500 ms
- Intensità dell'animazione: 100%
- Opacità inizio animazione: 0%
Aggiungi il divisore n. 2 alla colonna
visibilità
Passiamo al prossimo modulo di separazione. Anche in questo caso, assicurati che l'opzione "Mostra separatore" sia attivata.
- Mostra separatore: Sì
Linea
Quindi vai alla scheda di progettazione del modulo e modifica le impostazioni della riga come segue:
- Colore linea: # e1e3e8
- Stile della linea: solido
- Posizione della linea: alta
dimensionamento
Quindi modificare i parametri di dimensionamento del modulo.
- Peso del divisore: 3px
- Altezza: 3px
spaziatura
Aggiungi anche valori di spaziatura personalizzati.
- Margine sinistro: 10%
- Margine destro: -20%
Animazione
E completare i parametri del modulo modificando i parametri di animazione come segue:
- Stile animazione: diapositiva
- Direzione dell'animazione: sinistra
- Durata dell'animazione: 2000 ms
- Ritardo dell'animazione: 500 ms
- Intensità dell'animazione: 100%
- Opacità inizio animazione: 100%
Puoi aggiungere tutti i separatori che vuoi modificare la tua animazione.
Aggiungi una riga # 2
Struttura a colonne
Aggiungi un'altra riga alla sezione usando la seguente struttura di colonne:
dimensionamento
Senza aggiungere più moduli, aprire i parametri di linea e modificare i parametri di dimensionamento come segue:
- Usa una larghezza della grondaia personalizzata: Sì
- Larghezza della grondaia: 1
- Larghezza: 70%
- Allineamento della linea: centro
Aggiungi il modulo di testo n. 1 alla colonna
Aggiungi contenuto H2
Successivamente, aggiungi un primo modulo di testo alla colonna riga con contenuto H2 a tua scelta.
Impostazioni di testo H2
Passa alla scheda Design e modifica le impostazioni del testo H2 di conseguenza:
- Colore del testo dell'articolo 2: # fc526e
- Intestazione 2 Dimensioni testo: 28px
spaziatura
Quindi aggiungere valori di riempimento personalizzati.
- Imbottitura superiore: 50px
- Imbottitura inferiore: 50px
- Padding sinistro: 50px
confine
Usiamo anche un bordo sinistro.
- Larghezza bordo sinistro: 2px
- Colore bordo sinistro: # fc526e
Animazione
E completa i parametri del modulo aggiungendo un'animazione personalizzata.
- Stile animazione: capovolgi
- Direzione dell'animazione: Centro
- Ritardo dell'animazione: 1500 ms
Aggiungi il modulo di testo # 2 alla colonna
Aggiungi contenuto
Aggiungi un altro modulo di testo appena sotto il precedente con contenuto de votre choix.
spaziatura
Passa alla scheda di progettazione del modulo e modifica i valori di riempimento di conseguenza:
- Imbottitura superiore: 50px
- Imbottitura inferiore: 50px
- Imbottitura destra: 50px
confine
Quindi aggiungere un bordo superiore e destro.
- Bordo superiore e destro: 2 pixel
- Colore del bordo superiore e destro: # fc526e
Animazione
E completare i parametri del modulo modificando i parametri di animazione come segue:
- Stile animazione: capovolgi
- Direzione dell'animazione: Centro
- Ritardo dell'animazione: 1700 ms
Aggiungi un modulo pulsanti alla colonna
Aggiungi una copia
Il modulo successivo e finale di cui abbiamo bisogno in questa riga è un modulo pulsante. Aggiungi una copia a tua scelta.
Impostazioni dei pulsanti
Passare alla scheda di progettazione del modulo e modificare le impostazioni del pulsante come segue:
- Usa stili personalizzati per il pulsante: Sì
- Dimensione del testo del pulsante: 13px
- Colore testo pulsante: #ffffff
- Sfumatura di colore 1: # ff5b84
- Sfumatura di colore 2: # f94857
- Tipo di gradiente: lineare
- Direzione gradiente: 165 gradi
- Larghezza bordo pulsante: 0px
- Raggio bordo pulsante: 0px
- Spaziatura lettere pulsante: 1px
- Carattere pulsante: Montserrat
- Peso carattere pulsante: Semi grassetto
- Stile carattere pulsante: maiuscolo
spaziatura
Quindi aggiungi un'imbottitura superiore e inferiore personalizzata.
- Imbottitura superiore: 16px
- Imbottitura inferiore: 16px
Animazione
E completa i parametri del modulo aggiungendo la seguente animazione:
- Stile animazione: capovolgi
- Ritardo dell'animazione: 1900 ms
Clona la linea n. 1 e posizionala nella parte inferiore della sezione
Una volta terminate la prima e la seconda riga, puoi clonare la prima riga e posizionare il duplicato nella parte inferiore della sezione.
Cambia l'ordine dei separatori
Cambia i luoghi per il primo e l'ultimo modulo di separazione.
Considerazioni finali
In questo articolo, ti abbiamo mostrato come trarre vantaggio dalla nuova integrazione Gutenberg di Divi e aggiungere un blocco pitch CTA Divi animato in linea al tuo post sul blog Gutenberg. Questo è un ottimo modo per evidenziare il tuo invito all'azione preferito mentre Visitatori leggere il contenuto del tuo post sul blog.
