Le novità dell’Editor V4 di Elementor

Con la versione 3.29 beta, Elementor ha reso disponibile una prima versione del nuovo Editor V4, che al momento è in fase alpha. Questa versione introduce strumenti e modalità di lavoro più moderne che vanno a rimediare ad alcuni limiti che Elementor ormai cominciava a manifestare da parecchio tempo.

In questo video ti mostro una prima panoramica di tutte le principali novità della nuova versione dell’editor.

Qui di seguito puoi trovare un riassunto dei principali argomenti trattati nel video.

Come attivare l’Editor V4 (Alpha)

Per ora, chi vuol provare questa nuova versione, deve:

1. Abilitare Elementor in versione beta (3.29)
2. Attenzione: Installala solo su un sito di prova o un sito in locale, non sul sito in produzione, perché è una versione di sviluppo
3. Una volta attivata la versione 3.29 di Elementor, vai in “Elementor > Impostazioni”
4. Vedrai una nuova linguetta chiamata “Editor V4”
5. Da qui è possibile abilitare la nuova esperienza di editing

Atomic Elements: I nuovi widget

La prima novità che possiamo immediatamente notare è una nuova sezione chiamata “Atomic Elements” che presenta widget diversi rispetto ai widget tradizionali.

Differenze tra widget tradizionali e nuovi widget

Widget tradizionali:

• Struttura di sezioni: Layout, Stile, Avanzato
• Questa struttura è presente più o meno in tutti i widget normali

Nuovi widget Atomic Elements:

• Solo due sezioni: Generale e Stile
• Tutta la parte degli stili è comune a tutti i widget della nuova versione

Compatibilità tra vecchi e nuovi widget

Un aspetto importante da considerare:

• Puoi utilizzare all’interno della stessa pagina sia vecchi widget sia nuovi widget contemporaneamente
• Puoi inserire un widget contenitore vecchio all’interno del quale inserire un widget intestazione nuovo
• La differenza è che i widget tradizionali non supportano le funzionalità della versione 4 dell’Editor

Finalmente codice HTML più pulito

Per capire uno dei grandi vantaggi della nuova versione, facciamo un confronto pratico:

Struttura del codice con widget tradizionali:

• Il div del widget contenitore
• Il div dell’inner container (per spaziatura e larghezza massima)
• Un widget come l’intestazione viene inserito dentro a due div aggiuntivi
• Per il widget text editor: il paragrafo è inserito dentro due div aggiuntivi

Struttura del codice con nuovi widget V4:

• Il div del contenitore contiene direttamente:
  • l’h2 per l’intestazione
  • il paragrafo per il testo
• È limitato l’impiego di div superflui

Temi consigliati per l’Editor v4

Per lavorare meglio con le nuove funzionalità, Elementor consiglia di utilizzare temi come Hello Team o Hello Biz. Questo ha una ragione precisa:

• La nuova versione dell’editor supporta classi CSS
• Altri temi possono andare in conflitto con le classi create nell’editor
• Temi come Hello Team o Hello Biz sono “puliti” a livello di CSS
• Creano meno problemi con le classi gestite nel nuovo editor

La funzionalità principale: le classi CSS

Iniziamo a vedere la funzionalità principale della versione 4 dell’editor: le classi CSS. Costruiamo un semplice layout al quale applicheremo delle classi.

La classe “local”

• Passando nella sezione stile dei vari widget, è sempre presente di default una classe chiamata “local” (contrassegnata con un’etichetta di colore rosa)
• Questa classe è sempre presente, non puoi rinominarla né eliminarla
• Rappresenta tutte le proprietà CSS applicate localmente a un singolo widget
• Funziona come le impostazioni che nei widget tradizionali venivano applicate al singolo widget

Creazione di classi globali

Il limite della classe local è lo stesso dei widget tradizionali: le impostazioni si applicano solo a quel widget specifico. Con le classi globali invece:

1. Puoi inserire il nome di una nuova classe (es. “section-d”) e crearla
2. Lavorare sulla classe globale che potrai riapplicare ad altri elementi in tutte le pagine del sito
3. Gli elementi che usano questa classe ereditano le stesse impostazioni

Esempio di applicazione pratica: card layout

Ecco un esempio di come creare e gestire classi globali per un layout a card:

1. Per la sezione esterna:
   • Creare una classe globale “section-d”
   • Impostare margini (superiore, inferiore, laterali)
2. Per il contenitore interno:
   • Creare una classe globale “inner-container-d”
   • Impostare larghezza massima (1140px)
   • Impostare margini auto a destra e sinistra per centrare
3. Per le card:
   • Creare una classe globale “card”
   • Impostare layout flex in colonna
   • Impostare larghezza (30%)
   • Definire crescita (flex-grow: 1)
   • Applicare la stessa classe a tutte le card
4. Per il contenuto delle card:
   • Creare una classe “card-content”
   • Impostare rientro (padding)
   • Definire layout e spaziatura
   • Applicare la classe a tutti i contenuti di card

Gestione delle classi per i pulsanti

Un altro esempio di utilizzo delle classi globali è per i pulsanti:

1. Classe per dimensione:
   • Creare classe “btn-small”
   • Impostare spaziatura e tipografia
2. Classi per colori:
   • Creare classe “btn-primary” per un tipo di pulsante
   • Creare classe “btn-secondary” per un altro tipo
   • Impostare colori di sfondo, testo e stati (hover)

Priorità e gestione delle classi

Aspetti importanti da considerare:

• Ordine di priorità: La classe locale ha priorità sulle classi globali
• Identificazione visiva:
  • Puntino verde: proprietà gestita con classe globale
  • Puntino grigio: stili ereditati a livello generale
  • Puntino rosa: impostazione locale
  • Puntino arancio: possibile conflitto

Class Manager

Il Class Manager è uno strumento del nuovo editor che permette di:

• Definire l’ordine di applicazione delle classi (priorità)
• Rinominare le classi (il cambiamento si applica su tutto il sito)
• Eliminare definitivamente le classi

Gestione responsive migliorata

Con la nuova versione, la gestione responsive è decisamente migliorata:

• Possibilità di gestire tutte le proprietà in maniera indipendente per ogni breakpoint
• Non solo alcune proprietà come nel vecchio editor
• È ad esempio possibile modificare i colori di sfondo in base al device

Gestione avanzata di sfondi e box shadow

Col nuovo Editor V4 è possibile applicare sfondi e box shadow multipli.

Sfondi Multi-livello:

• Possibilità di aggiungere più overlay
• Combinare colori, immagini e gradienti
• Riordinare i livelli
• Nascondere/mostrare livelli per test
• Duplicare livelli

Box Shadow Multi-livello:

• Creare ombre composte da più livelli
• Personalizzare ogni livello (blur, trasparenza…)

Conclusioni

La versione 4 dell’editor di Elementor introduce novità significative:

• Le classi CSS globali sono la più grande rivoluzione
• Si tratta ancora di una versione alpha, quindi alcune funzionalità non sono ancora presenti
• Elementor ha introdotto le classi globali limitando le funzionalità agli aspetti più semplici
• Gli utenti esperti potrebbero non trovare lo stesso livello di controllo di strumenti come GenerateBlocks o Bricks
• La versione 4 introduce comunque una funzionalità molto attesa e utile

Nella versione 3.29 di Elementor è stata introdotta anche una nuova Cloud Library per i template per la versione Pro, che permetterà di salvare i template sul cloud e riutilizzarli più facilmente su diversi siti. Anche questa funzione è attualmente in versione beta.