Anatomia di una Riga in Beaver Builder

Il sistema di righe, colonne e layout responsive è il fondamento strutturale di ogni pagina creata con Beaver Builder. Padroneggiare questi elementi è essenziale per costruire layout complessi che si adattino perfettamente a qualsiasi dispositivo, dal monitor 4K allo smartphone. In questa guida approfondita esploreremo ogni aspetto della struttura di pagina in Beaver Builder, dalle basi fino alle tecniche avanzate per creare layout sofisticati e perfettamente responsive.

Anatomia di una Riga in Beaver Builder

La riga è il contenitore principale di ogni sezione della pagina. Ogni pagina Beaver Builder è composta da una sequenza verticale di righe, ognuna delle quali può avere caratteristiche visive e strutturali uniche. Quando clicchi sull’icona della chiave inglese di una riga, accedi a un pannello di impostazioni articolato in tre schede principali: Stile, Avanzate e le impostazioni specifiche della riga.

Larghezza della Riga: Fixed vs Full Width

Una delle prime decisioni da prendere è la larghezza della riga. Beaver Builder offre due opzioni:

• Fixed (Larghezza fissa): il contenuto della riga è contenuto all’interno della larghezza massima definita nelle impostazioni globali (tipicamente 1200-1400 px). Questa è l’opzione standard per la maggior parte delle sezioni di contenuto
• Full Width: la riga si estende per tutta la larghezza della finestra del browser. All’interno di questa opzione, puoi scegliere se anche il contenuto si espande a tutta larghezza o se rimane contenuto nella larghezza massima. La prima variante è ideale per sezioni hero con immagini di sfondo a tutta pagina, la seconda per sezioni con sfondo full-width ma contenuto centrato

La combinazione di righe fixed e full-width nella stessa pagina crea un ritmo visivo dinamico e professionale, alternando sezioni contenute e sezioni impattanti.

Sfondi delle Righe

Le opzioni di sfondo per le righe sono estremamente ricche e rappresentano uno degli strumenti più potenti per creare sezioni visivamente accattivanti:

• Colore: un colore pieno con opzione di opacità (utile per overlay su sfondi globali del tema)
• Foto: un’immagine di sfondo con opzioni di posizione, ripetizione, dimensione (cover, contain) e parallax
• Video: un video di sfondo da file locale, YouTube o Vimeo (riprodotto in loop senza audio)
• Gradiente: un gradiente lineare o radiale con colori e direzione personalizzabili
• Slideshow: una galleria di immagini che si alternano come sfondo con effetti di transizione

Per ogni tipo di sfondo puoi aggiungere un overlay con colore e opacità personalizzabili. L’overlay è fondamentale quando usi immagini o video di sfondo con testo sovrapposto: un overlay scuro al 50-70{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c} garantisce la leggibilità del testo mantenendo l’impatto visivo dello sfondo.

Il Sistema di Colonne

All’interno di ogni riga, le colonne definiscono la disposizione orizzontale del contenuto. Beaver Builder supporta layout da 1 a 6 colonne con larghezze completamente personalizzabili.

Creare e Gestire le Colonne

Ci sono diversi modi per creare colonne in Beaver Builder:

1. Layout predefiniti: quando inserisci una nuova riga, puoi scegliere tra layout predefiniti (1 colonna, 2 colonne uguali, 2 colonne 2/3 + 1/3, 3 colonne, 4 colonne, ecc.)
2. Trascinamento: trascina un modulo accanto a uno esistente nella stessa riga per creare automaticamente una nuova colonna
3. Ridimensionamento manuale: passa il mouse sul bordo tra due colonne e trascina per ridimensionarle. Le larghezze vengono mostrate in percentuale durante il trascinamento

Per eliminare una colonna, basta rimuovere tutti i moduli al suo interno e la colonna verrà automaticamente rimossa, con le colonne rimanenti che si riadatteranno.

Colonne Nidificate

