Termini di layout di WordPress demistificati (riferimento rapido)

Quando abbiamo iniziato a progettare siti web con WordPress, siamo stati bombardati da nuovi termini come "header", "footer" e "widget". Sembrava di imparare una lingua completamente nuova solo per costruire un semplice sito web.

Ora, dopo aver aiutato milioni di utenti WordPress negli ultimi 16+ anni, non solo abbiamo padroneggiato questi termini, ma abbiamo anche scoperto i modi più semplici per spiegarli ai principianti.

Se sei ancora confuso su cosa significano questi termini di layout (e come funzionano insieme), non preoccuparti. Non sei solo e sei nel posto giusto.

In questa guida chiara, analizzeremo tutti i termini essenziali del layout di WordPress in spiegazioni semplici e facili da capire a cui potrai fare riferimento in qualsiasi momento.

Una breve nota sul layout in WordPress

Imparando i layout di WordPress, incontrerai termini diversi a seconda di come stai costruendo il tuo sito. Questo varia a seconda che tu stia utilizzando temi che supportano l'editor completo del sito, il customizer di un tema classico o plugin per page builder di WordPress.

Ad esempio, con l'Editor completo del sito, troverai le opzioni di layout sotto Aspetto » Editor:

Mentre nei temi classici, utilizzerai il Customizer del tema sotto Aspetto » Personalizza.

Ecco come appare:

Per una maggiore flessibilità di progettazione, molti utenti optano per page builder come SeedProd, che offrono interfacce drag-and-drop.

Di solito includono anche funzionalità che gli strumenti predefiniti di WordPress non hanno, come blocchi aggiuntivi e avanzati da aggiungere ai tuoi contenuti.

Sebbene questi strumenti possano utilizzare termini e interfacce diversi, i concetti di layout fondamentali rimangono gli stessi. La comprensione di questi termini chiave ti aiuterà a creare migliori design di WordPress e persino un layout personalizzato, indipendentemente dagli strumenti che stai utilizzando.

Esploriamo questi termini essenziali del layout di WordPress e vediamo come funzionano su diverse piattaforme. Ecco cosa tratteremo:

• Comprendere un layout tipico in WordPress
• Header Area
• Immagine/Colore di sfondo
• Area dei contenuti
• Area della barra laterale (Opzionale)
• Area del piè di pagina
• Altri componenti di un layout WordPress
• Menu di navigazione
• Widget (Temi classici)
• Blocchi
• Immagini in evidenza
• Immagini di copertina
• Pattern di Blocchi
• Pulsanti
• CSS personalizzato
• Termini di layout nei page builder di WordPress
• Utilizzo di modelli nei page builder di WordPress
• Moduli e blocchi nei page builder di WordPress
• Utilizzo di sezioni nei page builder di WordPress
• Domande frequenti
• Risorse bonus

Comprendere un layout tipico in WordPress

Pensa al layout di un sito web come a una lettera amichevole. Una lettera ha un saluto in alto (l'intestazione), il messaggio principale al centro (l'area dei contenuti) e una firma in basso (il piè di pagina).

La maggior parte dei siti web segue questa stessa semplice struttura. Ha un aspetto simile a questo:

A seconda della pagina visualizzata dall'utente, il layout potrebbe differire.

Ad esempio, una pagina di blog di WordPress potrebbe includere una barra laterale accanto all'area del contenuto.

Questo layout di base è riempito con altri elementi, di cui parleremo più avanti in questo articolo.

Parliamo prima di ciascuna di queste sezioni principali in modo più dettagliato.

Area Intestazione

L'intestazione in un layout WordPress è la sezione superiore di qualsiasi pagina. Di solito contiene il logo del tuo sito web, il titolo, i menu di navigazione, un modulo di ricerca e altri elementi importanti che vuoi che gli utenti vedano per primi.

Ecco come appare la sezione dell'intestazione su WPBeginner.

Intestazione personalizzata nei temi WordPress

Molti temi WordPress popolari includono funzionalità aggiuntive per personalizzare l'area dell'intestazione del tuo layout WordPress, che a volte viene chiamata intestazione personalizzata

Personalizzazione dell'intestazione in un tema a blocchi

