Vuoi creare una pagina che attragga il tuo visitatore?
In questo articolo inizieremo ad utilizzare i widget di Elementor per costruire una pagina che sia visivamente attraente per i visitatori del tuo sito
Quello che imparerai ti consentirà di aumentare i visitatori del sito perché un sito ben fatto e visivamente gradevole aumenta la possibilità che gli utenti ritornino a farti visita.
Come sviluppatore di siti web mi trovo spesso ad aiutare clienti che mi chiedono di risolvere i problemi più disparati.
Per anni cercavo in rete come aiutarli e principalmente trovavo articoli di autori con competenze ma che non riuscivano alla fine a farmi capire come risolvere il problema.
Ho dunque creato questo blog per aiutare sviluppatori come me dando un valore pratico e non teorico per risolvere facilmente i problemi.
Sei pronto?
Partiamo!
Sommario
Creiamo una pagina
Per prima cosa crea una nuova pagina, aggiungi il titolo, salvala come bozza e clicca su modifica con Elementor.
Sai cos’è Elementor?
Ne ho parlato nell’articolo Conosci Elementor
Prima di proseguire facciamo un rapido excursus
Elementor è un plugin che ti consente di creare una pagina di WordPress in maniera semplice, attraverso un editor visuale e la funzione Drag&drop( trascina e posiziona)
Bene se vuoi rinfrescarti la memoria ti consiglio di leggere prima l’articolo su Elementor
Torniamo alla creazione della pagina
Ora puoi decidere se scegliere di utilizzare un template di Elementor come base di partenza oppure iniziare a creare la struttura
Nel video qui sotto ti mostro i passaggi
Template
Iniziamo con scegliendo un template, in questo articoli invece vedremo come costruire una pagina da zero
Scegliamo un template in questo caso io sceglierò questa Homepage study
I template hanno varie categorie Homepage, Page etc
Io ho scelto la homepage
Come ti ho detto nell’articolo “Conosci Elementor?” il page-builder divide la pagina in sezioni al cui interno ci sono le colonne e all’interno di quest’ultime i Widget
Questo template è diviso in 5 sezioni
Iniziamo a studiare la prima sezione
Come puoi vedere questa sezione ha un’immagine come sfondo e due colonne
In una colonna c’è un Widget video e nell’altra c’è il Widget testo e un pulsante con una call action
Esaminiamo la sezione
Per fare questo andiamo in alto sulla cornice e clicchiamo su modifica sezione
Nella colonna sinistra di Elementor ci apparirà il menu layout
In questo menu possiamo vedere come è fatta la struttura, modificare la larghezza del contenuto lo spazio delle colonne etc
Passiamo ora al menù stile
Qui troviamo l’immagine di sfondo
Come vedi l’immagine è chiara
Ti stai chiedendo come creare o eliminare il livello viola sull’immagine?
Semplice continua a scorrere il menu stile e trovi la voce Sfondo Overlay
Scegli il colore, in questo caso è stato scelto il viola e poi scegli il grado di opacitÃ
Passiamo al menu avanzato
Qui puoi impostare i margini di questa sezione e il rientro che in questo caso è impostato a 200 sopra e sotto
Nel video qui sotto ti mostro tutto
Esaminiamo ora le colonne di questa sezione
Nella prima colonna è inserito il Widget Video
Con Elementor possiamo scegliere di inserire video caricati su diverse sorgenti (Youtube, Vimeo, Dailymotion) oppure un video caricato sul tuo sito WordPress
Oltre questo Elementor ci consente di impostare altre opzioni:
- autoplay: per far partire il video in automatico all’apertura della pagina
- silenzioso: il video parte con l’audio disattivato
- ciclico: il video una volta arrivato alla fine ricomincerà da capo
Le altre funzioni invece variano a seconda della sorgente utilizzata
Nel menù Stile possiamo impostare le proporzioni del video
Mentre nel menù Avanzato possiamo impostare i margini del video rispetto alla colonna e il rientro
Le altre funzioni le vedremo più avanti
Passiamo ora alla seconda colonna
Prima di vedere il testo diamo uno sguardo alle opzioni della colonna
Nel menù layout possiamo sceglie la dimensione in percentuale di una colonna rispetto all’altra
Possiamo decidere la posizione del contenuto etc
Nel menù Stile possiamo scegliere tipo di sfondo della colonna, ma questo lo vedremo in un’altra parte del template
Diamo un occhiata al Widget testo o meglio ai Widget testo perché la pagina ne contiene due
Il primo è il Widget Intestazione che è utilizzato per il titolo della colonna
Il secondo è il Widget Editor di testo
Questi due Widget possono sembrare simili ma non lo sono, scopriamo perché
Partiamo dal Widget Intestazione
Nel menù Contenuto di questo Widget troviamo un campo titolo dove inserire il titolo del paragrafo
Possiamo aggiungere un link cosi da rendere cliccabile il titolo
Inoltre possiamo scegliere la dimensione il tag HTML ,in questo caso è impostato come H2 e l’allineamento (sinistra, centro, destra e giustificato)
Nel Stile troviamo le impostazioni di Colore, Tipografia, Ombra del testo e Modalità di fusione
Il menù Avanzato invece avrà tutte le impostazioni che abbiamo visto per gli altri Widget
Il Widget Editor di testo è un po’ diverso
Come vedrai nel video qui sotto è presente un vero e proprio editor che ci consente di editare il testo cosa che non possiamo fare nell’intestazione
Nel menù Stile sarà possibile allineare il testo scegliere il colore e modificare le dimensioni, il font etc del testo
Nel prossimo articolo continueremo a studiare le altre sezioni di questo template e poi passeremo a costruire una pagina da zero
Come ti ho detto all’inizio di questo articolo Elementor divide la pagina in sezioni così da rendere più semplice l’inserimento dei widget
La struttura di questa sezione è a due colonne
Nella prima colonna troviamo il Widget Riquadro Icona
Questo Widget permette di inserire un’icona un titolo e una descrizione.
E’ possibile scegliere l’icona che preferisci nel menu Contenuto del Widget.
Alla voce Visualizza dello stesso menu puoi scegliere come visualizzare l’icona (predefinito, impilato e incorniciato)
Infine è possibile scegliere la posizione dell’icona
Nel menu Stile come sempre abbiamo le impostazioni che riguardano i colori dell’icona e del testo
Le impostazioni di stile e quelle avanzate hanno una base comune per tutti i Widget poi a seconda del tipo di Widget possono esserci impostazioni particolari
Nel video qui sotto ti mostro il Widget Riquadro Icona e come riprodurre lo stesso contenuto in un’altra sezione
Nella seconda colonna di questa sezione c’è il Widget Immagine
Le impostazioni del menu Contenuto sono molto semplici
Scegli l’immagine, l’allineamento dell’immagine, la didascalia e la possibilità di inserire un link per rendere l’immagine cliccabile
Anche il menu Stile ha delle impostazioni molto semplici
Le uniche impostazioni interessanti sono la possibilità di di opacizzare l’immagine e i filtri css
Utilizzando il cursore della voce Opacità è possibile opacizzare l’immagine
Con i Filtri CSS invece è possibile sfocare l’immagine, aumentare o diminuire la luminosità , il contrasto, la saturazione e aggiungere un filtro colore
Passiamo ora ad analizzare la terza sezione
In questa sezione troviamo un Widget Intestazione di cui abbiamo già parlato e un Widget Sezione Interna
Il Widget Sezione Interna ci permette di creare all’interno della sezione principale una sottosezione
Le impostazioni della sezione interna non avranno effetto sulla sezione principale ma solo sulla sottosezione
E’ utile usare la Sezione interna quando dobbiamo creare delle colonne ma abbiamo bisogno di inserire un Widget per esempio l’intestazione nella sezione principale
Facciamo un esempio per chiarire meglio
Se creiamo una sezione con due colonne poesia inserire il Widget Intestazione solo nelle singole colonne e non nella sezione
Se invece creiamo una sottosezione possiamo inserire il Widget Intestazione nella sezione principale
Analizziamo i Widget utilizzati nelle colonne
Le tre colonne utilizzano gli stessi Widget che sono Immagine, Intestazione, Testo e Icone Social
Per avere un riquadro immagine rotondo non bisogna fare altro che andare nel menu Stile dell’immagine e impostare a 100 il raggio del bordo.
L’ultima cosa che voglio mostrarti è come creare lo stesso effetto di queste colonne
Basta cliccare sulle impostazioni della colonna e andare nel menu stile inserire uno sfondo bianco
Poi nel menu Avanzato impostare il margine di destra a 30 e il rientro 50, 25, 50, 25 fai questo per ogni colonna ed ecco replicata la stessa sotto sezione
Siamo arrivati alla fine di questo articolo e dell’analisi di questo template
le altre sezioni del template utilizzano gli stessi Widget per cui non è necessario continuare con l’analisi
Se vuoi creare una pagina da zero una pagina da zero leggi l’articolo Come creare una pagina con Elementor partendo da zero
Se hai dubbi puoi scrivere un commento qui sotto e ti risponderò il prima possibile oppure iscriverti alla nostra community Facebook dove potrai chiedere aiuto.
Alla prossima!!
