Le pagine di Categoria di WordPress presentano l’elenco dei post associati ad una determinata categoria. Questo articolo descrive come creare con il theme builder DIVI un template personalizzato per le pagine di categoria.
Prerequisiti
Per eseguire la procedura descritta di seguito si deve:
- Installare ed attivare il tema DIVI (a pagamento) oppure, se si utilizza un tema diverso, installare ed attivare il plugin DIVI (a pagamento);
- avere a disposizione alcuni post associati a una categoria, per poter eseguire i test; la categoria deve avere una descrizione;
Procedimento
Ecco le attività da svolgere:
- Dalla bacheca dell’amministratore, selezionare le voci di menu: DIVI > Theme Builder
- sulla pagina che compare, cliccare sull’area grigia “Add New Template”
- nella finestra di popup che compare, selezionare la voce “All Category Pages” e poi cliccare su “Create Template” in fondo al popup.
- nel riquadro che rappresenta il Template appena creato, cliccare su “Add custom body”
- nella finestra di popup che compare, cliccare su “Build custom body”
- nella nuova pagina, cliccare sul riquadro “build from scratch” per aprire la finestra del Theme Builder Layout
Inserire il titolo dinamico per la pagina
- Inserire una riga con un’unica colonna
- inserire un modulo Text
- sella sezione “Content” cancellare il testo predefinito e cliccare sull’icona dei contenuti dinamici
- nella finestra di popup che compare, selezionare la voce “Post/Archive title”
- Modificare le impostazioni del contenuto dinamico, inserendo il testo che deve precedere (<h1>) e seguire (</h1>) il contenuto dinamico, salvare le modifiche cliccando sul bottone con il segno di spunta (“Save changes”)
- Salvare le modifiche al modulo Text
Inserire la descrizione della categoria
- inserire un modulo Text
- sella sezione “Content” cancellare il testo predefinito e cliccare sull’icona dei contenuti dinamici
- nella finestra di popup che compare, selezionare la voce “Category Description”
- Salvare le modifiche al modulo Text
Inserire l’intestazione per il blog
- inserire un modulo Text
- sella sezione “Content” cancellare il testo predefinito e cliccare sull’icona dei contenuti dinamici
- nella finestra di popup che compare, selezionare la voce “Post/Archive title”
- Modificare le impostazioni del contenuto dinamico, inserendo i tag e il testo che deve precedere (<h2>Articoli relativi a: ) e seguire (</h2>) il contenuto dinamico, salvare le modifiche cliccando sul bottone con il segno di spunta (“Save changes”)
- Salvare le modifiche al modulo Text
Inserire i post che appartengono alla categoria della pagina
- inserire ina nuova riga con un’unica colonna
- inserire un modulo Blog
- nella sezione “Content” impostare l’opzione “Posts for current page” al valore “Yes”, eventualmente impostare le ulteriori opzioni.
- Nella sezione “Advanced” impostare l’opzione “CSS Class” al valore “left-blog-image“.
- salvare le modifiche cliccando sul bottone con il segno di spunta (“Save changes”)
Inserire le istruzioni CSS per visualizzare l’immagine dell’articolo sulla sinistra invece che sopra
- inserire un modulo Code
- aggiungere le seguenti regole CSS:
<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;
}
.et_pb_posts a.more-link {
clear:none;
}
body.archive.category div.post-content {
margin-left: 170px;
}
body.archive.category h3 {
padding-top: 0;
}
}
</style>- salvare le modifiche cliccando sul bottone con il segno di spunta (“Save changes”)
Template per la pagina dei risultati di ricerca
La pagina dei risultati di ricerca può essere strutturata allo stesso modo delle pagine di categoria. Ecco il procedimento da seguire.
- duplicare il template delle pagine di categoria (tramite l’apposita icona, posta sopra il template);
- nella finestra di popup che compare, selezionare la voce “Search Results”;
- togliere l’intestazione del blog;
- Modificare le ultime due dichiarazioni CSS presenti nel modulo di codice in questo modo:
body.search.search-results div.post-content {
margin-left: 170px;
}
body.search.search-results h3 {
padding-top: 0;
}Risorse on line
Il sito www.elegantthemes.com mette a disposizione la pagina How to Create a Category Page Template for your Blog Using the Divi Theme Builder.
E’ possibile scaricare un template per le pagine Categoria da questo link del sito www.elegantthemes.com.
0 commenti