Blog con Elementor: Layout Post e Archivi Personalizzati
Il blog e uno degli strumenti piu potenti per attirare traffico organico, costruire autorevolezza e generare lead. Con Elementor Pro e il Theme Builder, puoi personalizzare completamente il layout degli articoli e delle pagine archivio, superando i limiti del tema WordPress e creando una esperienza di lettura unica e coerente con il design del tuo sito.
In questa guida esploreremo come creare template personalizzati per i singoli articoli e per le pagine archivio (categorie, tag, autori), utilizzando i widget dinamici di Elementor Pro. Per una strategia blog completa che integri design e posizionamento SEO, il nostro team puo accompagnarti in ogni fase.
Single Post Template: Il Layout del Singolo Articolo
Il Single Post Template e il modello che definisce come appare ogni singolo articolo del blog. Accedi al Theme Builder da Elementor → Theme Builder → Single Post e crea un nuovo template.
Widget Dinamici Essenziali
Elementor Pro offre una serie di widget progettati specificamente per i contenuti dinamici degli articoli:
- Post Title: mostra il titolo dell articolo con tag HTML personalizzabile (H1, H2, div). Usa sempre H1 per il titolo principale del post
- Post Content: renderizza il contenuto completo dell articolo, inclusi blocchi Gutenberg, shortcode e HTML
- Featured Image: mostra la immagine in evidenza con dimensione, aspect ratio e lightbox personalizzabili
- Post Info (Post Meta): data di pubblicazione, autore, categorie, commenti, tempo di lettura
- Author Box: box con avatar, nome, biografia e link ai social dell autore
- Post Navigation: link “Articolo precedente” e “Articolo successivo”
- Post Comments: sezione commenti completa con modulo di inserimento
- Related Posts (Posts Widget): griglia di articoli correlati basati sulla stessa categoria o tag
Struttura Consigliata per il Single Post
Un layout efficace per un articolo di blog segue questa struttura dall alto verso il basso:
- Breadcrumb: navigazione gerarchica (Home → Blog → Categoria → Titolo)
- Categoria: badge con la categoria principale dell articolo
- Titolo (H1): grande, leggibile, con tipografia d impatto
- Meta informazioni: autore (con avatar), data, tempo di lettura stimato
- Immagine in evidenza: a larghezza piena o con margini laterali
- Contenuto dell articolo: con larghezza di lettura ottimale (680-720px)
- Tag: elenco dei tag associati all articolo
- Author Box: biografia dell autore con foto e link
- Navigazione articoli: precedente e successivo
- Articoli correlati: griglia 2-3 colonne con immagini e titoli
- Commenti: sezione commenti (se abilitata)
Larghezza di Lettura Ottimale
Per una esperienza di lettura confortevole, il corpo dell articolo non dovrebbe superare i 680-720px di larghezza. Questo corrisponde a circa 65-75 caratteri per riga, che e il range ottimale secondo gli studi di leggibilita. In Elementor, usa un container con larghezza massima personalizzata per il contenuto testuale, anche se il resto della pagina e a larghezza piena.
Tempo di Lettura Stimato
Il tempo di lettura stimato e un elemento molto apprezzato dai lettori perche li aiuta a decidere se leggere subito o salvare per dopo. Puoi aggiungerlo in due modi:
Metodo 1: Plugin Dedicato
Plugin come Reading Time WP aggiungono automaticamente il tempo di lettura basandosi sul conteggio delle parole (media 200-250 parole al minuto). Il dato e disponibile come shortcode o come campo dinamico.
Metodo 2: Codice Personalizzato
Aggiungi una funzione nel functions.php del tema che calcola il tempo basandosi su str_word_count() del contenuto e visualizzalo con un widget HTML dinamico.
Archive Template: Pagine Categorie e Tag
Il Archive Template definisce il layout delle pagine che elencano piu articoli: categorie, tag, archivi per data e pagina principale del blog.
Creare un Archive Template
- Vai su Elementor → Theme Builder → Archive
- Crea un nuovo template
- Scegli un layout di partenza o parti da zero
- Aggiungi i widget dedicati: Archive Title, Archive Posts, Posts Widget
- Configura le condizioni di visualizzazione (tutte le categorie, tag specifici, ecc.)
Widget Archive Posts vs Posts Widget
Elementor Pro offre due widget per elencare gli articoli nelle pagine archivio:
| Caratteristica | Archive Posts | Posts Widget |
|---|---|---|
| Query automatica | Si (usa la query della pagina) | No (query personalizzata) |
| Paginazione | Si (nativa) | Si (configurabile) |
| Layout | Classic, Cards, Full Content | Classic, Cards, Full Content |
| Skin personalizzabili | Si | Si |
| Filtri per categoria | No (segue la pagina) | Si |
| Uso consigliato | Pagine archivio (categorie, tag) | Homepage, landing page, sidebar |
Per le pagine archivio usa Archive Posts, che eredita automaticamente la query della pagina (mostra gli articoli della categoria corrente). Per sezioni di articoli in altre pagine (come la homepage), usa il Posts Widget con query personalizzata.
Layout della Pagina Archivio
Una pagina archivio efficace include:
- Archive Title: il nome della categoria o del tag, con possibilita di personalizzare il prefisso (“Articoli su: ” oppure rimuoverlo)
- Archive Description: la descrizione della categoria (se compilata in WordPress)
- Griglia articoli: 2-3 colonne su desktop, 1 colonna su mobile
- Card articolo: immagine in evidenza, categoria, titolo, estratto (massimo 2 righe), data e autore
- Paginazione: numerica o caricamento infinito
Design della Sidebar
La sidebar laterale e un elemento classico dei blog, anche se molti design moderni preferiscono il layout a colonna singola. Se scegli di includerla, ecco gli elementi piu utili:
- Barra di ricerca: widget Search Form per cercare tra gli articoli
- Categorie: elenco o widget cloud delle categorie
- Articoli recenti: lista dei 3-5 post piu recenti con miniatura
- Articoli popolari: i post piu letti (richiede un plugin come WP Popular Posts)
- Newsletter: modulo di iscrizione alla mailing list
- Banner promozionale: CTA per servizi o prodotti
Per una esperienza mobile ottimale, la sidebar dovrebbe spostarsi sotto il contenuto principale su smartphone. In Elementor, questo avviene automaticamente con i container Flexbox impostati su wrap.
Social Sharing
Facilitare la condivisione degli articoli sui social network aumenta la visibilita dei contenuti. Elementor Pro include il widget Share Buttons con supporto per:
- Facebook, Twitter/X, LinkedIn, Pinterest, WhatsApp, Telegram
- Stili diversi: icone, icone con testo, testo solo
- Forme: arrotondate, quadrate, minimali
- Posizionamento: inline nel contenuto, barra laterale fissa, o footer dell articolo
La posizione piu efficace per i pulsanti di condivisione e subito dopo il contenuto dell articolo, quando il lettore ha appena terminato e ha il massimo coinvolgimento. Una barra laterale fissa (sticky) e una alternativa popolare per articoli molto lunghi.
Griglia Articoli Correlati
La sezione “Articoli correlati” alla fine di ogni post e cruciale per ridurre il bounce rate e aumentare le pagine per sessione. Configurazione consigliata con il Posts Widget:
- Query: filtra per la stessa categoria dell articolo corrente (usa Related come source)
- Numero di post: 3 (layout a 3 colonne) o 4 (layout a 2 colonne con 2 righe)
- Elementi da mostrare: immagine in evidenza, titolo, data, estratto breve
- Escludi il post corrente: attiva la opzione per non mostrare lo stesso articolo
- Ordine: per data (piu recenti) o casuale per varieta
Condizioni di Visualizzazione
Il Theme Builder di Elementor Pro permette di creare template diversi per categorie diverse. Per esempio:
- Un template con sidebar per gli articoli del blog standard
- Un template a colonna singola full-width per le guide tecniche
- Un template con layout portfolio per la categoria “Progetti”
- Un template specifico per articoli sponsorizzati con disclaimer
Gestisci le condizioni da Theme Builder → Condizioni di visualizzazione. Le condizioni piu specifiche hanno la priorita su quelle generiche.
Conclusione
Personalizzare il layout del blog con Elementor Pro trasforma la esperienza di lettura e rafforza la identita visiva del tuo brand. Un template ben progettato aumenta il tempo di permanenza, riduce il bounce rate e migliora le conversioni. Investire nel design del blog non e un vezzo estetico: e una strategia con un impatto diretto sul traffico e sulle conversioni.
Se hai bisogno di supporto nella progettazione del tuo blog o nella creazione di template personalizzati, contattaci per una consulenza dedicata.
Guide Correlate della Serie Elementor
- SEO con Elementor: Ottimizzazione per i Motori di Ricerca
- Theme Builder: Header, Footer e Template Globali
- Widget Essenziali di Elementor: Guida Completa
- Errori di Design da Evitare e Best Practice
- Creare un Sito Web da Zero in 10 Passi
Migliora il Tuo Sito WordPress
Scopri le nostre guide complete sugli altri plugin essenziali per WordPress: