Page Builder Elementor: Panoramica

Dopo aver dato uno sguardo al pannello di controllo del tema Astra in questo tutorial ti parleremo di Elementor, il page builder che servirà a personalizzare graficamente le pagine del sito. WordPress è senza ombra di dubbio il miglior CMS in circolazione e grazie ai plugin possiamo estendere le sue funzionalità. In passato, molto spesso, per poter personalizzare graficamente un sito si interveniva direttamente sul codice sorgente e questo richiedeva conoscenze di programmazione.

Page Builder Elementor

Da alcuni anni invece sono spuntati sul mercato i cosiddetti page builder ovvero costruttori di pagine visuali che permettono di creare siti in modo semplice e veloce grazie all’utilizzo di blocchi preimpostati. Ultimamente anche WordPress ha introdotto il suo editor a blocchi, chiamato Gutenberg, ma rispetto ad Elementor ha funzionalità più limitate.

Elementor è uno dei migliori e grazie alla sua interfaccia intuitiva permette, anche ai meno esperti, di creare layout di pagine complesse. È sia gratuito che a pagamento e lo si può scaricare liberamente dai plugin di WordPress. In questo tutorial ti facciamo una breve panoramica e successivamente, quando costruirai le singole Pagine del sito, ti spiegheremo come sfruttare al meglio le funzionalità della versione gratuita.

Clicca questo pulsante se decidi di acquistare un pacchetto SiteGround.

Grazie mille

Adesso per farti una panoramica delle principali funzionalità della versione gratuita clicca su Pagine > Tutte le pagine. In questa lista puoi subito notare che appare a fianco ad alcune di esse la scritta Elementor. Questo significa che tali pagine sono state realizzate con questo page builder mentre le altre con l’editor di WordPress Gutenberg.

Clicca ora su Modifica con Elementor sulla pagina Home per iniziare a familiarizzare con questo strumento. Come ti dicevamo Elementor è un editor visuale a blocchi che devi trascinare con il mouse nei punti desiderati.

Page Builder Elementor

Nel menu a sinistra infatti trovi i blocchi disponibili della versione gratuita. La versione a pagamento invece ti da la possibilità di utilizzare blocchi più avanzati. Tieni presente però che con la versione gratuita e l’integrazione di alcuni plugin, che vedremo nei prossimi paragrafi, sarai in grado di realizzare un sito completo e professionale.

Page Builder Elementor

Ogni blocco devi inserirlo in una sezione che puoi aggiungere cliccando sul simbolo “+” e in seguito scegliere la tipologia di colonne a 1,2,3, ecc.

Page Builder Elementor

Nell’immagine seguente è rappresentata una sezione a 3 colonne.

Page Builder Elementor

I simboli indicati dalla freccia servono per aggiungerne una nuova sezione, selezionarla e cancellarla. Dopo averla selezionata potrai modificare alcune sue caratteristiche dal menu Modifica sezione che ti comparirà sulla sinistra.

Page Builder Elementor

Questo menu si divide a sua volta in Layout, Stile e Avanzato. Nel sottomenu Layout hai la possibilità di modificare una serie di caratteristiche come l’altezza, la spaziatura interna delle colonne, l’allineamento verticale, ecc. In Stile puoi decidere se impostare un colore uniforme allo sfondo oppure applicare un’immagine, modificare il bordo oppure usare l’effetto separatore sagomato.
Infine alla voce Avanzato puoi aggiungere effetti di movimento, regolare il margine e personalizzare la Sezione con i CSS.

Ogni sezione e blocco hanno le loro specifiche impostazioni attraverso le quali personalizzare tutti i singoli aspetti. Nel menu di Elementor trovi anche due icone. L’icona hamburger in alto a sinistra ti permette di entrare nelle impostazioni globali della pagina in cui modificare colori, font, ecc. e tornare alla bacheca di WordPress, invece con la seconda icona sulla destra puoi visualizzare tutti i blocchi disponibili.

Page Builder Elementor

In fondo al menu trovi le Impostazioni di pagina (1), i Livelli (2), la Cronologia (3), la Modalità Responsive (4), l’Anteprima della pagina (5) e il pulsante Aggiorna per salvare le modifiche.

Page Builder Elementor

Terminata questa breve panoramica ti consigliamo di prendere confidenza con Elementor perché sarà lo strumento che utilizzerai nei prossimi tutorial quando personalizzerai nel dettaglio le pagine del sito.

Commenti

Per qualsiasi dubbio o domanda, scrivi un commento qui sotto.

Lascia un commento

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.