Oltre 15 fantastici tutorial sui modelli di post di blog per Divi

Esistono molti modi per progettare e personalizzare i modelli di post del blog Divi. Fortunatamente, ci sono molti tutorial sui modelli di post del blog Divi sul blog Elegant Themes per iniziare. In questo articolo, esamineremo oltre 15 fantastici tutorial sui modelli di post di blog che puoi utilizzare con Divi Theme Builder. Tutti includono istruzioni dettagliate sulla creazione dei modelli di post del blog per schermi desktop e mobili. Molti includono download di file JSON e istruzioni video. Alcuni includono CSS.

1. Progettazione di un modello di post sul blog

Questo tutorial mostra tutto ciò che devi sapere per iniziare a creare un modello di post del blog in Divi Theme Builder. Include le nozioni di base su cos'è un modello di post di blog e perché ne hai bisogno. Discute anche del contenuto dinamico e di come utilizzarlo per i post del blog.

Visualizza tutorial

2. Aggiunta di CTA permanenti della barra laterale a un modello di post di blog

Questo tutorial si concentra su come creare CTA appiccicosi e aggiungerli alle barre laterali del modello di post del tuo blog. Mostra due diverse barre laterali che funzionano in modo indipendente. Le barre laterali scorrono con il post fino a raggiungere la loro posizione appiccicosa, quindi rimangono lì finché il post non scorre fino al punto in cui seguono il post. Queste informazioni funzionano anche per qualsiasi modello di pagina. Questo include CSS.

Visualizza tutorial

3. Creazione dinamica di un modello di post di blog UX-friendly

Questo mostra come creare un modello di post del blog incentrato sull'esperienza dell'utente. Mostra come incorporare elementi dinamici nel design. Il modello creato in questo tutorial è privo di distrazioni, il che lo rende semplice e facile da usare.

Visualizza tutorial

4. Stile del modulo dei commenti di Divi all'interno di un modello di post di blog

Questo tutorial si concentra sullo stile di una sezione commenti che funziona perfettamente con un modello di post di blog. Crea due design con i moduli Commenti. È incluso anche un modulo Persona con Social Media Follow. Lo sfondo viene creato con un editor grafico e viene inclusa una procedura dettagliata di come è stato creato.

Visualizza tutorial

5. Progettazione di una casella dell'autore dinamico per il modello di post del blog

In questo tutorial imparerai come utilizzare il contenuto dinamico per creare una casella dell'autore per il modello di post del tuo blog. Sul desktop, la casella dell'autore rimane nella barra laterale. Il contenuto è nascosto e l'immagine dell'autore è sbiadita per creare un design pulito. Il contenuto viene rivelato quando si passa con il mouse sopra la casella dell'autore. Per i dispositivi mobili, la casella dell'autore si trova sotto il contenuto. Include CSS.

Visualizza tutorial

6. Creazione di un modello di post sul blog con barra laterale a due lati

Questo tutorial mostra come creare un modello di post di blog con una barra laterale su entrambi i lati. Le barre laterali rimangono pulite con un post sul blog su un lato e un'e-mail di attivazione sull'altro lato. Le barre laterali si impilano sui dispositivi mobili. CSS è incluso.

Visualizza tutorial

7. Creazione di una barra delle informazioni sul post dinamico per il modello di post del blog

Questo tutorial mostra come creare una barra delle informazioni utilizzando il contenuto dinamico che rimane sullo schermo mentre l'utente scorre. Il contenuto include il titolo e la categoria del post corrente per mostrare ciò che l'utente sta leggendo, il numero di commenti e un link per lasciare un commento e un pulsante per iscriversi alla newsletter. Include CSS.

Visualizza tutorial

8. Includere una barra laterale fissa a tutta altezza nel modello di post del blog

Questo tutorial mostra come creare una barra laterale a tutta altezza che viene fissata in posizione sulla versione desktop mentre l'utente scorre. La barra laterale occupa l'intera altezza dello schermo del desktop. La versione mobile posiziona la barra laterale dopo il contenuto. CSS personalizzato è incluso.

Visualizza tutorial

9. Creazione di un modello di post di blog a schermo diviso

Questo tutorial mostra come creare un modello di post del blog con l'immagine in primo piano su un lato e il contenuto del post sull'altro. L'immagine in primo piano con il titolo e i metadati rimane al suo posto mentre il contenuto scorre. Per i dispositivi mobili, il layout funziona normalmente. Include CSS.

Visualizza tutorial

10. Creazione di una barra laterale appiccicosa per il modello di post del tuo blog

Questo mostra come rendere appiccicosa la barra laterale. Una volta raggiunta la sua posizione adesiva sullo schermo, la barra laterale rimane in posizione fino a quando non raggiunge la fine del contenuto. La barra laterale scorre quindi con il post normalmente. Funziona normalmente su cellulare. Il modello di post del blog è costruito da zero e include elementi sovrapposti e CSS personalizzati.

