Come costruire blocchi di layout di immagini riutilizzabili per l'aggiunta di immagini in stile Divi ai post di Gutenberg

Pubblicato: 2020-02-16

Il blocco layout di Divi può essere utilizzato come blocco di layout immagine riutilizzabile per aggiungere immagini in stile Divi ai post del blog Gutenberg. Questo combina le potenti opzioni di design e le funzionalità di Divi (per creare bellissime immagini) con la comodità di scrivere post (e aggiungere blocchi) con Gutenberg.

In questo tutorial, dimostreremo come utilizzare Divi Layout Block per progettare alcuni straordinari layout di immagini. Quindi aggiungeremo quei layout come blocchi riutilizzabili in Gutenberg. Con questa tecnica, saremo in grado di aggiungere praticamente qualsiasi funzionalità di progettazione Divi alle nostre immagini (sfondi, lightbox, filtri, animazioni, effetti di scorrimento e molto altro). Quindi possiamo usare quel favoloso design come un comodo modello di immagine per aggiungere immagini ai post futuri creati con Gutenberg.

Iniziamo!

Sbirciata

Scarica GRATIS i blocchi di layout delle immagini riutilizzabili

Per mettere le mani sui blocchi di layout di questo tutorial, dovrai 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 i file

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!

Come utilizzare il download per importare questi blocchi di layout sul tuo sito?

Per importare questi blocchi di layout immagine Divi riutilizzabili sul tuo sito, devi prima decomprimere il file di download. Lì troverai i tre file JSON che dovrai importare sul tuo sito.

Vai a modificare un post usando l'editor predefinito (Gutenberg). Apri il menu "Altri strumenti e opzioni" in alto a destra nella pagina e seleziona "Gestisci tutti i blocchi riutilizzabili".

Quindi fare clic sul pulsante Importa da JSON. Scegli uno dei file JSON dalla cartella di download e fai clic sul pulsante di importazione.

Ripeti questo processo per importare tutti e tre i file JSON.

Una volta fatto, aggiungi un nuovo blocco all'interno di Gutenberg. Saremo in grado di trovare i blocchi di layout riutilizzabili importati sotto l'opzione Riutilizzabile. Fai semplicemente clic su quello che desideri aggiungere al tuo post.

Questo è tutto!

Passiamo al tutorial, vero?

Di cosa abbiamo bisogno per iniziare

Per iniziare, dovremo fare quanto segue:

Se non l'hai ancora fatto, installa e attiva il tema Divi.
Crea un nuovo post in WordPress e usa l'editor predefinito (Gutenberg) per aggiungere alcuni contenuti fittizi (titolo, intestazioni, paragrafi, immagine in primo piano, ecc.). Fondamentalmente abbiamo bisogno di un post di prova per costruire i blocchi di layout dell'immagine in stile Divi.

Dopodiché, siamo pronti per iniziare.

Parte 1: creazione dell'immagine a larghezza intera con blocco di layout Divi riutilizzabile didascalia

Aggiungi blocco layout Divi

Per iniziare, aggiungi un Divi Layout Block al tuo post.

Quindi fare clic su "Crea nuovo layout".

Progettare il layout dell'immagine Divi

Nell'Editor blocchi di layout, inizia a progettare il layout aggiungendo una riga a una colonna.

Il modulo immagine

Aggiungi un modulo immagine alla riga.

Quindi aggiorna le impostazioni come segue:

Apri in Lightbox: S

Ciò consentirà alla nostra immagine di essere visualizzata in una lightbox al clic.

Sovrapposizione immagine: ON
Colore icona sovrapposizione: #ffffff
Colore sovrapposizione al passaggio del mouse: rgba (120,47,130,0,57)

Per creare uno spazio attorno alla nostra immagine, aggiorna le impostazioni della riga come segue:

Usa larghezza grondaia personalizzata: S
Larghezza grondaia: 1
Larghezza: 90%
Larghezza massima: 90%
Imbottitura: 5% sopra, 5% sotto

