È stato rilasciato un nuovo importante aggiornamento di Elementor. Siamo passati dalla versione 2.x alla Versione 3.0. Questa nuova versione include un nuovo modo per creare siti web utilizzando WordPress ed Elementor. Cercheremo di convertire queste nuove funzionalità.
Quali sono le principali aggiunte su Elementor 3.0?
Elementor 3.0 viene fornito con 3 aggiunte principali che sono: Design System Features, New Theme Builder e significativi miglioramenti delle prestazioni.
Caratteristiche del sistema di progettazione
Ti sei mai chiesto come fanno le grandi aziende a ottenere un tale rendimento, indipendentemente dalla piattaforma in cui si trovano? Tutto ciò che creano sembra coerente e ha lo stesso design. Questo è possibile grazie a quello che viene chiamato "Design System". Secondo UnxDesign.cc, il Design System è:
L'unica fonte di verità che raggruppa tutti gli elementi che consentiranno ai team di progettare, realizzare e sviluppare un prodotto. Quindi un Design System non è un deliverable, ma un insieme di deliverable. Si evolverà costantemente con il prodotto, gli strumenti e le nuove tecnologie.
UX Collective
Implementando un sistema di progettazione, mantieni il tuo intero team coerente attorno a un linguaggio di progettazione e rivoluziona anche il modo in cui lavora il tuo team e assicurati un flusso di lavoro più veloce.
Create Amazing Websites
Con il miglior generatore di pagine gratuito Elementor
Parti oraLe caratteristiche del sistema di progettazione di Elementor 3.0 includono:
- Colori globali
- Nuovo pannello Impostazioni sito
- Caratteri globali
Vediamo in profondità come questo ti aiuterà a creare siti Web professionali migliori.
Colori globali
Elementor 3.0 aggiunge un nuovo modo di lavorare con i colori del sito. Il nuovo metodo si chiama Global Colors.
I colori globali ti aiutano a cambiare il colore da una posizione e ad aggiornare quel colore ovunque venga utilizzato.
Inizierai a scegliere i colori globali di base per il tuo sito web. Quindi, vai in qualsiasi stile di colore in Elementor e definiscilo come uno dei quattro colori. Tieni presente che puoi aggiungere tanti colori personalizzati all'elenco globale.
È ora che entrano in gioco le variabili CSS. Torna a Colori globali e cambia uno dei colori. La combinazione di colori dell'intero sito cambia in base al nuovo colore globale. Hai mai provato qualcosa di così facile?
Potrai anche progettare un colore globale diverso dall'input di controllo o creare un nuovo colore globale, il tutto utilizzando lo stesso selettore di colori all'interno dell'input di controllo.
Impostazioni del sito
La creazione delle prime impostazioni di progettazione per un sito Web richiede molto tempo. Dovrai destreggiarti tra il codice del tema, Customizer, functions.php. Sono ragioni sufficienti per giustificare il tuo mal di testa.
Le nuove Impostazioni sito mostrano vari strumenti di configurazione. In questo modo, continuerai a svolgere tutte le attività di tesi da un unico posto.
Per iniziare, all'interno di qualsiasi pagina che modifichi con Elementor, nel pannello di sinistra, fai clic sull'icona in alto a sinistra. Questo ti farà passare al pannello Impostazioni globali.
All'interno di quel pannello Impostazioni globali troverai:
- Layout: per configurare le impostazioni di layout predefinite di Elementor, come la larghezza del contenuto predefinita o il layout di pagina predefinito.
- Identità del sito: personalizza le tue identità cross-site, come il logo, il titolo, la tagline e persino Favicon.
- Stile del tema: personalizza gli elementi HTML non correlati a Elementor (solitamente impostato dal tema) per la tipografia, i pulsanti e i campi modulo.
- Lightbox: definisci lo stile predefinito di Elementor Lightbox
- Colori e caratteri globali: consente di configurare i colori e i caratteri globali che si applicano al tuo sito web.
Caratteri globali
I colori e la tipografia fanno parte dei componenti di costruzione di qualsiasi sito web. Utilizzando la stessa logica della funzione Colori globali, questo è un nuovo metodo per lavorare con gli stili di testo del tuo sito.
Con i caratteri globali, ogni impostazione tipografica può essere applicata a livello globale. Ora puoi configurare tutte le impostazioni tipografiche del tuo sito a livello globale, tra cui Famiglia carattere, Dimensione e scala carattere, Peso carattere, Trasformazione carattere, Stile carattere, Decorazione carattere, Altezza linea, Spaziatura lettere e persino Impostazioni reattive. Potrai anche impostare queste impostazioni per ogni widget che contiene un testo e personalizzare i tuoi caratteri globali.
Con una tipografia progettata correttamente, sarai in grado di applicare queste modifiche a livello globale.
Tutto il sito visualizzato e organizzato in un unico posto
Sebbene il noto Theme Builder sia diventato il leader del settore in termini di panoramica completa del design del sito Web, questa nuova interfaccia utente va anche oltre. Il nuovo Theme Builder ora ti offre una panoramica di un intero sito Web in modo molto intuitivo.
Quel Theme Builder fornisce una panoramica del sito, questo include tutte le parti del sito: intestazione, piè di pagina, modello di pagina globale, modello di post globale e altro. Ogni parte del sito può essere visualizzata in anteprima, rendendo molto più semplice il compito di progettare un sito web completo.
Miglioramenti delle prestazioni
Mentre un'applicazione cresce, è ovvio che lo sviluppatore dovrebbe preoccuparsi delle prestazioni. Gli aggiornamenti effettuati su Elementor 3.0 sono fatti per garantire una buona infrastruttura di codice che ha portato a notevoli miglioramenti delle prestazioni.
C'è stata molta eliminazione degli elementi DOM, il che rende Elementor più veloce. Questo dovrebbe sicuramente migliorare il posizionamento della velocità della tua pagina e l'esperienza complessiva per gli utenti sul tuo sito web.
In concreto, cosa è cambiato in termini di Page Speed?
Elementor 3.0 fornisce miglioramenti significativi per i processi di rendering lato server e per il modo in cui Elementor rende i valori CSS dinamici. Ciò ti consente di incorporare elementi e valori dinamici in tutto il tuo sito web. Ad esempio, puoi creare un modello per i post del sito e decidere di visualizzare l'immagine in primo piano di ogni post come sfondo dietro il titolo del post.
In background, quando Elementor prepara un post da inviare al browser, analizza il post per i valori dinamici, li recupera e, se includono valori CSS, stampa quel CSS.
Con Elementor 3.0, il tempo dedicato a questo processo è stato notevolmente ridotto. Grazie ai valori dinamici che vengono memorizzati per ciascuno dei tuoi post. Una volta che l'elenco è stato memorizzato, ogni volta che qualcuno visita il post, Elementor va direttamente a questo elenco, rendendo così il processo più veloce. I valori dinamici interessati da questa ottimizzazione includono immagini di sfondo, colori e molto altro. Questo miglioramento comporta una notevole riduzione dei carichi del server.
Riepilogo sull'aggiornamento di Elementor 3.0
Come accennato in precedenza, questa versione include chicche interessanti che dovrebbero davvero avere un impatto sul tuo lavoro quotidiano. Abbiamo passato:
Le caratteristiche del sistema di progettazione che ti aiutano a lavorare in modo più coerente ed efficiente.
Il nuovo Theme Builder è un potente strumento visivo per gestire ogni parte del tuo sito web da un unico posto.
Miglioramenti delle prestazioni per una migliore esperienza utente.
Elementor 3.0 ti porterà sicuramente al limite come creatore web professionale. Se non l'hai ancora fatto, esegui l'upgrade ora a Elementor Pro. Dovresti anche considerare di leggere il nostro post che spiega perché Elementor è sicuramente il miglior Page Builder gratuito su WordPress.
