Tutorial su Elementor WordPress | Una guida passo passo nel 2024

Vuoi iniziare con Elementor e stai cercando un file Tutorial su Elementor WordPress? La tua ricerca finisce qui. In questo articolo ti informerò su tutte le cose che devi sapere su Elementor.

Dall'installazione alla creazione di una pagina altamente elegante, tutti i tuoi dubbi saranno risolti se leggi l'articolo. Ti assicuro; la lettura non sarà vana!

Ma hai bisogno di un plugin per la creazione di siti web per dare un tocco professionale al tuo sito web.

Come lo ottieni? Bene, lo uso Elementor per quello. Elementor mi rende estremamente semplice la creazione di un sito Web professionale tramite la semplice funzionalità di trascinamento della selezione. 

Curioso di saperne di più su Elementor, quindi dai un'occhiata al mio articolo dettagliato Recensione di Elementor.

Come installare Elementor su WordPress

Bene, ci sono 2 modi in cui puoi installare Elementor su WordPress. 

• Tramite il sito ufficiale di Elementor

Vai al sito Web ufficiale di Elementor e fai clic sul pulsante Download gratuito mostrato sul sito Web. 

Non appena fai clic sul pulsante Download gratuito, verrà visualizzato un popup per iscriverti al sito Web di Elementor e, una volta fatto lo stesso, il plug-in inizierà automaticamente il download.

Troverai un file zip scaricato sul tuo portatile/Pc. Ora vai alla dashboard di WordPress e fai clic sulla sezione Plugin > Aggiungi nuovo plugin > Carica plugin

Scegli il file Elementor e caricalo su WordPress.

• Tramite la dashboard di WordPress

Puoi installare il plugin Elementor anche direttamente dalla dashboard di WordPress. Basta andare su Plugin e poi su Aggiungi nuovo plugin

Nell'angolo in alto a destra troverai una barra di ricerca, digita Elementor nella barra di ricerca. Il primo risultato è ciò che devi installare nel tuo WordPress. Basta fare clic su Installa e attendere che il plug-in venga installato. Attiva il plugin e avrai un ottimo costruttore di siti web pronto per la distribuzione.

Ora che hai installato Elementor nella dashboard di WordPress, diamo un'occhiata alle funzionalità che offre.

Funzionalità di Elementor e loro utilizzo nella creazione di una pagina Web

L'elenco delle funzionalità fornite da Elementor è infinito, quindi discuterò di molte funzionalità vitali di Elementor. Assicurati di leggerli e poi provarli.

Esistono due piani per Elementor The Free e The Pro. Come suggerisce il nome per il piano Pro, dovrai giocare, ma ci sono diverse funzionalità incluse anche nel piano gratuito.

Inizierò discutendo prima le funzionalità del piano gratuito, seguito da quello Pro.

Funzionalità del piano gratuito di Elementor

Caratteristiche essenziali:

• Drag and Drop

La funzionalità di trascinamento della selezione di Elementor è molto veloce e ti aiuta a progettare più velocemente le pagine Web. Dalla creazione del layout di una pagina web alla messa a punto, tutto può essere fatto semplicemente trascinando e rilasciando.

Non è necessario cambiare scheda o modificare la pagina per progettare intestazioni e piè di pagina. Con Elementor, puoi farlo sulla stessa pagina in cui si trova la tua pagina web principale.

Puoi copiare e incollare, persino duplicare lo stile o la funzionalità che desideri utilizzare. Ciò ti farà risparmiare tempo nel ricostruire la stessa funzionalità più e più volte.

Con l'opzione della barra di ricerca fornita da Elementor, puoi navigare facilmente nel sito Web e raggiungere la scheda desiderata in pochi secondi. Questa funzionalità è davvero utile quando hai una pagina molto lunga da creare.

Ci sono 3 opzioni per salvare il tuo progetto, dall'eliminazione all'ottenimento di un backup. Puoi ripetere/annullare i disegni che hai realizzato. Questo ti dà la possibilità di effettuare una sorta di test A/B sulla pagina con le tue osservazioni. 