Questo ci darà il 5% di spazio intorno all'immagine. Questo sarà anche lo spazio che mostrerà il gradiente di sfondo che aggiungeremo alla sezione.

Apri le impostazioni della sezione e aggiorna il design con un gradiente di sfondo come segue:

Colore di sfondo sfumato a sinistra: #782f82
Colore sfondo sfumato a destra: #fe756b
Direzione gradiente: 90 gradi

Per far sì che l'immagine si estenda leggermente oltre il contenitore del contenuto del post del blog, possiamo dare alla sezione una larghezza personalizzata come segue:

Larghezza: 110%
Larghezza massima: 100%
Margine: -5% rimasto
Imbottitura: 0px in alto, 0px in basso

Infine, dai un tocco creativo alla sezione aggiungendo un'ombra interna come segue:

Box Shadow: vedi screenshot
Posizione orizzontale dell'ombra della scatola: 5vw
Posizione verticale dell'ombra della scatola: 5vw
Colore ombra: rgba (255,255,255,0.7)

Se vogliamo avere un layout dell'immagine senza didascalia, possiamo fermarci qui, ma per aggiungere una didascalia al layout dell'immagine, aggiungi un modulo di testo sotto l'immagine.

Quindi aggiungi del contenuto di riempimento per fungere da testo della didascalia.

Quindi aggiorna le seguenti impostazioni di testo:

Carattere del testo: Montserrat
Peso del carattere del testo: semi grassetto
Colore del testo del testo: #ffffff
Larghezza: 80%
Allineamento del modulo: a destra
Margine: 5% massimo

Al termine, assicurati di salvare il layout con Ctrl + S o apri la barra delle impostazioni in basso e fai clic su "Salva ed esci".

Aggiunta del layout dell'immagine ai blocchi riutilizzabili

Per aggiungere il layout ai blocchi riutilizzabili, fai clic sul menu "Altre opzioni" sopra il blocco e seleziona "Aggiungi a blocchi riutilizzabili".

Assegna un nome al blocco riutilizzabile e fai clic su "Salva".

Ora l'immagine a larghezza intera con layout didascalia è stata aggiunta ai blocchi riutilizzabili e sarà disponibile dall'elenco dei blocchi durante la creazione di un post.

Non dimenticare di aggiornare/salvare il post per salvare le modifiche.

Parte 2: Creazione dell'immagine a sinistra con didascalia Blocco layout Divi riutilizzabile

Ora l'immagine a larghezza intera con layout didascalia è stata aggiunta ai blocchi riutilizzabili, possiamo usare quel blocco per creare la nostra immagine sinistra con layout didascalia.

Converti blocco riutilizzabile in blocco normale

Per iniziare, apri il menu "Altre opzioni" nella parte superiore del blocco riutilizzabile contenente il layout dell'immagine a larghezza intera. Quindi seleziona "Converti in blocco normale".

Non preoccuparti, questo non rimuoverà il blocco di layout che abbiamo appena creato dai blocchi riutilizzabili (c'è un'opzione per questo però). Questo renderà semplicemente il blocco riutilizzabile un blocco normale in modo che possiamo modificare e utilizzare il blocco per una singola istanza.

Aggiorna layout

Una volta che il blocco è regolare, fai clic sul pulsante Modifica layout sopra il blocco.

Nell'editor di layout, apri le impostazioni della sezione e aggiorna la larghezza come segue:

Larghezza: auto
Larghezza massima: 500 px

Questo è tutto ciò che dobbiamo fare all'interno dell'editor di layout. Assicurati di salvare ed uscire dal layout.

Con il blocco selezionato, apri la barra laterale delle impostazioni principali e seleziona la scheda del blocco per mostrare le impostazioni del blocco. Sotto l'interruttore avanzato, aggiungi la seguente classe:

Classe CSS aggiunta: alignleft

Questa classe è nativa di WordPress e farà galleggiare il blocco a sinistra che farà anche galleggiare la nostra immagine a sinistra del contenuto all'interno del nostro post.

