WooCommerce + Elementor: costruiamo cose interessanti

Vuoi modificare e progettare il tuo sito Web WordPress senza assumere uno sviluppatore? Buone notizie: è completamente possibile con i plugin per la creazione di pagine di WordPress.

Un plug-in per la creazione di pagine di WordPress viene fornito con un'interfaccia drag-and-drop intuitiva per creare bellissime pagine e siti Web personalizzati. Pertanto, indipendentemente dalle tue competenze o dal tuo know-how tecnico, i plug-in per la creazione di pagine rendono la progettazione del tuo sito Web ideale un gioco da ragazzi senza scrivere una singola riga di codice.

Ora, se ti stai chiedendo quale plugin per la creazione di pagine di WordPress dovresti considerare, sei nel posto giusto. In questo articolo esamineremo una delle opzioni più popolari: Elementor, che è considerato il gold standard. Elementor è il secondo plug-in WordPress più installato con 2 milioni di installazioni attive, utilizzato da circa il 15,9% dei siti Web WordPress.

Inizieremo con la breve panoramica di Elementor e rivedremo ulteriormente l'interfaccia, le funzionalità e i prezzi del plug-in per aiutarti a determinare se è la scelta giusta per il tuo sito. Andiamo!

Plugin Elementor: una breve panoramica

Elementor è un plug-in per la creazione di pagine WordPress drag-and-drop che ti consente di creare pagine Web e post unici rispetto ai modelli di pagina standard forniti con i tuoi temi WooCommerce o WordPress.

Non richiede codifica e ti consente di configurare facilmente le impostazioni e organizzare il contenuto e gli elementi della tua pagina con gli strumenti di trascinamento della selezione.

Iniziamo con la revisione del plug-in osservando come funziona l'interfaccia di Elementor.

Comprendere l'interfaccia del plug-in Elementor

Rispetto a molti altri plugin per la creazione di pagine, Elementor ha una delle interfacce più semplici e fluide. Quando avvii il plugin per la prima volta, atterrerai su una pagina come questa:

L'area grigia tratteggiata è l'area dei contenuti. Al di fuori di quest'area, apparirà il tuo tema normale, mentre, all'interno dell'area tratteggiata, puoi aggiungere widget e creare il tuo design.

Sul lato sinistro, vedrai i widget, che fungono da elementi costitutivi che puoi mettere insieme per progettare la tua pagina. Sotto questi widget troverai le impostazioni generali per visualizzare in anteprima i tuoi progetti, annullare le modifiche o attivare la modalità reattiva, come mostrato nell'immagine.

Ecco com'è semplice trascinare e rilasciare gli elementi desiderati sulla pagina:

Quando rilasci un elemento sulla tua pagina, Elementor divide gli elementi in due strutture di layout, fornendo due diversi elementi strutturali, come mostrato di seguito.

Questi elementi strutturali includono:

• Sezione: contrassegnata dal colore blu.
• Colonna: si trova all'interno della sezione contrassegnata dal nero. Puoi aggiungere tutte le colonne necessarie all'interno della sezione.

Dopo aver rilasciato l'elemento, puoi facilmente personalizzarne il layout regolando la larghezza e modificando la distanza e l'altezza delle colonne.

Inoltre, puoi anche scegliere una struttura di sezione adatta alle tue esigenze specifiche e aggiungere altri elementi, come un'immagine, un video o un'icona, all'interno delle colonne.

Ad esempio, ho aggiunto un'immagine e ne ho scelta una dalla libreria di immagini Elementor predefinita, come mostrato di seguito nell'immagine. Puoi modificare le dimensioni e l'allineamento dell'immagine, aggiungere una didascalia e collegare un URL adatto.

Per ulteriori stili di elementi, strutture o colonne, puoi utilizzare le schede Stile e Avanzate nella barra laterale. Basta fare clic sul contenuto che si desidera modificare e fare clic sulle schede della barra laterale per apportare le modifiche.

Puoi anche navigare dalle schede alla barra laterale degli elementi semplicemente facendo clic sull'icona quadrata visualizzata nell'angolo destro della barra laterale.

Pertanto, Elementor è abbastanza facile da usare e con semplici opzioni di trascinamento e rilascio e facili opzioni di personalizzazione: puoi creare il sito Web dei tuoi sogni in pochissimo tempo.

Ora, senza perdere molto tempo, passiamo direttamente alle funzionalità del generatore di pagine di Elementor.

Le principali funzionalità di Elementor che lo rendono un eccellente generatore di pagine per WooCommerce