Se utilizzi un tema a blocchi con supporto per l'editor del sito, puoi modificare l'intestazione facendo clic sull'area dell'intestazione nell'editor del sito.

Da qui, puoi personalizzare l'intestazione a tuo piacimento. Puoi cambiare i colori, regolare il menu di navigazione e aggiungere blocchi come ricerca, logo del sito, pulsanti e altro ancora.

Personalizzazione dell'intestazione in un tema classico

Per i temi classici, di solito puoi trovare queste impostazioni nel personalizzatore del tema. Cerca una sezione denominata 'Intestazione', 'Opzioni intestazione' o 'Identità del sito'.

A seconda del tuo tema WordPress, potresti essere in grado di aggiungere un'immagine a tutta larghezza all'intestazione con una tagline o un pulsante di invito all'azione.

Alcuni temi di WordPress potrebbero consentirti di modificare la posizione del logo, i menu di navigazione e le immagini dell'intestazione.

Immagine/Colore di sfondo

Alcuni temi di WordPress ti consentono anche di cambiare facilmente il colore di sfondo o utilizzare un'immagine di sfondo per il tuo sito web.

Modificare lo Sfondo in un Tema a Blocchi

Se utilizzi un tema con supporto per l'editor del sito, puoi cambiare il colore di sfondo andando su ‘Stili’ nell'editor completo del sito.

Scegli semplicemente l'opzione ‘Colori’ dal pannello Stili.

Dopodiché, puoi fare clic su ‘Sfondo’ per scegliere un colore di sfondo per il tuo sito web.

Modificare lo Sfondo in un Tema Classico

Per i temi classici, le impostazioni dipenderanno dalle funzionalità del tuo tema.

Molti temi classici sono dotati di supporto per lo sfondo personalizzato. Puoi trovare queste impostazioni nelle opzioni ‘Colori’ o ‘Immagine di sfondo’ nel personalizzatore del tema.

Spesso, queste opzioni sono nascoste all'interno di altre schede e dovrai cercare per trovarle.

Per maggiori dettagli, puoi consultare queste guide correlate per aggiungere un'immagine di sfondo in WordPress o cambiare il colore di sfondo in WordPress.

Area dei contenuti

L'area del contenuto si trova subito dopo l'intestazione nel layout di un sito. È dove viene visualizzato il contenuto principale della pagina.

Per un layout di homepage personalizzata, la sezione del contenuto può includere una call to action seguita da servizi o prodotti, testimonianze e altre informazioni importanti.

I negozi online utilizzano tipicamente quest'area per promuovere saldi in corso, prodotti in evidenza, articoli più venduti e altro ancora.

D'altra parte, un sito ricco di contenuti come un blog o una rivista può utilizzare un layout incentrato sui contenuti.

Mostrerà gli ultimi articoli con estratti e immagini, visualizzerà un modulo di iscrizione alla newsletter per creare una lista di email, o utilizzerà aree di scoperta dei contenuti per aiutare gli utenti a trovare più modi per trascorrere tempo sul sito.

Ecco come appare il layout della pagina blog di WPBeginner.

Presenta i nostri contenuti più popolari con una call to action per gli utenti per unirsi alla nostra lista email. (Vedi: altri metodi che usiamo per far crescere la nostra lista email)

Per impostazione predefinita, WordPress utilizza un layout di blog che mostra i tuoi post più recenti come pagina principale del tuo sito web.

Tuttavia, puoi modificare questa impostazione e utilizzare qualsiasi pagina singola come pagina principale del tuo sito web.

Vai alla pagina Impostazioni » Lettura e seleziona 'Una pagina statica' sotto l'opzione 'La tua homepage visualizza'.

Dopodiché, puoi scegliere una pagina da utilizzare come homepage e un'altra per la tua pagina blog.

Per maggiori dettagli, consulta la nostra guida su come creare una pagina separata per i tuoi post del blog in WordPress.

Non dimenticare di fare clic sul pulsante 'Salva modifiche' per memorizzare le impostazioni.

Ora, puoi modificare la pagina che hai scelto come homepage e creare un layout di homepage personalizzato.

Area della barra laterale (Opzionale)

Tradizionalmente, le sidebar appaiono sul lato destro o sinistro dell'area dei contenuti.