Puoi visitare tutte le revisioni nella scheda revisione, ovvero puoi dare un'occhiata a tutti i tipi di design che hai provato finora sulla tua pagina web e selezionare anche una versione precedente se non ti piace la tua pagina web attuale. 

Vuoi provare molte funzionalità diverse e vedere cosa funziona? Nessun problema con Elementor; puoi progettare la pagina in modalità bozza, provare tutto e riprendere la pagina in un secondo momento quando sarai completamente pronto per pubblicare la pagina.

Come utilizzare la funzione Trascina e rilascia di Elementor

Tutte le funzionalità di trascinamento della selezione sono disponibili sul lato sinistro della pagina non appena crei una pagina.

Dopo aver creato una pagina su WordPress e averle assegnato un titolo, basta fare clic su modifica con Elementor, che ti porterà all'editor live di Elementor, che assomiglia all'immagine qui sotto.

Nella seconda immagine sopra, puoi guardare le opzioni di trascinamento della selezione sul lato sinistro della pagina. Ci sono molti widget che devi solo scorrere verso il basso oppure puoi anche cercare un widget con l'aiuto della barra di ricerca in alto.

• modelli di progettazione

Ottieni modelli di progettazione integrati con Elementor. Non solo 5 o 10, ma Elementor ti offre oltre 100 modelli di design utilizzabili gratuitamente e altro ancora quando esegui l'aggiornamento alla versione Pro.

Come selezionare il modello desiderato per la libreria di modelli Elementor

Quando vedi aperta per la prima volta la pagina del builder Elementor, vedrai qualcosa del tipo mostrato di seguito:

L'immagine è presa dal sito Web di Elementor ed è piuttosto autoesplicativa.

Non appena fai clic sull'opzione Cartella, vedrai un pop-up mostrato di seguito.

• widget

I widget drag and drop forniti con Elementor sono innumerevoli. Alcuni di loro sono:

• Sezione interna: dividiamo una sezione in due.
• Intestazione: trascina questo campo nella tua pagina web per inserire un'intestazione accattivante
• Immagine: inserisci immagini sulla tua pagina web con l'aiuto di questo widget
• Editor di testo: inserisci il testo nella tua pagina web con l'aiuto di un widget editor di testo
• Video: puoi utilizzare un widget Video per inserire video di qualità sulla tua pagina. Aumenterà l'esperienza dell'utente
• Pulsante: gli inviti alle azioni sono molto importanti per quasi tutto il sito, con i pulsanti puoi inserire gli inviti alle azioni sulla tua pagina e collegarli alla pagina di destinazione del prodotto.
• Valutazione a stelle: la valutazione a stelle è utile per qualsiasi sito di e-commerce per assegnare una valutazione a diversi prodotti che ha da offrire.
• Divisore: aiuta la tua pagina web nel rientro e genera spazio bianco per migliorare l'esperienza dell'utente.
• Icone: con il widget icone, puoi inserire icone accattivanti dei social media e di diversi servizi per rendere la tua pagina più attraente.
• Contatore: crea un timer per il conto alla rovescia per i tuoi prodotti o servizi aggiuntivi limitati per creare urgenza.
• Testimonianze: aggiungi testimonianze sui tuoi prodotti e servizi per creare fiducia tra i visitatori del tuo sito web.

Oltre a questo, ci sono molti altri widget come carosello di immagini, galleria di base, schede, codici brevi, HTML, barra dei menu, ecc. Assicurati di controllare tutte le funzionalità dopo aver installato il plugin su WordPress.

Dai un'occhiata ad alcuni dei widget che Elementor ha sotto nell'immagine.

Come utilizzare i widget Elementor

Per utilizzare i widget Elementor:

Vai alla dashboard di Elementor e guarda sul lato sinistro della pagina. Esistono numerosi widget che puoi trascinare e rilasciare sulla tua pagina Web e iniziare il tuo lavoro.

• Progettazione e modifica responsive

