Guida pratica su come utilizzare Elementor per realizzare un sito web

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.

Elementor Free vs 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.

E questo è niente, ci sono davvero tanti “PRO” ad avere la versione PRO, ma, per iniziare, la versione FREE è più che sufficiente!

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… ma questo lo già sai fare, vero?!

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 

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.

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.

Contattaci ora!

Per ogni domanda, dubbio, informazione, compila la form