Moduli Base: I Mattoni Fondamentali

I moduli sono gli elementi fondamentali con cui si costruiscono le pagine in Beaver Builder. Ogni modulo rappresenta un componente di contenuto specifico — 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’uso ideali è 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.

Moduli Base: I Mattoni Fondamentali

I moduli base sono disponibili sia nella versione gratuita Lite che in quella premium. Rappresentano gli elementi essenziali per qualsiasi pagina web.

Modulo Testo (Text Editor)

Il modulo Testo è il più 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:

• Tipografia: famiglia font, dimensione, peso, altezza di riga, spaziatura lettere
• Colore: testo, link e link hover
• Margini e padding: spaziatura interna ed esterna del modulo

Un consiglio importante: evita di inserire titoli (H1, H2, H3) all’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ù corretta dal punto di vista semantico e SEO.

Modulo Titolo (Heading)

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’icona accanto al titolo. Nella scheda Avanzate trovi le opzioni per l’animazione di ingresso e per la visibilità responsive.

Modulo Foto (Photo)

Il modulo Foto inserisce un’immagine dalla libreria media di WordPress. Le opzioni includono: dimensione dell’immagine (miniatura, media, grande, originale), allineamento, didascalia, link (all’URL personalizzato, al file media o alla pagina allegata), bordi e bordi arrotondati. È fondamentale compilare sempre il campo Alt Text per l’accessibilità e la SEO.

Modulo Pulsante (Button)

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ò linkare a qualsiasi URL, aprire un link in una nuova scheda o attivare azioni JavaScript personalizzate. Per i pulsanti più importanti, usa la variante Button Group che permette di affiancare più pulsanti nella stessa riga.

Modulo HTML

Il modulo HTML è una tela bianca dove puoi inserire codice HTML, CSS e JavaScript personalizzato. È indispensabile per incorporare widget di terze parti, mappe interattive, embed di social media o qualsiasi elemento che richieda codice specifico. È anche utile per inserire shortcode di altri plugin WordPress.

Modulo Video

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’URL e Beaver Builder genererà automaticamente l’incorporamento. Le opzioni includono autoplay, loop, poster personalizzato e la possibilità di mostrare il video in un lightbox.

Moduli Avanzati: Funzionalità Premium

I moduli avanzati sono disponibili nella versione Pro e Agency di Beaver Builder. Offrono funzionalità più sofisticate per creare pagine professionali e interattive.

Modulo Accordion (Fisarmonica)

L’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ù voci aperte contemporaneamente).

Modulo Tabs

Simile all’Accordion ma con navigazione a schede orizzontali o verticali. È perfetto per organizzare informazioni correlate in categorie: ad esempio, le caratteristiche di un prodotto divise per “Specifiche”, “Dimensioni”, “Recensioni”. L’interfaccia a tabs è particolarmente efficace su desktop, mentre su mobile le schede si trasformano automaticamente in un accordion per una migliore usabilità.

Modulo Slider

Il modulo Slider crea presentazioni a scorrimento con immagini, testo e pulsanti sovrapposti. Puoi configurare la velocità di transizione, il tipo di animazione (fade, slide), la navigazione (frecce, punti), l’autoplay e il comportamento responsive. Per slider più complessi con layout personalizzati, Beaver Builder offre anche il Content Slider, che permette di inserire qualsiasi modulo all’interno di ogni slide.

Modulo Contatore (Number Counter)

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’animazione, il prefisso e il suffisso (ad esempio “+” o “{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c}”). Molto efficace nelle sezioni “I nostri numeri” o “Risultati raggiunti”.

Modulo Testimonial

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ù testimonial, abilitare la rotazione automatica a carousel.

Modulo Mappa

Il modulo Mappa integra Google Maps nella pagina. Inserisci semplicemente l’indirizzo e il modulo genererà una mappa interattiva. Puoi personalizzare il livello di zoom, il tipo di mappa (stradale, satellite, ibrida), l’altezza e aggiungere un marker personalizzato.

Modulo Pricing Table

Il modulo Tabella Prezzi crea confronti di piani tariffari professionali. Ogni colonna include titolo del piano, prezzo, elenco di funzionalità (con possibilità di barrare quelle non incluse) e pulsante di azione. Puoi evidenziare il piano consigliato con uno stile diverso. Questo modulo è indispensabile per le pagine di pricing dei servizi SaaS, hosting e abbonamenti.

Modulo Callout

Il Callout combina titolo, testo, immagine (o icona) e pulsante in un unico modulo strutturato. È 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’immagine (sopra, a sinistra, a destra) e personalizzare ogni componente separatamente.

Modulo Contact Form

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’indirizzo email di destinazione, il messaggio di successo e la protezione antispam con reCAPTCHA. Per form più complessi con logica condizionale e integrazione CRM, è consigliabile usare un plugin dedicato come Gravity Forms o WPForms e incorporarlo tramite shortcode nel modulo HTML.

Modulo Post Grid e Post Carousel

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 “Ultimi articoli”, “Progetti correlati” o “Prodotti in evidenza”.

Modulo Subscribe Form

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.

Moduli WordPress

Oltre ai moduli nativi, Beaver Builder include una categoria speciale chiamata Moduli WordPress (o Widget) che integra i widget standard di WordPress nell’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 è utile per inserire elementi nativi WordPress all’interno di layout costruiti con il builder, mantenendo la compatibilità con l’ecosistema WordPress.

Le Opzioni Comuni a Tutti i Moduli

Ogni modulo in Beaver Builder condivide un set di opzioni comuni accessibili dalla scheda Avanzate:

• Margini e Padding: spaziatura esterna e interna personalizzabile per desktop, tablet e mobile
• Visibilità: mostra o nascondi il modulo su desktop, tablet e/o mobile
• Animazioni: effetti di ingresso (fade in, slide, zoom) con durata e ritardo personalizzabili
• Classe CSS e ID: per aggiungere classi e ID personalizzati all’elemento HTML del modulo
• HTML Element: scegli il tag HTML contenitore (div, section, aside, ecc.)

Queste opzioni comuni garantiscono flessibilità e coerenza nella personalizzazione di ogni elemento della pagina.

Best Practice nell’Uso dei Moduli

Per ottenere i migliori risultati con i moduli di Beaver Builder, tieni a mente questi principi:

• Meno è meglio: non usare troppi moduli diversi nella stessa pagina. La coerenza visiva è più importante della varietà
• Gerarchia visiva: 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
• Ottimizza le immagini: prima di usare il modulo Foto, assicurati che le immagini siano ottimizzate per il web (formato WebP, dimensioni appropriate, compressione)
• Accessibilità: compila sempre gli attributi alt per le immagini, usa colori con contrasto sufficiente e assicurati che i moduli interattivi siano navigabili da tastiera
• Mobile first: verifica sempre l’aspetto di ogni modulo nella vista mobile e apporta le correzioni necessarie prima di pubblicare

Conclusione

Conoscere a fondo i moduli di Beaver Builder è la chiave per creare pagine professionali in modo rapido ed efficiente. Ogni modulo è stato progettato per risolvere un’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.

Hai bisogno di aiuto con il tuo progetto WordPress? Contattaci per una consulenza gratuita oppure scopri i nostri servizi di realizzazione siti web professionali.