Dopo che la classe è stata aggiunta, apri il menu "Altre opzioni" del blocco e fai clic su "Aggiungi a blocchi riutilizzabili".

Assegna un nome al blocco Riutilizzabile (ad es. "Immagine sinistra con didascalia") e fai clic su Salva.

Ora il blocco di layout Immagine sinistra con didascalia è stato aggiunto all'elenco dei blocchi riutilizzabili per un facile accesso.

Parte 3: creazione del blocco di layout Divi riutilizzabile "Immagine giusta con didascalia"

Finora abbiamo un'immagine a larghezza intera con un blocco di layout didascalia e un'immagine a sinistra con un blocco di layout didascalia. Ora possiamo aggiungere l'immagine giusta con il blocco del layout della didascalia.

Converti blocco riutilizzabile in blocco normale

Per fare ciò, apri il menu "Altre opzioni" sull'immagine a sinistra con il blocco riutilizzabile didascalia. Quindi seleziona "Converti in blocco normale".

Aggiorna layout

Una volta che il blocco è un normale blocco di layout, fare clic per modificare il layout.

Quindi apri le impostazioni della sezione ed elimina il margine sinistro.

Salva ed esci dall'editor di layout.

Quindi aggiorna la classe CSS aggiuntiva del blocco con quanto segue:

Classe CSS aggiuntiva: alignright

Dopo che la classe è stata aggiunta, aggiungi il blocco di layout a Blocchi riutilizzabili.

E dai un nome al Blocco riutilizzabile (es. "Immagine giusta con didascalia") e salvalo.

Ora fai clic su una delle icone blu più sotto un blocco nel post per aggiungere un nuovo blocco. Quindi, nel popup dell'elenco dei blocchi, apri l'interruttore Riutilizzabile. Ora abbiamo i nostri tre blocchi di layout immagine riutilizzabili pronti per essere utilizzati.

Parte 4: utilizzo dei blocchi di layout immagine riutilizzabili su un post.

Sebbene abbiamo creato i nostri blocchi di layout immagine, esistono (per i nostri scopi) solo come modello per avviare il processo di aggiunta di un'immagine a un post. Pertanto, ogni volta che vogliamo aggiungere un'immagine reale a un post utilizzando questi blocchi di layout, dovremo prima convertirlo in un blocco normale prima di aggiungere l'immagine e la didascalia al layout.

Ecco come farlo.

Passaggio 1: aggiungi il blocco di layout riutilizzabile

Aggiungi uno dei blocchi di layout immagine Divi riutilizzabili al post.

Passaggio 2: convertirlo in un blocco normale

Apri il menu "Altre opzioni" e seleziona "Converti in blocco normale".

Passaggio 3: modifica il blocco di layout con una nuova immagine e didascalia

Una volta che il blocco è regolare, fai clic per modificare il layout.

Aggiorna il layout con un'immagine a tua scelta.

Quindi aggiorna il testo della didascalia all'interno del modulo di testo.

Passaggio 4: salva il blocco di layout

Una volta terminato, salva ed esci dall'editor di layout.

Continua lo stesso processo per aggiungere gli altri due layout di immagine al post.

Risultato finale

Pensieri finali

Una volta che abbiamo imparato a usare il blocco di layout Divi, diventa ovvio quanto possa essere prezioso per la vita del nostro blog. In questo post, abbiamo spiegato come utilizzare il blocco di layout per aggiungere alcune immagini in stile Divi piuttosto interessanti a un post sul blog di Gutenberg. Il trucco è salvare prima i layout come un blocco riutilizzabile. Quindi, quando siamo pronti per aggiungere immagini a un post sul blog, possiamo facilmente convertire il blocco riutilizzabile in un blocco normale in modo da poter aggiungere la nostra immagine e la didascalia.

Si spera che questo fornisca qualche ispirazione per portare le immagini del tuo blog a un livello completamente nuovo.

Non vedo l'ora di sentirti nei commenti.

Saluti!