Nella terza lezione della nostra guida dedicata alla creazione di un sito web con WordPress ed Elementor, approfondiremo ulteriormente il processo di sviluppo, concentrandoci specificamente sulla creazione della Home Page. Dopo aver definito gli elementi fondamentali come l'header, il menu di navigazione e il footer, ora passeremo a progettare la parte più visibile e centrale del nostro sito.
Inizieremo esplorando le varie sezioni che desideriamo includere nella nostra Home Page, considerando elementi come i testi, le immagini, i video e altro ancora. Utilizzeremo gli strumenti forniti da Elementor per trascinare e posizionare gli elementi desiderati sulla pagina, garantendo una disposizione armoniosa e intuitiva. Durante il processo, approfondiremo anche l'utilizzo di widget e moduli specifici offerti dal plugin per arricchire il design e la funzionalità della Home Page. Esploreremo le opzioni di personalizzazione, inclusi colori, font e spaziatura, per assicurarci che il design rispecchi pienamente l'identità e gli obiettivi del nostro sito.
Mettiamoci quindi al lavoro.
Creazione della pagina
Per prima cosa se non l'avessi ancora fatto devi creare la pagina che diventerà, appunto, la Home Page. Andiamo quindi in "Pagine" nella sidebar della bacheca di WordPress e creiamo una nuova pagina alla quale assegniamo il nome di "Home Page".
Dopodiché impostiamo la pagina per fare in modo che sia effettivamente la prima che si aprirà quando qualcuno visiterà il nostro sito. Andiamo in "Impostazioni >“Lettura" e selezioniamo la pagina Home come prima pagina.
Fatto ciò, quando un utente visiterà il nostro sito web la prima pagina che si aprirà in automatico sarà proprio la nostra Home Page.
Personalizzazione della Home page
Ora che abbiamo impostato la Home del sito è tempo di passare alla personalizzazione. Ritorniamo all'interno della pagina: abbiamo la possibilità di modificarla direttamente tramite Elementor.
Clicchiamo quindi sulla voce "Modifica con Elementor" e siamo pronti per passare alla creazione di una pagina con il plugin. Vediamo infatti che a sinistra ci viene proposto il menu dedicato alla costruzione della pagina, mentre a destra abbiamo l'anteprima del risultato finale.
Elementor e modifica delle pagine Web
Elementor è un plugin per WordPress che semplifica la creazione di pagine web attraverso un'interfaccia drag-and-drop intuitiva. Possiamo infatti aggiungere elementi come testo, immagini e pulsanti e personalizzarli con facilità, senza la necessità di scrivere codice. L'estensione offre una vasta gamma di modelli predefiniti e blocchi di contenuto per accelerare il processo di progettazione. Le modifiche possono essere visualizzate in tempo reale, consentendoci di vedere immediatamente l'aspetto finale della pagina sul nostro sito web.
Prima di iniziare con l’inserimento degli elementi proposti dal plugin dobbiamo definire la struttura delle varie sezioni. Quindi clicchiamo sull'icona "+" e scegliamo quali caratteristiche dovrà avere la nostra prima sezione.
Decidiamo che essa si estenderà per il 100% della pagina, scegliamo quindi la prima tipologia di struttura.
Ora che abbiamo scelto quale grandezza avrà la sezione che conterrà i nostri elementi possiamo passare all'inserimento dei contenuti. Aggiungiamo una prima intestazione trascinando l'elemento dal menu di sinistra nella nostra nuova sezione.
A questo punto sarà possibile modificare il contenuto del testo scrivendo un titolo personalizzato. Potremo personalizzare questo elemento attraverso le impostazioni del menu "Stile".
Il vantaggio di Elementor sta proprio nel fornire elementi basici dai quali partire per poi permetterci di personalizzarli a nostro piacimento in base alle varie necessità. Procediamo quindi con l'inserimento di un testo a seguito del titolo introduttivo. Scegliamo l'elemento "Editor di Testo" ed inseriamolo nella nostra sezione.
Inseriamo il testo in base alle nostre necessità e definiamo lo stile.
Ora inseriamo un altro tipo di elemento ovvero l'immagine. Anche in questo caso possiamo trascinare l'elemento in questione nella nostra pagina esattamente come fatto in precedenza per gli elementi titolo e testo.
Sempre attraverso le impostazioni possiamo caricare la nostra immagine e modificarne le caratteristiche, come per esempio larghezza e altezza.
Inserire una sezione a due colonne
Ora possiamo passare all'inserimento di una nuova sezione divisa in due colonne per movimentare la UX del nostro sito web. Aggiungiamo quindi una nuova sezione composta da due colonne.
Procediamo ad inserire nuovamente intestazione e un breve testo introduttivo. L'obiettivo è quello di usare queste sezioni come anteprima delle pagine del nostro sito con l'aggiunta di un collegamento ipertestuale rapido alle pagine interne.
Per inserire un pulsante che rimandi alle pagine interne usiamo il tasto dedicato e inseriamo il link alle pagine assegnandogli poi uno stile.
Una galleria di base
Aggiungiamo infine una sezione dedicata al portfolio dove andremo ad inserire le fotografie di alcuni nostri lavori al fine di presentare un'anteprima. Scegliamo quindi lo strumento "Galleria di base".
Selezioniamo le immagini desiderate e creiamo la galleria assegnando le impostazioni che preferiamo. Ti consiglio di attivare inoltre la funzione lightbox che consentirà di aprire le immagini in sovraimpressione e di scorrerle attraverso navigazione interattiva.
Possiamo ora aggiungere un titolo di introduzione ed il pulsante che sarà collegato alla pagina interna del portfolio.
Suddividere le sezioni della Home Page con Elementor
Infine, per suddividere meglio le sezioni, inseriamo l'elemento "Distanziatore" tra una sezione e l'altra assegnando un margine che creerà una migliore armonia e amplierà lo spazio visivo.
A questo punto siamo pronti per salvare la pagina e visualizzare il risultato finale del nostro lavoro.