Con l’arrivo alla ribalta della regola dell’indice mobile-first, Google si assicura che il sito ottimizzato per i dispositivi mobili si posizioni solo più in alto su Google, e lo stesso vale ora per le altre SERP. 

Con Elementor, non devi preoccuparti della compatibilità con i dispositivi mobili poiché tutti i modelli, gratuiti o a pagamento, sono reattivi sia per i dispositivi mobili che per tablet e desktop. Puoi anche modificare quali funzionalità vedranno i tuoi utenti quando accedono da dispositivo mobile o desktop. 

Puoi offrire loro esperienze diverse su entrambi i dispositivi, anche se questa pratica non è consigliata poiché a volte potrebbe creare confusione nella mente degli utenti riguardo al marchio.

Come visualizzare la reattività mobile delle tue pagine web

Nella parte inferiore del generatore di pagine web, nell'angolo in basso a sinistra, vedrai tre icone che hanno un'opzione per vedere la tua pagina web tramite desktop, tablet e dispositivo mobile. Il sito apparirà esattamente lo stesso per gli altri utenti dopo aver pubblicato il tuo sito web.

Funzionalità del flusso di lavoro:

• Nessun requisito di codifica

Non è necessario essere un esperto o conoscere un po' la codifica durante l'utilizzo Elementor. Tutti i widget sopra menzionati possono essere trascinati e rilasciati e con essi puoi facilmente creare una pagina Web elegante e di fascia alta. 

L'Elementor stesso si occupa della parte di codifica. Non solo, il codice utilizzato è ottimizzato e accorciato in modo da ridurre il tempo di caricamento della tua pagina web, un fattore molto importante per posizionarsi in cima.

• Barra di navigazione

Con l'aiuto della navigazione puoi vedere la struttura che hai progettato sulla pagina web, ovvero la sequenza della tua pagina e il flusso. Puoi modificare, rimuovere e duplicare i widget se lo desideri anche tramite la barra di navigazione.

Come utilizzare la barra di navigazione

Per utilizzare il Navigatore, fai semplicemente clic con il pulsante destro del mouse sul backend della tua pagina web aperta con Elementor e fai clic su Navigatore. Apparirà un pop-up, come mostrato nell'immagine qui sotto.

• tasti di scelta rapida

I tasti di scelta rapida sono i tasti di scelta rapida per i widget principali presenti nella dashboard di Elementor. Dai un'occhiata all'immagine per vedere alcuni dei tasti di scelta rapida preimpostati.

• Funzionalità di modifica in linea

Con Elementor, non è necessario scrivere i tuoi contenuti altrove e copiarli e incollarli e modificarne lo stile. Puoi digitare direttamente sulla dashboard di WordPress con lo stile desiderato e risparmiare tempo prezioso.

Caratteristiche del progetto

• Caratteri globali

Con l'aiuto di Elementor, puoi impostare uno stile di carattere particolare per l'intero sito web con un solo clic. Non importa se si tratta di un titolo, di un paragrafo, di una citazione o anche di un invito all'azione. 

• Colori globali

Allo stesso modo, una volta impostato il carattere globale, puoi impostare lo stesso colore dell'intero testo del tuo sito web, se necessario.

• Sfumature di sfondo

Con la funzione colore sfumato, puoi illuminare lo sfondo impostato per ciascun blocco e persino la tua home page. Questi colori sfumati si applicano a ogni pagina che hai sul tuo sito web.

• Video di sfondo

Puoi utilizzare i video come sfondo con Elementor. I video in background potrebbero davvero illuminare la tua pagina web.

Come utilizzare le funzionalità di progettazione in Elementor

Tutte le funzionalità sopra menzionate possono essere facilmente trovate nella dashboard di Elementor e puoi utilizzarle semplicemente facendo clic e testando ciò che sembra buono sulla tua pagina web.

• Altre caratteristiche
• Applica sovrapposizione di sfondo
• Metti la presentazione in background
• Crea una tela per rendere viva la tua pagina
• Utilizza le modalità di fusione
• Filtri di stile CSS
• Divisori di forma
• Ombra della scatola
• ICONS
• Esporta icone SVG da altri siti web

