Come creare un modello di pagina di categoria per il tuo blog utilizzando Divi Theme Builder

Una pagina di categoria può essere estremamente utile per gli utenti fornendo loro un'intera pagina piena di cose a cui sono interessati (o che cercano). Ma molte volte la pagina delle categorie può soffrire quando si tratta di design. In Divi, prima dei tempi del Divi Theme Builder, gli sviluppatori dovevano fare affidamento sulla personalizzazione manuale del codice php su un file del tema del modello di pagina di categoria e quindi sullo stile del modello di pagina esclusivamente con CSS esterni. Ma ora, con Divi Theme Builder, questo processo è diventato facile e divertente!

In questo tutorial, ti mostreremo come creare un modello di pagina di categoria per il tuo blog completamente da zero utilizzando Divi Theme Builder. Ti mostreremo come impostare rapidamente un nuovo modello assegnato alle categorie di post e come progettare il modello utilizzando i moduli appropriati e il contenuto dinamico utilizzando Divi Builder.

Iniziamo!

Sbirciata

Ecco una rapida occhiata al modello di pagina delle categorie che progetteremo insieme in questo tutorial. In questa immagine, viene utilizzato per visualizzare tutti i post con la categoria "Business".

Scarica il layout GRATUITAMENTE

Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo 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.

SCARICA

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!

Per importare il layout del modello sul tuo sito Web, dovrai accedere a Divi Theme Builder e utilizzare l'opzione di portabilità per importare il file .json nel generatore di temi.

Andiamo al tutorial, vero?

Cosa ti serve per iniziare

Per iniziare, dovrai fare quanto segue:

1. Se non lo hai ancora fatto, installa e attiva il tema Divi installato (o il plug-in Divi Builder se non utilizzi il tema Divi).
2. Poiché creeremo un modello di pagina di categoria per i post del blog, sarà necessario disporre di post già creati sul tuo sito Web con categorie assegnate.

Dopodiché, sei pronto per partire.

Moduli e contenuto dinamico disponibili per i modelli di pagine di categoria

Quando crei un modello di pagina di categoria per un blog Divi, è importante capire quali strumenti sono a tua disposizione in modo da poter creare efficacemente un modello che mostri dinamicamente le informazioni corrette. Per un modello di pagina di categoria per i post del blog, siamo più interessati a visualizzare i post della categoria corrente ogni volta che un utente visita una pagina di categoria. Ad esempio, se un utente fa clic sul collegamento della categoria "Business", dovrebbe vedere una pagina di archivio che mostra tutti i post con la categoria "Business". Alcuni moduli Divi hanno opzioni integrate per semplificare la visualizzazione di contenuti dinamici su un modello.

Il modulo blog

Il modulo blog è il modulo principale che dovrebbe essere utilizzato per visualizzare i modelli di pagine di categoria. Questo perché ha l'opzione incorporata per visualizzare i post per la pagina corrente.

Questo sta sostanzialmente dicendo a Divi di visualizzare i post che vengono normalmente generati ogni volta che un utente visita la pagina. Quindi, con l'opzione impostata per visualizzare "Post per pagina corrente", l'utente sarà in grado di visualizzare una pagina di categoria e visualizzare correttamente i post per categoria.

Modulo Post Slider e Modulo Post Title

Puoi anche utilizzare il modulo Post Slider per visualizzare i post per la pagina corrente. Questo è utile per creare uno slider di post dinamico che mostra i post generati visitando una pagina di categoria, proprio come può fare il modulo blog.

È possibile utilizzare anche il modulo Post Title, ma è praticamente limitato alla capacità di visualizzare il titolo della pagina in modo dinamico. La maggior parte degli altri elementi disponibili all'interno del modulo del titolo del post non sono applicabili a una pagina di archivio, ma solo modelli di post specifici.

Titolo post/archivio (contenuto dinamico)

Un modo più semplice per visualizzare il titolo della pagina di post/archivio è utilizzare un normale modulo Divi e quindi inserire il titolo della pagina di post/archivio utilizzando la funzione di contenuto dinamico disponibile in tutti i moduli Divi.

