Technologie Gadgets, SEO Tipps, Geld Verdienen mit WEB!

Come utilizzare Elementor Page Builder con WordPress

Come utilizzare Elementor Page Builder con WordPress

Quando parliamo di page builder 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. È raccomandato da molti esperti per la sua facilità d’uso, velocità e enormi possibilità nella creazione di siti WordPress.

Ho testato la versione Pro di Elementor e creato una landing page. Viene fornito con la funzionalità drag-and-drop 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 attualmente sul mercato. Ha anche un enorme ecosistema attorno a sé e molti autori più piccoli stanno creando 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 o potresti aver bisogno. Non troverai nessun tipo di sito WordPress che non puoi creare Utilizzando Elementor. Se hai bisogno di funzionalità extra, possono essere facilmente implementate 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-on, ecc. Inoltre, avrai un sacco di elementi e modelli utili per costruire facilmente il tuo sito .

Non sarebbe giusto tralasciare il Crocoblocco componente aggiuntivo 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 suddiviso le sue funzionalità in 4 categorie.

1. Widget di base

I widget di base vengono forniti con la versione gratuita e sono più che sufficienti per creare uno straordinario sito Web che non richiede opzioni avanzate come sommario, portfolio o modulo. Inoltre, nella versione gratuita, non puoi creare un menu di intestazione/navigazione e potresti aver bisogno di trovare qualche tema WordPress interessante con il menu di navigazione che ti piace.

2. Widget professionali

I widget Pro con Elementor Pro coprono quasi tutti gli aspetti e tutti i widget di cui potresti aver bisogno per creare qualsiasi tipo di sito web. Aggiungi e seleziona post da diverse categorie, tipi di post o semplicemente elenca quelli più recenti, tabelle prezzi, galleria, flip box, facile incorporamento di social media network, vari caroselli multimediali, widget Lottie e HotSpot (ne parlerò più tardi).

3. Elementi tematici

Gli elementi tematici vengono forniti anche con Elementor Pro e sono importanti per creare tutte le pagine dei modelli e ovviamente il modello di post singolo. Come sai, ci sono pagine 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 Single Post, dove puoi progettare un bellissimo template per i tuoi post che verrà utilizzato da tutti i post senza la necessità di crearli ogni volta. Aggiungi semplicemente 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 di nuovo simili a Theme Builder, le pagine dei modelli e il modello del singolo prodotto con facilità utilizzando gli elementi WooCommerce.

Prezzi e piani di Elementor Page Builder

Elementor Pro viene fornito con 5 piani diversi, tutti contengono lo stesso page builder Elementor Pro e funzionalità come:

  • Trascina e rilascia l’editor live
  • Progettazione reattiva
  • Oltre 90 widget di base e professionali
  • 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 supporto Premium, il che significa che puoi aspettarti una risposta entro 24 ore. Il piano successivo è Advanced e prevede 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, otterrai un profilo esperto di Elementor, dove potrai pubblicare i tuoi progetti completati in Elementor e ottenere nuovi clienti.

Uno prima della vetta è Studio per 100 siti al prezzo di $499 e lì hai un vantaggio extra di supporto VIP, il che significa che hai la priorità e i tuoi ticket riceveranno risposta entro 30 minuti. Lo stesso vale per 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 appariranno uguali a 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 versione successiva o MariaDB 10.0 o versione successiva. Inoltre, dovrebbe funzionare con qualsiasi PHP 7+. A scopo di test, ho utilizzato VultrHF con 2 GB di memoria PHP.

Naturalmente, 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 plugin sul Repository dei plugin WordPressVai alla dashboard di WordPress → Plugin → Aggiungi nuovo, cerca Elementor, installa e attiva il plugin.

Per la versione Pro, devi acquistare il piano che creerà automaticamente un account su Elementor. Quando accedi da lì, 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 della dashboard di WordPress, vai su Elementor → fai clic su Licenza → fai clic sul pulsante Connetti e attiva.

Quando fai clic, vieni reindirizzato automaticamente alla dashboard su Elementor per attivarlo. Fai 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 il live, puoi facilmente disconnettere l’account in 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 fare ciò, iniziamo creando una pagina “Homepage” e modificandola con Elementor. Vai su Pagine → Aggiungi nuovo, chiamalo Homepage 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 Larghezza intera 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 configurare tutte le impostazioni globali necessarie per il resto del lavoro.

Le Impostazioni del sito sono abbastanza simili alla configurazione del tema. Qui puoi selezionare i colori globali, i caratteri che utilizzerai e la tipografia completa del sito per ciascun tag HTML.

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

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

L’ultima opzione sono le preferenze utente, dove puoi impostare il tuo ambiente di lavoro in Elementor, niente che influenzi il sito stesso ma la tua interfaccia utente come amministratore.

Per avviare il tuo sito, tutti i widget disponibili vengono posizionati nella barra laterale di sinistra e tutto può essere modificato visivamente e trascinando e rilasciando. 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 potrai vedere i blocchi e i modelli predefiniti, oltre a quelli salvati in precedenza. Puoi anche salvare un blocco o un intero modello che hai creato e riutilizzarlo su qualche altra pagina interna. È abbastanza comune utilizzare il blocco salvato per le testimonianze, alcuni specifici inviti all’azione che non dovrebbero essere visualizzati su ogni pagina 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 capace di costruirti un bel sito web , posso dire anche uno dall’aspetto professionale.

Tuttavia, il tuo sito deve avere un bell’aspetto su dispositivi di tutte le dimensioni e, nello 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 impostare facilmente la visibilità del widget o della sezione su dispositivi diversi, in modo da poter avere contenuti diversi in una sezione simile lasciando una sezione visibile su un desktop ma nascosta su tablet e dispositivo mobile. Allo stesso modo, un altro nascosto da desktop ma visibile su tablet e mobile.

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

Per maggiore chiarezza, ho aggiunto due sezioni di 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 diversa.

Prestazioni di Elementor Page Builder su DreamHost

Elementor funziona 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 esattamente le stesse dimensioni di pagina e immagini per tutti i test che abbiamo effettuato.

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 di CSS.

Con l’enorme community e centinaia di componenti aggiuntivi e plugin esterni che estendono le funzionalità di base di Elementor, non riesco a vedere nessun tipo di sito Web che non possa essere creato utilizzando Elementor.

Vediamo spesso come Elementor sia gonfio, si carica molto codice non necessario, è difficile da ottimizzare ma, come puoi vedere dai test, sembra che Elementor funzioni abbastanza bene su DreamHost. Ho testato la pagina di destinazione con 25 immagini all’interno e 7 sezioni + intestazione e piè di pagina, che è superiore alla media per la home page.

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