Come utilizzare Elementor Page Builder con WordPress

Quando si parla di page builder di WordPress, il più popolare e quello con il maggior numero di installazioni attive e la community più numerosa è sicuramente Elementor. Finora, ci sono circa 8 milioni di siti creati con Elementor. È consigliato da molti esperti per la sua facilità d'uso, velocità ed enormi possibilità durante la creazione di siti WordPress.

Ho testato la versione Pro di Elementor e creato una landing page. Viene fornito con la funzionalità di trascinamento della selezione e funziona con qualsiasi tema e puoi utilizzare tutti i widget gratuiti, Pro e WordPress contemporaneamente. Leggiamo questo articolo per saperne di più sull'installazione e la configurazione di Elementor con WordPress.

Perché scegliere Elementor Page Builder?

Elementor è uno dei primi e uno dei più avanzati costruttori di pagine WordPress sul mercato al momento. Ha anche un enorme ecosistema intorno e molti autori più piccoli stanno costruendo utili componenti aggiuntivi e modelli che puoi utilizzare per ridurre il tempo necessario per il risultato finale.

Nel caso di Elementor, il risultato finale può essere un sito davvero fantastico, ben progettato con tutte le funzionalità di cui hai bisogno o di cui potresti aver bisogno. Non troverai alcun tipo di sito WordPress che non puoi creare utilizzando Elementor. Se hai bisogno di qualche funzionalità extra, può essere facilmente implementata con gli shortcode.

Funzionalità di Elementor Page Builder

La versione gratuita di Elementor include un numero limitato di elementi, ma con la versione Pro ottieni componenti aggiuntivi come QI, Ultimate Add Ons, ecc. Inoltre, avrai un sacco di elementi e modelli utili per costruire facilmente il tuo sito .

Non sarebbe giusto tralasciare il componente aggiuntivo Crocoblock per Gutenberg ed Elementor, che è uno degli strumenti preferiti dalla maggior parte degli utenti di Elementor poiché estende le funzionalità native di Elementor.

Elementor ha diviso le sue caratteristiche in 4 categorie.

1. Widget di base

I widget di base vengono forniti con la versione gratuita e sono abbastanza sufficienti per creare un sito Web straordinario che non richiede opzioni avanzate come Sommario, Portfolio o Modulo. Inoltre, nella versione gratuita, non è possibile creare un menu di intestazione/navigazione e potrebbe essere necessario trovare un tema WordPress interessante con il menu di navigazione che ti piace.

2. Widget professionali

I Widget Pro con Elementor Pro coprono quasi ogni aspetto e ogni widget di cui potresti aver bisogno per creare qualsiasi tipo di sito web. Aggiungi e scegli post da diverse categorie, tipi di post o semplicemente elenca quelli più recenti, Tabelle dei prezzi, Galleria, Flip Box, Easy Social Media Networks embed, Vari Media Carousels, Lottie Widget e HotSpot (ne parlerò più avanti).

3. Elementi del tema

Theme Elements viene fornito anche con Elementor Pro e sono importanti per creare tutte le pagine dei modelli e, naturalmente, il modello di post singolo. Come sai, ci sono pagine che vengono popolate dinamicamente con contenuti come Categoria, Tag, Autore, ecc.

Per quelle pagine, devi creare un modello utilizzando gli elementi del tema. Lo stesso vale per il Post singolo, dove puoi progettare un bellissimo modello per i tuoi post che verrà utilizzato da tutti i post senza la necessità di crearli ogni volta. Basta aggiungere il contenuto come sei abituato e il gioco è fatto.

4. Widget WooCommerce

E, ultimo ma non meno importante, i widget WooCommerce. Questi widget ti consentono di creare nuovamente in modo simile a Theme Builder, le pagine dei modelli e il modello del singolo prodotto con facilità utilizzando gli elementi di WooCommerce.

Prezzi e piani di Elementor Page Builder

Elementor Pro viene fornito con 5 piani diversi, tutti contengono lo stesso generatore di pagine Elementor Pro e funzionalità come:

• Trascina e rilascia l'editor live
• Design reattivo
• 90+ Widget di base e Pro
• Oltre 300 modelli di base e professionali
• Generatore di temi

Il piano più basso è Essential per 1 sito al prezzo di $49. Con questo piano, ottieni il supporto Premium, il che significa che puoi aspettarti una risposta in 24 ore. Il piano successivo è Advanced e copre una licenza per 3 siti al prezzo di $ 99 con lo stesso tipo di supporto.

