Termini di layout di WordPress demistificati (riferimento rapido)

Capire i termini del layout di WordPress può essere difficile per i principianti. Durante l’elaborazione in corso del vostro sito, potreste imbattervi in termini usati da designer e sviluppatori che all’inizio sembrano confusi.

Abbiamo visto molti utenti di WordPress lottare con queste parole tecniche, ma una volta compreso il loro significato, diventa molto più facile navigare nel vostro sito WordPress. Conoscere i termini giusti vi aiuterà anche a comunicare più efficacemente con sviluppatori e designer.

In questa guida, vi faremo scendere i termini più comunemente usati per il layout di WordPress. Grazie a questo rapido referer, sarete più sicuri di gestire il layout del vostro sito web come un professionista.

Perché imparare i termini di layout di WordPress?

I temi di WordPress controllano l’aspetto e il layout del sito web. A seconda del tema, è possibile personalizzarlo in diversi modi.

È possibile personalizzare i temi che supportano l’editor completo del sito 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.

SeedProd ha anche decine di template da utilizzare come punto di partenza. Supporta WooCommerce, che vi aiuta a creare layout per il vostro negozio online.

Tuttavia, durante la creazione del layout di un sito web, potreste imbattervi in termini di web design poco familiari.

Imparare questi termini sul layout dei siti web vi aiuterà a comprendere gli elementi costitutivi del design di un sito web WordPress, consentendovi di 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 includono caratteristiche aggiuntive per personalizzare l’area dell’intestazione del layout di WordPress, che a volte viene 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.

Le impostazioni personalizzate dell’header si trovano nella scheda “Opzioni header” dei temi classici.

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 si trova subito dopo l’header nel layout di un sito. È il luogo in cui 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.

Potrà mostrare gli articoli più recenti con riassunti e immagini, visualizzare un modulo di iscrizione alla newsletter per creare una mailing list 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.

Andare alla pagina Impostazioni ” Lettura e selezionare “Una pagina statica” sotto l’opzione “Visualizza la tua homepage”.

Successivamente, è possibile scegliere una pagina da utilizzare come 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, 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 sia dotato di un’area widget per il footer.

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: se il tema non dispone di aree per i widget, è possibile che non venga visualizzata la pagina “Widget” nell’area di amministrazione di WordPress.

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 pattern per scrivere contenuti e modificare pagine e post.

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 caratteristica relativamente nuova, per cui è disponibile una serie limitata di pattern. Tuttavia, man mano che altri temi e plugin di WordPress aggiungeranno i loro pattern all’editor a blocchi, saranno disponibili altre opzioni.

Per approfondire, potete consultare la nostra guida sull’uso dei pattern 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 invito all’azione cancellato, che aiuta a far crescere il 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 tema di WordPress può anche includere le impostazioni dei pulsanti di invito all’azione nel personalizzato del tema. I più diffusi plugin per il builder di pagine di WordPress includono anche pulsanti in vari stili.

È 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 cliccare sul pulsante “Salva” per memorizzare le modifiche una volta terminate.

Se si utilizza un tema classico di WordPress, è possibile aggiungere i CSS personalizzati 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 rompere 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 verso il basso fino alla sezione “Inserimento” e selezionare il metodo “Inserimento automatico” se si desidera eseguire il codice in tutto il sito web di WordPress.

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

Infine, restituire la pagina in alto, attivare/disattivare l’interruttore e fare clic sul pulsante “Salva snippet”.

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.

SeedProd, ad esempio, dispone di template per vari tipi di pagine, tra cui landing page, 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 layout personalizzati, spostarli e sperimentare per determinare ciò che 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 header, un’immagine eroe, tabelle di prezzi e altro ancora.

I diversi plugin per la creazione di pagine di WordPress possono utilizzare termini diversi. Ad esempio, SeedProd li chiama sezioni, mentre Beaver Builder li chiama disponi in riga e colonne salvate.

Risorse bonus

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

• Come aggiungere contenuti fittizi per lo sviluppo di temi in WordPress
• Scheda informativa sui temi di WordPress per i principianti
• Come trovare i file da modificare nel tema di WordPress
• Guida per principianti alla gerarchia dei template di WordPress (scheda informativa)
• Come creare facilmente un tema personalizzato per WordPress (senza alcun codice)

Speriamo che questo articolo vi abbia aiutato a conoscere i termini utilizzati nei layout di WordPress. Potreste anche voler selezionare la nostra guida su come imparare WordPress gratuitamente in una settimana o mettere tra i preferiti il nostro Glossario di WordPress, un dizionario dei termini di WordPress adatto ai principianti.

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