Tutorial Elementor: Presentazione dell'interfaccia

Progettare un sito web dall'aspetto professionale non era per tutti, soprattutto perché sentivamo tutti di avere assolutamente bisogno di essere un professionista della programmazione e del web design. Al giorno d'oggi, vediamo emergere nuovi strumenti per l'ecosistema WordPress, al fine di fornire una soluzione sempre più semplice per la progettazione di un sito Web e questo alla portata dei più principianti.

Per quanto riguarda il design dei layout di WordPress, abbiamo già dovuto inviare il plug-in Visuale Compositore, che è sicuramente uno dei migliori strumenti quando si tratta di progettazione del layout. Si noti, tuttavia, che questa soluzione non è adatta a tutti. Questo è il motivo per cui in questo tutorial ti presenteremo di più al plugin WordPress Elementor, che è un plugin WordPress freemium (gratuito, ma estendibile sotto abbonamento).

Dove trovare Elementor per WordPress

Stiamo seriamente pensando di farti vedere il potenziale del plugin e la soluzione gratuita ti aiuterà a iniziare senza pagare un centesimo. Questa soluzione gratuita è disponibile su WordPress.org. Essendo un plugin per WordPress, viene installato come qualsiasi altro plug-in dalla dashboard. 

Se il plugin riesce a soddisfarti completamente, sarai in grado di ottenere la licenza completa con tutte le funzionalità sul sito elementore ufficiale.

Caratteristiche principali di Elementor

Prima di iniziare il tutorial con una panoramica del plugin, ti presenteremo innanzitutto le caratteristiche principali del plugin (versione gratuita e versione completa).

versione gratuita	Versione completa
Colonne multiple	Menu di navigazione, articolo
Moduli Testi, titoli	Modulo WooCommerce (prodotti, categorie)
Moduli video, immagini, carosello, gallerie, colonne sonore	Integrazione di Facebook (pagina, pulsante, commenti)
Modulo di condivisione	Tabella prezzi
Modulo HTML	Portfolio, modulo
Modulo per widget WordPress	Modulo di ricerca

 

Nota che questo è un elenco piuttosto esauriente delle diverse funzionalità offerte dal plugin. Troverai maggiori dettagli in esplorando il loro sito web.

Inizia con Elementor

Non tratteremo qui l'intero processo di installazione. Trattandosi di un plugin per WordPress, la procedura di installazione è già stata spiegata in un tutorial precedente. Tuttavia, dopo l'installazione, verrai reindirizzato alla home page del plugin.

Se hai questa pagina sullo schermo, hai installato correttamente il plugin Elementor. Attualmente stiamo utilizzando la versione completa per questo tutorial, ma l'interfaccia non dovrebbe essere troppo diversa dalla versione gratuita.

Prima di accedere all'interfaccia di modifica, ti invito a registrare la tua licenza. Questo è valido solo per coloro che hanno optato per la versione completa. Se hai la versione gratuita, puoi andare alla sezione successiva. Per registrare la tua licenza, noterai una notifica su WordPress che ti chiederà di registrare la tua licenza.

Devi solo fare clic su di esso per andare alla pagina di registrazione e fare clic su Attivare.

Normalmente avrai bisogno della tua pagina di conferma se la tua licenza è valida.

Se non arrivi a questa pagina, ti invito a contattare gli sviluppatori del plugin per ulteriori informazioni assistenza con il problema.

Come usare Elementor

Elementor funziona su pagine e post su WordPress. Sia che tu stia utilizzando l'interfaccia classica o la nuova interfaccia Gutenberg, vedrai un pulsante che ti chiederà di utilizzare il generatore di Elementor.

In pratica, non avrai sempre bisogno di modificare i tuoi post utilizzando Elementor. Ti invito quindi ad utilizzare il plugin solo sulle pagine. Cliccando sul pulsante, accederai all'interfaccia di progettazione di Elementor che dà un'aria di déjà vu (per chi usa il personalizzatore di WordPress).

Quindi hai sulla sinistra i vari controlli offerti dal plugin e sulla destra, hai l'anteprima live delle tue modifiche. In questo tutorial, utilizziamo il tema Twenty Sixteen WordPress.

Sezioni Elementor

Le sezioni Elementor sono gruppi di blocchi di funzionalità offerti da Elementor. Il numero di sezioni dipende dall'utilizzo della versione completa e dall'utilizzo di WooCommerce, Yoast SEO o altri plugin compatibili. A seconda di queste condizioni, avrai più o meno sezioni sulla tua interfaccia. Dato che stiamo utilizzando la versione completa con il plugin WooCommerce abilitato, questo è l'aspetto della nostra interfaccia.

Come posizionare un blocco Elementor

Una volta espansa una sezione, troverai i blocchi Elementor. I vari blocchi Elementor vengono posizionati mediante “Drag & Drop” sull'area evidenziata con linee tratteggiate.

Come scegliere un layout su Elementor

Prima di aggiungere un blocco su Elementor, è necessario ricordarsi di scegliere un layout facendo clic sul pulsante "+" nella sezione evidenziata.

A seconda delle tue esigenze, sceglierai il layout più adatto a te. Dopo aver scelto un layout, hai una rappresentazione di quella sezione sulla stessa area evidenziata. Questa sezione mostrerà lo stesso numero di colonne corrispondenti alla tua scelta. Nel mio caso, ho scelto una colonna con 3 colonne.

I diversi blocchi con un segno "+" all'interno, sono le aree che possono accettare blocchi Elementor. Se aggiungi un blocco Elementor senza prima scegliere un layout, verrà scelto il layout a colonna singola per impostazione predefinita.

Le sezioni Elementor possono essere riordinate tra loro, seguendo lo stesso principio del “drag & drop”. Puoi anche eliminare una sezione, se non desideri più utilizzarla.

Ecco un esempio di una sezione che contiene 2 blocchi, ovvero il cartiglio e il blocco di testo.

Come usare altri strumenti di progettazione

Dopo aver finito il tuo design, una delle cose che vorrai fare è salvare il tuo lavoro. Troverai questa opzione nella parte inferiore della sezione che mostra le diverse sezioni di Elementor.

Puoi scegliere tra il salvataggio diretto (Pubblica) e il salvataggio come bozza o come modello. Esploreremo questi diversi punti più avanti.

Durante la progettazione, potresti anche voler visualizzare in anteprima le modifiche senza l'interfaccia aggiuntiva di Elementor. Tutto quello che devi fare è fare clic sull'icona dell'occhio.

Accade che durante la progettazione si verifichi un errore (un'azione involontaria). In questo caso, Elementor offre una cronologia che ti consente di navigare attraverso tutte le tue azioni.

Questo ti permetterà di tornare facilmente.

L'opzione “Browser”, che precede il pulsante della cronologia, consente di modificare ulteriormente le diverse sezioni in relazione al browser utilizzato dai visitatori. Questa opzione consente di accedere alla modifica avanzata delle strutture di sezione (larghezza della colonna). Devi apportare modifiche qui con molta attenzione.

Il pulsante "Impostazioni" consente di modificare alcune opzioni specifiche della pagina come il titolo, l'immagine in primo piano o lo stato tra gli altri.

Questo è tutto per questo tutorial, esploreremo di più Elementor nel nostro prossimo tutorial. Non esitate a dare un'occhiata al site officiel che offre esempi molto più riusciti.