Termini di layout di WordPress demistificati (riferimento rapido)

State cercando di capire il significato dei termini di layout di WordPress?

Molti principianti si imbattono in termini e vocaboli relativi al layout di WordPress quando lavorano ai loro siti web. Si tratta di parole utilizzate da designer e sviluppatori, che gli utenti medi possono trovare confuse.

In questa guida vi spiegheremo alcuni dei termini più usati per il layout di WordPress. Questo vi aiuterà a capire il gergo utilizzato per i layout dei siti web WordPress e a lavorare sul vostro sito web come un vero professionista.

Perché imparare i termini di layout di WordPress?

I temi di WordPress controllano l’aspetto del vostro sito web. A seconda del tema utilizzato, è possibile personalizzarlo in vari modi.

Per i temi che supportano l’editor completo del sito, è possibile personalizzarli visitando la pagina Aspetto ” Editor .

Se si utilizza un tema classico (un tema che attualmente non supporta l’editor completo del sito), è possibile personalizzarlo visitando la pagina Aspetto ” Personalizza.

In questo modo si avvia il personalizzatore del tema, che si presenta così:

Tutti i migliori temi WordPress hanno la possibilità di modificare il design del sito web utilizzando il personalizzatore del tema o l’editor completo del sito, ma le opzioni sono limitate a seconda del tema.

Per una maggiore flessibilità è possibile utilizzare plugin di page builder di WordPress come SeedProd.

SeedProd consente di creare facilmente layout personalizzati utilizzando semplici strumenti di trascinamento senza scrivere alcun codice.

Dispone inoltre di decine di modelli da utilizzare come punti di partenza. Inoltre, SeedProd supporta WooCommerce, che vi aiuta a creare layout per il vostro negozio online.

Tuttavia, mentre lavorate alla creazione di un layout per il vostro sito web, potreste imbattervi in termini di web design che non conoscete.

L’apprendimento di questi termini relativi al layout del sito web vi aiuterà a comprendere gli elementi costitutivi del design di un sito web WordPress, in modo da poter creare più facilmente qualsiasi design possiate immaginare.

Vediamo di demistificare questi termini comuni del layout di WordPress per capire cosa significano e come utilizzarli. Ecco un rapido elenco dei concetti e dei termini che spiegheremo in questo articolo:

Capire un tipico layout di WordPress

La maggior parte dei siti web utilizza un layout molto familiare. Il suo aspetto è simile a questo:

L’area superiore di un sito web è chiamata intestazione, seguita da un’area di contenuto e da un piè di pagina in fondo alla pagina.

A seconda della pagina visualizzata dall’utente, il layout potrebbe essere diverso.

Ad esempio, una pagina di un blog WordPress può includere una barra laterale accanto all’area dei contenuti.

A questo layout di base si aggiungono altri elementi, di cui parleremo più avanti in questo articolo.

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

Intestazione nel layout di WordPress

L’intestazione in un layout WordPress è la sezione superiore di ogni pagina. Di solito contiene il logo del sito, il titolo, i menu di navigazione, il modulo di ricerca e altri elementi importanti che gli utenti devono vedere per primi.

Ecco come appare la sezione dell’intestazione su WPBeginner.

Intestazione personalizzata nei temi WordPress

Molti temi WordPress popolari sono dotati di funzioni aggiuntive per personalizzare l’area dell’intestazione del vostro layout WordPress. Questa funzione viene talvolta chiamata intestazione personalizzata.

Se si utilizza un tema a blocchi con supporto per l’editor del sito, è possibile modificare l’intestazione facendo clic sull’area dell’intestazione nell’editor del sito.

Da qui è possibile personalizzare l’intestazione a proprio piacimento. È possibile modificare i colori e il menu di navigazione e aggiungere blocchi come la ricerca, il logo del sito, i pulsanti e altro ancora.

Per i temi classici, le impostazioni dell’intestazione personalizzata si trovano nella scheda “Opzioni intestazione”.

A seconda del tema di WordPress, è possibile aggiungere un’immagine a tutta larghezza all’intestazione con una tagline o un pulsante di invito all’azione.

Alcuni temi WordPress possono consentire di modificare la posizione del logo, i menu di navigazione e le immagini dell’intestazione.

Sfondo personalizzato in WordPress

Alcuni temi WordPress consentono anche di cambiare facilmente il colore dello sfondo o di utilizzare un’immagine di sfondo per il sito web.

Se si utilizza un tema con supporto per l’editor del sito, è possibile modificare il colore dello sfondo andando su “Stili” nell’editor completo del sito.

È sufficiente scegliere l’opzione ‘Colori’ dal pannello Stili.

Successivamente, è possibile fare clic su “Sfondo” per scegliere un colore di sfondo per il sito web.