Probabilmente il più popolare è Expert a $ 199 per 25 siti. Inoltre, riceverai un Profilo Esperto Elementor, dove potrai pubblicare i tuoi progetti completati in Elementor e ottenere nuovi clienti.

Uno prima della cima è Studio per 100 siti al prezzo di $ 499 e lì hai un vantaggio extra del supporto VIP, il che significa che hai la priorità e i tuoi biglietti riceveranno risposta in 30 minuti. Lo stesso viene fornito con il piano più costoso dell'agenzia per 1000 siti al prezzo di $ 1000.

Tutti i piani sono annuali e se ti chiedi cosa succede ai siti se il tuo abbonamento scade, la risposta è che i siti avranno lo stesso aspetto di prima ma non sarai in grado di modificare o utilizzare elementi e modelli di Elementro Pro.

Requisiti di sistema/hosting di Elementor

Secondo la pagina dei requisiti di sistema di Elementor, dovrebbe funzionare anche con 128 MB di PHP, MySQL 5.6 o versioni successive o MariaDB 10.0 o versioni successive. Inoltre, dovrebbe funzionare con qualsiasi PHP 7+. A scopo di test, ho usato VultrHF con 2 GB di memoria PHP.

Ovviamente, avrai bisogno dell'ultima versione di WordPress e di tutti gli altri plugin aggiornati.

Installa e configura Elementor Page Builder

L'installazione della versione gratuita di Elementor è la stessa di qualsiasi altro plug-in nel repository dei plug-in di WordPress, vai alla dashboard di WordPress → Plugin → Aggiungi nuovo, cerca Elementor, installa e attiva il plug-in.

Per la versione Pro, devi acquistare il piano che creerà automaticamente un account su Elementor. Quando accedi, vedrai il pulsante di download per scaricare l'ultima versione Pro.

Mentre sei ancora connesso alla dashboard di Elementor, accedi alla dashboard di WordPress → Plugin → Aggiungi nuovo e seleziona Carica, sfoglia il file scaricato di Elementor Pro dal tuo computer, installalo e attivalo.

Quando hai finito nella barra laterale di sinistra sulla dashboard di WordPress, vai su Elementor → fai clic su Licenza → fai clic sul pulsante Connetti e attiva.

Quando viene cliccato, ti reindirizza automaticamente alla tua dashboard su Elementor per attivarlo. Fare clic sul pulsante verde Attiva e il gioco è fatto. Il tuo Elementor Pro è connesso e attivato.

Dopo l'attivazione, vedrai la conferma che il tuo Elementor è attivo. Tuttavia, se hai creato il sito su un dominio di staging e non desideri acquistare un'altra licenza per live, puoi facilmente disconnettere l'account su staging e attivarlo sul dominio live.

È ora di iniziare a utilizzare Elementor e creare il tuo sito web. Il mio suggerimento è di utilizzare il tema Hello di Elementor creato appositamente per Elementor.

Per farlo, iniziamo creando una pagina "Homepage" e modificandola con Elementor. Vai su Pagine → Aggiungi nuovo, chiamalo Home page e pubblicalo, quindi fai clic sul pulsante Modifica con Elementor.

Nella pagina Modifica, vedrai gli elementi che non puoi modificare perché il layout è impostato come predefinito. Per utilizzare Elementor su una tela vuota, seleziona Elementor Full Width o Elementor Canvas facendo clic sull'icona a forma di ingranaggio nell'angolo in basso a sinistra.

Prima di iniziare a costruire il sito, assicurati di fare clic sull'icona dell'hamburger nell'angolo in alto a sinistra e di impostare tutte le impostazioni globali necessarie per il resto del lavoro.

Le impostazioni del sito sono abbastanza simili all'impostazione del tema. Qui puoi selezionare i colori globali, i caratteri che utilizzerai e la tipografia completa del sito per ogni tag HTML.

Oltre a ciò, puoi impostare lo stile del pulsante globale, l'intestazione, il piè di pagina, il CSS personalizzato se necessario e tutto ciò di cui hai bisogno per impostarne uno e mantenerlo in tutto il sito per mantenere la coerenza.

