{"id":167375,"date":"2025-03-10T09:00:00","date_gmt":"2025-03-10T09:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/moduli-base-i-mattoni-fondamentali\/"},"modified":"2026-05-30T10:00:00","modified_gmt":"2026-05-30T08:00:00","slug":"moduli-base-i-mattoni-fondamentali","status":"publish","type":"post","link":"https:\/\/gtechgroup.it\/blog\/moduli-base-i-mattoni-fondamentali\/","title":{"rendered":"Moduli Base: I Mattoni Fondamentali"},"content":{"rendered":"<article>\n<p>I moduli sono gli elementi fondamentali con cui si costruiscono le pagine in Beaver Builder. Ogni modulo rappresenta un componente di contenuto specifico &#8212; dal semplice blocco di testo fino allo slider avanzato o al modulo di contatto. Conoscere a fondo tutti i moduli disponibili, le loro opzioni e i casi d&#8217;uso ideali &#232; essenziale per sfruttare al massimo il potenziale di questo page builder. In questa guida analizzeremo ogni modulo, suddiviso per categoria, con consigli pratici su quando e come utilizzarli.<\/p>\n<h2>Moduli Base: I Mattoni Fondamentali<\/h2>\n<p>I moduli base sono disponibili sia nella versione gratuita Lite che in quella premium. Rappresentano gli elementi essenziali per qualsiasi pagina web.<\/p>\n<h3>Modulo Testo (Text Editor)<\/h3>\n<p>Il modulo Testo &#232; il pi&#249; versatile e probabilmente quello che utilizzerai con maggiore frequenza. Integra un editor WYSIWYG completo basato su TinyMCE, con tutte le opzioni di formattazione standard: grassetto, corsivo, elenchi puntati e numerati, link, allineamento e inserimento di media. Le opzioni avanzate nella scheda Stile permettono di personalizzare:<\/p>\n<ul>\n<li><strong>Tipografia<\/strong>: famiglia font, dimensione, peso, altezza di riga, spaziatura lettere<\/li>\n<li><strong>Colore<\/strong>: testo, link e link hover<\/li>\n<li><strong>Margini e padding<\/strong>: spaziatura interna ed esterna del modulo<\/li>\n<\/ul>\n<p>Un consiglio importante: evita di inserire titoli (H1, H2, H3) all&#8217;interno del modulo Testo. Per i titoli, usa sempre il modulo Titolo dedicato, che offre opzioni di personalizzazione specifiche e garantisce una struttura HTML pi&#249; corretta dal punto di vista semantico e SEO.<\/p>\n<h3>Modulo Titolo (Heading)<\/h3>\n<p>Il modulo Titolo genera un elemento heading HTML (da H1 a H6) con opzioni di personalizzazione complete. Puoi controllare la dimensione del font separatamente per desktop, tablet e mobile, applicare un colore gradiente al testo, aggiungere un link e persino inserire un&#8217;icona accanto al titolo. Nella scheda Avanzate trovi le opzioni per l&#8217;animazione di ingresso e per la visibilit&#224; responsive.<\/p>\n<h3>Modulo Foto (Photo)<\/h3>\n<p>Il modulo Foto inserisce un&#8217;immagine dalla libreria media di WordPress. Le opzioni includono: dimensione dell&#8217;immagine (miniatura, media, grande, originale), allineamento, didascalia, link (all&#8217;URL personalizzato, al file media o alla pagina allegata), bordi e bordi arrotondati. &#200; fondamentale compilare sempre il campo <strong>Alt Text<\/strong> per l&#8217;accessibilit&#224; e la SEO.<\/p>\n<h3>Modulo Pulsante (Button)<\/h3>\n<p>Il modulo Pulsante crea call-to-action cliccabili con personalizzazione completa. Puoi scegliere tra diversi stili predefiniti (piatto, gradiente, trasparente, 3D), impostare colori, dimensioni, icone, bordi e effetti hover. Il pulsante pu&#242; linkare a qualsiasi URL, aprire un link in una nuova scheda o attivare azioni JavaScript personalizzate. Per i pulsanti pi&#249; importanti, usa la variante <strong>Button Group<\/strong> che permette di affiancare pi&#249; pulsanti nella stessa riga.<\/p>\n<h3>Modulo HTML<\/h3>\n<p>Il modulo HTML &#232; una tela bianca dove puoi inserire codice HTML, CSS e JavaScript personalizzato. &#200; indispensabile per incorporare widget di terze parti, mappe interattive, embed di social media o qualsiasi elemento che richieda codice specifico. &#200; anche utile per inserire shortcode di altri plugin WordPress.<\/p>\n<h3>Modulo Video<\/h3>\n<p>Il modulo Video supporta sia video ospitati localmente nella libreria media sia embed da piattaforme esterne come YouTube e Vimeo. Per i video embedded, basta incollare l&#8217;URL e Beaver Builder generer&#224; automaticamente l&#8217;incorporamento. Le opzioni includono autoplay, loop, poster personalizzato e la possibilit&#224; di mostrare il video in un lightbox.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/bb-01-settings.png\" alt=\"Pannello moduli di Beaver Builder con le diverse categorie di elementi disponibili\" \/><\/p>\n<h2>Moduli Avanzati: Funzionalit&#224; Premium<\/h2>\n<p>I moduli avanzati sono disponibili nella versione Pro e Agency di Beaver Builder. Offrono funzionalit&#224; pi&#249; sofisticate per creare pagine professionali e interattive.<\/p>\n<h3>Modulo Accordion (Fisarmonica)<\/h3>\n<p>L&#8217;Accordion crea sezioni di contenuto espandibili e comprimibili, ideali per le FAQ, le descrizioni dettagliate dei prodotti o qualsiasi contenuto che beneficia di una presentazione compatta. Ogni voce ha un titolo cliccabile e un contenuto che si espande al clic. Puoi personalizzare le icone di apertura\/chiusura, i colori, i bordi e il comportamento (una sola voce aperta alla volta o pi&#249; voci aperte contemporaneamente).<\/p>\n<h3>Modulo Tabs<\/h3>\n<p>Simile all&#8217;Accordion ma con navigazione a schede orizzontali o verticali. &#200; perfetto per organizzare informazioni correlate in categorie: ad esempio, le caratteristiche di un prodotto divise per &#8220;Specifiche&#8221;, &#8220;Dimensioni&#8221;, &#8220;Recensioni&#8221;. L&#8217;interfaccia a tabs &#232; particolarmente efficace su desktop, mentre su mobile le schede si trasformano automaticamente in un accordion per una migliore usabilit&#224;.<\/p>\n<h3>Modulo Slider<\/h3>\n<p>Il modulo Slider crea presentazioni a scorrimento con immagini, testo e pulsanti sovrapposti. Puoi configurare la velocit&#224; di transizione, il tipo di animazione (fade, slide), la navigazione (frecce, punti), l&#8217;autoplay e il comportamento responsive. Per slider pi&#249; complessi con layout personalizzati, Beaver Builder offre anche il <strong>Content Slider<\/strong>, che permette di inserire qualsiasi modulo all&#8217;interno di ogni slide.<\/p>\n<h3>Modulo Contatore (Number Counter)<\/h3>\n<p>Il Number Counter crea animazioni numeriche con effetto conteggio, ideali per evidenziare statistiche e metriche. Puoi impostare il numero iniziale e finale, la durata dell&#8217;animazione, il prefisso e il suffisso (ad esempio &#8220;+&#8221; o &#8220;{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c}&#8221;). Molto efficace nelle sezioni &#8220;I nostri numeri&#8221; o &#8220;Risultati raggiunti&#8221;.<\/p>\n<h3>Modulo Testimonial<\/h3>\n<p>Il modulo Testimonial presenta recensioni e citazioni dei clienti con layout professionali. Include campi per il nome, la qualifica, la foto e il testo della testimonianza. Puoi scegliere tra diversi stili di visualizzazione e, nella versione con pi&#249; testimonial, abilitare la rotazione automatica a carousel.<\/p>\n<h3>Modulo Mappa<\/h3>\n<p>Il modulo Mappa integra Google Maps nella pagina. Inserisci semplicemente l&#8217;indirizzo e il modulo generer&#224; una mappa interattiva. Puoi personalizzare il livello di zoom, il tipo di mappa (stradale, satellite, ibrida), l&#8217;altezza e aggiungere un marker personalizzato.<\/p>\n<h3>Modulo Pricing Table<\/h3>\n<p>Il modulo Tabella Prezzi crea confronti di piani tariffari professionali. Ogni colonna include titolo del piano, prezzo, elenco di funzionalit&#224; (con possibilit&#224; di barrare quelle non incluse) e pulsante di azione. Puoi evidenziare il piano consigliato con uno stile diverso. Questo modulo &#232; indispensabile per le pagine di pricing dei servizi SaaS, hosting e abbonamenti.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/bb-02-templates.png\" alt=\"Esempio di moduli avanzati Beaver Builder: accordion, tabs e pricing table\" \/><\/p>\n<h3>Modulo Callout<\/h3>\n<p>Il Callout combina titolo, testo, immagine (o icona) e pulsante in un unico modulo strutturato. &#200; perfetto per le card dei servizi, le feature list e qualsiasi presentazione che richieda un elemento visivo abbinato a testo e call-to-action. Puoi scegliere il posizionamento dell&#8217;immagine (sopra, a sinistra, a destra) e personalizzare ogni componente separatamente.<\/p>\n<h3>Modulo Contact Form<\/h3>\n<p>Beaver Builder Pro include un modulo form di contatto nativo che non richiede plugin aggiuntivi. Puoi configurare i campi (nome, email, telefono, oggetto, messaggio), l&#8217;indirizzo email di destinazione, il messaggio di successo e la protezione antispam con reCAPTCHA. Per form pi&#249; complessi con logica condizionale e integrazione CRM, &#232; consigliabile usare un plugin dedicato come Gravity Forms o WPForms e incorporarlo tramite shortcode nel modulo HTML.<\/p>\n<h3>Modulo Post Grid e Post Carousel<\/h3>\n<p>Questi moduli mostrano elenchi di articoli, pagine o custom post type in formato griglia o carosello. Le opzioni di query permettono di filtrare per categoria, tag, autore o qualsiasi tassonomia personalizzata. Puoi controllare il numero di post visualizzati, le informazioni mostrate (titolo, estratto, data, autore, immagine in evidenza) e il layout delle card. Sono fondamentali per le sezioni &#8220;Ultimi articoli&#8221;, &#8220;Progetti correlati&#8221; o &#8220;Prodotti in evidenza&#8221;.<\/p>\n<h3>Modulo Subscribe Form<\/h3>\n<p>Il modulo Subscribe Form crea moduli di iscrizione alla newsletter integrati con i principali servizi di email marketing: Mailchimp, ActiveCampaign, ConvertKit, Drip e altri. La configurazione richiede la chiave API del servizio scelto e permette di personalizzare i campi, lo stile del pulsante e il messaggio di conferma.<\/p>\n<h2>Moduli WordPress<\/h2>\n<p>Oltre ai moduli nativi, Beaver Builder include una categoria speciale chiamata <strong>Moduli WordPress<\/strong> (o Widget) che integra i widget standard di WordPress nell&#8217;editor frontend. Troverai qui la barra di ricerca, il menu di navigazione, il tag cloud, gli articoli recenti e tutti i widget dei plugin installati. Questa integrazione &#232; utile per inserire elementi nativi WordPress all&#8217;interno di layout costruiti con il builder, mantenendo la compatibilit&#224; con l&#8217;ecosistema WordPress.<\/p>\n<h2>Le Opzioni Comuni a Tutti i Moduli<\/h2>\n<p>Ogni modulo in Beaver Builder condivide un set di opzioni comuni accessibili dalla scheda <strong>Avanzate<\/strong>:<\/p>\n<ul>\n<li><strong>Margini e Padding<\/strong>: spaziatura esterna e interna personalizzabile per desktop, tablet e mobile<\/li>\n<li><strong>Visibilit&#224;<\/strong>: mostra o nascondi il modulo su desktop, tablet e\/o mobile<\/li>\n<li><strong>Animazioni<\/strong>: effetti di ingresso (fade in, slide, zoom) con durata e ritardo personalizzabili<\/li>\n<li><strong>Classe CSS e ID<\/strong>: per aggiungere classi e ID personalizzati all&#8217;elemento HTML del modulo<\/li>\n<li><strong>HTML Element<\/strong>: scegli il tag HTML contenitore (div, section, aside, ecc.)<\/li>\n<\/ul>\n<p>Queste opzioni comuni garantiscono flessibilit&#224; e coerenza nella personalizzazione di ogni elemento della pagina.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/bb-03-plugins.png\" alt=\"Opzioni avanzate comuni a tutti i moduli di Beaver Builder\" \/><\/p>\n<h2>Best Practice nell&#8217;Uso dei Moduli<\/h2>\n<p>Per ottenere i migliori risultati con i moduli di Beaver Builder, tieni a mente questi principi:<\/p>\n<ul>\n<li><strong>Meno &#232; meglio<\/strong>: non usare troppi moduli diversi nella stessa pagina. La coerenza visiva &#232; pi&#249; importante della variet&#224;<\/li>\n<li><strong>Gerarchia visiva<\/strong>: usa i moduli Titolo con tag H corretti (H1 per il titolo principale, H2 per le sezioni, H3 per le sottosezioni) per creare una struttura logica<\/li>\n<li><strong>Ottimizza le immagini<\/strong>: prima di usare il modulo Foto, assicurati che le immagini siano ottimizzate per il web (formato WebP, dimensioni appropriate, compressione)<\/li>\n<li><strong>Accessibilit&#224;<\/strong>: compila sempre gli attributi alt per le immagini, usa colori con contrasto sufficiente e assicurati che i moduli interattivi siano navigabili da tastiera<\/li>\n<li><strong>Mobile first<\/strong>: verifica sempre l&#8217;aspetto di ogni modulo nella vista mobile e apporta le correzioni necessarie prima di pubblicare<\/li>\n<\/ul>\n<h2>Conclusione<\/h2>\n<p>Conoscere a fondo i moduli di Beaver Builder &#232; la chiave per creare pagine professionali in modo rapido ed efficiente. Ogni modulo &#232; stato progettato per risolvere un&#8217;esigenza specifica, e la combinazione di moduli base e avanzati copre virtualmente ogni scenario di design. Nella prossima guida esploreremo in dettaglio il sistema di righe, colonne e layout responsive, per imparare a creare strutture di pagina complesse e perfettamente adattabili a ogni dispositivo.<\/p>\n<p>Hai bisogno di aiuto con il tuo progetto WordPress? <a href=\"https:\/\/gtechgroup.it\/contatti\/\">Contattaci<\/a> per una consulenza gratuita oppure scopri i nostri servizi di <a href=\"https:\/\/gtechgroup.it\/realizzazione-siti-web\/\">realizzazione siti web<\/a> professionali.<\/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: Righe, Colonne e Layout Responsive<\/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>I moduli sono gli elementi fondamentali con cui si costruiscono le pagine in Beaver Builder. Ogni modulo rappresenta un componente di contenuto specifico &#8212; dal&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":"Moduli Base: I Mattoni Fondamentali | Guida 2026","_seopress_titles_desc":"I moduli sono gli elementi fondamentali con cui si costruiscono le pagine in Beaver Builder. Ogni modulo rappresenta un componente di contenuto specifico &","_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":"Moduli Base: I Mattoni","footnotes":""},"categories":[1,61],"tags":[3662,3329,2520,492],"class_list":["post-167375","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\/167375","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=167375"}],"version-history":[{"count":0,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/167375\/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=167375"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/categories?post=167375"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/tags?post=167375"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}