Come aggiungere citazioni evidenziate Divi-Built in tutto il tuo post di Gutenberg
Pubblicato: 2020-02-14Quando scrivi un post sul blog, ti ritroverai spesso a voler citare qualcuno o evidenziare una frase usata in un paragrafo normale. Ora, all'interno dell'editor Gutenberg, puoi aggiungere subito un blocco di citazioni, ma non ti offre la libertà di progettazione che vorresti potenzialmente. Con i blocchi di layout di Divi, questo non è più un problema. Puoi facilmente costruire un particolare blocco con Divi pur mantenendo l'ambiente Gutenberg altrove. In questo tutorial, ti mostreremo come aggiungere citazioni evidenziate in linea ai post del tuo blog utilizzando Divi. Potrai anche scaricare gratuitamente il file JSON!
Andiamo ad esso.
Anteprima
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.
Esempio 1
Desktop
Mobile
Esempio #2
Desktop
Mobile
Scarica GRATUITAMENTE i layout delle citazioni evidenziate di Divi-Built
Per mettere le mani sui layout di citazioni evidenziati gratuiti creati da Divi, devi prima scaricarli 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!
https://youtu.be/zScpa4-I7-8
Iscriviti al nostro canale Youtube
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 layout delle citazioni evidenziato nel post del tuo blog. Questo è tutto!
Passaggi generali
Usa un modello di post sul blog semplice e intuitivo
Scarica il modello
Per definire lo stile di questo tutorial, utilizzeremo un modello di post di un post precedente. Vai a quel post e scarica il modello.
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, vai alla scheda di importazione e importa il modello di post che hai scaricato nel primo passaggio di questo tutorial.
Apri un post di Gutenberg esistente o creane uno nuovo
Dopo aver impostato un modello di post, puoi creare un nuovo post di Gutenberg o aprirne uno esistente.
Aggiungi nuovo blocco Divi in linea
Aggiungi un nuovo blocco Divi da qualche parte all'interno del tuo post.
Crea un nuovo layout all'interno del blocco Divi
Una volta aggiunto il blocco, avrai due opzioni. Scegli quello che dice "Crea nuovo layout".
Ricrea l'esempio n. 1
Impostazioni della sezione
Spaziatura
Una volta entrato nell'editor di blocchi di layout Divi, noterai una sezione. Per ricreare il primo disegno di esempio, apri le impostazioni della sezione e modifica i valori dei margini di conseguenza:
- Margine superiore: 50 px
- Margine inferiore: 50 px
- Margine sinistro: -5%
- Margine destro: -5%
Frontiera
Aggiungi un bordo sinistro alla sezione successiva.
- Larghezza bordo sinistro: 2px
- Colore bordo sinistro: #000000
Animazione
E usa le seguenti impostazioni di animazione:
- Stile di animazione: diapositiva
- Direzione animazione: Giù
- Durata dell'animazione: 1500 ms
- Intensità animazione: 200%
- Opacità iniziale dell'animazione: 100%
- Curva di velocità dell'animazione: facilità di entrata e uscita
Aggiungi nuova riga
Struttura della colonna
Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:
Dimensionamento
Apri le impostazioni della riga e modifica le impostazioni di dimensionamento di conseguenza:
- Larghezza: 90%
- Larghezza massima: 100%
Animazione
Completa le impostazioni della riga modificando le impostazioni dell'animazione come segue:
- Stile di animazione: dissolvenza
- Ritardo animazione: 1500 ms
- Curva di velocità dell'animazione: facilità di entrata e uscita
Aggiungi modulo di testo alla colonna
Inserisci contenuto H3
L'unico modulo di cui abbiamo bisogno è un modulo di testo. Inserisci il contenuto del preventivo evidenziato H3.
Impostazioni testo H3
Completa le impostazioni del modulo modificando le impostazioni del testo H3 come segue:
- Stile carattere H3: corsivo
- Dimensioni testo H3: 2,1 rem (desktop), 1,5 rem (tablet), 1,3 rem (telefono)
- Altezza della linea H3: 1,5 em
Ricrea l'esempio n. 2
Impostazioni della sezione
Spaziatura
Vuoi ricreare invece il secondo esempio di design? Apri le impostazioni della sezione e modifica i valori di spaziatura come segue:
- Margine superiore: 50 px
- Margine inferiore: 50 px
- Margine sinistro: -5%
- Margine destro: -5%
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Aggiungi nuova riga
Struttura della colonna
Quindi, aggiungi una nuova riga utilizzando la seguente struttura di 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.
- Larghezza: 100%
- Larghezza massima: 100%
Aggiungi il modulo di testo n. 1 alla colonna
Aggiungi contenuto
È ora di aggiungere moduli, iniziando con un primo modulo di testo. Aggiungi una citazione alla casella del contenuto.
Impostazioni testo
Passa alla scheda Design e modifica le impostazioni del testo come segue:
- Carattere di testo: display Playfair
- Colore del testo: #eaeaea
- Dimensione del testo: 500 px
- Altezza riga di testo: 0em
Spaziatura
Stiamo aggiungendo anche un margine superiore.
- Margine superiore: 150 px
Animazione
Quindi, cambieremo le impostazioni dell'animazione.
- Stile di animazione: Flip
- Direzione dell'animazione: Centro
- Ritardo animazione: 500 ms
- Intensità animazione: 200%
- Curva di velocità dell'animazione: facilità di entrata e uscita
Posizione
Ci assicureremo che la citazione sia posizionata nell'angolo in alto a sinistra del contenitore della riga modificando anche le impostazioni di posizione.
- 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 il contenuto della citazione evidenziata H3 alla casella del contenuto.
Impostazioni testo H3
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo H3 come segue:
- Intestazione 3 Stile carattere: corsivo
- Titolo 3: Dimensione testo: 2,6 rem (desktop), 1,7 rem (tablet), 1,3 rem (telefono)
- Intestazione 3 Altezza riga: 1.4em
Spaziatura
Aggiungi anche alcuni valori di margine personalizzati su schermi di diverse dimensioni.
- Margine superiore: 150 px
- Margine inferiore: 150 px
- Margine sinistro: 150 px (desktop), 70 px (tablet), 30 px (telefono)
- Margine destro: 150 px (desktop), 70 px (tablet), 30 px (telefono)
Animazione
E completa le impostazioni del modulo modificando le impostazioni dell'animazione come segue:
- Stile di animazione: dissolvenza
- Ritardo animazione: 2000 ms
- Curva di velocità dell'animazione: facilità di entrata e uscita
Aggiungi il modulo di testo n. 3 alla colonna
Aggiungi contenuto
Al prossimo e ultimo modulo, che è un altro modulo di testo. Aggiungi un simbolo di citazione alla casella del contenuto.
Impostazioni testo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo.
- Carattere di testo: display Playfair
- Colore del testo: #eaeaea
- Dimensione del testo: 500 px
- Altezza riga di testo: 0em
- Allineamento del testo: a destra
Animazione
Successivamente, utilizza le seguenti impostazioni di animazione:
- Stile di animazione: Flip
- Direzione dell'animazione: Centro
- Ritardo animazione: 1000 ms
- Intensità animazione: 200%
- Curva di velocità dell'animazione: facilità di entrata e uscita
Posizione
E assicurati che la citazione sia posizionata nell'angolo in basso a destra del contenitore della riga.
- Posizione: Assoluta
- Posizione: in basso a destra
Salva i layout dei preventivi nella libreria Divi per il riutilizzo
Una volta completato il layout del preventivo di tua scelta, assicurati di salvarlo nella tua libreria Divi in modo da poterlo utilizzare anche per i post futuri!
Anteprima
Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.
Esempio 1
Desktop
Mobile
Esempio #2
Desktop
Mobile
Pensieri finali
In questo post, ti abbiamo mostrato come essere creativo con i blocchi di layout di Divi. Più specificamente, ti abbiamo mostrato come aggiungere citazioni animate evidenziate in tutto il tuo post sul blog di Gutenberg. Le possibilità di progettazione sono infinite, ma ti abbiamo fornito due esempi con cui puoi iniziare. Sei stato anche in grado di scaricare i file JSON gratuitamente! Se hai domande o suggerimenti, 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.