Ad esempio, puoi utilizzare un modulo di testo e quindi aggiungere il titolo della pagina di post/archivio come contenuto dinamico al contenuto del corpo. Quindi puoi modellare il titolo come preferisci.

Ora che hai compreso gli strumenti necessari per creare un modello di pagina di categoria, facciamo un salto e ne creiamo uno insieme.

Come creare un modello di pagina di categoria per il tuo blog

Per questo modello di pagina di categoria, l'obiettivo è creare un'area del corpo personalizzata per un modello assegnato a tutte le pagine di categoria per i post del blog in Divi. Non creeremo un'area di intestazione o piè di pagina personalizzata per questo modello. Ma puoi facilmente utilizzare questo modello sul tuo sito Web con la tua intestazione e piè di pagina.

Creazione e assegnazione di un modello personalizzato per le categorie di post

Per iniziare, vai alla dashboard di WordPress e vai a Divi > Theme Builder. Quindi fare clic sull'area della casella grigia vuota per aggiungere un nuovo modello.

Quindi, assegna il modello a Tutte le pagine di categoria.

Aggiunta di una nuova area del corpo personalizzata al modello

Per creare il corpo personalizzato per il modello, fare clic sull'area Aggiungi corpo personalizzato e quindi selezionare "Crea corpo personalizzato".

Quindi scegli l'opzione "Costruisci da zero".

Aggiungi titolo archivio dinamico

Nell'editor del layout del modello, crea una nuova riga a una colonna all'interno della sezione normale.

Quindi aggiungi un modulo di testo alla riga.

Elimina il contenuto del corpo predefinito e fai clic sull'icona "Usa contenuto dinamico" e seleziona l'opzione "Pubblica/Archivia titolo.

Una volta che l'elemento Titolo post/archivio è a posto, apri le impostazioni facendo clic sull'icona a forma di ingranaggio.

Quindi aggiorna le aree di input Prima e Dopo per avvolgere il contenuto in un tag H1 e aggiungere un ulteriore pezzo di contenuto statico dopo il titolo dinamico come segue:

Prima:

<h1>

Dopo:

 Articles</h1>

Dobbiamo racchiudere il titolo in un tag H1 per scopi SEO. La parola statica "Articoli" viene aggiunta dopo il titolo in modo che se un utente visita una pagina della categoria "Affari", il titolo sarà "Articoli aziendali".

Titolo archivio dinamico di stile

Una volta che il contenuto dinamico è a posto, possiamo modellarlo usando quanto segue:

• Carattere dell'intestazione: Ubuntu
• Carattere dell'intestazione: Peso: grassetto
• Colore del testo dell'intestazione: #192231
• Dimensione del testo dell'intestazione: 48 px (desktop), 38 px (tablet), 28 px (telefono)
• Altezza della linea di prua: 1.2em

Utilizzo del modulo Blog per visualizzare i post per la categoria corrente in modo dinamico

Con il titolo della pagina della categoria dinamica in atto, dobbiamo aggiungere il modulo blog per visualizzare i post per la pagina della categoria corrente.

Aggiungi nuova riga

Aggiungi una nuova riga a una colonna sotto la riga superiore corrente.

Aggiungi modulo blog

Quindi aggiungi un modulo blog alla riga.

Aggiorna le opzioni del contenuto come segue:

• Post per la pagina corrente: SI
• Conteggio post: 9
• Mostra pulsante Leggi di più: S

Ricorda, dobbiamo assicurarci che i post per la pagina corrente siano abilitati per la pagina della categoria per estrarre l'archivio dei post corretto.

Modulo blog di design

Con le impostazioni del contenuto in atto, apportiamo alcune modifiche al design come segue:

• Layout: Griglia

• Carattere del titolo: Ubuntu
• Peso del carattere del titolo: grassetto
• Colore del testo del titolo: #192231
• Meta font: Ubuntu
• Colore meta testo: #985e6d
• Dimensione del metatesto: 13px

