Come aggiungere un blocco di layout Divi CTA in linea e animato al tuo post sul blog di Gutenberg
Pubblicato: 2020-02-05Quando stai semplificando il modo in cui crei i post del blog sul tuo sito web, è molto probabile che tu voglia includere un CTA attraente da qualche parte all'interno del tuo post. Ora, con la nuova integrazione del blocco di layout Gutenberg di Divi, puoi facilmente aggiungere un nuovo blocco creato da Divi ovunque all'interno del tuo post sul blog Gutenberg. Ciò ti consente di mantenere il contenuto complessivo del post del blog all'interno dell'ambiente Gutenberg, pur continuando a creare un Divi CTA personalizzato utilizzando le opzioni integrate di Divi. Il meglio di entrambi i mondi! In questo tutorial, ti mostreremo come aggiungere un blocco di layout Divi CTA in linea e animato al tuo post di Gutenberg. Condivideremo gratuitamente anche il file JSON del blocco di layout Divi CTA!
Andiamo ad esso.
Anteprima
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Scarica GRATIS il blocco di layout CTA Divi in linea e animato
Per mettere le mani sulle sezioni degli eroi gratuite, dovrai prima scaricarle 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 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.
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 il blocco di layout Divi CTA nel tuo post sul blog. Questo è tutto!
Iniziamo a ricreare!
Usa il modello di post del terzo pacchetto di creazione di temi
Scarica il terzo pacchetto di creazione di temi
È ora di iniziare a creare da zero! Prima di tutto, il design che stiamo ricreando corrisponde al terzo pacchetto di creazione di temi che è stato rilasciato sul blog Divi. Vai al post e scarica i file JSON di questo pacchetto di creazione di temi.
Vai a Divi Theme Builder
Dopo aver scaricato il terzo pacchetto di creazione di temi, puoi accedere a Divi Theme Builder.
Carica modello di post
Carica il modello di post del pacchetto generatore di temi facendo clic sull'icona nell'angolo in alto a destra.
Quindi, seleziona il modello di post e fai clic su "Importa modelli di Divi Theme Builder". Assicurati di salvare anche le modifiche del generatore di temi. A questo punto, abbiamo assegnato il modello di post del blog del pacchetto generatore di temi a tutti i nostri post.
Apri un post di Gutenberg esistente o creane uno nuovo
Il prossimo passo è aggiungere il blocco di layout Divi CTA al nostro post di Gutenberg. Per farlo, apri un post esistente o creane uno nuovo.
Aggiungi nuovo blocco Divi in linea
Una volta all'interno del post, sarai in grado di aggiungere un nuovo blocco di layout Divi.
Crea un nuovo layout all'interno del blocco Divi
Quindi, avrai due opzioni. Seleziona l'opzione "Crea nuovo layout".
Impostazioni della sezione
Spaziatura
Una volta all'interno dell'editor di blocchi di layout Divi, noterai una sezione. Apri quella sezione e aggiungi alcuni valori di margine personalizzati per creare spazio attorno al contenitore della sezione.
- Margine superiore: 50 px
- Margine inferiore: 50 px
- Margine sinistro: -10%
- Margine destro: -10%
Aggiungi riga n. 1
Struttura della colonna
Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:
Dimensionamento
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e aumenta la larghezza e la larghezza massima.
- Larghezza: 100%
- Larghezza massima: 100%
Aggiungi il divisore n. 1 alla colonna
Visibilità
È ora di aggiungere moduli, iniziando con un modulo divisore. Assicurati che l'opzione "Mostra divisore" sia abilitata.
- Mostra divisore: Sì
Linea
Passa alla scheda di progettazione del modulo e modifica le impostazioni della linea come segue:
- Colore linea: #fc526e
- Stile linea: solido
- Posizione della linea: in alto
Dimensionamento
Modifica anche le impostazioni di dimensionamento.
- Peso del divisore: 3px
- Larghezza: 30%
- Allineamento del modulo: a destra
- Altezza: 3px
Animazione
E modifica le impostazioni dell'animazione di conseguenza:
- Stile di animazione: diapositiva
- Direzione animazione: Sinistra
- Durata dell'animazione: 2000 ms
- Ritardo animazione: 500 ms
- Intensità animazione: 100%
- Opacità iniziale dell'animazione: 100%
Aggiungi il divisore n. 2 alla colonna
Visibilità
Al prossimo modulo divisore. Ancora una volta, assicurati che l'opzione "Mostra divisore" sia abilitata.
- Mostra divisore: Sì
Linea
Quindi, vai alla scheda di progettazione del modulo e modifica le impostazioni della linea come segue:
- Colore linea: #e1e3e8
- Stile linea: solido
- Posizione della linea: in alto
Dimensionamento
Successivamente, modifica le impostazioni di dimensionamento del modulo.
- Peso del divisore: 3px
- Altezza: 3px
Spaziatura
Aggiungi anche alcuni valori di spaziatura personalizzati.
- Margine sinistro: 10%
- Margine destro: -20%
Animazione
E completa le impostazioni del modulo modificando le impostazioni dell'animazione come segue:
- Stile di animazione: diapositiva
- Direzione animazione: Sinistra
- Durata dell'animazione: 2000 ms
- Ritardo animazione: 500 ms
- Intensità animazione: 100%
- Opacità iniziale dell'animazione: 100%
Aggiungi il divisore n. 3 alla colonna
Visibilità
Al prossimo e ultimo modulo divisore di cui abbiamo bisogno in questa riga. Assicurati che l'opzione "Mostra divisore" sia abilitata.
- Mostra divisore: Sì
Linea
Quindi, vai alla scheda Design e modifica le impostazioni della linea come segue:
- Colore linea: #fc526e
- Stile linea: solido
- Posizione della linea: in alto
Dimensionamento
Modifica anche il dimensionamento del modulo.
- Peso del divisore: 3px
- Altezza: 3px
Spaziatura
Insieme alle impostazioni di spaziatura.
- Margine inferiore: 100 px
- Margine sinistro: -20%
- Margine destro: 10%
Animazione
E completa le impostazioni del modulo modificando le impostazioni dell'animazione.
- Stile di animazione: diapositiva
- Direzione dell'animazione: destra
- Durata dell'animazione: 2000 ms
- Intensità animazione: 100%
- Opacità iniziale dell'animazione: 100%
Aggiungi riga #2
Struttura della colonna
Aggiungi un'altra riga alla sezione utilizzando la seguente struttura di 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: 70%
- Allineamento righe: Centro
Aggiungi il modulo di testo n. 1 alla colonna
Aggiungi contenuto H2
Quindi, aggiungi un primo modulo di testo alla colonna della riga con alcuni contenuti H2 a tua scelta.
Impostazioni testo H2
Passa alla scheda Design e modifica le impostazioni del testo H2 di conseguenza:
- Colore testo titolo 2: #fc526e
- Intestazione 2 Dimensioni del testo: 28 px
Spaziatura
Aggiungi successivamente alcuni valori di riempimento personalizzati.
- Imbottitura superiore: 50px
- Imbottitura inferiore: 50 px
- Imbottitura sinistra: 50 px
Frontiera
Usiamo anche un bordo sinistro.
- Larghezza bordo sinistro: 2px
- Colore bordo sinistro: #fc526e
Animazione
E completa le impostazioni del modulo aggiungendo un'animazione personalizzata.
- Stile di animazione: Flip
- Direzione dell'animazione: Centro
- Ritardo animazione: 1500 ms
Aggiungi il modulo di testo n. 2 alla colonna
Aggiungi contenuto
Aggiungi un altro modulo di testo proprio sotto il precedente con alcuni contenuti a tua scelta.
Spaziatura
Spostati sulla scheda di progettazione del modulo e modifica i valori di riempimento di conseguenza:
- Imbottitura superiore: 50px
- Imbottitura inferiore: 50 px
- Imbottitura destra: 50px
Frontiera
Aggiungi un bordo superiore e destro successivo.
- Bordo superiore e destro: 2px
- Colore bordo superiore e destro: #fc526e
Animazione
E completa le impostazioni del modulo modificando le impostazioni dell'animazione come segue:
- Stile di animazione: Flip
- Direzione dell'animazione: Centro
- Ritardo animazione: 1700 ms
Aggiungi modulo pulsante alla colonna
Aggiungi copia
Il modulo successivo e ultimo di cui abbiamo bisogno in questa riga è un modulo pulsante. Aggiungi una copia a tua scelta.
Impostazioni dei pulsanti
Passa alla scheda di progettazione del modulo e modifica le impostazioni del pulsante come segue:
- Usa stili personalizzati per pulsante: Sì
- Dimensione del testo del pulsante: 13 px
- Colore del testo del pulsante: #ffffff
- Colore sfumatura 1: #ff5b84
- Colore sfumato 2: #f94857
- Tipo di gradiente: lineare
- Direzione del gradiente: 165 gradi
- Larghezza bordo pulsante: 0px
- Raggio bordo pulsante: 0px
- Spaziatura tra le lettere dei pulsanti: 1px
- Carattere pulsante: Montserrat
- Peso del carattere del pulsante: semi grassetto
- Stile carattere pulsante: maiuscolo
Spaziatura
Aggiungi successivamente un'imbottitura personalizzata in alto e in basso.
- Imbottitura superiore: 16px
- Imbottitura inferiore: 16px
Animazione
E completa le impostazioni del modulo aggiungendo la seguente animazione:
- Stile di animazione: Flip
- Ritardo animazione: 1900 ms
Clona riga n. 1 e posiziona in fondo alla sezione
Dopo aver completato la prima e la seconda riga, puoi clonare la prima riga e posizionare il duplicato nella parte inferiore della sezione.
Cambia l'ordine del divisore
Scambia di posto il primo e l'ultimo modulo divisore.
Cambia la spaziatura del divisore n. 1
Quindi, apri il primo modulo divisore nella tua riga e modifica le impostazioni di spaziatura.
- Margine superiore: 100 px
- Margine sinistro: 10%
- Margine destro: -20%
Cambia la spaziatura del divisore n. 2
Modifica anche le impostazioni di spaziatura del secondo modulo divisore.
- Margine sinistro: -20%
- Margine destro: 10%
Cambia il dimensionamento del divisore n. 3
Quindi, apri il terzo modulo divisore e usa l'allineamento del modulo a sinistra nelle impostazioni di dimensionamento.
- Allineamento del modulo: a sinistra
Rimuovi Divisore #3 Ritardo Animazione
Rimuovi anche il ritardo dell'animazione del terzo modulo divisore e il gioco è fatto! Una volta completato il blocco del layout Divi CTA, assicurati di salvare le modifiche e aggiornare il tuo post.
- Ritardo animazione: 0 ms
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 sfruttare la nuova integrazione di Divi Gutenberg e aggiungere un blocco di layout Divi CTA in linea e animato al tuo post sul blog di Gutenberg. Questo è un ottimo modo per evidenziare la tua CTA preferita mentre i visitatori leggono il contenuto del tuo post sul blog. Sei stato anche in grado di scaricare gratuitamente il file JSON del blocco di layout Divi CTA! 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.