Creare siti con WordPress CSS WordPress

Classi CSS globali: Elementor, Bricks, GenerateBlocks e Cwicly a confronto

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.

Classi CSS globali: Cwicly, Elementor, Bricks e GenerateBlocks a confronto
play-rounded-fill

Classi CSS globali: Cwicly, Elementor, Bricks e GenerateBlocks a confronto

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

Lavorare con WordPress può essere tanto semplice quanto complesso, a seconda degli strumenti che scegliamo di utilizzare. Prendiamo ad esempio la combinazione di GeneratePress e GenerateBlocks: entrambi lavorano utilizzando l’interfaccia dell’editor a blocchi di WordPress, dando priorità all’esperienza nativa piuttosto che a un’interfaccia proprietaria come nel caso di Elementor, Bricks e Breakdance.

Con GenerateBlocks, ci troviamo davanti a una sezione standard con tre colonne e tre blocchi, ognuno composto da un’immagine, un titolo e del testo. La vista elenco offre una dettagliata visione della struttura della pagina, permettendo di osservare ogni elemento. Per quanto riguarda la modifica degli stili, GenerateBlocks offre diversi strumenti, ma la maggior parte di essi sono focalizzati su interventi localizzati per il singolo blocco. Se si modifica, ad esempio, il colore del testo di un’intestazione, tale modifica non si riflette sulle altre intestazioni.

Tuttavia, quello che rende GenerateBlocks particolarmente attraente è la sua funzionalità di “Global Styles”, disponibile nella versione Pro a pagamento.

Supponiamo di voler creare uno stile globale per un blocco contenitore. Una volta creato e definito in base alle nostre esigenze, possiamo assegnargli un’etichetta, come “card”. Una volta pubblicato, ogni volta che vogliamo applicare questo stile globale a un contenitore nella nostra pagina, basta attivare la funzione di stili globali e scegliere “card”. Qualsiasi modifica fatta allo stile globale verrà automaticamente riflessa in ogni blocco associato a quell’etichetta.

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.

Una soluzione alternativa potrebbe essere l’assegnazione di classi CSS personalizzate direttamente nei blocchi. L’editor a blocchi di WordPress consente di assegnare una o più classi CSS a ogni blocco. Sebbene questa flessibilità sia certamente vantaggiosa, presenta delle sfide. Ad esempio, le classi CSS applicate non sono visibili durante la fase di modifica, rendendo difficile ricordare quali classi sono state utilizzate e dove. Inoltre, ogni modifica richiede di navigare tra diverse sezioni, rendendo il processo un po’ macchinoso.

In conclusione, GenerateBlocks offre una gamma di strumenti potenti, ma come ogni strumento, ha i suoi limiti. L’importante è valutare le proprie esigenze e determinare quale approccio funziona meglio per il proprio progetto.

Cwicly offre una soluzione potente e integrata

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. Se non l’hai ancora provato, ti suggerisco di dargli una possibilità!

Lascia un commento