Beaver Builder supporta le colonne nidificate, ovvero la possibilità di inserire un layout a più colonne all’interno di una colonna esistente. Questa funzionalità è potente ma va usata con moderazione: troppi livelli di nidificazione rendono il layout difficile da gestire e possono causare problemi di rendering su dispositivi mobili. Come regola generale, limita la nidificazione a un solo livello aggiuntivo.

Impostazioni delle Colonne

Cliccando sulle impostazioni di una colonna individuale, puoi configurare:

• Larghezza: percentuale esatta della colonna rispetto alla riga
• Sfondo: colore, immagine o gradiente specifico per la colonna
• Bordi e ombre: bordi con raggio arrotondato e box-shadow
• Margini e padding: spaziature specifiche per la colonna, diverse per ogni breakpoint
• Allineamento verticale: come i moduli si allineano verticalmente all’interno della colonna (top, center, bottom)

L’allineamento verticale è particolarmente utile quando hai colonne con quantità diverse di contenuto: impostando “center” puoi allineare verticalmente i contenuti per un aspetto più equilibrato.

Layout Responsive: Come Beaver Builder Gestisce i Dispositivi

Il design responsive non è un’opzione ma una necessità. Beaver Builder gestisce il responsive design attraverso un sistema di breakpoint e opzioni specifiche per ogni dispositivo.

I Breakpoint Predefiniti

Beaver Builder utilizza due breakpoint principali, configurabili nelle Impostazioni Globali:

• Tablet: sotto 992 px (modificabile)
• Mobile: sotto 768 px (modificabile)

Quando la finestra del browser è più stretta del breakpoint tablet, le colonne iniziano a impilare verticalmente. Sotto il breakpoint mobile, il layout diventa completamente a colonna singola. Questo comportamento è automatico, ma puoi personalizzarlo a diversi livelli.

Stacking delle Colonne

Per default, le colonne si impilano verticalmente su dispositivi mobili, in ordine da sinistra a destra (o da sopra a sotto in RTL). Puoi controllare questo comportamento dalle impostazioni della riga:

• Abilita/disabilita lo stacking: in alcuni casi potresti voler mantenere le colonne affiancate anche su mobile (ad esempio, per un layout a due colonne con icona piccola + testo breve)
• Ordine di stacking: inverti l’ordine in cui le colonne si impilano
• Larghezza colonne su mobile: le colonne diventano al 100{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c} per default, ma puoi specificare larghezze diverse

Opzioni Responsive per Ogni Elemento

Uno dei punti di forza di Beaver Builder è la possibilità di configurare opzioni diverse per ogni breakpoint. Praticamente ogni impostazione che riguarda dimensioni, spaziature e tipografia presenta un’icona a forma di monitor accanto al campo: cliccandola, puoi impostare valori diversi per desktop, tablet e mobile. Questo include:

• Dimensioni del testo: un titolo H1 che è 48 px su desktop potrebbe essere 32 px su tablet e 24 px su mobile
• Margini e padding: riduci le spaziature su schermi più piccoli per evitare spazi vuoti eccessivi
• Allineamento: un testo allineato a sinistra su desktop potrebbe essere centrato su mobile per una migliore leggibilità
• Dimensioni delle immagini: riduci le dimensioni per accelerare il caricamento su connessioni mobili

Visibilità per Dispositivo

Ogni modulo, colonna e riga offre l’opzione di visibilità per dispositivo: puoi scegliere di mostrare o nascondere un elemento specifico su desktop, tablet o mobile. Questa opzione è fondamentale per creare esperienze ottimizzate per ogni dispositivo. Ad esempio:

• Una tabella dati complessa visibile solo su desktop, sostituita da un elenco semplificato su mobile
• Un’immagine decorativa di grandi dimensioni nascosta su mobile per velocizzare il caricamento
• Un pulsante “Chiama ora” visibile solo su mobile, dove ha senso avviare una chiamata telefonica

Attenzione però: gli elementi nascosti via CSS vengono comunque caricati nel DOM e scaricati dal browser. Non è un metodo per ottimizzare le performance, ma solo per migliorare l’esperienza visiva. Per una vera ottimizzazione responsive, considera l’uso di immagini responsive con srcset.

