In questo articolo
Cos’è Elementor?
Elementor è un plugin gratuito per la creazione di siti web per WordPress. Fondamentalmente, esso ti offre un’interfaccia drag-and-drop per WordPress, rendendo il processo di lavoro simile a quello che si ottiene con i noti strumenti per la realizzazione di siti web come Wix o Squarespace. Hai la possibilità di scegliere un template già pronto o di realizzare il tuo sito ricco di funzionalità con elementi che puoi posizionare dove desideri, inoltre non sono richieste conoscenze di codifica. Una volta installato Elementor:- Potrai creare nuove pagine o un nuovo sito con lo stile, il layout e le funzionalità che preferisci. Non sei limitato a ciò che offre il tuo tema WordPress corrente.
- Puoi scegliere di mantenere il tuo tema corrente, in quanto Elementor funziona con tutti i temi di WordPress (a condizione che tu abbia la versione 5.0 o superiore di WordPress).
- Avrai un editor del tutto separato (e molto più intuitivo) con cui lavorare. Non dovrai necessariamente utilizzare l’interfaccia di editing nativa di WordPress.
- Andrai a modificare le tue pagine o il tuo sito dal front-end, il che significa che vedrai esattamente ciò che i tuoi visitatori vedono nel loro browser, senza bisogno di salvare costantemente bozze e anteprime.
Più di 300 template già pronti
Essendo un designer professionista, apprezzo i template di Elementor! Anche se non hai occhio per il design, essi ti consentono di creare facilmente siti web belli e dall’aspetto professionale. Sono disponibili due tipi di template: template per pagine intere (chiamati Pages [ovvero pagine]) e template per piccoli elementi individuali (chiamati Blocks [ovvero blocchi]).Utilizza un Page
Il modo più semplice per cominciare con Elementor è quello di utilizzare un template predefinito. Elementor dispone di oltre 150 template, di cui circa 40 gratuiti. (Purtroppo, non è possibile filtrare per quelli “gratuiti” ed è necessario controllare manualmente il piccolo tag “Pro” nell’angolo di ciascun template). Per creare più pagine con layout diversi mantenendo un look omogeneo, puoi scegliere dei Pages all’interno della stessa famiglia. Elementor chiama quest’ultimi “kit”, ma non da modo di cercare “kit” nella libreria vera e propria. Cerca piuttosto dei template che terminano con lo stesso nome, come Travel o Digital Agency. Per esempio, il kit Travel presenta sette pagine che stanno benissimo insieme, tra cui le sezioni Informazioni, Galleria e FAQ. Per avere ancora più possibilità, puoi importare template di pagina di Elementor da fornitori di terze parti come ThemeForest. Se desideri il pieno controllo sul tuo design, non c’è nemmeno bisogno di utilizzare un template in quanto potrai creare la tua pagina partendo da zero.
Suggerimento Pro: per impostazione predefinita, i template di Elementor sono posizionati nel corpo della tua pagina, il che significa che l’intestazione, il piè di pagina e gli elementi della barra laterale del tuo tema saranno ancora visibili. A seconda del tuo tema e del template specifico che utilizzi, questa combinazione potrebbe apparire alquanto strana.
Per rimuovere questi elementi e iniziare con una vera e propria tabula rasa, vai su Settings (per modificare le impostazioni), e modifica l’impostazione Page Layout (layout di pagina), in “Elementor Canvas.”
Utilizza un Block
Oltre ai template Pages (per pagine intere), puoi utilizzare dei template più piccoli per singoli elementi chiamati Blocks (ovvero blocchi). Elementor offre più di 200 template Blocks già pronti per tabelle dei prezzi, referenze, layout per la sezione “membri del team”, portfolio e altro. Come i template, alcuni blocchi di contenuto sono gratuiti, mentre i blocchi “Pro” sono a pagamento.
Suggerimento Pro: se hai intenzione di utilizzare gli stessi elementi su pagine diverse, hai la possibilità di creare i tuoi template personalizzati:
Potrai anche esportare i tuoi template e utilizzarli su altri siti di WordPress. Questa funzionalità si rivela davvero utile per creare siti web per i clienti
Trascina un widget
A differenza dei blocchi, i widget sono elementi più piccoli e contenuti come testo, immagini, titoli e mappe. Potrai trascinare tutti i widget che desideri su qualsiasi pagina. Elementor offre 30 widget utilizzabili gratuitamente (più altri 50 a pagamento), inoltre puoi anche inserire i widget nativi di WordPress dalla stessa barra degli strumenti posta sulla sinistra. A seconda della flessibilità del tuo tema di WordPress, potresti riuscire a ottenere il look e la funzionalità che desideri utilizzando solamente widget gratuiti di Elementor e WordPress.Utilizza l’editor Drag-and-Drop
Una volta scelto un template e aggiunti tutti i blocchi di contenuto e i widget desiderati, puoi utilizzare l’editor per fare clic su qualsiasi elemento della pagina e apportarvi modifiche locali. Poiché Elementor è uno strumento WYSIWYG (Io vedo quello che vedi tu), non occorre fare clic sul pulsante di anteprima o cambiare modalità per visualizzare le modifiche apportate. Le modifiche verranno visualizzate non appena vengono effettuate, ma non saranno visibili ai visitatori fino a quando non viene fatto clic sul pulsante per la pubblicazione. Suggerimento Pro: Maintenance Mode Se stai creando o aggiornando il tuo sito, la Maintenance Mode (modalità di manutenzione) integrata di Elementor ti consente di visualizzare una pagina temporanea e imposta il codice di stato HTTP adatto a te. È possibile accedere a tale opzione dalla dashboard di WordPress.
Quando ci si trova in Maintenance Mode, non dovrai preoccuparti che le modifiche vengano pubblicate accidentalmente prima che il sito sia pronto. Potrai scegliere uno degli oltre 10 template di Elementor da utilizzare come splash page temporanea.
Durante le modifiche, userai la barra degli strumenti posta a sinistra per regolare con precisione il colore, il carattere, la spaziatura, il layout e altro ancora:
Uno degli aspetti che apprezzo di più dell’editor drag-and-drop di Elementor è la possibilità di controllare con molta precisione ogni singolo elemento. Hai la possibilità di regolare quasi ogni dettaglio dei blocchi di contenuto del tuo sito, widget, testo, immagini, colonne e divisori.
Non lasciarti sfuggire la scheda con le funzioni avanzate (mostrata qui sotto) che offre alcune opzioni davvero interessanti:- Impostazione di margini precisi e padding per pixel o percentuale
- Aggiunta di larghezze personalizzate agli elementi e impostazione di posizioni fisse della pagina
- Posizionamento di widget, testo o immagini all’interno delle colonne
- Regolazione della larghezza e dello spazio tra le colonne
- Aggiunta di effetti avanzati di animazione e hover
- Quando si fa clic con il tasto destro del mouse nell’angolo superiore destro di qualsiasi elemento, vengono visualizzate tutte le opzioni di modifica
- È possibile duplicare i blocchi di contenuti con un clic
- Le modifiche possono essere annullate/ripristinate facilmente tramite la combinazione dei tasti Ctrl+Z e Shift+Ctrl+Z (oppure Cmd+Z e Shift+Cmd+Z su Mac)
Suggerimento Pro: se stai lavorando su una pagina molto lunga o complessa sul tuo sito (in particolare una che presenta elementi all’interno di elementi all’interno di altri elementi), può risultare davvero difficile individuare i pezzi specifici che desideri modificare, o anche capire come gli elementi a più livelli siano collocati gli uni negli altri.
La funzione Navigator (funzione di navigazione), diventerà fin da subito il tuo nuovo migliore amico. Sarà sufficiente fare clic su qualsiasi elemento e selezionarlo. Ciò consentirà di individuare l’elemento selezionato nel contesto complessivo del sito e di visualizzare automaticamente la barra di modifica.
Apporta modifiche alla versione per dispositivi mobili del tuo sito
Sebbene tutti i template di Elementor siano compatibili con i dispositivi mobili per impostazione predefinita, Elementor offre comunque il pieno controllo del design. Grazie alla funzione Mobile Editing (funzione di editing per dispositivi mobili), hai la possibilità di regolare con precisione l’aspetto del tuo sito su smartphone e tablet. Potrai modificare le impostazioni per mostrare o nascondere gli elementi, modificare l’ordine o le impostazioni delle colonne e modificare i margini in base alle dimensioni dello schermo. Oltre a ciò, hai anche la possibilità di impostare caratteri di dimensioni differenti per dispositivi diversi, per garantire che il testo sul tuo sito sia sempre facilmente leggibile. Attenzione: se hai intenzione di creare il tuo sito partendo interamente da zero senza usare un template, esso non sarà compatibile con i dispositivi mobili, tuttavia puoi sempre utilizzare la funzione di editing per dispositivi mobili per creare una versione per dispositivi mobili separata.
Suggerimento Pro: non devi accedere necessariamente all’editor per dispositivi mobili per apportare modifiche alle versioni corrispondenti del tuo sito. Utilizzando l’editor normale per PC fisso, fai clic sulla scheda dei contenuti avanzati di qualsiasi elemento per nascondere o mostrare quell’elemento in base alle tue preferenze.
Creazione di pagine senza stress: cronologia delle versioni
A volte non bastano una, due o persino tre annullamenti per rimediare a un disastro di progettazione. Non importa, succede anche ai più bravi! È qui che entra in gioco l’history panel (pannello della cronologia). Da questo pannello è possibile visualizzare le singole modifiche nell’action tab (scheda delle azioni disponibili) o intere versioni di pagine salvate nella revisions tab (scheda contenente le revisioni con le modifiche apportate). Sarà sufficiente fare clic sul pulsante di ripristino per recuperare una versione meno recente della propria pagina. Assieme alla funzione di salvataggio automatico di Elementor, il pannello delle revisioni garantisce che il duro lavoro non vada mai perso.Nessuno è perfetto: gli aspetti negativi di Elementor
Arrivati a questo punto, avrai senz’altro avuto modo di capire che amo molto utilizzare Elementor. Nonostante questo ci sono un paio di problemi di cui dovresti tener conto:- Puoi apportare modifiche quasi illimitate ad ogni pagina, ma non hai la possibilità di impostare molti stili globali (per tutto il sito) senza acquistare un piano di abbonamento premium. Ciò potrebbe essere frustrante per gli utenti con account gratuiti che desiderano conferire un aspetto uniforme a tutte le pagine.
- Per quanto veloce e impressionante sia, l’editor può presentare a volte dei bug. Nel caso in cui si blocchi, potrebbe essere necessario un aggiornamento forzato della pagina o uscire e rientrare nell’editor.
Elementor Gratis vs. Pro: quale dei due fa al caso tuo?
Cosa offre la versione gratuita
Elementor si distingue per il suo piano di abbonamento gratuito ricco di funzionalità. Per molti siti web per uso personale o professionale, la versione gratuita è più che sufficiente. Potrai creare siti e pagine personalizzate con tutte le funzioni di base e usare la maggior parte delle funzionalità di design avanzate. La versione gratuita di Elementor include:- Uso completo della piattaforma creativa, tra cui la progettazione dal vivo, l’editing per dispositivi mobili, la cronologia delle versioni, ecc.
- Più di 30 widget per immagini, caselle di testo, mappe, file audio e altro
- Più di 40 template Page (tra cui foto d’archivio gratuite)
- Più di 100 template Block per le sezioni FAQ, funzionalità, referenze, “membri del team” e molto altro
Cosa offre la versione a pagamento
Elementor Pro offre tre piani di abbonamento a pagamento. L’unica differenza tra i piani Personal, Plus ed Expert è il numero di siti per i quali si dispone di una licenza. Ecco alcune delle funzionalità più interessanti di Elementor Pro:- Più di 300 template premium
- Più di 100 template Block
- Widget globali: potrai utilizzare lo stesso widget su più pagine del tuo sito. Nel caso in cui fosse necessario apportare una modifica al tuo widget, sarà sufficiente modificarlo una volta. Tale modifica verrà aggiornata automaticamente su tutte le pagine.
- Strumento per la creazione di temi di Elementor: potrai creare il tuo tema personalizzato partendo da zero utilizzando i template di Elementor per piè di pagina, intestazioni e altro.
- WooCommerce e il suo apposito strumento: ti consente di aggiungere un negozio online con 18 widget di WooCommerce.
- Strumento per la creazione di moduli front-end e pop-up, compresa l’integrazione con MailChimp.
- Accesso al codice CSS del tuo sito
- Assistenza clienti Premium 24 ore su 24, 7 giorni su 7: grazie ad essa ottieni un’assistenza prioritaria per i relativi ticket e puoi autorizzare gli operatori di Elementor ad accedere alla tua dashboard per risolvere i problemi.