Detto questo, molti siti web moderni ora optano per layout più puliti e senza barre laterali, specialmente per le pagine aziendali e le landing page.

Barre laterali nei temi classici

Nei temi WordPress classici, le barre laterali sono aree pronte per i widget dove puoi aggiungere widget come archivi, moduli di iscrizione alla newsletter, categorie e contenuti popolari.

Troverai queste opzioni nella pagina Aspetto » Widget.

Barre laterali nei temi a blocchi

Per i temi a blocchi, le barre laterali funzionano in modo diverso. Sebbene questi temi possano includere aree per le barre laterali, utilizzano blocchi anziché widget tradizionali.

Puoi personalizzarli direttamente tramite l'Editor del sito, offrendo opzioni di design più flessibili.

Tieni presente che alcuni temi WordPress moderni potrebbero non includere affatto aree per le barre laterali, concentrandosi invece su layout a larghezza intera e focalizzati sul contenuto.

Per maggiori informazioni sull'utilizzo delle barre laterali, puoi consultare la nostra guida definitiva ai trucchi per le barre laterali di WordPress.

Area del piè di pagina

L'area del piè di pagina appare sotto l'area del contenuto nella parte inferiore del layout di una pagina.

Se utilizzi un tema WordPress con supporto per l'editor del sito, puoi modificare l'area del piè di pagina facendo clic su di essa.

È qui che lavorerai con le Parti del modello. Pensa alle Parti del modello come blocchi riutilizzabili per sezioni come l'intestazione e il piè di pagina.

La parte migliore è che puoi modificarle una volta e si aggiorneranno ovunque sul tuo sito.

Per modificare il tuo piè di pagina, vai su Aspetto » Editor per avviare l'editor del sito. Da lì, seleziona 'Modelli' dal menu a sinistra e scorri fino alla sezione 'Parti del modello' per trovare e fare clic sul tuo piè di pagina.

Durante la modifica dell'area del piè di pagina nell'editor del sito, puoi aggiungere qualsiasi blocco per visualizzare diversi elementi.

Ad esempio, puoi aggiungere un elenco delle tue pagine più importanti, mostrare un menu di navigazione, aggiungere un modulo di contatto e altro ancora.

Se stai utilizzando un tema classico, è molto probabile che venga fornito con un'area widget per il piè di pagina.

Vai semplicemente alla pagina Aspetto » Widget e cerca un'area widget nel footer.

Come per l'editor del sito, puoi usare i blocchi per aggiungere diversi elementi ai widget del footer nel tuo tema.

Ti chiedi cosa mettere nel footer del tuo sito? Consulta la nostra checklist di cose da aggiungere al footer del tuo sito WordPress.

Altri componenti di un layout WordPress

Successivamente, esamineremo alcuni dei componenti di un layout WordPress che puoi aggiungere alle sezioni header, contenuto, sidebar o footer. Questi sono i blocchi fondamentali che ti aiutano a creare un layout funzionante.

Menu di navigazione

I menu di navigazione o menu sono elenchi orizzontali o verticali di link. La maggior parte dei siti web ha almeno un menu di navigazione principale nell'area dell'header.

Tuttavia, alcuni siti web utilizzano menu di navigazione multipli nell'area dell'header.

WordPress ti consente anche di visualizzare i menu di navigazione come widget. Questi menu appaiono come un elenco verticale di link e puoi posizionarli nelle sidebar o nelle aree widget del footer.

Per maggiori dettagli, consulta le nostre guide su come aggiungere menu di navigazione in WordPress e come stilizzare i menu di navigazione di WordPress.

Widget (Temi classici)

Se il tuo tema WordPress supporta i widget, puoi usarli per riorganizzare il layout del tuo sito web. Inoltre, con i widget a blocchi, il tuo tema può ora utilizzare anche blocchi nelle aree widget.

Puoi aggiungere widget alle aree pronte per i widget o alle sidebar del tuo sito WordPress. Alcuni temi WordPress sono dotati di aree pronte per i widget multiple per aggiungere widget o blocchi.

WordPress è dotato di diversi widget e blocchi integrati che puoi utilizzare. Molti plugin popolari di WordPress forniscono anche i propri widget e blocchi.

