Modificare una pagina con Elementor

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.

Sommario

Creiamo una pagina

Per prima cosa come creare una nuova pagina, aggiungere il titolo, salvare la bozza con Elementor.

Sai cos’è Elementor (vedi link)? 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)

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.

I template hanno varie categorie Homepage, Page etc. Io ho scelto la homepage. Il page-builder divide la pagina in sezioni al cui interno ci sono le colonne e all’interno di quest’ultime i Widget.

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 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.

Nel video qui sotto ti mostro tutto

Inserire Video con elementor

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

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

Editor di testo 

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

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

Colonne

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 ImmagineIntestazioneTesto 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 

Siamo arrivati alla fine di questo articolo. 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 guarda la guida comleta:

Se hai dubbi puoi scrivere un commento qui sotto e ti risponderò il prima possibile oppure iscriverti alla nostra email dove potrai chiedere aiuto.

Alla prossima!!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

×

Assistenza WhatsApp!

Per informazioni, assistenza e richiesta appuntamenti clicca sotto o manda una email a info@vitalianoalbertidesign.it

×