Come dare alle tue pagine di archivio Divi un layout in muratura
Pubblicato: 2021-09-15Per dare alle tue pagine di archivio un layout in muratura personalizzato, possiamo utilizzare il generatore di temi Divi per progettare un modello di pagina di archivio dinamico personalizzato. 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 archivio e quindi sullo stile del modello di pagina esclusivamente con CSS esterni. Ciò ha reso molto più difficile la creazione di un layout in muratura. Ma ora, con Divi Theme Builder, questo processo è diventato facile e divertente!
In questo tutorial, ti mostreremo come creare un modello di pagina di archivio che mostri dinamicamente il titolo della pagina di archivio, il sottotitolo e i post del blog. E, utilizzando il modulo post del blog, possiamo facilmente visualizzare il nostro archivio di post in un layout a griglia in muratura.
Iniziamo!
Sbirciata
Ecco una rapida occhiata al modello di pagina di archivio che progetteremo insieme in questo tutorial. In questa immagine, viene utilizzato per visualizzare tutti i post con la categoria "WordPress".
Scarica GRATUITAMENTE il modello di pagina di archivio
Per mettere le mani sul modello 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 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.
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:
- 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).
- Poiché creeremo un modello di pagina di archivio, dovrai avere alcuni post del blog già creati sul tuo sito Web con autori, categorie e/o tag assegnati a loro se vuoi vedere i risultati.
Dopodiché, sei pronto per partire.
Comprensione dei moduli e dei contenuti dinamici disponibili per i modelli di pagine di archivio
Quando crei un modello di pagina di archivio per un sito Divi, è importante capire quali strumenti sono a tua disposizione in modo da poter costruire efficacemente un modello che visualizzi in modo dinamico le informazioni corrette. Per un modello di pagina di archivio, siamo più interessati a visualizzare i post della pagina corrente ogni volta che un utente visita una pagina di archivio. 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 dispongono di 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 archivio. Questo perché ha l'opzione integrata 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 la pagina corrente", l'utente sarà in grado di visualizzare una pagina di archivio e visualizzare correttamente i post per quella pagina corrente.
Titolo post/archivio (contenuto dinamico)
Un modo più semplice per visualizzare il titolo della pagina di post/archivio consiste nell'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 archivio, facciamo un salto e ne creiamo uno insieme.
Come creare un modello di pagina di archivio Divi con un layout in muratura
Per creare un modello di pagina di archivio con un layout in muratura, tutto ciò che devi fare è progettare un nuovo modello per tutte le pagine di archivio utilizzando il generatore di temi.
Creazione e assegnazione di un modello personalizzato per tutte le pagine di archivio
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 archivio.
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, aggiorna le impostazioni di sezione predefinite con un colore di sfondo.
- Colore di sfondo: #eeeeee
Quindi 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:
</h1>
Dobbiamo racchiudere il titolo in un tag H1 per scopi SEO.
Titolo archivio dinamico di stile
Una volta che il contenuto dinamico è a posto, possiamo modellarlo usando quanto segue:
- Carattere dell'intestazione: Mulish
- Carattere dell'intestazione: Peso: pesante
- Allineamento del testo dell'intestazione: Centro
- Colore del testo dell'intestazione: #3a405a
- Dimensione del testo dell'intestazione: 70 px (desktop), 40 px (tablet e telefono)
Aggiungi testo sottotitolo archivio dinamico
Poiché possiamo avvolgere il titolo della nostra pagina di archivio dinamico con HTML personalizzato, possiamo aggiungere un sottotitolo che estrae il titolo della pagina di archivio dinamico all'interno del testo del sottotitolo.
Per fare ciò, crea un nuovo modulo di testo sotto il modulo di testo precedente con il titolo.
Elimina il testo del corpo predefinito e aggiungi il contenuto dinamico del titolo post/archivio al corpo (proprio come abbiamo fatto in precedenza).
Apri le impostazioni del titolo del post/archivio e aggiungi quanto segue prima e dopo il contenuto.
Prima:
<h3>Here are the articles on
Dopo:
</h3>
Ora il titolo verrà visualizzato in linea con la riga di testo precedente.
Titolo archivio dinamico di stile
Una volta che il contenuto dinamico è a posto, possiamo definire lo stile aggiornando le seguenti impostazioni di H3:
- Intestazione 3 Carattere: Mulish
- Intestazione 3 Allineamento del testo: Centro
Utilizzo del modulo Blog per visualizzare dinamicamente i post per la pagina corrente
Con il titolo della pagina di archivio dinamico in atto, dobbiamo aggiungere il modulo blog per visualizzare i post per la pagina di archivio corrente.
Aggiungi nuova sezione
Prima di aggiungere il modulo blog, aggiungiamo una nuova sezione alla pagina.
Aggiungi nuova riga a una colonna
Quindi, aggiungi una nuova riga a una colonna alla nuova sezione.
Quindi apri le impostazioni della riga e aggiorna quanto segue:
- Usa larghezza grondaia personalizzata: S
- Larghezza grondaia: 2;
- Larghezza: 95%
Aggiungi il modulo del blog per visualizzare i post per la pagina corrente in modo dinamico
Ora dobbiamo aggiungere un modulo blog alla riga.
Ricorda, dobbiamo assicurarci che i post per la pagina corrente siano abilitati per la pagina di archivio per estrarre l'archivio dei post corretto. Aggiorna le opzioni del contenuto come segue:
- Post per la pagina corrente: SI
Modulo blog di design
Con le impostazioni del contenuto in atto, apportiamo alcune modifiche al design. Nella scheda Progettazione, aggiorna il layout come segue:
- Layout: Griglia
Ora torna alla scheda contenuto e aggiungi il seguente colore di sfondo agli elementi della griglia:
- Colore di sfondo: #3a405a
Aggiorna stili di testo del titolo
- Carattere del titolo: Mulish
- Peso del carattere del titolo: grassetto
- Colore del testo del titolo: #eee
- Dimensione del testo del titolo: 34px
- Altezza della riga del titolo: 1,3 em
Aggiorna stili di testo del corpo
- Carattere del corpo: Montserrat
- Colore del corpo del testo: #ffffff
- Altezza della linea del corpo: 2em
Aggiorna stili di meta testo
- Meta font: Montserrat
- Colore meta testo: #ffb100
Aggiorna stili di impaginazione
- Peso del carattere di impaginazione: grassetto
- Colore del testo dell'impaginazione: #3a405a
A questo punto, abbiamo il nostro modello di pagina di archivio attivo e funzionante, completo di titolo della pagina e post del blog (in un layout in muratura) che visualizzerà dinamicamente i post per la pagina di archivio corrente.
Risultato finale
Per testare i risultati, visita i diversi tipi di pagine di archivio sul tuo sito.
Ecco un esempio di un modello di pagina di archivio di categoria che mostra tutti i post per la categoria "WordPress".
Ecco un modello di pagina di archivio dell'autore che mostra tutti i post per un autore specifico.
Ecco una pagina di archivio dei tag che mostra tutti i post con il tag "Notizie".
Ed ecco un modello di pagina di archivio delle date che mostra tutti i post per il mese di ottobre 2019.
Pensieri finali
Una volta che sai come creare un nuovo modello di archivio con il generatore di temi di Divi, aggiungere un layout in muratura per i post è facile. Il trucco consiste nell'utilizzare le opzioni integrate di Divi per visualizzare il titolo della pagina di archivio come contenuto dinamico e quindi utilizzare il modulo blog per visualizzare dinamicamente il post per la pagina corrente in un layout a griglia in muratura. Si spera che ciò contribuirà a migliorare il design generale del tuo sito Web prendendo di mira quelle pagine di archivio che possono essere facilmente trascurate.
Non vedo l'ora di sentirti nei commenti.
Saluti!