Come creare un blocco di layout Divi riutilizzabile per i post del blog di Gutenberg

Il Divi Layout Block continua a essere un utile aggiornamento del tema Divi, consentendoci di aggiungere qualsiasi layout Divi a un post di blog all'interno dell'editor Gutenberg. Possiamo persino convertire un Divi Layout Block in un blocco riutilizzabile in Gutenberg proprio come qualsiasi altro blocco di WordPress. Questo apre la porta per semplificare alcuni utili progetti di layout Divi nel normale flusso di scrittura di un post in Gutenberg.

In questo tutorial, dimostreremo come creare un Divi Layout Block riutilizzabile per i post del blog di Gutenberg. Per illustrare ciò, creeremo un divisore di sezione per il nostro blocco di layout Divi riutilizzabile di esempio per questo post. Ma possiamo facilmente applicare questa stessa tecnica per creare un blocco di layout Divi riutilizzabile per qualsiasi cosa dal Divi builder.

Iniziamo.

Creazione di un blocco di layout Divi per un post sul blog di Gutenberg

Crea o modifica un post sul blog

Per iniziare, dobbiamo creare un nuovo post sul blog o modificarne uno esistente. Per questo esempio, aggiungiamo del contenuto fittizio al titolo e al corpo del post utilizzando alcuni blocchi di intestazione e paragrafo. Quindi aggiungi un'immagine in primo piano e scegli "Nessuna barra laterale" per il layout di pagina nelle impostazioni della pagina Divi.

Aggiungi blocco layout Divi in ​​linea

Una volta creata la maggior parte del post, tutto ciò che dobbiamo fare è aggiungere un nuovo Divi Layout Block ovunque desideriamo all'interno dell'area del contenuto del post.

Per aggiungerlo, passa il mouse sull'area in cui vogliamo aggiungere l'opzione email. Quindi fai clic sull'icona blu più per aggiungere un nuovo blocco. Nell'elenco dei blocchi popup, seleziona il blocco Divi Layout.

Costruisci un nuovo layout all'interno del blocco di layout Divi

Una volta selezionato il Divi Layout Block, avremo la possibilità di "Crea nuovo layout" o "Carica dalla libreria". Poiché dobbiamo creare un nuovo divisore per il nostro esempio, scegli l'opzione "Crea nuovo layout".

Progettare un layout utilizzando Divi Layout Block Editor

Una volta selezionato il pulsante Crea nuovo layout, possiamo progettare il nostro layout Divi all'interno dell'editor dei blocchi di layout.

Per questo esempio, creeremo un separatore o divisore personalizzato utilizzando i divisori della forma della sezione di Divi e uno sfondo sfumato. Questo è decisamente un elemento di design che saremo in grado di trasformare in un blocco di layout riutilizzabile per un modo conveniente per aggiungere divisori di sezione all'interno di un post di Gutenberg.

Per creare il design del divisore di sezione, apri le impostazioni della sezione e aggiorna quanto segue:

• Colore di sfondo sfumato a sinistra: #ddd6f3
• Colore di sfondo sfumato a destra: #faaca8
• Direzione gradiente: 90 gradi
• Posizione di partenza: 30%

• Stile divisore superiore: vedi screenshot
• Colore divisorio superiore: #ffffff
• Altezza divisore superiore: 50 px

• Stile divisore inferiore: vedi screenshot
• Colore divisore inferiore: #ffffff
• Altezza divisore inferiore: 50 px
• Capovolgimento divisore inferiore: orizzontale

• Altezza: 100 px
• Imbottitura: 0px in alto, 0px in basso

Una volta completato il progetto, assicurati di salvare il blocco di layout Divi.

Ora il divisore di sezione Divi Layout Block verrà visualizzato all'interno dell'editor dei post di WordPress.

Tieni presente che la spaziatura sopra e sotto il layout Divi del blocco di layout potrebbe apparire maggiore nel backend rispetto al frontend.

Ora siamo pronti per convertire questo blocco di layout Divi in ​​un blocco di layout riutilizzabile per semplificare l'aggiunta di questo stesso divisore di sezione nei post futuri.

Ma prima di farlo, potrebbe essere utile sapere cos'è un blocco riutilizzabile in WordPress.

Che cos'è un blocco di layout riutilizzabile?