Per i temi classici, le impostazioni dipendono dalle caratteristiche del tema.

Molti temi classici sono dotati di supporto per lo sfondo personalizzato. È possibile 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 per trovarle è necessario cercare in giro.

Per maggiori dettagli, potete consultare le nostre guide all’aggiunta di un’immagine di sfondo in WordPress o alla modifica del colore di sfondo in WordPress.

Area del contenuto in WordPress

L’area dei contenuti viene subito dopo la parte dell’intestazione del layout di un sito. Qui viene visualizzato il contenuto principale della pagina.

Per un layout personalizzato della homepage, la sezione dei contenuti può includere un invito all’azione seguito da servizi o prodotti, testimonianze e altre informazioni importanti.

I negozi online di solito utilizzano quest’area per promuovere le vendite in corso, i prodotti in evidenza, gli articoli più venduti e altro ancora.

D’altro canto, un sito ricco di contenuti, come un blog o una rivista, può utilizzare un layout che si basa sui contenuti.

Mostrerà gli articoli più recenti con estratti e immagini, potrà visualizzare un modulo di iscrizione alla newsletter per creare una lista di e-mail o utilizzare aree di scoperta dei contenuti per aiutare gli utenti a trovare altri modi per trascorrere il tempo sul sito.

Ecco come appare il layout della pagina del blog di WPBeginner.

Presenta i nostri contenuti più popolari con un invito all’azione per gli utenti a iscriversi alla nostra lista e-mail. (Vedi: altri metodi che utilizziamo per far crescere la nostra lista e-mail)

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

Tuttavia, è possibile modificare questa impostazione e utilizzare qualsiasi pagina come prima pagina del sito web.

Basta andare alla pagina Impostazioni ” Lettura e scegliere “Una pagina statica” sotto l’opzione “Visualizza la tua homepage”.

Dopodiché, si può scegliere una pagina da utilizzare per la homepage e un’altra per la pagina del blog.

Per maggiori dettagli, consultate la nostra guida sulla creazione di una pagina separata per i post del blog in WordPress.

Non dimenticate di fare clic sul pulsante “Salva modifiche” per memorizzare le impostazioni.

Ora è possibile modificare la pagina scelta come homepage e creare un layout personalizzato.

Barre laterali nei layout di WordPress

Come suggerisce il nome, le barre laterali appaiono in genere sul lato destro o sinistro dell’area di contenuto.

In WordPress, le barre laterali sono anche aree pronte per i widget. Ciò significa che è possibile aggiungere widget a quest’area e visualizzare elementi come archivi, moduli di iscrizione alla newsletter, categorie, contenuti popolari e altro ancora.

Per modificare le barre laterali, è necessario andare alla pagina Aspetto ” Widget. Da qui è possibile aggiungere blocchi alle barre laterali e modificarli a proprio piacimento.

Tuttavia, non tutti i temi WordPress sono dotati di aree o barre laterali pronte per i widget.

Se non è possibile visualizzare il menu Widget in Aspetto, il tema non supporta le barre laterali o non dispone di aree pronte per i widget.

Area del piè di pagina nei layout di WordPress

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

Se si utilizza un tema WordPress con supporto per l’editor del sito, è possibile modificare l’area del piè di pagina facendo clic su di essa.

È inoltre possibile modificare l’area del piè di pagina facendo clic su “Modelli” nella navigazione dell’editor del sito. L’area del piè di pagina apparirà sotto la voce di menu “Parti del modello”.

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

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

Se si utilizza un tema classico, è molto probabile che il tema sia dotato di un’area widget per il piè di pagina.

Basta andare nella pagina Aspetto ” Widget e cercare un’area per i widget del piè di pagina.

Come l’editor del sito, è possibile utilizzare i blocchi per aggiungere diversi elementi ai widget del piè di pagina del tema.

Vi state chiedendo cosa inserire nel piè di pagina del vostro sito? Consultate la nostra lista di controllo delle cose da aggiungere al piè di pagina del vostro sito WordPress.

Altri componenti di un layout WordPress

Successivamente, esamineremo alcuni dei componenti di un layout di WordPress che si possono aggiungere alle sezioni dell’intestazione, del contenuto, della barra laterale o del piè di pagina. Questi sono gli elementi costitutivi che aiutano a creare un layout funzionante.

Menu di navigazione in WordPress

I menu di navigazione o menu sono elenchi orizzontali o verticali di collegamenti. La maggior parte dei siti web ha almeno un menu di navigazione principale nell’area dell’intestazione.

Tuttavia, alcuni siti web utilizzano più menu di navigazione nell’area dell’intestazione.

WordPress consente anche di visualizzare i menu di navigazione come widget. Questi menu appaiono come un elenco verticale di link e possono essere inseriti nelle barre laterali o nelle aree widget del piè di pagina.

