Dal suo lancio nel 2016, Elementor è esploso ed è diventato il più popolare costruttore di pagine per WordPress. Con Elementor, non solo è possibile costruire pagine web straordinarie. È possibile creare un intero sito web utilizzando Elementor. La versione Pro di Elementor viene fornita con il web builder, che consente di costruire parti personalizzate del tema WordPress. Dall’intestazione, al piè di pagina, ai modelli di singoli post, alle pagine 404, alle pagine di archivio, alle pagine dei risultati di ricerca, ecc.
In questo post, vi mostreremo come potete costruire un intero sito web utilizzando Elementor Pro. Nel caso in cui non lo sappiate.
Cos’è Elementor web builder
Elementor è un web builder plugin per la creazione di pagine per WordPress.
Un page builder permette di costruire una bella pagina web senza dover lavorare con HTML o CSS. Un page builder, compreso Elementor, è dotato di un editor visuale, in cui tutto è trascinabile.
Elementor stesso viene rilasciato come plugin freemium.
La versione Pro ($49/anno sul piano più basso) è dotata delle seguenti caratteristiche principali.
In questo esempio, vi mostreremo come costruire un sito web per un’agenzia digitale.
Elementor offre una serie di template a sé stanti. Un kit di template è una raccolta di template Elementor che condividono un concetto di design.
Un kit di template è progettato per siti web di una particolare nicchia. Per questo esempio utilizzeremo un kit di template della Digital Agency.
Dominio e hosting del sito
Prima di iniziare a costruire il sito con Elementor web builder, dobbiamo assolutamente prendere il dominio e l’hosting.
Ecco le cose che dovrete preparare per costruire un sito con Elementor.
Il dominio è l’indirizzo a cui le persone possono accedere al vostro sito (ad esempio, un dominio.com costa solitamente 8-13 dollari all’anno).
Per quanto riguarda l’hosting, è possibile scegliere tra i piani che si adattano alle proprie esigenze.
Sebbene sia possibile utilizzare host condivisi, consigliamo vivamente di utilizzare host WordPress gestiti, poiché sono progettati per gestire esclusivamente siti web basati su WordPress.
L’infrastruttura di un hosting WordPress gestito è ottimizzata specificamente per WordPress, compresa la configurazione del server.
Con un host WordPress gestito, non è necessario gestire da soli la messa a punto e la sicurezza del sito, poiché questo lavoro è gestito dai rispettivi provider di hosting.
Siteground è uno dei noti provider di hosting web che offre hosting WordPress gestito.
Piano di Elementor web builder
Dovrete utilizzare Elementor Pro Edition web builder per creare un’intestazione personalizzata, un piè di pagina personalizzato e le altre parti del vostro tema di cui abbiamo parlato sopra.
Elementor offre cinque piani per la versione Pro.
Per ulteriori informazioni, è possibile consultare il sito web ufficiale.
Se volete creare un sito web per la vostra attività, potete scegliere il piano ESSENTIAL, che costa 49 dollari all’anno. Una volta configurato il tutto, si può iniziare a costruire il sito.
La prima cosa da fare è installare WordPress, che è il componente principale del sito web che stiamo per costruire. I passaggi esatti per l’installazione di WordPress variano a seconda della dashboard offerta dal vostro provider di hosting.
Se utilizzate SiteGround, potete consultare questo post su come installare WordPress.
Se utilizzate un provider di hosting che utilizza cPanel, potete leggere questo articolo.
Installazione di Elementor
È possibile ottenere Elementor Pro web builder dal sito ufficiale.
Avrete accesso allo zip di Elementor Pro al termine dell’acquisto.
Per installare Elementor Pro sul vostro sito, accedete alla vostra dashboard di WordPress utilizzando il vostro nome utente e la vostra password.
Andare su Plugin -> Aggiungi nuovo.
Fare clic sul pulsante Aggiungi nuovo in alto, selezionare il file zip di Elementor Pro scaricato e fare clic sul pulsante Installa ora per installarlo in WordPress.
Attivare il plugin subito dopo l’installazione.
Dopo aver attivato il plugin Elementor Pro, verrete riportati al gestore dei plugin di WordPress e vedrete il pulsante Connetti e attiva nell’angolo in alto a destra.
Fare clic su questo pulsante per attivare Elementor Pro. Nota: Elementor Pro richiede Elementor Free.
È possibile scaricare Elementor Free nella directory ufficiale dei plugin di WordPress.
Prima di creare le pagine principali e i modelli utente per il vostro sito utilizzando Elementor, potreste voler impostare elementi essenziali come logo, icone, titoli e descrizioni.
Anche se è possibile impostare questi elementi in un secondo momento, è molto più utile impostarli prima, poiché saranno coinvolti nelle fasi successive.
Logo di Elementor web builder
Quando si costruisce il sito con Elementor web builder, si consiglia vivamente di impostare il logo, le icone, i titoli e le descrizioni del sito nelle Impostazioni del sito piuttosto che nel Theme Customizer.
In questo modo si otterrà un’enorme flessibilità quando si tratterà di cambiare tema in futuro.
Tutto ciò che è stato impostato attraverso le impostazioni del sito non andrà perso, anche quando si cambia tema.
Per accedere alle impostazioni del sito in Elementor, entrare nell’editor di Elementor modificando la pagina.
Una volta aperto l’editor, fare clic sull’icona a tre linee in alto a sinistra e scegliere Impostazioni sito.
È sufficiente impostare il logo, il badge, l’intestazione e la descrizione del sito nei campi appropriati. Ricordarsi di premere il pulsante “AGGIORNA” per applicare le modifiche.
Creare le pagine del sito
Una volta che Elementor Pro è attivo, si può iniziare a creare le pagine statiche del sito.
Nel nostro caso, le pagine statiche che creeremo sono: Homepage, pagina informativa, pagina dei contatti, pagina dei clienti e pagina dei servizi.
Creare la pagina (Pagina -> Aggiungi nuovo) e modificarla con Elementor web builder.
Assegnare alla pagina un titolo come home, casa o frontpage. Impostare un layout per questa pagina facendo clic sull’icona a forma di ingranaggio nell’angolo in basso a sinistra della barra laterale sinistra.
Impostate il layout della pagina su Fullwidth in Elementor.
Poiché vogliamo creare un sito web basato su un pacchetto di modelli di agenzia digitale, facciamo clic sull’icona della cartella nell’area di disegno per importare un modello di homepage di un pacchetto di modelli di agenzia digitale.
Nella libreria dei modelli, alla voce Pagine, digitare agenzia digitale nella casella di ricerca e scegliere il modello di homepage. Fare clic sul pulsante di inserimento per aprirlo nell’editor di Elementor.
È possibile personalizzare i contenuti sostituendo quelli predefiniti con quelli personalizzati.
Widget di Elementor web builder
È possibile fare clic su ciascun widget per modificarlo e poi navigare nel riquadro di sinistra per cambiare il contenuto.
Facendo clic sui widget si accede alla modalità di modifica.
Una volta terminata la personalizzazione dei contenuti, fare clic sul pulsante “Pubblica” nel riquadro di sinistra per pubblicare la pagina.
È anche possibile visualizzarla in anteprima facendo clic sull’icona dell’occhio.
Una volta pubblicata la pagina iniziale, andare in Impostazioni->Lettura.
Impostare Visualizza pagina iniziale su Pagina statica e scegliere la nuova pagina iniziale dal menu a tendina, quindi premere Salva modifiche.
Creare una nuova pagina (Pagine -> Aggiungi nuovo) e modificarla con Elementor web builder. Si può dare alla pagina un nome come “Informazioni” o “Informazioni su di noi”.
Fare clic sull’icona dell’ingranaggio nel riquadro di sinistra e scegliere l’opzione Layout di pagina di Elementor Fullwidth. Fare clic sull’icona della cartella nell’area della tela.
Nella scheda Pagine, digitate agenzia digitale nel campo di ricerca. Selezionare la pagina About, quindi fare clic sul pulsante Inserisci per aprirla nell’editor di Elementor.
Impostate i contenuti come nella vostra homepage e pubblicate la pagina. Creare una nuova pagina e modificarla con Elementor.
È possibile assegnare a questa pagina un nome come “Contatti” o “Contattaci”.
Layout di Elementor
Impostare il layout della pagina su Fullwidth in Elementor. Fare clic sull’icona della cartella nell’area del canvas per aprire la libreria dei modelli.
Nella sezione Pagine della libreria dei modelli, digitate agenzia digitale nella casella di ricerca.
Selezionare la pagina Contatti, quindi premere il pulsante Inserisci per aprirla nell’editor di Elementor web builder. La pagina dei clienti viene utilizzata per mostrare i clienti con cui l’azienda ha lavorato.
Creare una nuova pagina e modificarla con Elementor.
Assegnare alla pagina un titolo, ad esempio Clienti o Clienti felici.
Impostare il layout della pagina su Fullwidth in Elementor. Fare clic sull’icona della cartella nell’area del canvas per aprire la libreria dei modelli.
Nella scheda Pagine, digitare agenzia digitale nella casella di ricerca.
Selezionare una pagina di clienti, quindi premere il pulsante Inserisci per aprirla nell’editor di Elementor.
Pubblicare la pagina
Una volta fatto, pubblicare la pagina.
La pagina dei servizi serve a mostrare i servizi offerti dalla vostra azienda.
Creare una nuova pagina e modificarla con Elementor web builder.
Assegnare alla pagina un titolo, ad esempio Servizi o I nostri servizi.
Impostare il layout della pagina su Fullwidth in Elementor.
Fare clic sull’icona della cartella nell’area di disegno per aprire la libreria dei modelli.
Nella scheda Pagine, digitare Agenzia digitale.
Selezionare la pagina Servizi e premere il pulsante Inserisci per aprirla nell’editor di Elementor.
Una volta fatto, pubblicare la pagina.
Alcuni temi possono avere più sezioni, a seconda della complessità del tema.
La funzione Theme Builder di Elementor consente di costruire le parti precedenti, che creeremo nel nostro sito creato.
Inoltre, creeremo anche il modello per un singolo post e il popup. Utilizzeremo un’intestazione per inserire il logo del sito e il menu iniziale. Prima di iniziare a creare l’intestazione, è necessario creare un menu.
Per farlo, spostarsi in Aspetti->Menu. Fare clic sul link Crea nuovo menu per creare un nuovo menu.