Un blocco di layout riutilizzabile nell'editor di blocchi predefinito di WordPress (Gutenberg) è molto simile a un elemento globale in Divi. Il blocco può essere utilizzato più volte, ma il contenuto e l'aspetto rimangono esattamente gli stessi per tutte le istanze. E quando modifichiamo il blocco di layout riutilizzabile, la modifica viene applicata a tutte le istanze del blocco di layout in tutto il sito. Una volta che un blocco di layout è reso riutilizzabile in WordPress, il blocco sarà disponibile nell'elenco dei blocchi durante la scrittura del post. Ciò rende davvero conveniente aggiungere lo stesso blocco di layout più volte in più post del blog.

Trasformare il blocco di layout Divi in ​​un blocco di layout riutilizzabile

Per rendere il nostro Divi Layout Block un blocco riutilizzabile, passa il mouse sopra il blocco di layout e apri il menu delle impostazioni facendo clic sull'icona a tre punti. Quindi dall'elenco, seleziona l'opzione "Aggiungi a blocchi riutilizzabili".

Quindi dai un nome al blocco riutilizzabile e fai clic sul pulsante Salva per salvare il blocco come blocco riutilizzabile.

Ora, quando aggiungiamo un nuovo blocco all'interno del post del blog, possiamo trovare il nostro nuovo blocco di layout riutilizzabile all'interno dell'elenco (sotto l'interruttore della categoria Riutilizzabile). Fai semplicemente clic sul blocco di layout riutilizzabile e verrà aggiunto al post.

Ora, se guardiamo al post live, possiamo vedere due istanze dello stesso esatto divisore di sezione.

Dopo aver utilizzato il blocco riutilizzabile più volte nel post o nel sito, possiamo modificare una delle istanze del blocco di layout riutilizzabile e tali modifiche verranno applicate a tutte le istanze del blocco in tutto il sito.

Per modificare il blocco di layout riutilizzabile, passa il mouse sopra il blocco e fai clic sul pulsante di modifica in alto a destra del blocco.

Quindi seleziona (fai clic su) il layout all'interno del blocco riutilizzabile e fai clic sull'icona di modifica nel menu in alto che appare. Possiamo anche fare clic sul collegamento modifica layout sotto la scheda del blocco nella barra laterale destra.

Quindi cambia il design del layout come vogliamo. Per questo esempio, possiamo cambiare i colori usati per lo sfondo sfumato.

Dopo aver salvato il layout, assicurati di fare clic sul pulsante Salva in alto a destra del blocco di layout riutilizzabile. Quindi aggiorna il post e visualizza le modifiche sul sito live.

Noterai che le modifiche al design vengono aggiornate per tutte le istanze del layout riutilizzabile.

Suggerimento: utilizzo di un blocco di layout riutilizzabile come modello

Ci sono momenti in cui vogliamo utilizzare una versione modificata del blocco di layout riutilizzabile sul nostro post. Questo ci consente di aggiungere un blocco di layout riutilizzabile al post come modello di partenza in modo da poter personalizzare il blocco di layout per un'istanza specifica senza influire sul blocco riutilizzabile in tutto il sito.

Per utilizzare un blocco di layout riutilizzabile come modello, aggiungi prima il blocco riutilizzabile al post.

Quindi apri il menu dei blocchi e seleziona l'opzione "converti in blocco normale".

Ora possiamo modificare il layout per un design specifico per questa istanza senza influenzare gli altri blocchi riutilizzabili.

Pensieri finali

La creazione di blocchi di layout Divi riutilizzabili può essere utile, in particolare per elementi di design Divi come un divisore di sezione. Questo ci consente di utilizzare il divisore ripetutamente durante i nostri post. Non solo semplifica il processo di scrittura di un post, ma ci dà anche il potere di aggiornare il design del blocco in tutto il sito in modo molto più semplice. In questo post, abbiamo mostrato come aggiungere un divisore di sezione come blocco riutilizzabile, ma questa stessa tecnica può essere utilizzata per creare infiniti blocchi di layout Divi riutilizzabili per innumerevoli altri motivi.

Riesci a identificare modi utili per incorporare blocchi di layout Divi riutilizzabili nei tuoi post sul blog?

Non vedo l'ora di sentirti nei commenti.

Saluti!