Come utilizzare la funzionalità di contenuto dinamico di Divi per progettare un layout di post dinamico

La nuova funzione Dynamic Content di Divi ci dà la possibilità di creare layout dinamici per i post del blog (e molto altro ancora). E ci sono buone ragioni per cui potresti considerare di farlo. Uno dei motivi è il design. Puoi progettare alcuni fantastici layout di post con Divi utilizzando il visual builder, specialmente quando utilizzi i layout predefiniti disponibili come punto di partenza. Un altro motivo è la comodità. Una volta che il layout del post è stato progettato con tutti gli elementi di contenuto dinamico in atto (come categorie, immagini in primo piano, tag dei post, campi personalizzati, ecc.), Il processo di creazione e aggiornamento dei post del blog è notevolmente semplificato. Oltre al contenuto effettivo del post, tutti gli altri dati del post possono essere aggiornati senza dover distribuire il visual builder.

In questo tutorial, ti mostrerò come creare un layout di post dinamico in Divi. Partendo da un layout predefinito, ti guiderò attraverso il processo di aggiunta di contenuto dinamico in tutto il layout e quindi la progettazione di quel contenuto in modo che corrisponda. Introdurrò anche un modo semplice per utilizzare i campi personalizzati come contenuto dinamico.

Iniziamo.

Sbirciata

Cosa ti serve per iniziare

Per questo tutorial, avrai bisogno di quanto segue:

• Tema Divi
• Pacchetto layout personal trainer. Questo pacchetto di layout è accessibile da Divi Builder. Utilizzeremo il layout di pagina del servizio di personal trainer per avviare il design del layout dei nostri post.

Ti mostrerò anche come sfruttare i campi personalizzati per creare una sezione di allenamento in primo piano utilizzando la funzionalità del tipo di post personalizzato. I campi personalizzati sono integrati in WordPress e non richiedono plug-in aggiuntivi o altro. Quindi hai già quello che ti serve.

Parte 1: aggiunta del layout predefinito al post

Per iniziare, vai avanti e crea un nuovo post (non una pagina), assegna un titolo al tuo post, quindi fai clic sul pulsante Usa Divi Builder. Non distribuire ancora il visual builder perché prima dobbiamo personalizzare le impostazioni dei nostri post dalla schermata predefinita dell'editor di WordPress.

Dal momento che vogliamo aggiungere il nostro layout predefinito per inserire le nostre immagini dal layout (ne abbiamo bisogno per la nostra immagine in primo piano). Fare clic sul pulsante Carica layout situato nel menu Divi Builder.

Dal popup Carica dalla libreria, seleziona il layout di pagina del servizio Personal Trainer e distribuiscilo nel tuo post facendo clic sul pulsante "Usa questo layout".

Quindi pubblica il tuo post per salvare le tue impostazioni.

Parte 2: aggiornamento delle impostazioni della pagina Divi, dei metadati dei post e dell'immagine in primo piano

Impostazioni pagina Divi

È importante aggiornare le impostazioni della pagina Divi in ​​modo che il nostro nuovo layout si adatti al design. Dobbiamo anche nascondere la visualizzazione predefinita del titolo del post poiché utilizzeremo invece il modulo del titolo del post.

In alto a destra della pagina, individua la casella Impostazioni pagina Divi e aggiorna quanto segue:

Layout di pagina: a tutta larghezza
Mostra il titolo dell'articolo: Nascondi

Se non vedi le impostazioni della pagina Divi, probabilmente non hai attivato Divi Builder, quindi assicurati di farlo prima.

Aggiungi categorie

Sotto la casella delle categorie, aggiungi una nuova categoria chiamata "Allenamento della forza" e assicurati che sia l'unica categoria selezionata.

Aggiungere etichette

Nella casella dei tag, aggiungi i tre tag seguenti: Velocità, Allenamento e Allenamenti.

Immagine in evidenza

Quindi, aggiungi un'immagine in primo piano che corrisponda all'immagine di sfondo utilizzata nell'intestazione del layout come mostrato nello screenshot qui sotto.

