La possibilità di creare stili globali e classi CSS può semplificare molto la gestione del sito, sia evitando l’inutile ripetizione delle impostazioni su ogni singolo elemento, sia facilitando le modifiche all’aspetto delle varie pagine.
Uno stile globale, o una classe globale, ti permette di applicare le medesime proprietà CSS come ad esempio, il colore dello sfondo, la dimensione di un bordo, le spaziature, a un particolare tipo di elemento (un link, un bottone…) presente in una, dieci o cento pagine del tuo sito e modificare contemporaneamente l’aspetto di tutti quegli elementi intervenendo una sola volta nella definizione delle proprietà associate a quella classe (o stile), anziché dover modificare singolarmente ogni elemento.
Nell’ambito della personalizzazione di un sito WordPress, ci sono vari strumenti disponibili come Elementor, Bricks Builder, GenerateBlocks, Breakdance e Cwicly, tanto per citarne alcuni piuttosto popolari.
In questo video puoi scoprire cosa significa lavorare con un page builder che supporta la creazione e la gestione di classi CSS per la definizione degli stili da utilizzare globalmente sulle varie pagine di un sito WordPress, così da poter scegliere meglio quale strumento può essere più adatto al tuo modo di lavorare.
Una sintesi dei contenuti del video
L’approccio e i limiti di Elementor
Elementor, uno dei page builder più diffusi, offre molteplici funzionalità. Analizzando la sua gestione degli stili, emerge che ha alcune limitazioni. Uno dei principali ostacoli è l’inabilità di definire uno stile globale per un widget, come ad esempio il contenitore. Questo rende complesso apportare modifiche coerenti su molte pagine, soprattutto se si desidera mantenere un design uniforme.
Oltre alla difficoltà nella gestione degli stili globali, ci sono altre sfide nell’utilizzo di Elementor. Ad esempio, la definizione delle classi CSS personalizzate può diventare complicata. Ancora più problematico è il fatto che Elementor non applica le classi CSS direttamente agli elementi desiderati, ma piuttosto ai loro contenitori. Questa peculiarità rende difficile ottenere il tipo di personalizzazione che molti professionisti cercano.
Sebbene Elementor si rivolga a utenti che cercano semplicità, permettendo loro di fare modifiche con pochi clic, questa facilità d’uso ha un prezzo. La semplificazione può, infatti, rendere arduo il compito di creare e gestire stili globali, specialmente quando questi devono essere applicati a molte pagine. In sintesi, mentre Elementor può essere ideale per chi si avvicina a WordPress o per progetti di dimensioni ridotte, potrebbe non essere la scelta migliore per chi cerca una soluzione professionale e versatile.
Bricks Builder utilizza le classi CSS globali
Bricks Builder è un builder visuale che si rivolte a un’utenza con maggior esperienza nella creazione di pagine web. Con Bricks, dopo aver scelto un blocco, si può definire una classe specifica per quel tipo di stile. Come si può vedere nel video, creando una classe da assegnare a ogni elemento HTML della pagina è possibile impostare vari stili. La bellezza di questo sistema risiede nella sua intuitività e nel controllo granulare che offre.
Una volta applicate queste classi, il vantaggio rispetto ad altri page builder, come Elementor, diventa evidente. Mentre con Elementor potresti è spesso necessario ricorrere al copia e incolla per mantenere la coerenza tra blocchi, con Bricks Builder basta una modifica alla classe per aggiornare automaticamente ogni elemento associato. Questo è particolarmente utile quando si tratta di fare piccoli aggiustamenti, come cambiare il colore di sfondo o l’aspetto del bordo. Una modifica si riflette istantaneamente su tutti gli elementi che utilizzano quella classe.
Un altro punto a favore di Bricks Builder è la precisione nell’applicazione delle classi. A differenza di Elementor, che spesso applica le classi ai contenitori degli elementi, con Bricks, la classe viene applicata direttamente all’elemento o tag HTML che intendi modificare. Questo offre una maggiore flessibilità e precisione nell’aspetto del sito, consentendo una personalizzazione molto più dettagliata.
Inoltre, la compatibilità di Bricks Builder con vari framework CSS amplia ulteriormente le possibilità di personalizzazione. Se un utente desidera utilizzare un framework CSS esterno, Bricks Builder è in grado di integrarlo senza problemi, rendendo il flusso di lavoro ancora più snello.
In conclusione, mentre Elementor ha i suoi punti di forza, specialmente per chi cerca una soluzione più semplice e diretta, Bricks Builder si presenta come una scelta robusta per chi desidera una profonda personalizzazione e un controllo maggiore sul design del proprio sito WordPress.
GenerateBlocks: essenziale e flessibile ma un po’ complesso
Utilizzando la combinazione di GeneratePress (tema) e GenerateBlocks (nella versione Pro) è possibile sfruttare gli Stili Globali.
Si tratta di una funzionalità che consente di definire una serie di proprietà CSS e assegnarle a uno dei blocchi disponibili su GenerateBlocks (Container, Immagine, Headline, Pulsanti…) in modo da poterle utilizzare in diversi punti sul sito.
Supponiamo di voler creare uno stile globale per un blocco contenitore, ad esempio per definire un determinato padding interno, uno sfondo e dei bordi. Successivamente, ogni volta che vorremo applicare questo stile globale a un contenitore nella nostra pagina, basta attivare la funzione di stili globali e scegliere quello stile. Qualsiasi modifica fatta allo stile globale verrà automaticamente riflessa in ogni blocco associato a quello stile.
Tuttavia, c’è una sfumatura da considerare. Mentre GenerateBlocks permette di creare stili globali per diversi tipi di blocchi, come contenitore, tabs, accordion, pulsante, headline e immagine, ogni elemento può essere associato solo a un unico stile globale. Ciò implica che siamo vincolati a definire tutte le proprietà desiderate in un unico stile globale, il che può risultare limitante.
Fortunatamente però, dalla versione 1.7 di GenerateBlocks (al momento in fase alpha) è possibile creare degli Stili Globali in modo simile a come funzionano le classi css globali. In questo modo è possibile assegnare più stili globali a uno stesso blocco, ampliando notevolmente le potenzialità di questo plugin.
In questo video un’anteprima di come funzionano i nuovi Stili Globali di GenerateBlocks:
Cwicly offre una soluzione potente e integrata
Il 3 marzo 2024 il team di sviluppo di Cwicly ha annunciato la chiusura del progetto. Quindi il plugin Cwicly non sarà più sviluppato.
Avevo già pubblicato una recensione approfondita di Cwicly. Questo page builder ha molte caratteristiche affascinanti, e qui vorrei mostrare come gestire gli stili globali con questo strumento.
Nell’esempio mostrato nel video, ho una sezione che contiene tre colonne. Ogni colonna ha un blocco immagine, un titolo e del testo. Con Cwicly, come con gli altri page builder, è possibile effettuare interventi specifici su ogni elemento in modo indipendente. Per esempio, posso facilmente modificare il colore di un titolo selezionandolo. Tuttavia, il mio obiettivo principale è creare stili globali. Questo significa che, se effettuo una modifica, essa verrà applicata a tutti gli elementi associati a quella specifica classe, rendendo il processo di design molto più efficiente e professionale.
La creazione degli stili globali in Cwicly è intuitiva. Il primo passo consiste nell’identificare e definire una classe per il blocco principale. Una volta definita questa classe, può essere facilmente applicata ad altri blocchi, come immagini, titoli e paragrafi. Ciò garantisce una coerenza di stile attraverso vari elementi.
Una delle caratteristiche distintive di Cwicly è la precisione con cui applica le classi CSS. A differenza di altri page builder, come Elementor, Cwicly assegna la classe CSS esattamente al tag che abbiamo definito, garantendo una maggiore flessibilità e controllo sul design.
Un’altra funzionalità che apprezzo particolarmente in Cwicly è la sua integrazione con l’editor a blocchi di WordPress. Questo significa che, indipendentemente dal fatto che stiate creando una pagina o scrivendo un articolo sul blog, l’interfaccia rimane costante. Questa uniformità semplifica sicuramente il lavoro, a differenza di altri strumenti come Elementor o Bricks che hanno interfacce proprietarie.
In conclusione, Cwicly si rivela uno strumento prezioso per chiunque desideri creare un sito web con WordPress. Con la sua facile gestione degli stili globali e la sua interfaccia integrata con l’editor a blocchi di WordPress, offre un’esperienza utente fluida e efficiente.