Per maggiori dettagli, consultate la nostra guida su come aggiungere menu di navigazione in WordPress.

Utilizzo dei widget in un layout di WordPress

Se il vostro tema WordPress supporta i widget, potete utilizzarli per riorganizzare il layout del vostro sito web. Inoltre, con i widget a blocchi, il vostro tema può ora utilizzare anche i blocchi nelle aree dei widget.

È possibile aggiungere widget alle aree o alle barre laterali pronte per i widget del proprio sito WordPress. Alcuni temi WordPress sono dotati di più aree pronte per i widget per aggiungere widget o blocchi.

WordPress è dotato di numerosi widget e blocchi integrati che è possibile utilizzare. Anche molti dei più diffusi plugin di WordPress forniscono i propri widget e blocchi.

Ad esempio, è possibile utilizzare widget/blocchi per aggiungere elenchi di post popolari, un modulo di contatto, banner pubblicitari, feed di social media e altro ancora.

È possibile vedere tutti questi widget visitando la pagina Aspetto ” Widget nell’area di amministrazione di WordPress.

Nota: è possibile che non venga visualizzata la pagina “Widget” nell’area di amministrazione di WordPress se il tema non ha aree per i widget.

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

Utilizzo dei blocchi nei layout di WordPress

WordPress utilizza l’editor di blocchi per scrivere contenuti, gestire aree di widget o modificare il sito web. Utilizza i blocchi per tutti gli elementi web più comuni, per questo si chiama editor di blocchi.

Questo editor è stato progettato per aiutarvi a creare bellissimi layout per i vostri 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, è possibile aggiungere paragrafi, titoli, immagini, gallerie, video embed, colonne, tabelle e altro ancora.

Ciò consente di creare layout diversi per ogni post o pagina del vostro sito WordPress senza installare un plugin o modificare il tema.

Immagini in primo piano nei layout di WordPress

Se visitate la homepage di WPBeginner, noterete delle immagini in miniatura accanto al titolo di ogni articolo. Queste immagini sono chiamate immagini in evidenza.

WordPress consente di impostare immagini in evidenza per i post e le pagine. Il tema di WordPress utilizza poi queste immagini in diverse aree del sito.

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

Immagini di copertina in WordPress

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

È possibile aggiungerla al post o alla pagina utilizzando il blocco Copertina. Il blocco Copertina consente anche di utilizzare un colore di sfondo invece di un’immagine.

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

Utilizzo dei modelli nell’editor di WordPress

I modelli sono raccolte di blocchi preordinati che si possono utilizzare per aggiungere rapidamente sezioni diverse ai layout.

È possibile utilizzare i modelli per scrivere contenuti e modificare post e pagine.

Allo stesso modo, è possibile utilizzare i modelli nell’editor completo del sito nel tema e nel layout del sito WordPress.

È sufficiente lanciare l’editor del sito per vedere i modelli nelle opzioni “Design”.

Ogni schema è una raccolta di blocchi disposti in un ordine particolare per i layout più comuni.

Il vostro tema WordPress potrebbe essere dotato di diversi modelli. Potete trovare altri modelli nella libreria dei modelli di WordPress.

Volete salvare le vostre sezioni di design? Potete salvare le vostre disposizioni di blocchi come modelli e riutilizzarle in seguito.

Si tratta di una funzione relativamente nuova, per cui è disponibile una serie limitata di modelli. Tuttavia, un maggior numero di opzioni sarà disponibile man mano che altri temi e plugin di WordPress aggiungeranno i loro modelli all’editor di blocchi.

Per saperne di più, potete consultare la nostra guida sull’uso dei modelli di blocco in WordPress.

Aggiunta di pulsanti nel layout di WordPress

I pulsanti svolgono un ruolo importante nel design e nei layout dei siti web moderni. Forniscono agli utenti un chiaro invito all’azione, aiutandovi a far crescere il vostro business e le conversioni.

L’editor di blocchi predefinito è dotato di un blocco Pulsante che si può utilizzare in qualsiasi post o pagina di WordPress o all’interno dell’editor del sito.

Il vostro tema WordPress potrebbe essere dotato di un pulsante di invito all’azione nel personalizzatore del tema. Anche i più diffusi plugin di page builder per WordPress sono dotati di pulsanti in vari stili che potete utilizzare.

È anche possibile aggiungere pulsanti “click-to-call” in WordPress con un plugin.

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

Utilizzo di CSS personalizzati nei layout di WordPress

IlCSS è il linguaggio di stile utilizzato per creare siti web. Il tema e i plugin di WordPress sono dotati di regole CSS proprie, ma di tanto in tanto si possono modificare piccoli elementi come il colore del testo, la dimensione dei caratteri o il colore dello sfondo.

È qui che entra in gioco il CSS personalizzato. WordPress facilita il salvataggio delle regole CSS personalizzate.