Parte 3: aggiunta di campi personalizzati per il contenuto dell'allenamento dinamico

I campi personalizzati sono integrati in WordPress. Consentono agli autori dei post di aggiungere informazioni extra (chiamate metadati) a un post oltre ai metadati predefiniti come categorie, autore del post, data del post, ecc. A livello di base, i campi personalizzati possono essere utilizzati per visualizzare il tempo o l'umore dell'autore quando scrive un post. Ma ci sono molti modi diversi per utilizzare i campi personalizzati per creare contenuti dinamici per il tuo sito web. Sentiti libero di leggere di più su come aggiungere campi personalizzati al tuo sito web. Ma per questo caso d'uso, penso che capirai il concetto di base dei campi personalizzati costruendone alcuni per te stesso.

Per questo esempio, ti mostrerò come aggiungere alcuni campi personalizzati che possono essere utilizzati per aggiungere contenuto dinamico al tuo post. Il contenuto dinamico per questo esempio è un allenamento in primo piano. Una volta che i campi personalizzati sono a posto, tutto ciò che l'autore del post dovrebbe fare è compilare i valori del campo personalizzato e il contenuto verrà aggiornato (dinamicamente) al post senza dover caricare Visual Builder.

Per fare ciò, scorri verso il basso fino alla fine del post e trova la casella Campi personalizzati. Se per qualche motivo non viene visualizzato, assicurati di selezionarlo dalle opzioni dello schermo nella parte superiore della pagina.

Quindi fai clic sul menu a discesa della casella Campi personalizzati (se compresso) per aggiungere un nuovo campo personalizzato e inserisci quanto segue:

Nome: titolo dell'allenamento
Valore: allenamento in primo piano

Quindi fare clic sul pulsante Aggiungi campo personalizzato.

Il nome è il modo in cui identifichi il campo personalizzato in Divi. Il valore è il contenuto che verrà aggiunto dinamicamente alla pagina utilizzando la funzione di contenuto dinamico di Divi (ne parleremo più avanti).

Continua questo processo per aggiungere i seguenti campi personalizzati al tuo sito web.

Nome: riscaldamento
Valore: 800 m di corsa

Nome: durata
Valore: 30min

Nome: sollevamento pesi
Valore:

<ul>
<li>Squats: 10 reps at 60% max (4 sets)</li>
<li>Bench: 6 reps at 70% max (3 sets)</li>
</ul>

Nome: raffreddare
Valore: 400 m di corsa

Nota: questi campi personalizzati verranno aggiunti al tema Divi e saranno disponibili in qualsiasi nuovo post che creerai in futuro. In altre parole, non è limitato a questo singolo post.

Non dimenticare di aggiornare il tuo post!

Parte 4: aggiunta di contenuto dinamico al layout del post utilizzando il Visual Builder

Ora che abbiamo impostato le impostazioni del post e i metadati, è il momento di iniziare ad aggiungere contenuti dinamici al nostro post. A tale scopo, distribuire Visual Builder.

Per rendere le cose un po' più facili da individuare e modificare per questo layout avanzato, apri il menu delle impostazioni e imposta la Modalità di interazione predefinita del generatore su Modalità clic.

Nella sezione dell'intestazione, elimina il modulo pulsante (non ne abbiamo bisogno).

Sostituzione dell'immagine di sfondo con il contenuto dinamico dell'immagine in primo piano

Per il nostro primo contenuto dinamico, sostituiremo l'immagine di sfondo utilizzata nella colonna 1 della nostra riga della sezione di intestazione superiore con l'immagine in primo piano utilizzata per il post. Per fare ciò, apri le impostazioni della riga e trova le impostazioni dello sfondo per la colonna 1 e fai clic sulla scheda dell'immagine di sfondo. Quindi elimina l'immagine che è attualmente lì e quindi passa il mouse sopra la casella di anteprima dell'immagine di sfondo. Vedrai l'icona del contenuto dinamico in alto a destra della casella. Fare clic su di esso per aprire le opzioni del contenuto dinamico. Quindi seleziona l'opzione Contenuto dinamico dell'immagine in primo piano dall'elenco.

