Come creare un sito web con Elementor Pro

In questo pots ti spiegherò come creare un sito web passo dopo passo da zero con Elementor Pro, il miglior page builder del momento, che permette di creare siti web WordPress nel modo più veloce e agile possibile e senza toccare una riga di codice.
Dal suo rilascio nel 2016, Elementor ha spazzato il mercato ottenendo oltre 1.000.000 di installazioni.

E’ stato scritto originariamente scritto per Silvina D, e successivamente importato in Digital Vizir, per cui anche se le figure riportano l’interfaccia spagnola, ho localizzato in italiano tutti i comandi di Elementor e WordPress citati 😉

Mani all’opera. Adelante! 😉

Cos’è un Page Builder

Si tratta di un editor visivo che ti aiuta a progettare e mantenere qualsiasi contenuto che hai sul tuo sito web, sia pagine, post, testimonianze, con molta più grazia di quella offerta dall’editor standard di WordPress, semplicemente trascinando e rilasciando i vari componenti e moduli.

I page builder rendono facile creare pagine complesse anche per coloro che non hanno solide conoscenze tecniche di HTML, PHP e CS..

Per aggiungere colonne, immagini, mappe, pulsanti, dobbiamo solo “giocare” con i diversi elementi, denominati Widgets.

¿Perché usare un page builder come Elementor?

Le ragioni sono molteplici:

• Facilità d’uso:
  In un batter d’occhio, sarete in grado di progettare una pagina che avrebbe richiesto molto tempo e competenze tecniche per il codice puro.
• Design accattivante:
  Puoi usare template da personalizzare a piacimento e secondo le esigenze del cliente.
• Produttività:
  Le opzioni di progettazione e le configurazioni aumentano drasticamente le vostre prestazioni e vi fanno risparmiare un sacco di ore.
  

¿Por qué usar Elementor?

• 100% visivo
  Mentre disegni il layout puoi vedere in tempo reale il risultato
• Ottimizzato
  Rispetto ad altri costruttori di pagine il codice è di alta qualità e open source, quindi ha creato un’enorme comunità di utenti e sviluppatori.
  Inoltre, rispetto ad altri strumenti di layout per WordPress, Elementor si distingue perché è molto leggero, rispetto ad altri editor, come Visual Composer, che è molto più pesante e ingombra il design con troppi codici brevi e la curva di apprendimento è più ripida…
• Versione responsive
  Puoi vedere come appare la versione per cellulari e tablet in tempo reale. Alla fine, adattandosi ai requisiti del Mobile First di San Google…

Come installare Elementor

---

Dalla dashboard di WordPress:

1. Faiclic en Plugin > Aggiungi nuovo
2. Nel campo Ricerca plugin in corso, scrivi Elementor 
3. Dopo averlo installato, fai clic su Attiva.

Dopo aver installato la versione gratuita di Elementor e acquistato la versione a pagamento dal sito web di Elementor, segui questi pass:

1. Fai login in my.elementor.com con i dati di accesso ricevuto via mail dopo averlo acquistato
2. Accedi alla página “My account”. Fai clic sul pulsante “Download plugin” per scaricare il file zippato sul tuo computer
3. Accedi al tuo sito web,vai a Plugin > Aggiugi nuovo. Fai clic su installa e poi su attiva.

Nella parte superiore della dashboard, riceverai un messaggio che ti dirà di attivare la tua licenza.

Come attivare la tu licenza di Elementor

Per attivare la tua licenza e ottenere aggiornamenti automatici, vai a Elementor > Licence. Fai clic su Connect & Activate

Il sistema ti reindirizzerà al tuo account in Elementor. Fai clic su Connect per attivare la tua licenza automaticamente.

E ora stiamo per eseguire le impostazioni di base prima di creare la nostra prima pagina con Elementor.

Impostazioni generali

Su Elementor > Impostazioni, troverai tre schede per configurare alcune impostazioni generali.

Sotto Tipi di contenuto, ti consiglio di selezionare solo per le pagine, perché è conveniente scrivere i post del blog utilizzando l’editor di WordPress o il nuovo Gutenberg.

In questa sezione puoi anche configurare se vuoi che Elementor erediti colori e caratteri dal template installato nel tuo WordPress.

Creare una nuova pagina con Elementor

In alto a sinistra del desktop di WordPress, clicca su Pagine > Aggiungi pagina