Caratteristiche dell'impaginazione

Puoi modificare il layout della pagina web e ottimizzarlo per avere un bell'aspetto con varie funzionalità Elementor fornisce, come larghezza e altezza della sezione, larghezza della colonna, spazio e la sua posizione.

Puoi anche regolare i margini e il riempimento, che è una caratteristica molto importante da avere su una pagina web. 

Funzionalità del piano Elementor Pro

Essenziali

Oltre alla funzionalità gratuita, Elementor Pro ha altre 2 funzionalità da offrire.

1. Generatore pop-up

Puoi creare pop-up per l'iscrizione, per un'offerta limitata nel tempo e anche pop-up con intenti di uscita per aumentare le vendite e rendere la tua pagina più attraente.

La funzionalità, come altri widget, è presente nella dashboard di Elementor.

Con il generatore pop-up puoi creare i seguenti pop-up:

• Email Abbonamento
• Pop-up del modulo di accesso
• Pop-up di banner promozionali e di vendita
• Acquisizione di piombo
• Blocco dei contenuti e rivelazione di popup
• Annunci
• Exit Intent
• Pop-up di tipo Tappetino di benvenuto
• Prodotto correlato e upsell

2. Generatore di temi

Con Elementor Pro, hai il pieno controllo su tutte le funzionalità che utilizzi sul tuo sito web. Puoi progettare le pagine 404 e indirizzare i tuoi utenti alla pagina di tua scelta. 

Puoi gestire l'intestazione e il piè di pagina sulla stessa pagina su cui stai progettando. Con la potente integrazione WooCommerce, puoi ottimizzare anche le pagine dei tuoi prodotti.

Caratteristiche del progetto

1. CSS personalizzato

Con ogni widget che aggiungi, puoi aggiungere uno snippet CSS personalizzato per rendere il contenuto più personalizzato e attraente. Ma per utilizzare questa funzionalità, dovresti avere una discreta conoscenza dei CSS. 

Anche usarlo senza alcuna conoscenza preliminare può andare a rotoli. Quindi, se non possiedi le competenze necessarie, è meglio stare lontano dalla funzione CSS personalizzato.

2. Effetti di movimento

Puoi aggiungere fantastiche animazioni e dare al tuo sito web un tipo di cartone animato. Ciò aiuta ad attirare un pubblico target specifico e, a volte, può essere molto utile. 

Come utilizzare la funzionalità di progettazione in Elementor

Beh, non è scienza missilistica. Come altri widget, puoi scorrere il pannello della dashboard e cercarli o semplicemente digitare il nome del widget nel pannello di ricerca.

Marketing

Queste funzionalità sono quelle assenti nella versione gratuita di Elementor.

• Widget modulo

Con il generatore di moduli Elementor, puoi apportare varie modifiche e rendere i tuoi moduli interessanti e attraenti da compilare.

• Scegli il layout che desideri e la spaziatura abbastanza facilmente.
• Oltre 10 campi tra cui scegliere, quali desideri nel modulo.
• Scegli tra numerosi colori e caratteri tipografici che si adattano e si abbinano al design della pagina web e alla combinazione di colori.
• Puoi anche creare moduli dinamici
• Se hai bisogno di un modulo lungo con il generatore di moduli di Elementor, puoi crearlo e suddividerlo in più passaggi in modo che gli utenti lo riempiano in modo semplice.

• Widget Carousel di testimonianze

• Puoi utilizzare i modelli predefiniti forniti con la versione Pro di Elementor e creare uno straordinario carosello di testimonianze per la tua azienda per ottenere più conversioni.
• Allinea il contenuto e il layout del carosello. Avere il pieno controllo sull'aspetto e sull'allineamento del carosello.
• I modelli di personalizzazione forniti in Elementor Pro sono facili da usare e offrono un'esperienza user-friendly sia a chi lo costruisce che a chi lo vede.