Il tuo layout sarà esattamente lo stesso poiché stiamo usando la stessa immagine. L'unica differenza è che ora l'immagine di sfondo viene estratta da qualsiasi immagine impostata come immagine in primo piano del post. Questa è la bellezza dei contenuti dinamici!

Continuiamo.

Aggiungere il titolo del post con un modulo del titolo del post

Sotto il modulo di testo che attualmente contiene il titolo della pagina, aggiungi un modulo Titolo post. C'è anche un'opzione per aggiungere il titolo del post a un modulo utilizzando il contenuto dinamico, ma poiché il modulo del titolo del post funziona già come contenuto dinamico e conserva il tag di intestazione h1 per SEO, è perfetto da utilizzare per il layout del tuo post personalizzato .

Quindi aggiorna le impostazioni del modulo del titolo del post come segue:

Mostra meta: NO
Mostra immagine in primo piano: NO

Ora vai al modulo di testo sopra e copia gli stili di intestazione h2 facendo clic con il pulsante destro del mouse sulla scheda h2 e selezionando l'opzione da questo elenco.

Quindi incolla gli stili di intestazione h2 nel modulo del titolo del post facendo clic con il pulsante destro del mouse sul modulo e selezionando l'opzione dall'elenco.

Successivamente, torna di nuovo al modulo di testo sopra e copia gli stili di spaziatura e incollali nel modulo del titolo del post. Quindi cambia il colore del testo del titolo del post in chiaro per ottenere il colore bianco.

Ora il titolo del tuo post dovrebbe corrispondere al design del titolo del layout originale.

Ora puoi eliminare il modulo di testo contenente l'intestazione originale.

Utilizzo di contenuto dinamico per creare una riga di metadati

Passa alla seconda sezione del layout. Quindi rimuovi il riempimento superiore della sezione trascinandolo via nel visual builder o impostandolo su 0 px nelle impostazioni della sezione.

Nella prima riga della seconda sezione del layout, noterai un modulo di testo (ha il contenuto "Informazioni sull'allenamento personale") con un divisore sotto di esso. È qui che creeremo la nostra riga personalizzata di metadati utilizzando contenuti dinamici.

Vogliamo che la dimensione di questa riga corrisponda alla dimensione della riga nella sezione superiore. Per fare ciò, apri le impostazioni di riga della riga nella sezione superiore e copia gli stili di dimensionamento. Quindi incollali nella prima riga della seconda sezione. Quindi aggiorna la grondaia della riga con a 2. Il nuovo dimensionamento dovrebbe essere simile allo screenshot seguente.

Dovrai anche aggiungere una spaziatura personalizzata come segue:

Imbottitura personalizzata: 1% a sinistra, 1% a destra

Quindi salvare le impostazioni della riga.

Ora aggiorna la struttura delle colonne delle righe in un layout a quattro colonne.

Ora siamo pronti per aggiungere il nostro contenuto dinamico. Per fare ciò, apri ora le impostazioni del modulo di testo nella colonna all'estrema sinistra e passa il mouse sopra la casella del contenuto. Vedrai l'icona del contenuto dinamico in alto a destra della casella. Fare clic su di esso per aprire le opzioni del contenuto dinamico.

Quindi seleziona l'opzione: Data di pubblicazione successiva.

Quindi modificare il formato della data di conseguenza.

Questo aggiungerà la data di pubblicazione del post come contenuto dinamico.

Per applicare uno stile al modulo di testo con il contenuto della data dinamica, copia gli stili del modulo del modulo di testo nella colonna di sinistra della riga direttamente sotto.

Quindi incolla gli stili del modulo nel modulo di testo con il contenuto della data dinamica e cambia il colore del testo del testo in bianco.

Quindi, copia il modulo di testo e il divisore sottostante e incollalo nella colonna 2. Quindi cambia il contenuto dinamico in Categorie di post.

Sarà necessario aggiornare il colore del testo del collegamento in bianco in modo che corrisponda al design del layout.

Ora copia il modulo di testo delle categorie di post con il divisore sulla colonna 3. Quindi cambia il contenuto dinamico in Conteggio commenti post. Nel popup Post Comment Count, inserisci quanto segue nella casella di input Prima:

Prima: Commenti:

Le caselle di input prima e dopo disponibili nei popup del contenuto dinamico sono un'opzione conveniente per aggiungere testo prima e/o dopo il contenuto dinamico. Questo è utile per aggiungere etichette, simboli di prezzo e altri elementi quando necessario.

Ora continuiamo ad aggiungere il nostro contenuto dinamico. Copia il modulo di testo e il divisore nella colonna 3 e incollalo nella colonna 4. Quest'ultima colonna conterrà la miniatura dell'autore del post e il nome dell'autore. Quindi, cambia il contenuto dinamico del modulo di testo in Post Author. Nel popup Post Author, aggiorna quanto segue:

Prima: da:
Formato del nome: nome e cognome

Sopra il modulo di testo con il contenuto dell'autore del post, aggiungi un nuovo modulo immagine. Apri le impostazioni del modulo immagine ed elimina l'immagine predefinita. Proprio come abbiamo fatto noi, fai clic sull'icona del contenuto dinamico nella casella di anteprima dell'immagine e aggiungi l'immagine del profilo dell'autore del post come contenuto dinamico.

Quindi regola le impostazioni del design per sollevare l'immagine e dargli una larghezza personalizzata come segue:

Larghezza: 80px
Margine personalizzato (desktop): -82px Superiore
Margine personalizzato (tablet): 0px Superiore

Nota: il nome dell'autore del post mostrerà l'autore che è stato assegnato al post corrente. E l'immagine del profilo dell'autore del post è ciò che è stato impostato per il profilo utente nella dashboard di WordPress in Utenti> Il tuo profilo.

Parte 5: aggiunta di campi personalizzati come contenuto dinamico per aggiungere un allenamento in primo piano al post

Ricordi come abbiamo aggiunto quei campi personalizzati in precedenza nel tutorial? Ora useremo quei campi personalizzati come contenuto per un allenamento in primo piano nel nostro post.

Per aggiungere il nostro contenuto dinamico di allenamento in primo piano, duplica prima la riga a due colonne direttamente sotto la riga a quattro colonne con tutti i nostri metadati dinamici. Quindi elimina i moduli in entrambe le colonne e aggiungi un modulo blurb alla colonna di sinistra.

Utilizzeremo i moduli blurb per aggiungere il contenuto dinamico per la sezione di allenamento. Per iniziare, aggiungi un nuovo modulo blurb alla colonna di sinistra.

Per il titolo, aggiungi il campo personalizzato denominato "Titolo allenamento" come contenuto dinamico. Quindi, per il contenuto della trama, aggiungi il campo personalizzato denominato "Durata" come contenuto dinamico.

Per mantenere le cose in movimento, non esaminerò in dettaglio lo stile di questi moduli. Tuttavia, dovrai aggiungere un'icona blurb posizionata a sinistra del titolo e aggiornare il design in modo che corrisponda al layout.

Quindi, aggiungi un secondo modulo blurb di seguito. Inserisci il testo "Riscaldamento" come titolo. Quindi aggiungi il campo personalizzato denominato "Riscaldamento" come contenuto dinamico.

Aggiungi un terzo modulo blurb sotto quello, con "Sollevamento pesi" come titolo e il campo personalizzato "Sollevamento pesi" come contenuto dinamico. Poiché stiamo utilizzando html per questo valore di campo personalizzato, dovrai abilitare l'html non elaborato nel popup di sollevamento pesi.

Aggiungi un modulo blurb finale con "Cool Down" come titolo e il campo personalizzato "Cool Down" come contenuto dinamico.

Ora hai una sezione dinamica per aggiungere allenamenti al tuo post!

Tutto quello che devi fare è aggiornare i valori dei campi personalizzati dall'editor di pagina predefinito in WordPress e quel contenuto verrà aggiunto automaticamente al layout del tuo articolo senza dover accedere al Divi builder.

Parte 6: Progettazione di una sezione "Argomenti correlati" utilizzando i tag dei post Contenuti dinamici