Ecco alcuni eccellenti vantaggi di Elementor che lo rendono uno dei page builder più popolari tra i siti Web WordPress e WooCommerce.

1. Ampia libreria di modelli predefiniti

Elementor offre una vasta gamma di modelli. Fare clic sull'icona Aggiungi modelli di seguito per aggiungere un modello.

Scegli tra oltre 300 modelli dalla libreria di modelli di Elementor e aggiungili alla tua pagina con un solo clic.

Dal rilascio di Elementor 2.0, questi modelli sono disponibili in due formati:

• Blocchi: forniscono progetti per sezioni specifiche anziché per un'intera pagina. Ad esempio, puoi aggiungere una sezione Informazioni sull'azienda o una sezione di contatto predefinita a un layout di pagina esistente utilizzando i blocchi.

• Pagine: offre design a pagina intera, che puoi importare con un solo clic e modificare secondo necessità.

Puoi anche salvare alcuni dei tuoi progetti come blocchi e modelli per riutilizzarli in seguito su altre pagine o siti Web, rendendo estremamente conveniente mantenere un design di modello comune in tutto il tuo sito Web.

Rimuove anche il fastidio di creare ogni volta un nuovo design di pagina da zero.

2. Controlli di progettazione reattivi e anteprime mobili

L'utilizzo dei dispositivi mobili cresce costantemente ogni mese e circa il 73,1% dei web designer ritiene che un design di pagina non reattivo sia uno dei principali motivi dell'abbandono del sito web.

Tutti i design e le pagine che crei su Elementor sono automaticamente reattivi e hanno un bell'aspetto sui dispositivi mobili. Inoltre, puoi visualizzare rapidamente in anteprima l'aspetto del tuo sito Web su altri dispositivi senza uscire dall'interfaccia.

Fai clic sul pulsante Modalità reattiva nella parte inferiore della barra laterale e visualizza in anteprima le versioni desktop, mobile e tablet del tuo sito Web facendo clic sui pulsanti evidenziati nelle immagini sottostanti.

Ti consente di personalizzare il design della tua pagina in base al tipo di dispositivo e ti consente di mostrare o nascondere determinati widget su determinati dispositivi. Ad esempio, se la versione desktop del tuo sito Web ha un'enorme immagine di eroe, potresti evitare di visualizzare quell'immagine sulla versione mobile del tuo sito. Puoi selezionare quell'immagine o qualsiasi sezione che desideri nascondere e nasconderla sui dispositivi mobili utilizzando i controlli del design reattivo di Elementor con un solo clic.

Quindi, garantisce che il tuo sito Web sia reattivo al 100%, quindi ha un bell'aspetto su tutti i dispositivi, inclusi desktop, tablet e dispositivi mobili.

3. Opzioni di personalizzazione illimitate

La personalizzazione è illimitata con Elementor e non c'è limite a come puoi progettare il tuo sito Web e i suoi elementi.

I menu Stile e Avanzate nell'editor di Elementor offrono molte opzioni di personalizzazione dello stile. Puoi modellare il contenuto in base a diversi attributi, inclusi colore, larghezza, dimensione, filtri CSS e bordo.

Allo stesso tempo, il menu Avanzate consente di gestire il layout, gli effetti di movimento, lo sfondo, il bordo, gli attributi e altri fattori, come mostrato di seguito.

4. Controlli dettagliati del layout

Immergendosi più a fondo nelle opzioni di personalizzazione, Elementor ti offre un controllo dettagliato sul design del layout , quindi non devi scendere a compromessi sulla flessibilità del design a causa dell'impossibilità di scrivere codice personalizzato.

Elementor semplifica il posizionamento di sezioni, widget e colonne esattamente dove desideri con molte opzioni di controllo intuitive.

Utilizzando i controlli di layout nel menu Avanzate, puoi:

• Imposta manualmente il margine e il riempimento per sezioni, widget e colonne.
• Scegli la larghezza della sezione: predefinita, a larghezza intera, in linea e personalizzata.
• Regola la posizione del widget all'interno della colonna: predefinita, fissa e assoluta.
• Regola lo spazio tra le colonne e crea uno spazio vuoto per un layout pulito.

Pertanto, senza competenze di codifica, puoi facilmente regolare il posizionamento dei tuoi widget e personalizzare colonne e sezioni secondo necessità.

5. Completa la cronologia delle revisioni dell'avanzamento con le modifiche annulla/ripristina

