Un sito web ben progettato può creare un’ottima prima impressione. Tuttavia, costruire un sito di qualità non è sempre facile, specialmente se non avete precedenti esperienze di design o sviluppo.
È qui che entra in gioco il costruttore di siti WordPress Elementor. Optando per questo plugin moderno e facile da usare, potete creare un sito web sorprendente senza scrivere una sola riga di codice.
Questo articolo coprirà tutto quello che dovete sapere su questo popolarissimo costruttore di siti WordPress. Vi mostreremo poi come orientarvi in alcuni dei compiti più essenziali di Elementor, come la creazione di layout, pagine e anche template personalizzati. Iniziamo!
Un’Introduzione a WordPress Elementor
Nei primi giorni di Internet, la creazione di un sito web richiedeva competenze avanzate di sviluppo e progettazione web o l’accesso a un team specializzato. Questo significava che la costruzione di un sito web richiedeva molto tempo, spesso era frustrante e potenzialmente costoso.
Grazie ai moderni page builder, ora potete creare un sito web dal design professionale e dalle alte prestazioni senza competenze specialistiche. Una volta che il vostro sito è attivo e funzionante, potete aggiungere rapidamente e facilmente contenuti o cambiare il layout in qualsiasi momento, anche se non avete conoscenza tecniche.
Esistono vari costruttori di pagine di WordPress, ma con oltre cinque milioni di installazioni attive, il plugin Elementor è uno dei più popolari. Elementor vi permette di creare qualsiasi cosa, da interi siti web a singole landing page attraverso un intuitivo editor drag-and-drop.
Con Elementor, potete controllare tutti gli aspetti del design del vostro sito da un’unica piattaforma. In questo modo, il vostro sito web può riflettere perfettamente il vostro branding.
L’editor intuitivo e senza codice di Elementor è particolarmente popolare tra chi possiede siti web e non ha esperienza di progettazione e sviluppo. È anche un ottimo strumento per chi ha un’attività e per le piccole imprese che hanno un’idea per un progetto online ma non necessariamente i fondi per assumere un team dedicato al design o allo sviluppo.
Anche se avete esperienza, ci sono molte ragioni per utilizzare Elementor. Solo perché sapete programmare non significa che sia saggio creare sempre tutto da zero.
Elementor ha un sacco di caratteristiche che vi aiutano a costruire siti web di gran qualità in meno tempo. Questo include oltre 90 widget già pronti e template web dal design professionale.
In questo modo, Elementor può aumentare la vostra produttività e i vostri profitti. Queste caratteristiche per risparmiare tempo possono rivelarsi particolarmente redditizie se costruite regolarmente siti WordPress (cioè se lavorate nello sviluppo freelance o avete un’agenzia WordPress).
Elementor Free vs Elementor Pro
Elementor è un software “freemium”. Potete scaricare il plugin principale di Elementor gratuitamente o acquistare una licenza Elementor Pro.
Il plugin gratuito per WordPress include tutto il necessario per costruire pagine di vendita visivamente accattivanti, elenchi di prodotti, siti web aziendali e altro. Include oltre 40 widget, 100 template e più di 300 blocchi. I blocchi sono template di sezioni pre-progettate che potete mescolare e abbinare per creare design unici.
Se volete funzionalità più avanzate, potete acquistare Elementor Pro. Questo sblocca alcuni widget extra, insieme al Theme Builder di Elementor.
Con il Theme Builder, potete modificare quasi ogni elemento del sito, compresi l’header e il footer. Potete anche creare design personalizzati di articoli e pagine di archivio.
Se state sviluppando un negozio online, Elementor Pro include anche un WooCommerce Builder. Potete usarlo per personalizzare il contenuto di WooCommerce del vostro sito, compresa la pagina del prodotto, l’archivio dei prodotti e la pagina di checkout. Avrete anche accesso a widget esplicitamente progettati per aumentare le conversioni, come Custom Add To Cart, Upsells e Product Related.
Elementor Pro include anche un Popup Builder e un Form Builder. Anche se ci sono plugin separati che possono aiutarvi a creare moduli e popup, optando per Elementor, potete ridurre al minimo il numero di plugin che dovrete installare e mantenere.
Usare troppi plugin può rendere il vostro sito più vulnerabile agli hacker. Può anche avere un impatto sulle prestazioni del vostro sito web. Quindi è una buona pratica ridurre al minimo il numero che avete installato. Inoltre, dal momento che state progettando tutti gli elementi del vostro sito con la stessa piattaforma, dovreste trovare più semplice ottenere un aspetto coerente e rispettoso del vostro branding.
Le licenze Elementor Pro includono l’accesso a più di 60 kit professionali per siti web. Si tratta di pacchetti di template, pagine, popup e altri componenti che possono aiutarvi a creare un sito web completo. Se acquistate una licenza Expert o superiore, avrete anche accesso a 20 kit per siti web expert.
Inoltre, ogni licenza Pro include il supporto premium. In genere, riceverete risposte dal team di supporto specializzato di Elementor entro un giorno. Tuttavia, se optate per Elementor Pro Studio o superiore, avrete accesso al supporto VIP. Questo vi permette di partecipare a chat dal vivo con il team di supporto VIP di Elementor. Riceverete anche risposte prioritarie ai vostri ticket, che di solito arrivano in meno di 30 minuti.
Se siete un’agenzia, una sviluppatrice o uno sviluppatore o vi occupate di design, potrebbe interessarvi un profilo Experts Network. Lì potete mostrare il vostro lavoro e attirare l’attenzione di potenziali clienti.
Se vi interessa fare pubblicità tramite la rete di esperti Experts Network, potrebbero interessarvi le licenze Expert, Studio o Agency di Elementor Pro. Queste licenze vi danno diritto a creare un profilo su questo popolare mercato.
I piani di Elementor Pro vanno da 49 a 999 dollari all’anno. L’azienda offre anche una garanzia di rimborso di 30 giorni, così potete provarlo prima di acquistarlo.
Come Installare Elementor
Dal momento che è un plugin per WordPress, installare Elementor è facile e veloce. Potete scaricare il plugin gratuito direttamente dalla vostra bacheca di WordPress.
Per scaricare la versione gratuita, andate su Plugin > Add New. Nel campo di ricerca, digitate Elementor. Quando appare il plugin, fate clic su Install Now.
Quando vi viene richiesto, fate clic su Activate. Il plugin aggiungerà un’opzione Elementoralla vostra barra laterale di WordPress.
Ora è tutto pronto per iniziare a usare Elementor! Fate clic sull’opzione Elementor nella barra laterale.
In alternativa, potete scaricare il plugin Elementor direttamente dal repository di WordPress. Poi accedete alla vostra bacheca di WordPress e andate su Plugins > Add New > Download Plugin. Potete poi fare clic su Choose File e selezionare il file .zip di Elementor che avete appena scaricato.
Come Collegare Elementor Pro a WordPress
Ci sono due modi per collegare Elementor Pro a WordPress. Se non avete ancora acquistato una licenza di Elementor Pro, dovete andare sul sito ufficiale e selezionare Get Started.
Potete poi seguire le istruzioni sullo schermo per creare un account Elementor. Quando vi viene richiesto, inserite alcune informazioni sul tipo di sito web che volete realizzare.
Successivamente, scegliete il piano che volete acquistare. Poiché Elementor richiede un sito WordPress attivo, dovrete inserire il dominio del vostro sito. Elementor eseguirà poi un controllo per verificare che il vostro sito stia utilizzando la piattaforma WordPress.
Supponendo che abbiate un sito WordPress attivo, il passo successivo è fare clic su Install Elementor. In automatico atterrerete sulla pagina del plugin Elementor, se avete già fatto la connessione al vostro sito.
Quando vi viene richiesto, fate clic su Install Now > Activate. Elementor aggiungerà il plugin del page builder al vostro sito.
In alternativa, se avete già acquistato una licenza Elementor Pro, andate sul sito ufficiale e accedete usando i dati che avete ricevuto nell’email di conferma.
Nel vostro account Elementor, selezionate Subscriptions dal menu di sinistra. Potete poi fare clic su Download Zip.
Successivamente, accedete alla vostra bacheca di WordPress e andate su Plugin > Aggiungi nuovo. Potete quindi fare clic sul file .zip di Elementor Pro che avete appena scaricato.
Dopo aver installato e attivato Elementor Pro, WordPress dovrebbe chiedervi di inserire la vostra chiave di licenza. In alternativa, potete andare su Elementor > License > Connect & Activate.
WordPress dovrebbe verificare automaticamente la vostra licenza se siete connessi al vostro account Elementor. Se non lo siete, inserite il vostro nome utente e la password di Elementor quando vi viene richiesto di attivare la licenza.
Usare Elementor: 4 Operazioni Essenziali da Padroneggiare
Con Elementor, potete progettare siti web unici senza particolari abilità di progettazione o sviluppo. Tuttavia, aiuta a familiarizzare con i fondamenti prima di costruire un sito web completo. Ecco una rapida introduzione al flusso di lavoro di Elementor.
1. Avviare il Page Builder di Elementor
Per progettare una nuova pagina o un nuovo articolo nel costruttore di pagine di Elementor, andate su Pages/Post > Add New. Potete lanciare l’editor di Elementor dall’opzione Edit with Elementor.
In alternativa, potreste avere una pagina esistente che potrebbe beneficiare di un restyling. In questo caso navigate fino alla pagina in questione e apritela per la modifica in questo scenario. Potete poi fare clic sul pulsante Edit with Elementor.
Sul lato sinistro dello schermo, vedrete la barra laterale di Elementor. Qui è dove troverete tutti gli elementi che potete aggiungere ai vostri progetti, come pulsanti e intestazioni.
La barra laterale di Elementor contiene anche una sezione Global Widgets. Se avete intenzione di riutilizzare lo stesso widget in più progetti, potreste volerlo salvare come widget globale. Questo fa sì che il vostro elemento personalizzato sia accessibile in qualsiasi momento. Fornisce anche una posizione centrale dove potete modificare il vostro widget una volta per applicare delle modifiche universali. Elementor replicherà poi queste modifiche in tutto il vostro sito web.
A destra ci sono le anteprime dal vivo, dove potete creare il vostro design. Elementor si aggiornerà automaticamente per mostrare i vostri cambiamenti in tempo reale mentre fate le vostre modifiche.
2. Aggiungere Sezioni, Colonne e Widget
L’editor di Elementor fornisce l’accesso a tre blocchi di costruzione principali: Sezioni, Colonne e Widget. Abbiamo già toccato i widget precostituiti di Elementor, quindi vediamo come potete aggiungerli ai vostri progetti.
In genere, inizierete creando una Sezione, facendo clic sull’icona + nell’area di lavoro principale. Elementor vi chiederà quindi di selezionare la vostra struttura.
Le opzioni della struttura consistono in una o più colonne. Alla fine, posizionerete il vostro widget all’interno di queste Colonne. Esse giocano un ruolo importante nella creazione di layout più organizzati.
Dopo aver preso la vostra decisione, Elementor aggiungerà questa sezione al vostro layout. Per spostare questa sezione in una nuova posizione, fate un clic e poi afferrate il riquadro blu tratteggiata che appare.
Per modificare una sezione, fate semplicemente control-clic su questo riquadro blu tratteggiato. Questo lancerà un menu contestuale, dove potete fare semplici modifiche come copiare o eliminare la sezione selezionata.
Supponiamo che vogliate fare delle modifiche più complesse, fate clic con il tasto Ctrl su riquadro blu e selezionate Edit Section. La barra laterale di Elementor ora si aggiornerà per mostrare tutte le modifiche aggiuntive che potete fare a questa sezione.
Potete anche aggiungere dei widget a questa sezione. Nella barra laterale di Elementor, trovate il widget che volete usare e trascinatelo sull’area di lavoro principale.
Mentre trascinate il widget, Elementor evidenzierà tutte le diverse Sezioni e Colonne dove potete rilasciare questo elemento. Quando è tutto pronto, rilasciate il mouse. Elementor aggiungerà ora questo widget alla sezione scelta.
3. Modificare le Impostazioni del Vostro Sito
Potete usare Elementor per modificare le impostazioni del vostro sito. Questo include il cambiamento del font predefinito e dei colori HTML. Potete anche modificare i bordi e le ombre che WordPress aggiunge agli elementi come le immagini del vostro sito.
Regolando queste impostazioni a livello di sito, potete assicurare un aspetto coerente in tutto il vostro sito WordPress. Questo processo è anche molto più veloce e facile che applicare queste modifiche pagina per pagina. Per visualizzare le impostazioni del sito disponibili, fate clic sul menu hamburger nella barra laterale di Elementor.
Ora potete esplorare le opzioni e fare tutte le modifiche necessarie. Quando tutto è pronto per le nuove impostazioni del sito, fate clic sul pulsante Update in fondo alla barra laterale di Elementor.
4. Controllare la Cronologia di Revisione
Mentre state modificando i vostri progetti, Elementor registra silenziosamente le vostre modifiche. Potete facilmente ripescare le modifiche, il che può essere un salvavita se vi accorgete di aver fatto un errore.
Il registro della cronologia di Elementor vi dà anche la libertà di sperimentare. Potete testare vari cambiamenti e poi rimuoverli rapidamente. Elementor vi incoraggia a sperimentare e può migliorare la qualità dei vostri progetti finiti.
Per visualizzare il registro di Elementor, fare clic sull’icona History in fondo alla barra laterale. La scheda Actions registra ogni singolo cambiamento che fate in Elementor. Può trattarsi di qualsiasi cosa, dalla creazione di una nuova sezione alla modifica del testo esistente:
Ogni volta che premete Save, Elementor registra la versione corrente della vostra pagina come una nuova revisione. Potete visualizzare tutte queste istantanee nella scheda Revisions. Se volete tornare a un salvataggio precedente, lo trovate nell’elenco Revisions e potete farci clic sopra.
Come Costruire una Pagina in Elementor (2 Metodi)
Ora che avete familiarità con il flusso di lavoro essenziale di Elementor, vediamo come potete usare questo know-how per progettare alcune nuove pagine. Per prima cosa, vedremo come creare una pagina standard di WordPress con il plugin gratuito Elementor. Poi vedremo come potete sviluppare una pagina prodotto ad alta conversione con WooCommerce ed Elementor Pro.
1. Come Creare una Pagina Standard di WordPress
Ogni pagina web è diversa. Tuttavia, ci sono alcuni elementi comuni che troverete in vari siti. Questi includono titoli, corpo del testo e media come le immagini. Vediamo come potete creare una pagina con questi fondamentali componenti.
Per iniziare, create una nuova pagina navigando su Pages > Add New > Edit with Elementor. Successivamente, aggiungete una Sezione al vostro progetto facendo clic sull’icona +. Inizieremo con il titolo, quindi optiamo per un layout a colonna singola.
Nella barra laterale di Elementor, trovate il widget Heading. Ora, trascinate e rilasciate questo widget nella nuova sezione. Potete quindi digitare il vostro testo di intestazione nella barra laterale di Elementor e usare varie impostazioni per dare stile al vostro titolo.
Poi, clicca sull’icona + per aggiungere una seconda sezione. Stiamo per incorporare un’immagine e poi fornire del testo di supporto, quindi ora opteremo per un layout a più colonne.
Successivamente, trascinate il widget Editor di testo dalla barra laterale di Elementor e rilasciatelo in questa nuova sezione. Potete quindi aggiungere e stilizzare il vostro testo usando le impostazioni della barra laterale.
Quando il vostro testo vi soddisfa, trovate il widget Image. Ancora una volta, usate il drag-and-drop per aggiungere questo widget alla vostra sezione.
Nella barra laterale, fate clic sulla miniatura di anteprima. Ora potete usare la Libreria multimediale di WordPress per caricare una nuova immagine o scegliere una grafica caricata in precedenza.
Per vedere il vostro design in azione, fate clic sull’icona dell’occhio in fondo alla barra laterale di Elementor. Questo mostra un’anteprima del layout della pagina in una nuova scheda.
Quando il design vi soddisfa, fate clic sul pulsante Publish. Se la vostra pagina è già live, questo pulsante vi chiederà invece di aggiornare.
2. Come Creare una Pagina Prodotto WooCommerce
Se state gestendo un negozio WooCommerce, potete usare Elementor Pro per creare una pagina prodotto personalizzata. Questo potrebbe comportare la modifica della pagina stock di WooCommerce per riflettere meglio il branding del vostro sito. In alternativa, potreste tentare di ottimizzare la vostra pagina per ottenere più conversioni.
Per progettare una pagina prodotto WooCommerce personalizzata, selezionate Templates dalla bacheca di WordPress. Poi fate clic sul pulsante Add New. Nella finestra successiva, aprite il primo menu a tendina e selezionate Single Product.
Date al vostro nuovo template un nome descrittivo e fate su Create Template. Questo lancerà la libreria di Elementor con tutti i design disponibili per un singolo prodotto.
Per dare un’occhiata più da vicino a un template, passate il mouse su di esso e poi fate clic sull’icona della lente di ingrandimento quando appare. Se volete applicare questo design al vostro negozio, fate clic su Insert.
I template di Elementor presentano una serie di componenti già pronti. Per modificare uno qualsiasi di questi elementi, basta farci clic sopra. La barra laterale di Elementor si aggiornerà per mostrare tutte le impostazioni per quel particolare elemento.
Elementor Pro fornisce una serie di widget WooCommerce che potete aggiungere ai vostri progetti. Per vedere cosa è disponibile, scorrete fino alle sezioni WooCommerce o Product nella barra laterale di Elementor.
Queste sezioni includono widget con funzionalità avanzate integrate, come WooCommerce Breadcrumbs, Cart e Checkout. Per aggiungere questi elementi al vostro design, basta trascinarli nell’area di lavoro di Elementor e rilasciarli. Potete poi rilasciare il widget nella sezione in cui volete visualizzare questo contenuto.
Quando il design vi sembra pronto, fate clic su Publish. Potete quindi selezionare Add Condition e specificare le aree in cui volete usare questo design. Per esempio, potreste applicare questo modello a una specifica categoria di prodotti o usarlo in tutto il vostro negozio.
Come Trovare e Installare i Template Elementor Predefiniti
I template di Elementor sono pagine e blocchi pre-progettati che semplificano il processo di creazione del sito web. Le pagine sono layout di contenuti completi, mentre i blocchi sono sezioni che contengono widget pre-costruiti. Alcuni esempi popolari di blocchi includono header, footer, recensioni e testimonial e domande frequenti (FAQ).
Il plugin gratuito Elementor include oltre 100 template a pagina intera e più di 300 blocchi. Se passate a Elementor Pro, avrete accesso ad alcune opzioni aggiuntive.
Fate clic sull’icona Add Template per applicare un template al vostro design attuale. Questo pulsante dovrebbe apparire come parte di ogni blocco Sezione ed è rappresentato da una cartella bianca. Lancerete così la libreria di Elementor.
Qui troverete tutti i template di blocco e di pagina che potete applicare alla vostra pagina. Potete vedere un’anteprima di qualsiasi template passando sopra di esso e facendo clic sulla sua icona a forma di lente di ingrandimento.
Quando trovate un modello che volete usare, fate clic su Insert. Se non avevate fatto accesso in precedenza alla libreria di template di Elementor, il popup vi chiederà di completare quel passaggio.
Dopo aver effettuato questa connessione, Elementor inserirà il template scelto. Ora potete personalizzarlo. Per esempio, potete aggiungere altri widget o eliminare qualsiasi contenuto segnaposto.
Come Costruire Template con Elementor
Elementor include un’ampia selezione di template già pronti. Tuttavia, a volte potreste avere un look particolare in mente. In questo scenario, potreste preferire progettare da voi i vostri template.
Creare i vostri design può assicurare la coerenza in tutto il vostro sito. Potete anche usare i template per accelerare il design e lo sviluppo se avete un’agenzia WordPress. Per esempio, potreste costruire una libreria di template che presentano tutti i contenuti e le impostazioni che di solito applicate ai siti dei vostri clienti. Potete poi usare questi template come punto di partenza per tutti i progetti futuri.
Per iniziare, selezionate Template dalla bacheca di WordPress. Poi fate clic su Add New.
Nel successivo popup, aprite il primo menu a tendina e scegliete il tipo di template che volete creare. Le vostre opzioni sono Page, Section o Landing Page.
Successivamente, date a questo design un nome descrittivo e fate clic su Create Template. Questo lancerà il costruttore di pagine standard di Elementor. Ora potete costruire il vostro template nello stesso modo in cui creereste una pagina normale. Aggiungete semplicemente sezioni, colonne e widget finché il vostro layout non vi soddisfa.
Per salvare questo design come template, fate clic sulla freccia che appare accanto al pulsante Update/Publish. Potete quindi selezionare Save as Template/strong>.
Questo design sarà ora salvato nella libreria di Elementor. Potete accedervi aprendo la libreria e selezionando la scheda My Templates.
In alternativa, potete accedere ai vostri template personalizzati navigando su Templates > Saved Template nella bacheca di WordPress. Potete anche aprire uno qualsiasi dei vostri template e fare tutte le modifiche necessarie.
Suggerimenti e Trucchi per Iniziare con Elementor
Elementor può aiutarvi a progettare e costruire rapidamente un sito WordPress senza grosse barriere. Tuttavia, alcuni trucchi per risparmiare tempo possono aumentare ulteriormente la vostra produttività.
A volte, potreste costruire una sezione da riutilizzare all’interno della stessa pagina. Invece di ricreare questa sezione manualmente, potete creare una copia. Vi basta fare clic per selezionare la sezione in questione e poi fare control-clic sul riquadro tratteggiato che appare.
Poi selezionate Duplicate così da creare una sezione duplicata direttamente sotto l’originale.
In alternativa, a volte potreste voler riutilizzare la stessa sezione su più pagine o anche su diversi siti web. Potete salvare qualsiasi sezione come template di blocco. Questo aggiunge il vostro design alla libreria di Elementor, quindi è sempre a portata di mano.
Per trasformare un blocco in un template riutilizzabile, fate clic con il tasto destro del mouse sulla sua icona tratteggiata. Poi selezionate Save as template.
Potete modificare qualsiasi widget selezionandolo sulla vostra area di lavoro e poi usando i comandi nella barra laterale di Elementor. Tuttavia, navigare tra i diversi widget può diventare scomodo quando avete molti altri widget. Questo è particolarmente vero per i widget sovrapposti o quando avete aggiunto molti elementi in un piccolo spazio.
Il Navigator di Elementor fornisce una vista elenco di tutti i widget della vostra pagina, organizzati nelle loro corrispondenti sezioni e colonne. Potete facilmente navigare tra i vostri widget selezionandoli in questa struttura. La barra laterale di Elementor si aggiornerà per mostrare tutte le opzioni per il widget attualmente selezionato.
Le scorciatoie da tastiera sono il massimo risparmio di tempo ed Elementor è dotato di vari tasti di scelta rapida integrati. Premete Cmd/Ctrl + ? sulla vostra tastiera per visualizzare queste scorciatoie.
Questo apre una finestra contenente tutti i tasti di scelta rapida disponibili. Potete potenziare il vostro design e sviluppo web familiarizzando con alcune o tutte queste scorciatoie.
Riepilogo
Creare un sito WordPress non è sempre facile, specialmente se non siete web designer o developer con esperienza. Per fortuna, il page builder Elementor può risolvere buona parte della complessità di costruire il vostro sito web.
Indipendentemente dal fatto che optiate per il plugin gratuito o premium, potete usare Elementor per progettare e costruire qualsiasi tipo di articolo o pagina di cui avete bisogno. Questo page builder viene anche fornito con una selezione di template già pronti. In alternativa, potete creare i vostri template e riutilizzarli su più pagine o su vari siti web.
Avete qualche domanda su come usare il plugin WordPress Elementor? Fatecelo sapere nella sezione commenti qui sotto!
Lascia un commento