Ad esempio, puoi usare i widget/blocchi per aggiungere elenchi di post popolari, un modulo di contatto, banner pubblicitari, feed dei social media e altro ancora.

Puoi vedere tutti questi widget visitando la pagina Aspetto » Widget nell'area di amministrazione di WordPress.

Nota: Se il tuo tema non dispone di aree widget, potresti non vedere la pagina 'Widget' nell'area di amministrazione di WordPress.

Per maggiori dettagli, consulta la nostra guida su come aggiungere e usare i widget in WordPress.

Blocchi

WordPress utilizza l'editor a blocchi per scrivere contenuti, gestire aree widget o modificare il tuo sito web. Utilizza blocchi per tutti gli elementi web comuni, motivo per cui si chiama editor a blocchi.

Questo editor è progettato per aiutarti a creare bellissimi layout per i tuoi post e pagine di WordPress utilizzando i blocchi.

Esistono diversi tipi di blocchi per gli elementi più comuni di qualsiasi tipo di contenuto. Ad esempio, puoi aggiungere paragrafi, titoli, immagini, gallerie, incorporamenti video, colonne, tabelle e altro ancora.

Questo ti permette di creare layout diversi per ogni post o pagina sul tuo sito WordPress senza installare un plugin o cambiare il tuo tema.

Nei temi a blocchi, questi stessi blocchi possono anche sostituire i widget tradizionali in aree come le barre laterali, le intestazioni e i piè di pagina.

Immagini in evidenza

Se visiti la homepage di WPBeginner, noterai immagini in miniatura accanto a ogni titolo di articolo. Queste sono chiamate immagini in evidenza.

WordPress ti permette di impostare immagini in evidenza per i tuoi post e pagine. Il tuo tema WordPress utilizza quindi queste immagini in diverse aree del tuo sito web.

Per saperne di più, consulta la nostra guida su come aggiungere immagini in evidenza in WordPress.

Immagini di copertina

Un'immagine di copertina è solitamente un'immagine ampia utilizzata come foto di copertina per una nuova sezione in un post del blog o in una pagina.

Puoi aggiungerla al tuo post o pagina utilizzando il blocco Copertina. Il blocco Copertina ti permette anche di utilizzare un colore di sfondo invece di un'immagine.

Per saperne di più, consulta la nostra guida dettagliata sulla differenza tra immagine di copertina e immagine in evidenza.

Pattern di Blocchi

I pattern sono raccolte di blocchi pre-arrangiati che puoi utilizzare per aggiungere rapidamente diverse sezioni ai tuoi layout.

Puoi usare i pattern per scrivere contenuti e modificare post e pagine.

Allo stesso modo, puoi usare i pattern nell'editor del sito completo nel tuo tema a blocchi di WordPress e nel layout del tuo sito web.

Avvia semplicemente l'editor del sito e vedrai i pattern nelle opzioni 'Design'.

Ogni pattern è una raccolta di blocchi disposti in un ordine particolare per layout di uso comune.

Il tuo tema WordPress potrebbe includere diversi pattern. Puoi anche trovare altri pattern nella Libreria Pattern di WordPress.

Vuoi salvare le tue sezioni di design? Salva le tue disposizioni di blocchi come pattern e riutilizzale in seguito.

I Block Pattern sono una potente funzionalità di WordPress e puoi trovare migliaia di opzioni gratuite nella Directory Ufficiale dei Pattern di WordPress.

Man mano che più temi e plugin di WordPress aggiungono i propri pattern, questa libreria continua a crescere.

Puoi consultare la nostra guida su come usare i block pattern in WordPress per saperne di più.

Pulsanti

I pulsanti svolgono un ruolo importante nel design e nei layout dei siti web moderni. Forniscono agli utenti una chiara call to action, che ti aiuta a far crescere la tua attività e le tue conversioni.

L'editor di blocchi predefinito include un blocco Pulsante che puoi utilizzare in qualsiasi post o pagina di WordPress o all'interno dell'editor del sito.

Il tuo tema WordPress potrebbe includere anche impostazioni per i pulsanti di call-to-action nel personalizzatore del tema. La maggior parte dei plugin per page builder WordPress più diffusi include anche pulsanti in vari stili.

