Come creare una pagina con Elementor

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!

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

Elementor la guida definitiva

Se ti piacciono i miei articoli ho scritto un eBook per te

“Elementor: la Guida Completa”

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

Ho un favore da chiederti, se questo articolo ti è piaciuto, condividilo.

Potrebbe anche piacerti

Elementor la guida completa

Ultimi articoli

Categorie
Passa a Elementor Pro
Per il tuo hosting
Per creare la tua Privacy Policy
Copyright 2020 © Wp Semplice - Privacy Policy

Gli articoli ti sono stati utili?

Iscriviti alla newsletter per restare sempre aggiornato! 

Grazie ti contatteremo a breve