Visualizza tutorial

11. Creazione di un commutatore commenti per il modello di post del blog

Questo tutorial mostra come creare un interruttore per comprimere la sezione dei commenti. Un pulsante su una barra dei commenti apre il commento per rivelarlo. Ciò è particolarmente utile per migliorare l'esperienza dell'utente sui post con molti commenti. CSS personalizzato è incluso.

Visualizza tutorial

12. Includere un'immagine in primo piano a larghezza intera nel modello di post del tuo blog

Questo tutorial mostra come rendere l'immagine in primo piano a tutta larghezza sia su desktop che su dispositivi mobili. Mostra diversi modi per ottenere ciò, tra cui una sezione dinamica, un modulo del titolo del post, un'immagine separata e un modulo di testo. Alcuni includono sovrapposizioni sfumate.

Visualizza tutorial

13. Utilizzo di diversi modelli di post sul blog per diverse categorie

Questo mostra come utilizzare le impostazioni di Divi Theme Builder per impostare diversi modelli di post del blog per diverse categorie sul tuo sito web. Vengono inoltre illustrati i vantaggi dell'utilizzo di diversi modelli di post del blog e come escludere una categoria dal modello predefinito.

Visualizza tutorial

14. Assegnazione di un modello di post sul blog diverso a post specifici

Questo tutorial mostra come utilizzare le impostazioni di Divi Theme Builder per assegnare un modello di post del blog a uno specifico post del blog. Discute anche i vantaggi di farlo e fornisce alcuni esempi di quando avrebbe più senso.

Visualizza tutorial

15. Aggiunta di post correlati al modello di post del tuo blog

Questo tutorial mostra come aggiungere una sezione al modello di post del blog che visualizza i post correlati. Questo copre anche gli elementi di cui ha bisogno un modello di post di blog, esempi di altri elementi, i vantaggi dei post correlati e i posti migliori per aggiungerli. La sezione del post correlato si sovrappone al corpo del post del blog.

Visualizza tutorial

16. Utilizzo del modulo di contenuto del post nel Generatore di temi

Questo tutorial approfondisce come utilizzare il modulo Post Content. Descrive come funziona il modulo e come utilizzarlo al meglio durante la progettazione di modelli di post di blog in Divi Theme Builder. Mostra anche come usarlo con le pagine WooCommerce generate con shortcode e consiglia su quando non usarlo.

Visualizza tutorial

17. Aggiunta di un eroe a schermo intero al modello di post del blog Divi

Questo tutorial mostra diversi metodi per aggiungere una sezione eroe a schermo intero al modello di post del tuo blog. I metodi includono un modulo del titolo del post a schermo intero, un titolo sullo sfondo e l'aggiunta di metadati nella sezione dell'eroe. Mostra anche come aggiungere una sfumatura sull'immagine dell'eroe.

Visualizza tutorial

18. Includere i metadati nel tuo modello di post sul blog

Questo mostra come utilizzare il contenuto dinamico per aggiungere metadati al modello di post del tuo blog. Discute cos'è il meatadata, come funziona il contenuto dinamico per il meatadata e perché dovresti usare il contenuto dinamico per visualizzare i metadati. Vengono anche trattate le varie opzioni di visualizzazione dei metadati.

Visualizza tutorial

19. Includere la navigazione dei post nel modello di post del tuo blog Divi

Questo tutorial copre il modulo Post Navigation. Spiega perché dovresti usare la navigazione dei post e mostra il posto migliore per aggiungerlo al tuo modello di blog. Mostra tre modi diversi per applicare uno stile al modulo per creare collegamenti di testo, pulsanti e un pulsante a doppia faccia.

Visualizza tutorial

Come trovare modelli di post di blog gratuiti per Divi

Elegant Themes ha creato molti modelli di post di blog gratuiti che corrispondono ai Divi Layout Pack gratuiti. Questi modelli di post del blog Divi gratuiti sono pubblicati nel blog ET. Cerca semplicemente "modello di post di blog gratuito", "modello di post di blog gratuito Divi" o parole chiave simili. Troverai molti modelli di post di blog gratuiti tra cui scegliere.

Pensieri finali

Questo è il nostro sguardo a oltre 15 fantastici tutorial sui modelli di post del blog Divi per Divi. Questi oltre 15 tutorial sono un ottimo modo per imparare i molti modi per progettare e personalizzare i modelli di post del tuo blog Divi. Forniscono anche idee per crearne di proprie utilizzando Divi Theme Builder. Molti di loro mostrano come usare i CSS.

Vogliamo sentire da voi. Hai usato uno di questi oltre 15 fantastici tutorial sui modelli di post del blog Divi? Facci sapere qual è il tuo preferito nei commenti.