Se si utilizza un tema con il supporto dell’editor del sito, è sufficiente andare alla pagina Aspetto ” Editor per avviare l’editor del sito.

Fare clic su qualsiasi modello per iniziare a modificarlo, quindi fare clic sul pulsante “Stile” nell’angolo superiore destro dello schermo.

Verrà visualizzato il pannello “Stili” nella colonna di destra. Da qui, scorrere verso il basso e fare clic sulla scheda “CSS aggiuntivo”.

Verrà visualizzata una casella di testo in cui è possibile aggiungere il codice CSS.

Non dimenticate di fare clic sul pulsante “Salva” per memorizzare le modifiche una volta terminate.

Se si utilizza un tema WordPress classico, è possibile aggiungere il CSS personalizzato nel personalizzatore del tema.

Basta andare alla pagina Aspetto ” Personalizzazione e cliccare sulla scheda “CSS aggiuntivi”.

Da qui è possibile aggiungere le regole CSS personalizzate e vederle applicate nell’anteprima dal vivo.

Aggiunta di CSS personalizzati in WordPress tramite un plugin

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

Un modo migliore per memorizzare i CSS personalizzati in WordPress è utilizzare il plugin WPCode. È il miglior plugin per gli snippet di codice di WordPress che consente di aggiungere facilmente snippet di codice personalizzati senza interrompere il sito.

Per prima cosa, è necessario installare e attivare il plugin WPCode. Per maggiori dettagli, consultare la nostra guida su come installare un plugin di WordPress.

Dopo l’attivazione, accedere a Code Snippets ” + Aggiungi nuovo dalla dashboard di amministrazione di WordPress.

Quindi, passare il mouse sull’opzione “Aggiungi il tuo codice personalizzato (nuovo snippet)” nella libreria degli snippet di codice e fare clic sul pulsante “Usa snippet”.

Quindi, nella parte superiore della pagina, aggiungere un titolo per lo snippet CSS personalizzato. Può essere qualsiasi cosa che aiuti a identificare il codice.

Successivamente, scrivere o incollare il CSS personalizzato nella casella “Anteprima codice” e impostare il “Tipo di codice” scegliendo l’opzione “Snippet CSS” dal menu a discesa.

Quindi, scorrere fino alla sezione “Inserimento” e selezionare il metodo “Inserimento automatico” se si desidera eseguire il codice in tutto il sito WordPress.

È possibile scegliere il metodo ‘Shortcode’ se si desidera eseguire il codice solo su pagine o post specifici.

Infine, tornare all’inizio della pagina, spostare l’interruttore su “Attivo” e fare clic sul pulsante “Salva frammento”.

In questo modo si salverà il frammento di codice CSS personalizzato.

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

Termini di layout nei costruttori di pagine WordPress

Il modo più semplice per creare layout WordPress personalizzati per le pagine di destinazione è utilizzare un costruttore di pagine WordPress.

Consigliamo di utilizzare SeedProd. È il plugin di page builder per WordPress più facile da usare per i principianti sul mercato.

Altri page builder utilizzano termini simili per strumenti e funzioni comuni.

Utilizzo dei modelli nei costruttori di pagine di WordPress

I modelli sono il modo più rapido per creare un layout di pagina web. Tutti i più diffusi plugin di page builder sono dotati di una serie di modelli pronti all’uso che possono essere utilizzati come punto di partenza.

Per esempio, SeedProd ha modelli per diversi tipi di pagine di cui potreste aver bisogno, tra cui pagine di destinazione, pagine di vendita, pagine 404, pagine coming soon e altro ancora.

Moduli e blocchi nei costruttori di pagine di WordPress

Come i blocchi dell’editor predefinito di WordPress, anche i plugin di page builder utilizzano i blocchi.

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

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

È possibile utilizzare i blocchi per creare i propri layout, spostarli e giocare per capire cosa funziona meglio per la propria attività.

Utilizzare le sezioni nei layout di WordPress

Simile alla funzione “Modelli” dell’editor predefinito, una sezione è un insieme di blocchi raggruppati per creare istantaneamente aree comuni di un sito web.

Ad esempio, è possibile utilizzare una sezione di intestazione, un’immagine eroe, tabelle di prezzi e altro ancora.

I diversi plugin per il costruttore di pagine di WordPress possono utilizzare termini diversi per questi elementi. Per esempio, in SeedProd sono chiamate sezioni, mentre Beaver Builder le chiama righe e colonne salvate.

Speriamo che questo articolo vi abbia aiutato a conoscere i termini utilizzati nei layout di WordPress. Potreste anche dare un’occhiata alla nostra guida su come imparare WordPress gratuitamente in una settimana o al nostro confronto tra le migliori società di hosting per WordPress.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.