Vai al contenuto principale

Tutorial Elementor: Presentazione dell'interfaccia

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 701.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

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.

pagina di presentazione delementor.png

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.

notifica plugin elementor.png

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

registrazione di una licenza elementor.png

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

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

licenza attiva elementor.png

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.

costruttore elementor.png

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).

interfaccia di presentazione elementor.png

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.

sezione elementor.png

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.

aggiungi blocchi elementors.png

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.

scegli un layout elementor.png

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

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.

sezione elementare con zone.png

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.

spostando una sezione elementor.png

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

elemento della sezione con 2 blocs.png

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.

elementor.png backup

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.

anteprima delle modifiche elementor.png

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.

azioni elementor.png

Questo ti permetterà di tornare facilmente.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

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.

opzione browser elementor.png

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.

impostazioni elementor.png

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.

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
12 azioni
quota6
Tweet3
Enregistrer3