Una delle migliori caratteristiche di Elementor è che ti consente di visualizzare in anteprima l'intera cronologia di tutte le modifiche apportate, registrando così ogni azione nella cronologia.

Inoltre, puoi facilmente annullare le modifiche e ripristinare la versione precedente quando necessario. Inoltre, ogni volta che si salva un nuovo progetto, è possibile ripristinare facilmente una revisione completamente nuova, se necessario.

6. Lascia un codice pulito

Se per qualche motivo desideri disattivare Elementor in futuro, non devi preoccuparti che lasci dietro tonnellate di codici brevi come Divi Builder.

Elementor lascia un codice pulito, garantendo prestazioni e velocità di pagina ottimali.

Altre funzionalità di Elementor

Ecco alcune altre funzionalità del plug-in per la creazione di pagine di Elementor:

• Editor di intestazioni e piè di pagina: puoi modificare facilmente le intestazioni e i piè di pagina del tuo sito con Elementor senza alcuna abilità di codifica.
• Modifica del testo in linea: questa funzione ti consente di modificare il testo in tempo reale sullo schermo, semplificando la modifica del contenuto di testo esistente o la scrittura di post di blog.
• RTL e pronto per la traduzione: Elementor è disponibile in 23 lingue tradotte e puoi facilmente tradurlo in altre lingue grazie al supporto completo della lingua RTL.
• Widget WooCommerce: fornisce widget WooCommerce predefiniti, come listini prezzi e tabelle dei prezzi, per rendere la creazione di siti Web di eCommerce un gioco da ragazzi.
• Integrazioni di terze parti: Elementor supporta integrazioni di terze parti, inclusi ActiveCampaign e MailChimp.
• Colori globali e opzioni tipografiche: Elementor ti consente di impostare tipografia e colori globali per creare design completi su tutte le pagine. Inoltre, puoi anche scegliere tra oltre 800 caratteri Google per il design del tuo sito web.
• Modalità di manutenzione: puoi sfruttare i modelli della modalità di manutenzione di Elementor per impostare il tuo sito web in modalità di manutenzione.

Recensione di Elementor Pro

Sebbene il generatore di pagine di Elementor di base sia open source e gratuito, puoi eseguire l'aggiornamento alla versione di Elementor Pro, che fornisce funzionalità utili aggiuntive.

Ecco una breve occhiata ad alcune funzionalità del nuovo plug-in Elementor Pro:

• Ti consente di creare un intero tema WordPress.
• Ha widget più interessanti, inclusi dispositivi di scorrimento, pulsanti di condivisione social, moduli, timer per il conto alla rovescia e moduli di accesso.
• Fornisce tonnellate di modelli Elementor Pro premium di alta qualità.

Pertanto, se desideri più funzionalità, modelli premium e widget globali, puoi scegliere il plug-in Elementor Pro, a partire da soli $ 49.

Revisione dei prezzi di Elementor

Se desideri creare siti Web semplici e di base, la versione gratuita del plug-in dovrebbe essere sufficiente per le tue esigenze, considerando che è il generatore di pagine gratuito più ricco di funzionalità.

Tuttavia, per creare siti Web più professionali, Elementor offre quattro piani premium con funzionalità premium, come il supporto VIP e il profilo Esperto Elementor.

Il piano Essential, Expert, Studio e Agency del plug-in Elementor costa $ 49, $ 199, $ 499 e $ 999 all'anno. Pertanto, Elementor è per tutti e che tu sia un web designer, uno sviluppatore o il proprietario di un'agenzia, Elementor offre funzionalità per ogni esigenza e richiesta.

Conclusione: verdetto finale

Dopo questa recensione completa, è sicuro affermare che Elementor fornisce tutte le funzionalità essenziali necessarie per creare un sito Web WordPress o WooCommerce.

Viene fornito con un'interfaccia leggera, semplice, di facile comprensione e non gonfia, che consente ai progettisti di siti Web senza esperienza di codifica di creare splendidi siti Web. E la parte migliore è che viene fornito con piani tariffari per le esigenze di tutti. Inoltre, gli sviluppatori di Elementor continuano a rilasciare e implementare nuove funzionalità e miglioramenti.

Dopo aver esaminato la facilità d'uso, le funzionalità generali, le prestazioni, il supporto, l'interfaccia e i prezzi del plug-in, classifichiamo Elementor in cima ai plug-in per la creazione di pagine di WordPress. Quindi dai un'occhiata e prova il plug-in Elementor da solo e scegli il piano adatto alle tue esigenze aziendali specifiche.