• Leggi di più Font: Ubuntu
• Leggi di più Peso del carattere: grassetto
• Leggi di più Stile carattere: sottolineato
• Leggi di più Colore del testo: #985e6d
• Carattere di impaginazione: Ubuntu
• Colore del testo dell'impaginazione: #985e6d
• Dimensione del testo dell'impaginazione: 18px
• Altezza riga di impaginazione: 2em

• Larghezza bordo layout griglia: 0px
• Box Shadow: vedi screenshot
• Intensità della sfocatura dell'ombra della scatola: 70 px
• Forza di diffusione dell'ombra della scatola: -10px
• Colore dell'ombra: rgba (25,34,49,0.3)

A questo punto abbiamo una pagina di categoria di base attiva e funzionante completa del titolo della pagina e dei post del blog che verranno visualizzati correttamente in base alla pagina della categoria corrente. Tuttavia, possiamo diventare più creativi aggiungendo un modulo aggiuntivo per visualizzare il post in modi creativi.

Crea un Post Slider per inserire i 4 post più recenti nella categoria corrente.

Possiamo utilizzare un modulo di scorrimento dei post per visualizzare anche i post della pagina delle categorie in modo dinamico. Ecco come farlo.

Aggiungi nuova riga

Per prima cosa aggiungi una nuova riga con un layout di colonne 1/3 2/3 sotto la riga superiore.

Aggiungi modulo Post Slider

Nella colonna di sinistra, aggiungi un modulo di scorrimento dei post.

Quindi aggiorna le opzioni del contenuto del cursore del post come segue:

• Post per la pagina corrente: SI
• Conteggio post: 4
• Mostra post meta: NO

Modulo Slider Post Design

Ora che il contenuto del cursore del post è a posto, aggiorna le impostazioni di progettazione come segue:

• Allineamento del testo: a sinistra
• Carattere del titolo: Ubuntu
• Altezza della riga del titolo: 1,3 em
• Usa stili personalizzati per il pulsante: S
• Dimensione del testo del pulsante: 16 px
• Colore di sfondo del pulsante: #985e6d
• Larghezza bordo pulsante: 0px
• Carattere del pulsante: Ubuntu

• Box Shadow: vedi screenshot
• Sfocatura ombra scatola Forza: 70 px
• Forza di diffusione dell'ombra della scatola: -10px
• Colore dell'ombra: rgba (25,34,49,0.3)

Crea un modulo blog con layout a larghezza intera

Nella colonna di destra, possiamo aggiungere un altro modulo blog con un layout a larghezza intera invece di un layout a griglia. Questo ci consentirà di fornire un'altra area di visualizzazione unica per i nostri post di categoria.

Aggiungi modulo blog

Per risparmiare tempo, copiamo il modulo del blog esistente nella riga in basso e incolliamolo nella colonna di destra accanto al dispositivo di scorrimento del post.

Aggiorna le impostazioni del modulo blog duplicato

Apri le impostazioni del modulo blog duplicato e aggiorna quanto segue:

• Post per la pagina corrente: SI
• Conteggio post: 3
• Lunghezza dell'estratto: 120
• Mostra immagine in primo piano: NO (almeno per ora)
• Mostra impaginazione: NO

• Layout: Larghezza intera:
• Ombra scatola: nessuna

Risultato finora

Finora il risultato è una visualizzazione minima dei tre post del blog.

Ma se vogliamo fare un ulteriore passo avanti, possiamo aggiungere alcune piccole immagini in primo piano a sinistra di ciascuno degli estratti del post.

Usa CSS personalizzati per creare immagini in primo piano più piccole che fluttuano a sinistra del contenuto dell'estratto del post.

Per aggiungere alcune piccole immagini in primo piano a sinistra degli estratti del post del blog, dobbiamo aggiungere del CSS personalizzato.

Fornisci una classe CSS personalizzata al modulo blog

