Come utilizzare i preset globali con i blocchi di layout Divi per semplificare la progettazione dei post sul blog
Pubblicato: 2020-08-19Creare contenuti per il tuo blog è già abbastanza difficile senza doversi preoccupare del design. Ecco perché è importante che il tuo sito abbia gli elementi di design prontamente disponibili (o pre-progettati) in modo che tu possa concentrarti maggiormente sulla creazione di contenuti straordinari. Certo, un tradizionale tema figlio di WordPress può gestirlo ma, nella maggior parte dei casi, sei bloccato con un design che non è facilmente modificabile.
Con Divi, otteniamo un maggiore controllo sull'esperienza di progettazione di un post sul blog. I preset globali di Divi ti consentono di creare un design a livello di sito (come un tema figlio) per gli elementi in tutto il tuo sito con l'ulteriore comodità di poter modificare il design come preferisci con pochi clic. Inoltre, se sei abituato a creare contenuti nell'editor di blocchi di WordPress predefinito, puoi sfruttare la potenza del Divi Layout Block per inserire al volo quegli elementi del Preset globale all'interno del contenuto del post. Ciò ti consentirà di aggiungere nuovi elementi di design all'interno di un post sul blog che corrisponda al modello e al resto del sito.
In questo tutorial, ti mostreremo come utilizzare i preset globali con i blocchi Divi Layout per semplificare il processo di progettazione di un post sul blog. Per fare ciò, ti mostreremo come utilizzare i preset globali per progettare nuovi contenuti per i post del blog in modo rapido ed efficiente. Ciò contribuirà a creare un'esperienza di blogging che non comprometta il marchio generale del tuo sito.
Iniziamo!
Sbirciata
Ecco una rapida occhiata al design che costruiremo in questo tutorial.
Una rapida panoramica dei preset globali
La bellezza di Divi è che ti dà il pieno controllo sul design del tuo sito web utilizzando una vasta gamma di impostazioni di design che puoi utilizzare per personalizzare l'aspetto di qualsiasi elemento o modulo.
Il nuovo sistema Divi Presets ti consente di progettare un aspetto personalizzato per un elemento Divi (come un modulo pulsante) e salvarlo come preset. Tutte le modifiche al design che apporti vengono salvate nel preset. Quando aggiungi un nuovo modulo alla tua pagina, puoi sfogliare i preset salvati e applicarli rapidamente.
Una volta applicato un preset, il design predefinito del modulo è controllato dal preset. Se aggiorni lo stile di un preset, vengono aggiornati anche tutti i moduli che utilizzano quel preset. Ciò ti consente di controllare il design dell'intero sito Web utilizzando una piccola raccolta di preset salvati. Inoltre, consente di risparmiare un sacco di tempo quando si aggiungono nuovi moduli alla pagina, dal momento che non è necessario progettare ogni nuovo modulo da zero, ma è invece possibile selezionare rapidamente un aspetto dalla libreria Divi Presets.
Guide agli stili predefiniti globali
È possibile creare guide di stile predefinite globali (come quella che utilizzeremo in questo tutorial) per avviare rapidamente la progettazione degli elementi durante la progettazione del sito Web. Queste guide di stile contengono una raccolta di moduli con diversi preset che corrispondono al design del tuo sito. Avere i preset disponibili all'inizio semplificherà il processo di progettazione eliminando la fatica di aggiornare le impostazioni di progettazione per ogni nuovo modulo. Abbiamo anche un framework di guida allo stile per coloro che vogliono costruirne uno proprio.
Una rapida panoramica dei blocchi di layout Divi
Il blocco layout Divi consente agli utenti 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.
Come interagiscono i preset globali e i blocchi di layout
Poiché un preset globale è "globale", gli stili di quel preset influiscono su tutte le istanze del preset a livello di sito. Ciò significa che puoi utilizzare i preset globali durante la progettazione di un elemento nell'editor dei blocchi di layout e anche questi preset si aggiorneranno di conseguenza. Quindi, se desideri aggiungere un CTA al contenuto del tuo post sul blog utilizzando il Divi Layout Block, puoi creare il CTA aggiungendo moduli con Global Presets proprio come faresti con una normale pagina o post. Ciò ti consente di aggiungere elementi di design corrispondenti all'interno del tuo post in modo rapido ed efficiente.
Utilizzo dei preset globali con i blocchi di layout Divi per semplificare la progettazione dei post sul blog
Caricamento della guida di stile dei preset globali
Per questo tutorial, inizieremo subito a creare preset globali utilizzando il layout della guida di stile dei preset globali per il layout dell'agenzia web. Dopo aver caricato la guida di stile, avremo a disposizione alcuni preset globali da utilizzare quando si aggiungono elementi di design a un post del blog utilizzando il Divi Layout Block.
Per scaricare i Global Preset, vai al post del blog. Scorri verso il basso fino alla sezione intitolata "Scarica la guida allo stile dei preset globali". Quindi inserisci il tuo indirizzo e-mail e fai clic per ricevere il download.
Dopo aver scaricato il file zip sul tuo computer, decomprimilo e torna alla dashboard di WordPress.
Per importare il file JSON della guida di stile nella libreria Divi...
- vai a Divi > Libreria Divi.
- Fare clic sul pulsante Importa ed esporta.
- Nella finestra a comparsa Portabilità, seleziona la scheda di importazione.
- Scegli il file JSON della guida di stile globale dell'agenzia web.
- Assicurati di selezionare Importa predefiniti.
- Quindi fare clic sul pulsante di importazione.
Ora tutti questi preset globali sono disponibili in Divi Builder.
Caricamento del modello di post
Ora che la guida di stile è a posto, faremo un salto nel design del modello di post del blog importando il modello di post del blog dell'agenzia web che corrisponde già agli elementi della guida di stile.
Per scaricare il modello, vai al post del blog, inserisci il tuo indirizzo e-mail e fai clic per scaricare i file.
Per importare il modello di post...
- vai a Divi > Generatore di temi.
- Quindi fare clic sull'icona della portabilità.
- Nella modalità di portabilità, seleziona la scheda di importazione.
- Scegli il file JSON del modello di post che hai scaricato.
- Quindi fare clic sul pulsante di importazione.
Utilizzo dei preset per aggiornare/progettare il modello di post
Una volta installato il modello di post personalizzato, fai clic per modificare il modello di corpo personalizzato. Lì puoi vedere anche il design del modello di post e apportare modifiche utilizzando i preset globali disponibili dalla guida di stile importata. Se stavi creando il tuo modello di post da zero, potresti utilizzare i preset globali per aiutare a far corrispondere il design del modello di post con gli altri elementi sul sito web. Ad esempio, puoi utilizzare il preset “WALP – H1 – 1” sul titolo del post come segue:
Oppure puoi utilizzare il modulo blurb "WALP - Blurb 2" predefinito sul blurb che contiene le informazioni sull'autore dinamico.
Il modulo del contenuto del post è l'area in cui verrà generato il contenuto del tuo post del blog sulla pagina. Ecco perché è importante abbinare le impostazioni di progettazione del modulo del contenuto del post con gli altri elementi di testo utilizzati nel tuo sito.
Se stavi costruendo il modello di post da zero, potresti copiare e incollare le impostazioni di testo da vari moduli di testo attraverso il sito. Oppure, se hai precedentemente creato una guida di stile predefinita globale per il tuo sito, puoi copiare gli elementi di design da quei moduli nella guida di stile.
Ad esempio, puoi copiare gli stili di testo dell'intestazione per il predefinito globale creato per tutti gli stili di testo in un modulo di testo.
Quindi incolla gli stili di testo dell'intestazione nel modulo del contenuto del post per il modello di post. Ciò contribuirà a garantire che tutta l'intestazione utilizzata per il contenuto del tuo post corrisponda allo stile del sito.
La cosa importante qui è che tu abbia un modello di post che corrisponda allo stile del tuo sito. L'utilizzo di preset globali può aiutare enormemente questo processo se stai progettando il modello da zero.
Utilizzo dei preset globali con i blocchi di layout Divi
Una volta che il modello è stato progettato, siamo pronti per iniziare a utilizzare i preset globali con i blocchi Divi Layout per progettare ulteriori elementi di contenuto dei post utilizzando l'editor di blocchi predefinito di WordPress.
Per farlo, modifica (o crea) un post sul blog. Quindi assicurati di avere dei contenuti fittizi (come alcuni titoli e paragrafi e un'immagine in primo piano).
In questo momento, se hai guardato il post sul front-end, il contenuto del post verrà visualizzato all'interno del modello di post e il contenuto (intestazioni, corpo del testo, ecc.) Eredita lo stile dalle impostazioni del modulo del contenuto del post.
Il modulo del contenuto del post gestirà solo lo stile del contenuto testuale di base. Se desideri aggiungere elementi aggiuntivi nel tuo post utilizzando l'editor di blocchi di WordPress predefinito, lo stile di tali elementi dovrà essere modificato tramite CSS personalizzato in un tema figlio. Questo a meno che tu non usi Divi Layout Blocks.
Per aggiungere contenuti aggiuntivi che desideri abbinare al modello di post e al sito, puoi utilizzare i blocchi Divi Layout. Ciò ti consentirà di aggiungere qualsiasi contenuto desideri e di modellarlo utilizzando Divi Builder. E, poiché possiamo anche utilizzare i preset globali, possiamo semplificare ulteriormente il design del contenuto del nostro post sul blog al volo.
Design n. 1: creazione di un invito all'azione del blog con preset globali e un blocco di layout Divi
In questo primo esempio, creiamo un invito all'azione del blog personalizzato che corrisponda al modello di post e al design del sito.
Per fare ciò, aggiungi un Divi Layout Block al contenuto del post.
Quindi fare clic su Crea nuovo layout.
Questo aprirà l'editor dei blocchi di layout che è fondamentalmente il Divi Builder come al solito. Assegna alla sezione predefinita una riga a una colonna.
Apri il tuo layout di preset globali in un browser diverso, assicurandoti di fare clic per costruire sul front-end in modo da poter vedere gli elementi. In questo modo hai l'editor di layout aperto in un browser e la guida di stile aperta nell'altro.
Se non disponi di una guida di stile, puoi aprire un layout della pagina sul tuo sito in modo da poter accedere a tutti gli elementi di design che desideri trasferire.
Copia lo sfondo dalla guida allo stile
Per questo CTA, utilizzeremo lo sfondo blu reale della guida di stile. Apri le impostazioni del modulo di testo e copia lo sfondo.
Quindi apri le impostazioni della sezione nell'editor di layout e incolla lo sfondo della sezione.
Aggiungi modulo di testo con H3 Preset
Quindi, aggiungi un nuovo modulo di testo alla riga.
Quindi apri le impostazioni e aggiorna quanto segue:
Aggiungi un'intestazione H3 per l'invito all'azione incollando il seguente codice HTML nel corpo:
<h3>Learn How One Client Increased Revenue by 500%</h3>
Apri il menu a discesa Global Presents e seleziona il preset per l'intestazione H3 (WALP – H3 – 1)
Aggiorna design
Quindi aggiorna il colore del testo in bianco e centra l'allineamento.
Pulsante Aggiungi con Global Preset
Sotto il modulo di testo, aggiungi un nuovo pulsante.
Quindi aggiorna il testo del pulsante e seleziona uno dei design dei pulsanti predefiniti globali. Per questo esempio, usiamo “WALP – Pulsante 3”.
Salvare le modifiche
Al termine, fai clic su Salva ed esci.
Ora puoi vedere l'elemento visualizzato nell'editor dei blocchi di WordPress.
Design n. 2: creazione di una citazione per il blog con preset globali e un blocco di layout Divi
Per questo prossimo elemento di design, aggiungeremo una citazione al post del blog.
Aggiungi blocco layout Divi
Per iniziare, aggiungi Divi Layout Block dove vuoi che venga visualizzato il preventivo.
Quindi fare clic su Crea nuovo layout.
Copia e incolla lo sfondo dalla guida di stile
Copia lo sfondo blu scuro dalla guida di stile.
Quindi incollalo nella sezione predefinita dell'editor di layout.
Aggiungi riga
Quindi, aggiungi una riga a una colonna alla sezione.
Aggiungi modulo Testimonianza con preset
Quindi aggiungi un modulo di testimonianza alla colonna. Quindi seleziona il Global Preset “WALP – Testimonial 2”.
Questo ti darà un ottimo inizio nella progettazione della citazione per il post del blog.
Aggiorna design
Nella scheda Design, regola le impostazioni del design come segue:
- Colore icona preventivo:
- Peso del carattere del corpo: leggero
- Stile del carattere del corpo: corsivo
- Allineamento del corpo del testo: a sinistra
- Colore del corpo del testo: #ffffff
- Font dell'autore: Ubuntu
- Dimensione del testo dell'autore: 16px
Aggiungi nuovo preset globale
Poiché abbiamo apportato modifiche significative a questo preset di testimonianze, a questo punto ha senso crearne uno nuovo da utilizzare per le future citazioni dei post.
Per crearne uno nuovo, fai clic sul pulsante "Crea nuovo preset dagli stili correnti". Quindi dai un nome al nuovo preset ("citazione post blog") e salvalo. Il preset globale è ora pronto per essere utilizzato in futuro.
Salva il layout e lo vedrai all'interno del contenuto del post.
Design n. 1: aggiunta di blurb a un post di blog con preset globali e un blocco di layout Divi
Per questo prossimo esempio, aggiungeremo alcuni blurb al post.
Aggiungi nuovo blocco layout Divi
Aggiungi un altro blocco di layout Divi e fai clic sul pulsante Crea nuovo layout.
Nell'editor di layout, aggiungi una riga a due colonne al layout.
Aggiungi modulo Blurb con i preset
Nella colonna di sinistra, aggiungi un modulo blurb.
Aggiungi una nuova immagine dell'icona al blurb. Quindi apri il menu a discesa dei preset e seleziona il preset blurb "WALP - Blurb 4".
Aggiungi seconda blurb
Quindi copia il blurb e incollalo nella colonna 2 e aggiorna l'immagine.
Salva il layout e lo vedrai nel contenuto del post.
Risultato finale
Ora apri il post sul front-end per vedere il risultato finale.
Blocchi riutilizzabili con preset globali
Se vuoi sfruttare i blocchi riutilizzabili con i blocchi di layout Divi, è bene sapere che funzioneranno con i preset globali. Quindi, se vuoi salvare il blog CTA che abbiamo creato in precedenza come blocco riutilizzabile, avrai un comodo blocco che puoi usare per aggiungere CTA durante la creazione dei tuoi post. E, poiché l'invito all'azione utilizza un pulsante e un testo con un preset globale, l'aggiornamento del preset globale per quell'elemento aggiornerà anche l'elemento nel blocco riutilizzabile.
Pensieri finali
Global Presets è uno dei nostri strumenti di progettazione più potenti disponibili in Divi. Dopo aver dedicato del tempo per aggiungere preset globali ai moduli che utilizzi in tutto il sito, puoi davvero sfruttare un processo semplificato di progettazione di modelli e contenuti di post di blog utilizzando blocchi di layout.
Non vedo l'ora di sentirti nei commenti.
Saluti!