La creazione del layout di un sito web è un passaggio cruciale per garantire un'esperienza utente coinvolgente e intuitiva. Utilizzando Elementor, potente plugin di WordPress, si può personalizzare con facilità ogni dettaglio del sito. Partendo da un tema base come "Hello" è possibile sviluppare un sito personalizzato decidendo quali elementi dovranno essere presenti all'interno delle singole pagine.
In questa seconda lezione esploreremo i passaggi per creare un design accattivante e funzionale, includendo la testata (header), il menu e il piè di pagina (footer), per iniziare ad imbastire la struttura portante che darà forma al progetto.
Le impostazioni di Elementor
Partiamo dalla dashboard di WordPress all'interno della sezione "Pagine" utilizziamo la Home Page come pagina macro per creare le sezioni principali.
Una volta entrati all'interno della pagina clicchiamo su "Modifica con Elemento" per entrare nel pannello di controllo del plugin e iniziare a personalizzare la pagina.
A questo punto ci troveremo all'interno della pagina con l'aggiunta di una sidebar a sinistra che ci consente di trascinare gli elementi all'interno della pagina andando a costruire tutte le sezioni in base alle esigenze.
Prima però di concentrarci sulla creazione delle pagine è bene pensare alla creazione degli elementi fissi, ovvero quegli elementi che ritroveremo all'interno di tutte le pagine del sito web, come l'header, il menu di navigazione ed il footer.
Dal menu di sinistra clicchiamo quindi sull'icona del menu posizionato in alto a sinistra e andiamo a selezionare la voce "Impostazioni del sito”.
In questa sezione è possibile configurare le parti principali del sito web come ad esempio i colori, i font, la tipografia e decidere inoltre il layout del sito web così come di specifiche sezioni.
Personalizzazione dell'header
Selezioniamo quindi la voce "Header" e vediamo quali elementi è possibile personalizzare.
Nella prima sezione vediamo come sia possibile mostrare o nascondere gli elementi principali tra cui il logo, il motto ed il menu. Logicamente tutti questi elementi potranno servirci, quindi li lasceremo attivi.
Ci concentriamo sulle sezioni sottostanti, partendo da quella riferita al Logo. Rimpiccioliamo leggermente l'elemento per renderlo meno invadente.
Personalizzazione del menu
Passiamo ora alla sezione dedicata al menu, all'interno della quale ci viene indicato che (ovviamente) non è presente alcun menu. Possiamo infatti passare alla sua creazione mediante la voce "Vai sulla schermata Menu per crearne uno".
A questo punto veniamo rimandati alla sezione "Aspetto > Menu di WordPress" dove è possibile creare il menu. Non avendo pagine a disposizione al momento, creiamo alcune voci di esempio che successivamente aggiorneremo con le pagine che andremo a realizzare.
Assegnamo la Home Page al menu ed inseriamo alcuni "Link personalizzati” come voci di esempio. Quando pronto ricordiamoci di selezionare il posizionamento del menu in maniera da renderlo visibile all'interno del sito. Nel nostro caso selezioniamo come posizione "Header".
Salviamo il menu e prima di ritornare all'interno delle configurazioni di Elementor andiamo ad impostare la pagina Home come prima pagina del sito. Ci spostiamo quindi all'interno di "Impostazioni > Lettura" ed impostiamo come prima pagina del sito la Home Page.
A questo punto possiamo tornare all'interno delle impostazioni globali di Elementor ed aggiornare la pagina per vedere il nuovo menu di navigazione all'interno del sito.
A questo punto potremo quindi agire sulla personalizzazione delle voci di menu decidendo il colore, il font ed anche la trasformazione in versione mobile. Di quest'ultima parleremo all'interno delle prossime lezioni, per il momento lasciamo le impostazioni di default.
Personalizzazione del footer con Elementor
Una volta stabilito lo stile del logo, del menu e della sezione header possiamo salvare e passare alla configurazione del footer.
All'interno di questa sezione, seguendo il modello delle impostazioni della sezione precedente è possibile impostare la grandezza e la visibilità degli elementi che riteniamo essere ottimizzati per la user experience.
Dopo aver creato la testata, il menu e il piè di pagina, è importante effettuare una revisione per assicurarsi che il design sia coerente e funzionale su tutti i dispositivi. Utilizziamo la modalità di anteprima di Elementor per visualizzare il sito su diverse risoluzioni e correggere eventuali problemi di layout o compatibilità.
Insomma, la creazione dell'aspetto del sito web con Elementor sul tema base "Hello" è un processo intuitivo e altamente personalizzabile. Come abbiamo visto, utilizzando gli strumenti forniti da Elementor è possibile creare una testata, un menu e un piè di pagina accattivanti e funzionali. Essi contribuiranno a fornire un'esperienza utente positiva e coinvolgente oltre che permettere la creazione di un sito web in linea con la nostra creatività.