Per cominciare, dobbiamo aggiungere una classe CSS personalizzata al modulo Blog. Apri le impostazioni del blog e, nella scheda Avanzate, inserisci quanto segue:

• Classe CSS: left-blog-image

Aggiungi codice CSS con un modulo di codice

Poiché stiamo solo aggiungendo un piccolo frammento CSS a questo modello, possiamo usare un modulo di codice. Aggiungi un modulo di codice sotto il modulo blog.

Inserisci codice CSS

Quindi inserisci il seguente CSS all'interno dell'area del contenuto del codice:

<style>
@media (min-width: 981px) {
.left-blog-image .et_pb_post .entry-featured-image-url {
float: left;
width: 100%;
max-width: 150px;
margin: 0 20px 30px 0;
}
.left-blog-image .et_pb_post {
margin-bottom: 20px !important;
}
}
</style>

Aggiorna le impostazioni del modulo blog per includere l'immagine in primo piano

Ora possiamo aggiungere nuovamente l'immagine in primo piano in modo che venga visualizzata nella nuova posizione a sinistra grazie allo snippet CSS.

Stile aggiuntivo al modello

Prima di concludere, facciamo alcuni piccoli ritocchi al design.

Aggiungi e modella un divisore sotto il titolo dell'archivio

Aggiungi un modulo divisore direttamente sotto il titolo della pagina di archivio nella parte superiore del modello.

Quindi aggiorna le impostazioni del divisore come segue:

• Colore linea: #985e6d
• Peso del divisore: 3px
• Larghezza massima: 200 px

Aggiungi divisore di sezione al layout

Apri le impostazioni della sezione e aggiungi un divisore di sezione come segue:

• Stile divisore superiore: vedi screenshot
• Colore divisorio superiore: rgba (73,78,107,0,07)
• Altezza divisore: 90vw
• Flip divisore: orizzontale e verticale

Usa Post Offset Number con ciascun modulo per evitare visualizzazioni di post duplicate

In questo momento tutti i nostri moduli stanno recuperando lo stesso contenuto del post per la pagina della categoria corrente. Per evitare che questi moduli mostrino duplicati, possiamo usare l'opzione Post Offset Number per "saltare" un certo numero di post che mostrano il feed dei post.

Offset post modulo blog a larghezza intera

Poiché il nostro dispositivo di scorrimento dei post sta già visualizzando il primo (il più recente) post per la pagina della categoria corrente, possiamo spostare questo post sul modulo blog adiacente. Apri le impostazioni per il modulo del blog a destra del cursore del post e aggiorna il numero di offset del post come segue:

• Numero di offset post: 1

Ora il modulo inizierà con il secondo post più recente per la pagina della categoria corrente.

Offset post modulo blog griglia

Una volta che l'offset dei post del primo modulo del blog è a posto, dobbiamo compensare i post nel modulo del blog principale nella parte inferiore del modello. Apri quel modulo del blog e aggiorna il numero di offset del post come segue:

• Numero di post-offset: 4

Dobbiamo impostare il numero di offset su 4 per tenere conto dei 4 post che vengono già visualizzati sopra. Il modulo ora riprenderà da dove gli altri moduli erano stati interrotti e inizierà con il quinto post più recente.

Risultati finali

Per visualizzare il risultato finale, vai alla dashboard di WordPress e vai a Post > Categorie. Quindi fare clic per visualizzare una delle categorie esistenti.

Questo è il risultato finale.

Ed eccolo sul display del tablet e del telefono.

Pensieri finali

Speriamo che questo post ti aiuti a respirare un po' più facilmente di fronte alla sfida di creare un design di pagina di categoria per il tuo sito web. Il Divi Theme Builder lo rende estremamente facile da fare, specialmente con il modulo blog che ora ha la possibilità di visualizzare i post della pagina corrente. E l'opzione post offset ti consente di combinare più moduli blog (o anche moduli post slider) senza mai vedere post duplicati sul display.

In che modo Divi Theme Builder ti ha aiutato a creare pagine di categoria?

Non vedo l'ora di sentirti nei commenti.

Saluti!