{"id":167376,"date":"2025-03-17T09:00:00","date_gmt":"2025-03-17T09:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/anatomia-di-una-riga-in-beaver-builder\/"},"modified":"2026-05-30T10:00:00","modified_gmt":"2026-05-30T08:00:00","slug":"anatomia-di-una-riga-in-beaver-builder","status":"publish","type":"post","link":"https:\/\/gtechgroup.it\/blog\/anatomia-di-una-riga-in-beaver-builder\/","title":{"rendered":"Anatomia di una Riga in Beaver Builder"},"content":{"rendered":"<article>\n<p>Il sistema di righe, colonne e layout responsive &#232; il fondamento strutturale di ogni pagina creata con Beaver Builder. Padroneggiare questi elementi &#232; 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.<\/p>\n<h2>Anatomia di una Riga in Beaver Builder<\/h2>\n<p>La riga &#232; il contenitore principale di ogni sezione della pagina. Ogni pagina Beaver Builder &#232; composta da una sequenza verticale di righe, ognuna delle quali pu&#242; avere caratteristiche visive e strutturali uniche. Quando clicchi sull&#8217;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.<\/p>\n<h3>Larghezza della Riga: Fixed vs Full Width<\/h3>\n<p>Una delle prime decisioni da prendere &#232; la larghezza della riga. Beaver Builder offre due opzioni:<\/p>\n<ul>\n<li><strong>Fixed (Larghezza fissa)<\/strong>: il contenuto della riga &#232; contenuto all&#8217;interno della larghezza massima definita nelle impostazioni globali (tipicamente 1200-1400 px). Questa &#232; l&#8217;opzione standard per la maggior parte delle sezioni di contenuto<\/li>\n<li><strong>Full Width<\/strong>: la riga si estende per tutta la larghezza della finestra del browser. All&#8217;interno di questa opzione, puoi scegliere se anche il <em>contenuto<\/em> si espande a tutta larghezza o se rimane contenuto nella larghezza massima. La prima variante &#232; ideale per sezioni hero con immagini di sfondo a tutta pagina, la seconda per sezioni con sfondo full-width ma contenuto centrato<\/li>\n<\/ul>\n<p>La combinazione di righe fixed e full-width nella stessa pagina crea un ritmo visivo dinamico e professionale, alternando sezioni contenute e sezioni impattanti.<\/p>\n<h3>Sfondi delle Righe<\/h3>\n<p>Le opzioni di sfondo per le righe sono estremamente ricche e rappresentano uno degli strumenti pi&#249; potenti per creare sezioni visivamente accattivanti:<\/p>\n<ul>\n<li><strong>Colore<\/strong>: un colore pieno con opzione di opacit&#224; (utile per overlay su sfondi globali del tema)<\/li>\n<li><strong>Foto<\/strong>: un&#8217;immagine di sfondo con opzioni di posizione, ripetizione, dimensione (cover, contain) e parallax<\/li>\n<li><strong>Video<\/strong>: un video di sfondo da file locale, YouTube o Vimeo (riprodotto in loop senza audio)<\/li>\n<li><strong>Gradiente<\/strong>: un gradiente lineare o radiale con colori e direzione personalizzabili<\/li>\n<li><strong>Slideshow<\/strong>: una galleria di immagini che si alternano come sfondo con effetti di transizione<\/li>\n<\/ul>\n<p>Per ogni tipo di sfondo puoi aggiungere un <strong>overlay<\/strong> con colore e opacit&#224; personalizzabili. L&#8217;overlay &#232; fondamentale quando usi immagini o video di sfondo con testo sovrapposto: un overlay scuro al 50-70{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c} garantisce la leggibilit&#224; del testo mantenendo l&#8217;impatto visivo dello sfondo.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/bb-01-settings.png\" alt=\"Impostazioni avanzate di una riga Beaver Builder: sfondo, larghezza e spaziatura\" \/><\/p>\n<h2>Il Sistema di Colonne<\/h2>\n<p>All&#8217;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.<\/p>\n<h3>Creare e Gestire le Colonne<\/h3>\n<p>Ci sono diversi modi per creare colonne in Beaver Builder:<\/p>\n<ol>\n<li><strong>Layout predefiniti<\/strong>: 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.)<\/li>\n<li><strong>Trascinamento<\/strong>: trascina un modulo accanto a uno esistente nella stessa riga per creare automaticamente una nuova colonna<\/li>\n<li><strong>Ridimensionamento manuale<\/strong>: passa il mouse sul bordo tra due colonne e trascina per ridimensionarle. Le larghezze vengono mostrate in percentuale durante il trascinamento<\/li>\n<\/ol>\n<p>Per eliminare una colonna, basta rimuovere tutti i moduli al suo interno e la colonna verr&#224; automaticamente rimossa, con le colonne rimanenti che si riadatteranno.<\/p>\n<h3>Colonne Nidificate<\/h3>\n<p>Beaver Builder supporta le <strong>colonne nidificate<\/strong>, ovvero la possibilit&#224; di inserire un layout a pi&#249; colonne all&#8217;interno di una colonna esistente. Questa funzionalit&#224; &#232; 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.<\/p>\n<h3>Impostazioni delle Colonne<\/h3>\n<p>Cliccando sulle impostazioni di una colonna individuale, puoi configurare:<\/p>\n<ul>\n<li><strong>Larghezza<\/strong>: percentuale esatta della colonna rispetto alla riga<\/li>\n<li><strong>Sfondo<\/strong>: colore, immagine o gradiente specifico per la colonna<\/li>\n<li><strong>Bordi e ombre<\/strong>: bordi con raggio arrotondato e box-shadow<\/li>\n<li><strong>Margini e padding<\/strong>: spaziature specifiche per la colonna, diverse per ogni breakpoint<\/li>\n<li><strong>Allineamento verticale<\/strong>: come i moduli si allineano verticalmente all&#8217;interno della colonna (top, center, bottom)<\/li>\n<\/ul>\n<p>L&#8217;allineamento verticale &#232; particolarmente utile quando hai colonne con quantit&#224; diverse di contenuto: impostando &#8220;center&#8221; puoi allineare verticalmente i contenuti per un aspetto pi&#249; equilibrato.<\/p>\n<h2>Layout Responsive: Come Beaver Builder Gestisce i Dispositivi<\/h2>\n<p>Il design responsive non &#232; un&#8217;opzione ma una necessit&#224;. Beaver Builder gestisce il responsive design attraverso un sistema di breakpoint e opzioni specifiche per ogni dispositivo.<\/p>\n<h3>I Breakpoint Predefiniti<\/h3>\n<p>Beaver Builder utilizza due breakpoint principali, configurabili nelle Impostazioni Globali:<\/p>\n<ul>\n<li><strong>Tablet<\/strong>: sotto 992 px (modificabile)<\/li>\n<li><strong>Mobile<\/strong>: sotto 768 px (modificabile)<\/li>\n<\/ul>\n<p>Quando la finestra del browser &#232; pi&#249; stretta del breakpoint tablet, le colonne iniziano a impilare verticalmente. Sotto il breakpoint mobile, il layout diventa completamente a colonna singola. Questo comportamento &#232; automatico, ma puoi personalizzarlo a diversi livelli.<\/p>\n<h3>Stacking delle Colonne<\/h3>\n<p>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:<\/p>\n<ul>\n<li><strong>Abilita\/disabilita lo stacking<\/strong>: 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)<\/li>\n<li><strong>Ordine di stacking<\/strong>: inverti l&#8217;ordine in cui le colonne si impilano<\/li>\n<li><strong>Larghezza colonne su mobile<\/strong>: le colonne diventano al 100{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c} per default, ma puoi specificare larghezze diverse<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/bb-02-templates.png\" alt=\"Esempio di layout responsive Beaver Builder: desktop, tablet e mobile a confronto\" \/><\/p>\n<h3>Opzioni Responsive per Ogni Elemento<\/h3>\n<p>Uno dei punti di forza di Beaver Builder &#232; la possibilit&#224; di configurare opzioni diverse per ogni breakpoint. Praticamente ogni impostazione che riguarda dimensioni, spaziature e tipografia presenta un&#8217;icona a forma di monitor accanto al campo: cliccandola, puoi impostare valori diversi per desktop, tablet e mobile. Questo include:<\/p>\n<ul>\n<li><strong>Dimensioni del testo<\/strong>: un titolo H1 che &#232; 48 px su desktop potrebbe essere 32 px su tablet e 24 px su mobile<\/li>\n<li><strong>Margini e padding<\/strong>: riduci le spaziature su schermi pi&#249; piccoli per evitare spazi vuoti eccessivi<\/li>\n<li><strong>Allineamento<\/strong>: un testo allineato a sinistra su desktop potrebbe essere centrato su mobile per una migliore leggibilit&#224;<\/li>\n<li><strong>Dimensioni delle immagini<\/strong>: riduci le dimensioni per accelerare il caricamento su connessioni mobili<\/li>\n<\/ul>\n<h3>Visibilit&#224; per Dispositivo<\/h3>\n<p>Ogni modulo, colonna e riga offre l&#8217;opzione di <strong>visibilit&#224; per dispositivo<\/strong>: puoi scegliere di mostrare o nascondere un elemento specifico su desktop, tablet o mobile. Questa opzione &#232; fondamentale per creare esperienze ottimizzate per ogni dispositivo. Ad esempio:<\/p>\n<ul>\n<li>Una tabella dati complessa visibile solo su desktop, sostituita da un elenco semplificato su mobile<\/li>\n<li>Un&#8217;immagine decorativa di grandi dimensioni nascosta su mobile per velocizzare il caricamento<\/li>\n<li>Un pulsante &#8220;Chiama ora&#8221; visibile solo su mobile, dove ha senso avviare una chiamata telefonica<\/li>\n<\/ul>\n<p>Attenzione per&#242;: gli elementi nascosti via CSS vengono comunque caricati nel DOM e scaricati dal browser. Non &#232; un metodo per ottimizzare le performance, ma solo per migliorare l&#8217;esperienza visiva. Per una vera ottimizzazione responsive, considera l&#8217;uso di immagini responsive con srcset.<\/p>\n<h2>Tecniche Avanzate di Layout<\/h2>\n<h3>Righe con Forme di Separazione (Shape Dividers)<\/h3>\n<p>Le versioni recenti di Beaver Builder includono gli <strong>Shape Dividers<\/strong>, 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&#224; aggiunge un tocco di design moderno senza ricorrere a codice CSS personalizzato.<\/p>\n<h3>Layout con Effetto Parallax<\/h3>\n<p>L&#8217;effetto parallax, dove lo sfondo si muove a una velocit&#224; diversa rispetto al contenuto durante lo scroll, &#232; configurabile direttamente dalle impostazioni di sfondo della riga. Beaver Builder offre un parallax basato su CSS (pi&#249; performante) e uno basato su JavaScript (pi&#249; fluido ma leggermente pi&#249; pesante). L&#8217;effetto parallax funziona meglio con immagini di sfondo grandi e sezioni con altezza generosa.<\/p>\n<h3>Sezioni Full-Height<\/h3>\n<p>Per creare sezioni che occupano l&#8217;intera altezza della finestra del browser (come le hero section &#8220;a tutto schermo&#8221;), abilita l&#8217;opzione <strong>Full Height<\/strong> nelle impostazioni della riga e imposta l&#8217;allineamento verticale del contenuto su &#8220;center&#8221;. Questo garantisce che il contenuto sia sempre centrato verticalmente, indipendentemente dalla dimensione dello schermo.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/bb-03-plugins.png\" alt=\"Tecniche avanzate di layout con Beaver Builder: shape dividers e parallax\" \/><\/p>\n<h2>Errori Comuni e Come Evitarli<\/h2>\n<p>Nella gestione dei layout responsive con Beaver Builder, ci sono alcuni errori ricorrenti che &#232; bene conoscere per evitarli:<\/p>\n<ul>\n<li><strong>Padding eccessivo su mobile<\/strong>: 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<\/li>\n<li><strong>Troppe colonne su mobile<\/strong>: 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<\/li>\n<li><strong>Font troppo grandi<\/strong>: un titolo da 64 px pu&#242; occupare l&#8217;intero schermo di un telefono. Usa sempre dimensioni responsive per i testi<\/li>\n<li><strong>Immagini non ottimizzate<\/strong>: caricare immagini da 4000 px per mostrarle a 400 px su mobile &#232; uno spreco di banda. Usa immagini con dimensioni appropriate<\/li>\n<li><strong>Nascondere troppi elementi<\/strong>: se nascondi met&#224; della pagina su mobile, probabilmente il design va ripensato dall&#8217;inizio con un approccio mobile-first<\/li>\n<\/ul>\n<h2>Pattern di Layout Comuni<\/h2>\n<p>Ecco alcuni pattern di layout che puoi replicare facilmente con il sistema di righe e colonne di Beaver Builder:<\/p>\n<ul>\n<li><strong>Hero con CTA<\/strong>: riga full-width, sfondo immagine con overlay, contenuto centrato (titolo + sottotitolo + pulsante)<\/li>\n<li><strong>Feature Grid<\/strong>: riga con 3 colonne uguali, ciascuna con icona + titolo + testo, sfondo alternato tra sezioni<\/li>\n<li><strong>Contenuto + Sidebar<\/strong>: riga con 2 colonne 2\/3 + 1\/3, la colonna principale per il contenuto e la pi&#249; stretta per la sidebar<\/li>\n<li><strong>Alternating Content<\/strong>: righe alternate immagine-sinistra\/testo-destra e testo-sinistra\/immagine-destra per creare ritmo visivo<\/li>\n<li><strong>CTA Band<\/strong>: riga con sfondo colorato, layout a 2 colonne (testo a sinistra, pulsante a destra con allineamento verticale centrato)<\/li>\n<\/ul>\n<h2>Conclusione<\/h2>\n<p>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 &#232; 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.<\/p>\n<p>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 <a href=\"https:\/\/gtechgroup.it\/realizzazione-siti-web\/\">realizzazione siti web<\/a> o <a href=\"https:\/\/gtechgroup.it\/contatti\/\">contattaci direttamente<\/a> per discutere il tuo progetto.<\/p>\n<div style=\"background:#f0f4f8;border-left:4px solid #0073aa;padding:20px;margin:30px 0;border-radius:4px;\">\n<h3 style=\"margin-top:0;\">Leggi gli Altri Articoli della Serie Beaver Builder<\/h3>\n<ul>\n<li><a href=\"https:\/\/gtechgroup.it\/realizzazione-siti-web\/\">Come Installare e Configurare Beaver Builder su WordPress<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/realizzazione-siti-web\/\">Creare la Prima Pagina con Beaver Builder: Editor Frontend<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/realizzazione-siti-web\/\">Beaver Builder: Tutti i Moduli e Come Usarli<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/realizzazione-siti-web\/\">Beaver Builder: Salvare e Riutilizzare Template e Righe<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/realizzazione-siti-web\/\">Beaver Builder e WooCommerce: Personalizzare il Negozio<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/realizzazione-siti-web\/\">Beaver Builder Themer: Header, Footer e Layout Dinamici<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/realizzazione-siti-web\/\">Beaver Builder: Integrazioni con ACF e Campi Personalizzati<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/realizzazione-siti-web\/\">Beaver Builder e la SEO: Ottimizzare le Pagine<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/realizzazione-siti-web\/\">Beaver Builder: Performance e Velocit&#224; del Sito<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/realizzazione-siti-web\/\">Beaver Builder Free vs Pro vs Agency: Confronto 2026<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/realizzazione-siti-web\/\">Beaver Builder vs Elementor vs Divi: Confronto Page Builder<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/realizzazione-siti-web\/\">Beaver Builder: CSS e Codice Personalizzato<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/realizzazione-siti-web\/\">Beaver Builder: Addon e Estensioni (Ultimate Addons, PowerPack)<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/realizzazione-siti-web\/\">Risolvere i Problemi Comuni di Beaver Builder: Troubleshooting<\/a><\/li>\n<\/ul>\n<\/div>\n<\/article>\n<h3>Migliora il Tuo Sito WordPress<\/h3>\n<p>Scopri le nostre guide complete sugli altri plugin essenziali per WordPress:<\/p>\n<ul>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/come-installare-elementor-wordpress-guida-principianti\/\">Come Installare Elementor su WordPress<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/wp-rocket-installare-configurare-wordpress\/\">Come Installare e Configurare WP Rocket<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/come-installare-configurare-seopress-wordpress-guida\/\">Come Installare e Configurare SEOPress<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/installare-attivare-updraftplus-wordpress\/\">Come Installare e Configurare UpdraftPlus<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Il sistema di righe, colonne e layout responsive &#232; il fondamento strutturale di ogni pagina creata con Beaver Builder. Padroneggiare questi elementi &#232; essenziale per&hellip;<\/p>\n","protected":false},"author":2,"featured_media":167325,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"Anatomia di una Riga in Beaver Builder | Guida 2026","_seopress_titles_desc":"Il sistema di righe, colonne e layout responsive &#232; il fondamento strutturale di ogni pagina creata con Beaver Builder. Padroneggiare questi elementi &","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"","_seopress_redirections_param":"","_seopress_redirections_type":0,"_seopress_analysis_target_kw":"Anatomia Riga Beaver Builder","footnotes":""},"categories":[1,61],"tags":[3662,3329,2520,492],"class_list":["post-167376","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-senza-categoria","category-wordpress","tag-beaver-builder","tag-design","tag-page-builder","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/167376","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/comments?post=167376"}],"version-history":[{"count":0,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/167376\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media\/167325"}],"wp:attachment":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media?parent=167376"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/categories?post=167376"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/tags?post=167376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}