Puoi persino aggiungere pulsanti clicca-per-chiamare in WordPress con un plugin.

Per maggiori dettagli, consulta la nostra guida su come aggiungere pulsanti di call-to-action in WordPress.

CSS personalizzato

Pensa a CSS (Cascading Style Sheets) come alla vernice e alle decorazioni per il tuo sito web. È il codice che controlla i dettagli visivi come colori, font e spaziatura.

Il tuo tema e i tuoi plugin WordPress vengono forniti con le proprie regole CSS, ma potresti voler cambiare piccole cose come il colore del testo o la dimensione del font. È qui che entra in gioco il CSS personalizzato.

WordPress rende semplicissimo salvare le tue regole CSS personalizzate.

Aggiungere CSS personalizzato in un tema a blocchi

Se stai utilizzando un tema a blocchi con supporto per l'editor del sito, vai alla pagina Aspetto » Editor.

Dal dashboard principale dell'editor, fai semplicemente clic sull'icona 'Stili' nell'angolo in alto a destra. Questo aprirà il pannello 'Stili' nella colonna di destra.

Da qui, scorri verso il basso e fai clic sulla scheda 'CSS aggiuntivo'. Verrà visualizzata una casella di testo in cui puoi aggiungere il tuo codice CSS.

Non dimenticare di fare clic sul pulsante 'Salva' per memorizzare le modifiche al termine.

Aggiungere CSS personalizzato in un tema classico

Se utilizzi un tema WordPress classico, puoi aggiungere il tuo CSS personalizzato nel personalizzatore del tema.

Vai semplicemente alla pagina Aspetto » Personalizza e quindi fai clic sulla scheda 'CSS aggiuntivo'.

Da qui, puoi aggiungere le tue regole CSS personalizzate e potrai vederle applicate nell'anteprima live.

Aggiungere CSS personalizzato in WordPress utilizzando un plugin

Normalmente, se si utilizzano i metodi predefiniti, il codice CSS personalizzato viene salvato con le impostazioni del tema. La modifica del tema disabiliterà il codice CSS personalizzato.

Un modo migliore per memorizzare il tuo CSS personalizzato in WordPress è utilizzare il plugin WPCode. È il miglior plugin per snippet di codice WordPress, che ti consente di aggiungere facilmente snippet di codice personalizzati senza compromettere il tuo sito.

Innanzitutto, devi installare e attivare il plugin WPCode. Per i dettagli, consulta la nostra guida su come installare un plugin WordPress.

Dopo l'attivazione, vai su Snippet di codice » + Aggiungi nuovo dalla dashboard di amministrazione di WordPress.

Quindi, passa il mouse sopra l'opzione 'Aggiungi il tuo codice personalizzato (Nuovo snippet)' nella libreria degli snippet di codice e fai clic sul pulsante 'Usa snippet'.

Successivamente, in cima alla pagina, aggiungi un titolo per il tuo snippet CSS personalizzato. Può essere qualsiasi cosa che ti aiuti a identificare il codice.

Successivamente, scrivi o incolla il tuo CSS personalizzato nella casella 'Anteprima codice' e imposta il 'Tipo di codice' scegliendo l'opzione 'Snippet CSS' dal menu a discesa.

Quindi, scorri verso il basso fino alla sezione 'Inserimento' e seleziona il metodo 'Inserimento automatico' se desideri eseguire il codice su tutto il tuo sito web WordPress.

Puoi scegliere il metodo 'Shortcode' se desideri eseguire il codice solo su pagine o post specifici.

Infine, torna in cima alla pagina, attiva l'interruttore su 'Attivo' e fai clic sul pulsante 'Salva snippet'.

Questo salverà il tuo snippet di codice CSS personalizzato.

Per saperne di più su questo argomento, consulta la nostra guida completa su come aggiungere CSS personalizzato in WordPress.

Termini di layout nei page builder di WordPress

Il modo più semplice per creare layout WordPress personalizzati per le tue landing page è utilizzare un page builder per WordPress.

Ti consigliamo di utilizzare SeedProd. È il plugin page builder per WordPress più facile da usare sul mercato.

