Accedere all’Editor Frontend

Dopo aver installato e configurato Beaver Builder, è il momento di mettere le mani sull’editor e creare la tua prima pagina. L’editor frontend di Beaver Builder è il cuore pulsante di questo page builder: ti permette di vedere in tempo reale ogni modifica che apporti, lavorando direttamente sulla pagina così come apparirà ai visitatori. In questa guida completa, ti mostreremo ogni aspetto dell’interfaccia e ti guideremo nella creazione di una pagina professionale da zero.

Accedere all’Editor Frontend

Per avviare l’editor Beaver Builder hai due possibilità. La prima è dal backend di WordPress: crea una nuova pagina o apri una esistente, e nella parte superiore dell’editor troverai il pulsante Launch Beaver Builder. Cliccandolo, verrai reindirizzato all’editor frontend. La seconda modalità, ancora più rapida, è navigare direttamente sulla pagina che vuoi modificare mentre sei loggato come amministratore e cliccare sulla voce Beaver Builder nella barra di amministrazione in alto.

L’editor si apre mostrando la pagina nella sua interezza, con un pannello laterale sulla destra (o in basso, a seconda della configurazione) che contiene tutti gli strumenti di editing. Questa modalità di lavoro è chiamata WYSIWYG (What You See Is What You Get) e rappresenta uno dei punti di forza principali di Beaver Builder.

L’Interfaccia dell’Editor: Una Panoramica Completa

L’interfaccia dell’editor Beaver Builder è composta da diversi elementi chiave che devi conoscere per lavorare in modo efficiente:

La Barra degli Strumenti Superiore

Nella parte superiore della pagina troverai la barra degli strumenti principale, che include:

• Menu hamburger (☰): apre il menu principale con accesso a template, impostazioni globali, cronologia delle revisioni e opzioni di pubblicazione
• Icona + (Aggiungi): apre il pannello dei moduli da trascinare nella pagina
• Annulla/Ripeti: permette di tornare indietro o avanti nelle modifiche effettuate
• Fatto: salva le modifiche e offre le opzioni di pubblicazione, salvataggio come bozza o annullamento

Il Pannello dei Moduli

Il pannello laterale è organizzato in diverse schede. La prima, Moduli, contiene tutti gli elementi che puoi aggiungere alla pagina. Sono suddivisi in categorie logiche: moduli base (testo, titolo, foto, video, pulsante), moduli avanzati (accordion, tabs, slider, contatore), moduli media e moduli per i post. La versione Pro aggiunge moduli specifici per contatti, abbonamenti e integrazioni.

Il Pannello dei Template

La seconda scheda, Template, ti dà accesso a decine di layout predefiniti che puoi applicare alla pagina con un solo clic. I template sono suddivisi tra Landing Page (pagine complete) e Content Page (pagine con contenuto standard). Puoi anche accedere ai template salvati in precedenza, un’opzione fondamentale per velocizzare il lavoro su più pagine.

La Scheda Righe Salvate

La terza scheda mostra le righe salvate e i moduli salvati, che puoi riutilizzare su qualsiasi pagina del sito. Questo sistema di componenti riutilizzabili è uno degli aspetti che rende Beaver Builder particolarmente efficiente per la gestione di siti complessi.

Comprendere la Struttura: Righe, Colonne, Moduli

Prima di iniziare a costruire, è essenziale comprendere la gerarchia degli elementi in Beaver Builder. Ogni pagina è composta da tre livelli strutturali:

1. Righe: sono i contenitori principali che occupano l’intera larghezza della pagina. Ogni riga può avere uno sfondo proprio (colore, immagine, video) e può essere a larghezza fissa o full-width
2. Colonne: all’interno di ogni riga puoi avere da 1 a 6 colonne, con larghezze personalizzabili. Le colonne definiscono la disposizione orizzontale del contenuto
3. Moduli: sono gli elementi di contenuto veri e propri (testo, immagini, pulsanti, ecc.) che vengono inseriti all’interno delle colonne

Questa struttura a tre livelli è molto logica e permette di creare layout anche complessi mantenendo sempre il controllo sulla struttura della pagina. Quando trascini un modulo in una zona vuota della pagina, Beaver Builder crea automaticamente una riga e una colonna per contenerlo.

Creare la Prima Pagina: Guida Pratica Step by Step

Ora passiamo alla pratica. Creeremo insieme una pagina di servizi aziendale, un tipo di pagina molto comune nei siti professionali. Seguendo questi passaggi, imparerai le tecniche fondamentali che potrai poi applicare a qualsiasi tipo di pagina.

Step 1: Creare la Sezione Hero

La sezione hero è la prima cosa che i visitatori vedono. Per crearla con impatto:

1. Clicca sull’icona + per aprire il pannello moduli
2. Trascina un modulo Titolo nella parte superiore della pagina
3. Clicca sul modulo appena inserito per aprire le impostazioni
4. Inserisci il testo del titolo principale (ad esempio “I Nostri Servizi”)
5. Nella scheda Stile, imposta la dimensione del font, il colore e l’allineamento

Ora configuriamo lo sfondo della riga che contiene il titolo. Clicca sulla riga (passando il mouse sul bordo e cliccando sull’icona della chiave inglese) e nelle impostazioni della riga:

• Nella scheda Stile, seleziona Foto come tipo di sfondo
• Carica o seleziona un’immagine di sfondo dalla libreria media
• Imposta l’overlay con un colore scuro e opacità al 60{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c} per garantire la leggibilità del testo
• Imposta un padding generoso (100 px sopra e sotto) per dare respiro alla sezione

Step 2: Aggiungere una Sezione con Colonne

Sotto la hero section, aggiungiamo una riga con tre colonne per presentare i servizi principali:

1. Trascina un modulo qualsiasi sotto la sezione hero: Beaver Builder creerà una nuova riga
2. Clicca sulle impostazioni della riga e nella scheda Colonne seleziona un layout a 3 colonne uguali (33{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c} – 33{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c} – 33{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c})
3. In ogni colonna, inserisci un modulo Icona + Testo o un modulo Callout
4. Personalizza ogni colonna con un’icona, un titolo e una breve descrizione del servizio

Il modulo Callout è particolarmente utile per questo tipo di layout perché combina icona, titolo, testo e pulsante in un unico elemento ben strutturato.

Step 3: Inserire una Sezione Testimonial

Le testimonianze dei clienti sono fondamentali per costruire fiducia. Aggiungi una nuova riga e inserisci un modulo Testimonial (disponibile nella versione Pro) oppure usa un modulo Testo con formattazione personalizzata. Per un effetto più professionale:

• Imposta lo sfondo della riga con un colore di contrasto (grigio chiaro, ad esempio #f5f5f5)
• Usa un layout a 2 colonne: nella prima la citazione del cliente, nella seconda la sua foto
• Aggiungi un bordo sinistro colorato al blocco di testo per evidenziare la citazione

Step 4: Call to Action Finale

Ogni pagina di servizi efficace termina con una call to action chiara. Crea una riga con sfondo colorato (usa il colore primario del tuo brand) e inserisci:

• Un modulo Titolo con testo bianco: “Pronto per Iniziare?”
• Un modulo Pulsante con link alla pagina di contatto
• Centra entrambi gli elementi e imposta un padding generoso

Editing in Linea del Testo

Una delle funzionalità più apprezzate di Beaver Builder è l’editing in linea del testo. Invece di aprire il pannello di impostazioni del modulo, puoi semplicemente fare doppio clic su qualsiasi testo nella pagina e modificarlo direttamente in posizione. Le modifiche vengono visualizzate istantaneamente, rendendo il processo di editing estremamente naturale e veloce.

L’editor in linea supporta la formattazione di base (grassetto, corsivo, link, elenchi) e per opzioni più avanzate puoi sempre aprire il pannello completo del modulo.

Gestire le Revisioni e la Cronologia

Beaver Builder include un sistema di cronologia delle revisioni integrato. Ogni volta che salvi le modifiche, viene creato un punto di ripristino. Per accedere alla cronologia:

1. Apri il menu principale (icona hamburger)
2. Seleziona Cronologia
3. Vedrai un elenco di tutte le revisioni con data e ora
4. Clicca su una revisione per ripristinare la pagina a quello stato

Questa funzionalità è una rete di sicurezza indispensabile, soprattutto quando lavori su pagine complesse o quando più persone collaborano allo stesso progetto.

Anteprima Responsive

Beaver Builder integra una funzione di anteprima responsive direttamente nell’editor. Nella barra superiore trovi le icone per passare tra la visualizzazione desktop, tablet e mobile. Quando passi alla visualizzazione mobile, puoi verificare come appare la pagina sui dispositivi più piccoli e, se necessario, apportare modifiche specifiche per ogni breakpoint.

Ogni modulo, riga e colonna offre opzioni di visibilità per dispositivo: puoi scegliere di mostrare o nascondere elementi specifici su desktop, tablet o mobile. Questa flessibilità ti permette di ottimizzare l’esperienza utente su ogni tipo di schermo senza dover creare pagine separate.

Salvare e Pubblicare la Pagina

Quando sei soddisfatto del risultato, clicca sul pulsante Fatto nella barra superiore. Si aprirà un menu con tre opzioni:

• Pubblica: la pagina viene salvata e resa immediatamente visibile ai visitatori
• Salva Bozza: le modifiche vengono salvate ma la pagina non viene pubblicata (o rimane nella versione precedente se era già pubblica)
• Annulla: tutte le modifiche vengono scartate e la pagina torna allo stato precedente

È importante notare che Beaver Builder salva automaticamente le modifiche in una bozza temporanea, quindi anche se il browser si chiude accidentalmente, il tuo lavoro non andrà perso. Al prossimo accesso all’editor, ti verrà chiesto se vuoi riprendere dal salvataggio automatico.

Suggerimenti per un Flusso di Lavoro Efficiente

Dopo aver creato la tua prima pagina, ecco alcuni consigli pratici per lavorare in modo più produttivo con l’editor:

• Usa i template come punto di partenza: non creare ogni pagina da zero, sfrutta i layout predefiniti e personalizzali
• Duplica le righe: se hai una riga ben configurata, duplicala e modifica solo il contenuto per mantenere coerenza
• Salva i moduli riutilizzabili: elementi come header, CTA e footer di pagina dovrebbero essere salvati come moduli globali
• Usa le scorciatoie da tastiera: Ctrl+Z per annullare, Ctrl+S per salvare rapidamente
• Lavora per sezioni: concentrati su una sezione alla volta, perfezionala e poi passa alla successiva

Conclusione

Hai creato la tua prima pagina con Beaver Builder e hai esplorato tutte le funzionalità principali dell’editor frontend. L’interfaccia intuitiva e il feedback visivo in tempo reale rendono Beaver Builder uno strumento potente ma accessibile, adatto sia ai principianti che ai professionisti. Nella prossima guida approfondiremo tutti i moduli disponibili, esplorando le opzioni di personalizzazione di ciascuno e le migliori pratiche per utilizzarli efficacemente.

Se desideri un sito web professionale realizzato con le migliori tecnologie, il team di G Tech Group è a tua disposizione. Scopri i nostri servizi di realizzazione siti web o contattaci per un preventivo personalizzato.