Come utilizzare il widget Carousel di testimonianze in Elementor Pro

• Cerca il cursore Testimonial nella barra di ricerca della dashboard. Apri il widget e puoi iniziare immediatamente creando lo slider. Ci sono due skin tra cui scegliere, quella predefinita e quella a bolle. Scegli quello che ti serve in base allo styling.
• Allinea e finalizza il layout delle tue testimonianze, operazione che può essere eseguita tramite 5 opzioni Immagine in linea, immagine impilata, immagine sopra, immagine a sinistra e immagine a destra.
• Scegli lo stile e il design in base alla tua combinazione di colori e aggiungi contenuto allo slider.
• Puoi riprodurre automaticamente le diapositive sullo slider, metterle in pausa quando gli utenti fanno clic su di esso o impostare un orario particolare nell'opzione di cambio diapositiva. Preferisco utilizzare la pausa nell'opzione di interazione per i cursori delle mie testimonianze.
• Link azione Action

Puoi connettere il tuo sito web con WhatsApp, Google Calendar e molte altre app con Elementor Pro.

Come utilizzare i collegamenti di azione in Elementor Pro

• Vai Elementor dashboard e cerca i campi dei collegamenti, che è uno dei widget Pro di Elementor.
• Scegli l'opzione dinamica disponibile nell'angolo in alto a destra del popup del widget.
• Scegli l'URL del contatto sotto l'opzione di azione.
• Aggiungi tutti i dettagli richiesti dal widget e sei pronto per integrare la tua piattaforma di contatto con il tuo sito web.

Funzione di creazione di temi

• Contenuto dinamico
• Sfrutta un'integrazione impeccabile per creare una pagina Web dinamica eccezionale.
• Puoi aggiungere colori dinamici, immagini, persino loghi di siti Web e molto altro alla tua pagina Web.
• La cosa migliore è che puoi salvare il layout del contenuto dinamico che hai creato e utilizzarlo ovunque nel sito web.

Come utilizzare i contenuti dinamici con Elementor Pro

Mostrerò l'esempio dell'utilizzo di un editor di testo e della dinamicità del contenuto. Assicurati di vedere tutti gli altri widget e provali.

1. Apri un editor di testo e digita il testo che desideri sulla tua pagina web. Ora fai clic sull'icona nell'angolo in alto a destra dell'editor, come mostrato nell'immagine qui sotto.
2. Quando fai clic sull'icona, vedrai un elenco di opzioni che appaiono tramite un menu a discesa. Questi sono classificati in post, archivio e sito. Scegli l'opzione che desideri e inizia subito il tuo lavoro.
3. Ora per modificare ulteriormente il titolo della tua pagina, dovresti fare clic su un'icona, che è una chiave inglese, come mostrato nell'immagine qui sotto.

Nelle caselle visualizzate nell'immagine sopra, ovvero prima, dopo e fallback, devi inserire il titolo prima della modifica, un titolo che dovrebbe essere dopo la modifica e un contenuto coerente che verrà visualizzato al posto del contenuto dinamico quando non c'è prima e dopo il titolo.

Altre funzionalità per la creazione di temi in Elementor Pro

• Condizioni di visualizzazione: puoi decidere cosa mostrare e dove mostrare
• Intestazione e piè di pagina: basta trascinare e rilasciare per personalizzare l'intestazione e il piè di pagina della tua pagina web
• Intestazione fissa: aggiungi un'intestazione fissa a pagine specifiche o per l'intero sito web a livello globale.
• Pagina 404: progetta una pagina 404 personalizzata e reindirizza i tuoi utenti e il tuo pubblico alla pagina che desideri.

Contenuto del tema

• Widget della barra dei menu di navigazione

• Sono disponibili molte opzioni di stile tra cui scegliere per la barra di navigazione.
• Questi stili rispondono a tutti i dispositivi e puoi vederli sulla versione mobile e apportare le modifiche necessarie se necessario.
• Puoi animare la barra di navigazione con animazioni ed effetti al passaggio del mouse. Illumina davvero la tua pagina.
• Puoi scegliere come posizionare il menu, ovvero in orizzontale, in verticale, visualizzarlo a schermo intero, magari provare l'opzione hamburger.

