Il Page Builder di SiteOrigin è certamente uno dei più performanti plugin in circolazione, sia nella versione free che in quella a pagamento. Noi lo utilizziamo da anni in ogni nostra realizzazione, sempre nella versione gratuita, per evitare aumenti di costi ai nostri clienti e garantire il massimo delle performance possibili.
Integrato con Gutenberg e veloce
Come detto, il Page Builder di SiteOrigin gode di ottime prestazioni e grazie ad un interfaccia minimale permette di effettuare modifiche dalla nostra schermata di amministrazione in modo semplice e veloce, con alcuni accorgimenti che rendono meno frustrante la gestione anche per gli sviluppatori.
Ad esempio, il numero di clic per raggiungere un determinato menu è inferiore rispetto ad altri Page Builder più eye-candy, ma allo stesso tempo maggiormente impattanti sulle prestazioni del sito (qualcuno ha detto Elementor?).
Uno degli aspetti più interessanti del Page Builder di SiteOrigin è sicuramente la sua integrazione nativa con il nuovo Block Editor di WordPress (aka Gutenberg). Potremmo infatti editare le nostre pagine senza lasciare l’interfaccia originale di WP, così come le linee guida del Codex suggeriscono, ed allo stesso tempo utilizzare i Widget dedicati di SiteOrigin anche nei nostri articoli o post type personalizzati.
Aggiungere delle classi CSS ad una riga del Page Builder in modo programmatico
Il Page Builder, come tutti i plugin di questa classe, offre una struttura a righe e colonne particolarmente flessibile e molto intelligente nella sua ideazione. Si possono aggiungere inoltre classi CSS dall’interfaccia, in modo manuale, oppure alle celle (ovvero le singole colonne) con un buon margine di personalizzazione.
Tuttavia, queste classi verranno aggiunte ad un wrapper interno rispetto al div che identifica la riga. Per esempio:
<div class="panel-grid">
<div class="panel-row-style la-mia-classe">
<! -- qui dentro ci sono le celle/colonne caratterizzate dal selettore .panel-grid-cell -->
</div>
</div>
<div class="panel-grid">
<! -- altro contenuto -->
</div>Tuttavia, molto spesso potrebbe essere utile – se non indispensabile – aggiungere delle classi CSS specifiche al livello della riga, cioè di fianco al selettore .panel-grid. Questo non è possibile dalla schermata di modifica delle righe che offre il Page Builder, ma possiamo farlo noi sulla base delle impostazioni della riga.
Vediamo come.
Il filtro siteorigin_panels_row_classes
Il filtro siteorigin_panels_row_classes ci permette esattamente di modificare le classi della riga. Inoltre, mette a disposizione 2 argomenti:
- $classes cioè l’array delle classi CSS applicate alla riga corrente (che ritorneremo)
- $row cioè l’array delle impostazioni di design, stile e altro applicate alla riga corrente
Questo ci permette di:
- Prima verificare le impostazioni applicate a $row
- Poi, concordemente, applicare una classe CSS aggiuntiva alla riga
Codice di esempio: applichiamo una o più classi in funzione dello sfondo della riga
Nell’esempio di seguito, applicheremo due classi:
- has-bg-image nel caso in cui la riga abbia una immagine di sfondo
- has-bg-color nel caso in cui la riga abbia un colore di sfondo
- NOTA: le classi verranno applicate entrambe nel caso in cui ci siano entrambe le impostazioni applicate!
/*
* SiteOrigin - Add Row Class when class have image but not color background
*/
add_filter('siteorigin_panels_row_classes', 'sopb_add_row_classes', 10, 2);
function sopb_add_row_classes($classes, $row) {
// Check if row has bg image
if(isset($row['style']['background_image_attachment']) && !empty($row['style']['background_image_attachment'])) {
$classes[] = 'has-bg-image';
}
// Check if row has bg color
if(isset($row['style']['background']) && !empty($row['style']['background'])) {
$classes[] = 'has-bg-color';
}
return $classes;
}Ci troveremo quindi nella situazione sottostante:
<div class="panel-grid has-bg-color has-bg-image">
<div class="panel-row-style">
<! -- qui dentro ci sono le celle/colonne caratterizzate dal selettore .panel-grid-cell -->
</div>
</div>
<div class="panel-grid">
<! -- altro contenuto -->
</div>Casi d’uso: migliorare UX/UI design di lettore ed editor
Ovviamente questo esempio parte da un caso d’uso reale: c’era infatti la necessita di aumentare il contrasto di un testo bianco quando questo appariva su righe con una sola immagine di sfondo. In questa situazione, infatti, non era possibile stabilire a priori la leggibilità del testo a partire, per esempio, da un set di colori di base.
Spesso, perciò, il testo risultava illegibile.
Applicando la classe .has-bg-image alla riga era possibile selettivamente impostare, per esempio, una proprietà text-shadow che applicasse una leggera ombra nera molto sfocata, impercettibile all’occhio, che però migliorasse in modo sostanziale la leggibilità.
Facciamo inoltre tutto questo senza richiedere all’editor di inserire classi CSS nel box apposito che per un editor può essere spesso una competenza “avanzata” al di fuori delle proprie capacità ed in maniera totalmente automatizzata: gli basterà indicare infatti l’immagine di sfondo, al resto ci pensa una regola CSS del tipo:
.has-bg-imagenot(.has-bg-color) h1,
.has-bg-image:not(.has-bg-color) h2,
.has-bg-image:not(.has-bg-color) h3 .... {
text-shadow: {impostazione dell'ombra};
}I developers potranno poi anche creare regole personalizzate sulle righe, abilitando l’uso di selettori CSS di adiacenza come “+” e “~” al livello di .panel-grid.