Poi clicca su Modifica con Elementor

Elementor usa tre blocchi o widfet principali:

• Sezioni
• Colonne
• Widget

Sezioni

Le sezioni sono i più grandi blocchi di costruzione. Ogni sezione ha almeno una colonna

Colonne

Le colonne si trovano all’interno delle sezioni e sono usate per contenere i Widgets.

Puoi regolare la Sezione, la Colonna ed i Widget con i loro rispettivi comandi cliccando su di essi con il tasto destro del mouse.

Sezione

1. Fai clic sull’icona  per creare una Sezione, oppure su   per per usare un modello o un blocco predefinito dalla libreria.
2. Seleziona la struttura della colonna.
3. Clicca con il tasto destro del mouse per modificare, duplicare, copiare o cancellare

Colonna

1. Imposta la larghezza delle colonne in Layout o trascinando la linea tratteggiata tra le colonne.
2. Se vuoi aggiungere altre colonne, clicca con il tasto destro del mouse > Aggiungi nuova colonna
3. Inserisci i widget nelle tue colonne

Nelle sezioni e colonne introdurremo i diversi elementi o widget per cominciare a dare forma alla nostra prima pagina con Elementor.

Widget

I widget sono i diversi elementi da inserirete nelle colonne.

1. Inserisce un widget nelle colonne
2. La larghezza della colonna imposta la larghezza del widget.

Widget di base

---

Intestazione

Uno dei widget di base che userai di più è l’intestazione per includere brevi testi e formattazioni, il tag HTML desiderato (H2, H3, ecc), aggiungere un link , che si può aprire in una nuova scheda.

La dimensione del carattere è quella impostata nel tema installato nel tuo WordPress.

È un widget molto versatile che puoi usare il widget Intestazione per creare titoli e sottotitoli.

Immagine

Come suggerisce il nome, con questo widget potete inserire immagini nel layout della pagina.

È un widget indispensabile che porta molto di più della semplice aggiunta di un’immagine, perché è possibile regolare le dimensioni, l’ottica, aggiungere didascalie, ecc.

In questo screenshot puoi vedere una sezione a due colonne in cui nella prima abbiamo aggiunto il widget Immagine.

Testo

Un altro elemento essenziale per inserire i testi in ogni pagina e naturalmente ulteriori opzioni di layout che troverai nella sezione Stile.

Pulsante

Il pulsante ti permette di guidare il visitatore a cliccare dove vuoi. Le possibilità sono molte e naturalmente puoi personalizzarle con colori, dimensioni, icone prima o dopo un pulsante, l’hover, cioè il colore quando passi sopra il mouse ecc.

Su Tipo puoi trovare le seguenti opzioni per default:

• Predefinito
• Info
• Successo
• Avvertimento
• Pericolo

Divisore e Distanziatore

Per separare e distanziare il contenuto della nostra prima pagina disegnata con Elementor, puoi usare due widget molto simili il Separatore ed Espaciador.

Divisore

Aggiunge una linea orizzontale che possiamo usare sotto un titolo..

Lo stile della linea può essere:

• Solido (como quella che vedi nello screenshot)
• Doppio
• Punteggiato
• Trattegiat
• Riccia
• Curva
• ecc.

Il peso sono i pixel, la larghezza che occuperà, l’allineamento e lo spazio, cioè la distanza dall’elemento superiore.

Distanziatore

Questo è un elemento molto semplice che permette di aggiungere uno spazio vuoto per distanziare l’elemento superiore da quello inferiore.

Per default è 50 pix pero, ma puoi comunque modificarlo.

Se non vuoi usare questo widget, puoi giocare con i margini dell’elemento superiore.

Icona

L’ultimo widget che esamineremo in questo post è l’icona.

È possibile personalizzare il tipo di icona e le opzioni di visualizzazione:

• Predefinito
• Impilato
• Incorniciato

In stile selezioneremo colori, dimensioni e riempimenti e in avanzato, come sempre margini e padding, ovvero margini interni, e altre opzioni avanzate, come il CSS personalizzato.

Continueremo a conoscere i widget che vengono forniti con la versione pro di Elementor in altri post.

Super facile ¿no? 😀

Fatemi sapere cosa ne pensate nei commenti e spero che abbiate trovato utile questo post su come creare un sito web passo dopo passo con Elementor.

Cosa ne pensi? Ti leggo nei commenti! 🙂