Tecniche Avanzate di Layout

Righe con Forme di Separazione (Shape Dividers)

Le versioni recenti di Beaver Builder includono gli Shape Dividers, separatori decorativi tra le righe. Invece delle classiche transizioni lineari tra sezioni, puoi aggiungere forme ondulate, triangolari, a zig-zag o personalizzate nella parte superiore e/o inferiore di ogni riga. Questa funzionalità aggiunge un tocco di design moderno senza ricorrere a codice CSS personalizzato.

Layout con Effetto Parallax

L’effetto parallax, dove lo sfondo si muove a una velocità diversa rispetto al contenuto durante lo scroll, è configurabile direttamente dalle impostazioni di sfondo della riga. Beaver Builder offre un parallax basato su CSS (più performante) e uno basato su JavaScript (più fluido ma leggermente più pesante). L’effetto parallax funziona meglio con immagini di sfondo grandi e sezioni con altezza generosa.

Sezioni Full-Height

Per creare sezioni che occupano l’intera altezza della finestra del browser (come le hero section “a tutto schermo”), abilita l’opzione Full Height nelle impostazioni della riga e imposta l’allineamento verticale del contenuto su “center”. Questo garantisce che il contenuto sia sempre centrato verticalmente, indipendentemente dalla dimensione dello schermo.

Errori Comuni e Come Evitarli

Nella gestione dei layout responsive con Beaver Builder, ci sono alcuni errori ricorrenti che è bene conoscere per evitarli:

• Padding eccessivo su mobile: un padding di 80 px che funziona bene su desktop crea spazi enormi su uno schermo da 375 px. Imposta sempre valori ridotti per il breakpoint mobile
• Troppe colonne su mobile: un layout a 4 colonne non funziona su mobile. Assicurati che lo stacking sia abilitato e che ogni colonna abbia senso anche come blocco singolo
• Font troppo grandi: un titolo da 64 px può occupare l’intero schermo di un telefono. Usa sempre dimensioni responsive per i testi
• Immagini non ottimizzate: caricare immagini da 4000 px per mostrarle a 400 px su mobile è uno spreco di banda. Usa immagini con dimensioni appropriate
• Nascondere troppi elementi: se nascondi metà della pagina su mobile, probabilmente il design va ripensato dall’inizio con un approccio mobile-first

Pattern di Layout Comuni

Ecco alcuni pattern di layout che puoi replicare facilmente con il sistema di righe e colonne di Beaver Builder:

• Hero con CTA: riga full-width, sfondo immagine con overlay, contenuto centrato (titolo + sottotitolo + pulsante)
• Feature Grid: riga con 3 colonne uguali, ciascuna con icona + titolo + testo, sfondo alternato tra sezioni
• Contenuto + Sidebar: riga con 2 colonne 2/3 + 1/3, la colonna principale per il contenuto e la più stretta per la sidebar
• Alternating Content: righe alternate immagine-sinistra/testo-destra e testo-sinistra/immagine-destra per creare ritmo visivo
• CTA Band: riga con sfondo colorato, layout a 2 colonne (testo a sinistra, pulsante a destra con allineamento verticale centrato)

Conclusione

Padroneggiare il sistema di righe, colonne e layout responsive di Beaver Builder ti permette di creare pagine web professionali che funzionano perfettamente su qualsiasi dispositivo. La chiave è comprendere la gerarchia degli elementi, sfruttare le opzioni responsive per ogni breakpoint e testare sempre il risultato su diverse dimensioni di schermo. Nel prossimo articolo della serie, esploreremo come salvare e riutilizzare template, righe e moduli per velocizzare drasticamente il flusso di lavoro.

Per progetti web professionali che richiedono layout complessi e design responsive impeccabile, affidati al nostro team di esperti. Visita la pagina dei nostri servizi di realizzazione siti web o contattaci direttamente per discutere il tuo progetto.