Come utilizzare il widget della barra dei menu di navigazione

1. Vai alla dashboard e cerca la barra dei menu
2. Puoi impostare il menu su orizzontale, verticale o a discesa in base allo stile che si adatta al tuo sito web.
3. Puoi anche aggiungere una riga singola o doppia sotto ciascun contenuto del menu per evidenziare e persino modificare il colore del testo tramite la dashboard.

• Widget di ricerca

Il widget di ricerca viene fornito con tre skin: widget di ricerca predefinito, minimo e a schermo intero.

Puoi modificare il design della barra di ricerca e del pulsante per adattarli allo stile della tua pagina web.

Come utilizzare la barra di ricerca con Elementor Pro

Vai alla dashboard di Elementor e cerca il widget della barra di ricerca, scegli lo stile che desideri, predefinito, a schermo intero o minimo e modifica la tipografia e i colori della barra di ricerca in modo che corrispondano al tuo tema di colore.

• Altre funzionalità dei contenuti del tema che ottieni con Elementor Pro

• Widget post: modifica l'aspetto della barra laterale inserendo lì i tuoi post recenti.
• Widget commenti WordPress: con questo widget, i lettori possono commentare il post che hai scritto.
• Widget portafoglio: se hai molti portafogli da visualizzare, utilizza questo widget portafoglio per visualizzarli in uno stile innovativo e accattivante.

Tutte queste funzionalità sono disponibili nella dashboard principale di Elementor, in modo simile ad altri widget. Assicurati di dare un'occhiata a tutte queste funzionalità.

Prezzi di Elementor Pro

recensione dell'utente 

Link veloci:

• Tutorial su Elementor Pro
• I MIGLIORI ELEMENTOR AGGIUNTIVI
• Ancoraggio del menu Elementor
• Duda contro Elementor

Domande frequenti sul tutorial di WordPress Elementor

Inoltre, leggi:

• Beaver Builder contro Divi
• Beaver Builder contro Elementor

Conclusione: Tutorial WordPress Elementor 2024

Uno dei principali software di progettazione di pagine Web, Elementor, è una piattaforma affidabile e vivace su cui costruire il tuo sito web. Dalla creazione di una pagina blog di base alla creazione di una landing page di prodotto elegante e mozzafiato, tutto può essere fatto con Elementor.

La versione Pro di Elementor ha infinite funzionalità con cui lavorare e portare il tuo sito web a un nuovo livello. Ti dà anche la libertà di avere il controllo totale del tuo sito web.

Non è necessario essere un programmatore per utilizzare Elementor. Usare Elementor è semplice come imparare a fare clic e trascinare e rilasciare le funzionalità.

Sì, ci vuole un po' di tempo per vedere tutte le funzionalità e sapere quali sono utili per il tuo sito web, ma il tempo che dedichi a Elementor ne varrà la pena, te lo posso assicurare.

Quindi, prova Elementor e fammi sapere la tua esperienza commentando qui sotto! 

Video popolari di Elementor

Elementor sui social media

Summit sui costruttori di pagine 2021 (@summit_camp) inizia domani! Ottieni il tuo biglietto GRATUITO e parla con oltre 35 esperti del settore tra cui @bpines1 . Sono entusiasta di sponsorizzare questo grande evento. Ci vediamo lì! 💻🎉https://t.co/gDtFpUJLBH

— Elementor (@elementor) 9 Maggio 2021

Fatti da parte e dai il benvenuto alla nostra vetrina di aprile 2021. 🏆🌷 Questo mese applaudiamo 10 agenzie di design da tutto il mondo. Questa raccolta diversificata rappresenta il talento nella creazione web di Elementor in tutto il mondo. 🌎 https://t.co/bwwOUDQCuu

— Elementor (@elementor) 19 Maggio 2021