Puoi utilizzare il contenuto dinamico per visualizzare i tag del post e creare una sezione "argomenti correlati" dall'aspetto accattivante per il tuo post. Per fare ciò, crea una nuova riga di una colonna e aggiungi un modulo di testo alla riga.

Quindi, per la casella del contenuto, aggiungi i tag dei post come contenuto dinamico. Quindi aggiorna le seguenti opzioni di tag post:

Prima: Argomenti correlati:
Separatore tag: //

Nota: puoi utilizzare praticamente qualsiasi set di caratteri che desideri per il separatore di tag, quindi sentiti libero di sperimentarne di diversi per progetti creativi.

Per applicare uno stile al contenuto, aggiorna le seguenti impostazioni di progettazione:

Carattere del testo: Oswald
Peso del carattere del testo: semi grassetto
Colore del testo del testo: #ff4c00
Dimensione del testo del testo: 30px
Font del collegamento: Oswald
Peso del carattere del collegamento: semi grassetto
Colore del testo del collegamento: #262d3f
Dimensione del testo del collegamento: 50 px
Spaziatura delle lettere del collegamento: 2px
Altezza della linea di collegamento: 1,6 em

Ecco il disegno definitivo.

Parte 7: Aggiunta di una biografia dell'autore e di una sezione commenti

A questo punto sei ben attrezzato per aggiungere contenuti dinamici e regolare il design del layout del tuo post con una discreta facilità, quindi non entrerò nei dettagli su questi ultimi due elementi.

Aggiunta di una sezione bio dell'autore utilizzando il contenuto dinamico

Per aggiungere una sezione della biografia dell'autore nella parte inferiore del contenuto del tuo post, puoi utilizzare il contenuto dinamico del post autore, dell'immagine del profilo dell'autore del post e della biografia dell'autore. Come puoi vedere nello screenshot qui sotto, ho creato una riga di colonne 1/4 3/4. Quindi ho aggiunto l'immagine del profilo dell'autore del post nella colonna di sinistra. Nella colonna di destra, ho aggiunto l'autore del post con la biografia dell'autore sotto. Ho anche aggiunto il contenuto dinamico dell'immagine in primo piano come immagine di sfondo per la sezione (e una sovrapposizione sfumata). Ecco un esempio di come sarebbe.

Aggiunta di una sezione di commento utilizzando il modulo Commenti

Poiché stiamo utilizzando un layout di post personalizzato, è necessario utilizzare un modulo di commenti in modo da poter abbinare il design della sezione dei commenti al layout. Aggiungi semplicemente il modulo dei commenti a una nuova riga di sezione per abbinare gli stili e i caratteri dei pulsanti al layout corrente. Ecco un esempio di come sarebbe.

Il progetto finale

Ecco il design finale dell'intero post una volta che tutto il design è stato regolato.

Aggiornamento del contenuto del post e salvataggio del layout per i post futuri

Poiché stiamo utilizzando Divi Builder per creare il layout del post, dovrai comunque aggiornare il contenuto effettivo del post per il tuo post utilizzando i moduli Divi. Ma con tutto il resto ora dinamico, questo rende il processo molto più semplice in futuro. Dovrai salvare il layout del post nella tua libreria in modo che quando crei un nuovo post, tutto ciò che devi fare è aggiungere il layout salvato al tuo post e aggiornare il contenuto del post.

Pensieri finali

Il contenuto dinamico di Divi è una potente funzionalità che rende l'aggiunta e l'aggiornamento dei dati dei post molto più semplice. Quindi, se stai cercando di progettare un layout personalizzato per i tuoi post sul blog (o altri tipi di post personalizzati come Progetti) utilizzando Divi Builder, il contenuto dinamico è la strada da percorrere. Naturalmente, il contenuto dinamico non si limita ai post. Puoi sfruttare i contenuti dinamici e i campi personalizzati in tutto il tuo sito web. Spero che questo post ti aiuti a comprendere alcune delle possibilità e ti ispiri a utilizzare i contenuti dinamici in modi nuovi e fantastici.

Non vedo l'ora di sentirti nei commenti.

Saluti!