Nei capitoli precedenti abbiamo discusso dei primi passi da intraprendere per la realizzazione di un sito web. Successivamente abbiamo visto come creare header e footer. Infine ci siamo dedicati alla creazione della pagina principale, la home page.
A questo punto, continueremo il nostro percorso andando a creare altre importanti aree del sito web, come la pagina Chi siamo, quella dei Servizi e quella dei Contatti, sempre con l’utilizzo di WordPress ed Elementor Pro.
Tabella dei Contenuti
Premessa
Poiché sarebbe alquanto inutile creare un layout completamente diverso per ogni pagina, andremo a sviluppare un modello di base che rappresenterà il punto di partenza per la creazione di tutte le nuove pagina del sito.
Prima di procedere con la creazione del modello, è necessario però creare una pagina con dei contenuti, in modo da poterla impostare come anteprima durante l’elaborazione del template.
Creare la pagina Chi siamo
quindi vai in Pagine > Aggiungi nuova, inserisci nome della pagina e testo (se non hai ancora a disposizione il testo per questa pagina, procurati per adesso un testo finto, come Lorem ipsum.
Per concludere, scegli un’immagine di copertina da impostare come Immagine in evidenza e rendi pubblica la pagina.
A questo punto, possiamo vedere come creare un template generale per le pagine del sito.
Creare il template pagine
Per prima cosa, dall’admin WordPress, vai in TEMPLATE > THEME BUILDER e clicca sul bottone NUOVO che trovi nella parte superiore della pagina.
Nel popup che appare, seleziona Pagina singola e assegna un nome al template, come ad esempio “Pagina Default” e clicca quindi su CREA TEMPLATE.
Al caricamento del page builder, vedrai apparire un secondo popup, questa volta contenente diversi modelli preimpostati della libreria di Elementor.
Adesso abbiamo diverse possibilità su come proseguire:
- scegliere e mantenere invariato un modello preimpostato
- partire da un modello preimpostato e personalizzarlo
- selezionare il modello Blank (o chiudere il popup) per costruire il template da zero
Nel nostro tutorial opteremo per la scelta numero 2, in particolare andremo a selezionare quello che attualmente è il secondo modello proposto (prima riga, seconda colonna).
Impostare la pagina di anteprima con Elementor
Il passo successivo è quello di impostare una specifica pagina come anteprima.
Clicca l’iconcina delle impostazioni, nell’angolo in basso a sinistra del page builder, e nel pannello Anteprima impostazioni imposta Pagina per la voce “Anteprima contenuto dinamico come” e dopodiché filtra e seleziona la pagina desiderata (nel nostro caso “Chi siamo”).
Fatto questo clicca su APPLICA E ANTEPRIMA.
Se hai seguito tutti i passaggi correttamente, dovresti visualizzare un layout pressoché simile a questo.
Seleziona ora il titolo della pagina Chi siamo e nota il nome dell’elemento. Come vedrai, non si tratta dell’elemento Intestazione bensì di Titolo Post.
Questo significa che il contenuto di questo elemento è dinamico, ovvero cambia in base alla pagina in cui ci si trova.
Se, ad esempio, avessimo già creato la pagina Contatti, ci basterebbe impostarla come anteprima per veder cambiare automaticamente il titolo in Contatti o Contattaci (o qualsiasi altro nome avessimo assegnato a quella pagina).
Stessa cosa vale per il testo, che non è un elemento Editor di testo, bensì è Contenuto post.
Detto questo, è ora di andare a personalizzare un po’ il nostro template.
Impostare cover dinamica
L’unico contenuto che ancora manca nella pagina, rispetto ai contenuti inseriti quando abbiamo creato la pagina Chi siamo, è l’Immagine in evidenza.
Seleziona quindi la prima sezione principale, per intenderci quella in cui è presente Titolo Post.
Modifica quindi la sezione: vai in STILE e alla voce Immagine, seleziona Tag dinamici e poi Post > Immagine in evidenza. Personalizza ora l’immagine di sfondo con lo stile che preferisci (ad es.: posizione centrata e dimensione copertina).
Ed ecco che vedremo apparire nel nostro template anche l’immagine in evidenza precedentemente caricata.
Personalizzare gli stili
Ora che tutti i contenuti previsti vengono visualizzati nel template, possiamo modificare a piacere gli stili di ciascun elemento e poi potremo considerare concluso il nostro template pagine.
Pubblicare il template pagine
Come sempre, l’ultimo passo è quello di pubblicare il template.
Clicca il bottone verde PUBBLICA, si aprirà un popup per impostare le condizioni di visualizzazione.
Come condizione seleziona INCLUDERE > PAGINE > TUTTI. Se poi vuoi essere certo che il template non venga utilizzato per alcune pagine, la home page ad esempio, aggiungi una condizione e selezione ESCLUDI > PAGINA PRINCIPALE oppure ESCLUDI > PAGINE > “nome della pagina da escludere”.
Abbiamo così terminato la creazione di un modello base di template Elementor, comune per tutte le pagine del sito. Nel prossimo articolo parleremo più nello specifico della pagina Chi siamo.