La seconda opzione è Theme Builder, che consente di creare le pagine modello e i singoli modelli di post/prodotto, che verranno utilizzati automaticamente dalla pagina, dal post o dal prodotto generati dinamicamente specifici. Come ogni tema WordPress deve avere file modello per visualizzare tutto quanto sopra, Elementor ti permetterà di farlo senza scrivere nemmeno una singola riga del codice.

L'ultima opzione sono le preferenze dell'utente, in cui puoi configurare il tuo ambiente di lavoro in Elementor, nulla che influisca sul sito stesso ma sulla tua interfaccia utente come amministratore.

Per dare il via al tuo sito, tutti i widget disponibili sono posizionati nella barra laterale di sinistra e tutto può essere modificato visivamente e trascinandolo. Se desideri un modo più semplice per farlo, puoi iniziare utilizzando uno dei blocchi o modelli predefiniti facendo clic sull'icona della cartella.

L'icona della cartella aprirà un pop-up, in cui puoi vedere blocchi e modelli predefiniti, oltre a quelli che hai salvato in precedenza. Puoi anche salvare un blocco o un intero modello che hai creato e riutilizzarlo in un'altra pagina interna. È abbastanza comune utilizzare il blocco salvato per le testimonianze, un invito all'azione specifico che non dovrebbe essere visualizzato su tutte le pagine ma su alcune.

C'è un'altra cosa che devi sapere quando inizi a costruire un sito web senza alcuna esperienza precedente, è facile da usare, abbastanza intuitivo e senza alcuna esperienza precedente in pochi giorni, sarai più che in grado di costruirti un bel sito web , posso dire anche dall'aspetto professionale.

Tuttavia, il tuo sito deve avere un bell'aspetto su tutte le dimensioni del dispositivo e, allo stesso modo in cui hai modificato la versione desktop, puoi modificare tutte le altre dimensioni. Tieni presente che gli elementi e i widget possono essere aggiunti solo alla versione desktop e quindi puoi ingannare l'aspetto su dimensioni più piccole.

Inoltre, puoi facilmente impostare la visibilità del widget o della sezione su diversi dispositivi, in modo da poter avere contenuti diversi in una sezione simile lasciando una sezione visibile su un desktop ma nascosta su tablet e dispositivi mobili. Allo stesso modo, un altro nascosto da un desktop ma visibile su tablet e mobile.

Per modificare le versioni mobili e tablet, fai clic sull'icona Modalità reattiva nella parte inferiore della barra laterale di sinistra, mostrerà il tuo sito sul cellulare. E in alto, puoi passare da una dimensione dello schermo all'altra.

Per maggiore chiarezza, ho aggiunto due sezioni in cui una è nascosta su dispositivi mobili e tablet e l'altra sezione è nascosta su desktop. Si prega di vedere l'esempio qui sotto.

Il risultato finale è sul cellulare.

E il risultato finale sul desktop ha solo una sezione ma quella diversa.

Prestazioni di Elementor Page Builder su Cloudways

Elementor si comporta abbastanza bene e ottiene un punteggio di 100 su GTMetrix e gli altri strumenti di test mostrano prestazioni davvero eccezionali. Tieni presente che non ho ottimizzato alcuna immagine per avere le stesse dimensioni di pagina e immagini per tutti i test che abbiamo fatto.

– Risultati di Elementor su GTMetrix

– Risultati di Elementor su Pingdom Tools

– Risultati di Elementor su WebPageTest

Riepilogo

Se hai bisogno di un generatore di pagine intuitivo e facile da usare, Elementor potrebbe coprire tutti gli aspetti necessari per creare un bel sito web. Non è così difficile creare siti pixel-perfect dal design se hai qualche conoscenza dei CSS.

Con l'enorme community e centinaia di componenti aggiuntivi e plug-in esterni che estendono le funzionalità di base di Elementor, non riesco a vedere alcun tipo di sito Web che non possa essere creato utilizzando Elementor.

Vediamo spesso come Elementor è gonfio, viene caricato molto codice non necessario, è difficile da ottimizzare ma come puoi vedere dai test, sembra che Elementor funzioni abbastanza bene su Cloudways. Ho testato la pagina di destinazione con 25 immagini all'interno e 7 sezioni + intestazione e piè di pagina, che è al di sopra della media per la home page.

Un'altra cosa grandiosa di Elementor è che la curva di apprendimento non è ripida ma abbastanza leggera e in pochi minuti utilizzando alcuni modelli o blocchi predefiniti, puoi avere un sito Web davvero ben progettato e dall'aspetto moderno.