Altri page builder utilizzano termini simili per strumenti e funzionalità comuni.

Utilizzo di modelli nei page builder di WordPress

I modelli sono il modo più rapido per creare il layout di una pagina web. Tutti i plugin per page builder più diffusi sono dotati di una serie di modelli pronti all'uso che puoi utilizzare come punto di partenza.

Ad esempio, SeedProd ha modelli per vari tipi di pagine, tra cui landing page, pagine di vendita, pagine 404, pagine "coming soon" e altro ancora.

Moduli e blocchi nei page builder di WordPress

Come i blocchi nell'editor predefinito di WordPress, anche i plugin per page builder utilizzano blocchi.

Alcuni page builder potrebbero chiamarli moduli o elementi, ma sono essenzialmente la stessa cosa.

Tuttavia, i plugin per page builder sono dotati di più blocchi rispetto all'editor predefinito. Ad esempio, SeedProd include blocchi per testimonianze, blocchi WooCommerce, Google Maps, moduli di contatto, embed di Facebook e altro ancora.

Puoi utilizzare i blocchi per creare i tuoi layout, spostarli e sperimentare per determinare cosa funziona meglio per la tua attività.

Utilizzo di sezioni nei page builder di WordPress

Simile alla funzionalità 'Modelli' nell'editor predefinito, una Sezione è un insieme di blocchi raggruppati per creare istantaneamente aree comuni di un sito web.

Ad esempio, puoi tipicamente utilizzare una sezione di intestazione, un'immagine hero, tabelle dei prezzi e altro ancora.

Diversi plugin per page builder di WordPress potrebbero utilizzare termini diversi per essi. Ad esempio, SeedProd li chiama sezioni e Beaver Builder li chiama righe e colonne salvate.

Domande frequenti

Ecco alcune domande frequenti poste dai nostri lettori sui layout di WordPress:

Qual è la differenza tra un blocco e un widget in WordPress?

I blocchi sono gli elementi costitutivi di base che utilizzi per creare contenuti nell'editor di WordPress, come paragrafi, immagini o pulsanti.

I widget venivano tradizionalmente utilizzati per aggiungere moduli di contenuto specifici ad aree esterne al contenuto principale della pagina, come barre laterali e piè di pagina.

Nei temi moderni basati su blocchi, i blocchi possono ora essere utilizzati in qualsiasi area predisposta per i widget, offrendoti molta più flessibilità e rendendo il sistema di widget classico meno comune.

Posso avere un layout diverso per ogni pagina?

Sì, assolutamente. L'editor a blocchi di WordPress ti consente di creare layout unici per ogni articolo e pagina. Puoi disporre colonne, aggiungere blocchi diversi e strutturare i contenuti come preferisci su base pagina per pagina.

Per un controllo ancora maggiore, plugin per page builder come SeedProd ti permettono di progettare pagine completamente personalizzate da zero che sono totalmente indipendenti dal layout predefinito del tuo tema.

Tutti i temi WordPress includono una sidebar?

No, non tutti i temi includono una sidebar.

Molti design moderni si concentrano su un layout pulito a larghezza intera per un'esperienza utente più focalizzata, specialmente nelle landing page e nei siti aziendali.

Tuttavia, la maggior parte dei temi multiuso fornisce ancora una sidebar come opzione che puoi abilitare o disabilitare tramite il personalizzatore del tema o l'editor del sito.

Risorse bonus

Di seguito sono riportate alcune risorse aggiuntive per principianti che coprono le basi del design di WordPress in modo più dettagliato:

• Come aggiungere contenuti fittizi per lo sviluppo di temi in WordPress
• Foglio riassuntivo dei temi WordPress per principianti
• Come trovare i file da modificare in un tema WordPress
• Guida per principianti alla gerarchia dei modelli di WordPress (Cheat Sheet)
• Come creare facilmente un tema WordPress personalizzato (senza codice)

Speriamo che questo articolo ti abbia aiutato a conoscere i termini utilizzati nei layout di WordPress. Potresti anche voler consultare la nostra guida su come imparare WordPress gratuitamente in una settimana o aggiungere ai preferiti il nostro Glossario WordPress, un dizionario di termini WordPress adatto ai principianti.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.