{"id":167374,"date":"2025-03-03T09:00:00","date_gmt":"2025-03-03T09:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/accedere-alleditor-frontend\/"},"modified":"2026-05-30T10:00:00","modified_gmt":"2026-05-30T08:00:00","slug":"accedere-alleditor-frontend","status":"publish","type":"post","link":"https:\/\/gtechgroup.it\/blog\/accedere-alleditor-frontend\/","title":{"rendered":"Accedere all\u2019Editor Frontend"},"content":{"rendered":"<article>\n<p>Dopo aver installato e configurato Beaver Builder, &#232; il momento di mettere le mani sull&#8217;editor e creare la tua prima pagina. L&#8217;editor frontend di Beaver Builder &#232; il cuore pulsante di questo page builder: ti permette di vedere in tempo reale ogni modifica che apporti, lavorando direttamente sulla pagina cos&#236; come apparir&#224; ai visitatori. In questa guida completa, ti mostreremo ogni aspetto dell&#8217;interfaccia e ti guideremo nella creazione di una pagina professionale da zero.<\/p>\n<h2>Accedere all&#8217;Editor Frontend<\/h2>\n<p>Per avviare l&#8217;editor Beaver Builder hai due possibilit&#224;. La prima &#232; dal backend di WordPress: crea una nuova pagina o apri una esistente, e nella parte superiore dell&#8217;editor troverai il pulsante <strong>Launch Beaver Builder<\/strong>. Cliccandolo, verrai reindirizzato all&#8217;editor frontend. La seconda modalit&#224;, ancora pi&#249; rapida, &#232; navigare direttamente sulla pagina che vuoi modificare mentre sei loggato come amministratore e cliccare sulla voce <strong>Beaver Builder<\/strong> nella barra di amministrazione in alto.<\/p>\n<p>L&#8217;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&#224; di lavoro &#232; chiamata <em>WYSIWYG<\/em> (What You See Is What You Get) e rappresenta uno dei punti di forza principali di Beaver Builder.<\/p>\n<h2>L&#8217;Interfaccia dell&#8217;Editor: Una Panoramica Completa<\/h2>\n<p>L&#8217;interfaccia dell&#8217;editor Beaver Builder &#232; composta da diversi elementi chiave che devi conoscere per lavorare in modo efficiente:<\/p>\n<h3>La Barra degli Strumenti Superiore<\/h3>\n<p>Nella parte superiore della pagina troverai la barra degli strumenti principale, che include:<\/p>\n<ul>\n<li><strong>Menu hamburger (&#9776;)<\/strong>: apre il menu principale con accesso a template, impostazioni globali, cronologia delle revisioni e opzioni di pubblicazione<\/li>\n<li><strong>Icona + (Aggiungi)<\/strong>: apre il pannello dei moduli da trascinare nella pagina<\/li>\n<li><strong>Annulla\/Ripeti<\/strong>: permette di tornare indietro o avanti nelle modifiche effettuate<\/li>\n<li><strong>Fatto<\/strong>: salva le modifiche e offre le opzioni di pubblicazione, salvataggio come bozza o annullamento<\/li>\n<\/ul>\n<h3>Il Pannello dei Moduli<\/h3>\n<p>Il pannello laterale &#232; organizzato in diverse schede. La prima, <strong>Moduli<\/strong>, 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.<\/p>\n<h3>Il Pannello dei Template<\/h3>\n<p>La seconda scheda, <strong>Template<\/strong>, ti d&#224; accesso a decine di layout predefiniti che puoi applicare alla pagina con un solo clic. I template sono suddivisi tra <em>Landing Page<\/em> (pagine complete) e <em>Content Page<\/em> (pagine con contenuto standard). Puoi anche accedere ai template salvati in precedenza, un&#8217;opzione fondamentale per velocizzare il lavoro su pi&#249; pagine.<\/p>\n<h3>La Scheda Righe Salvate<\/h3>\n<p>La terza scheda mostra le <strong>righe salvate<\/strong> e i <strong>moduli salvati<\/strong>, che puoi riutilizzare su qualsiasi pagina del sito. Questo sistema di componenti riutilizzabili &#232; uno degli aspetti che rende Beaver Builder particolarmente efficiente per la gestione di siti complessi.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/bb-01-settings.png\" alt=\"Interfaccia dell&#8217;editor frontend di Beaver Builder con pannello laterale aperto\" \/><\/p>\n<h2>Comprendere la Struttura: Righe, Colonne, Moduli<\/h2>\n<p>Prima di iniziare a costruire, &#232; essenziale comprendere la gerarchia degli elementi in Beaver Builder. Ogni pagina &#232; composta da tre livelli strutturali:<\/p>\n<ol>\n<li><strong>Righe<\/strong>: sono i contenitori principali che occupano l&#8217;intera larghezza della pagina. Ogni riga pu&#242; avere uno sfondo proprio (colore, immagine, video) e pu&#242; essere a larghezza fissa o full-width<\/li>\n<li><strong>Colonne<\/strong>: all&#8217;interno di ogni riga puoi avere da 1 a 6 colonne, con larghezze personalizzabili. Le colonne definiscono la disposizione orizzontale del contenuto<\/li>\n<li><strong>Moduli<\/strong>: sono gli elementi di contenuto veri e propri (testo, immagini, pulsanti, ecc.) che vengono inseriti all&#8217;interno delle colonne<\/li>\n<\/ol>\n<p>Questa struttura a tre livelli &#232; 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.<\/p>\n<h2>Creare la Prima Pagina: Guida Pratica Step by Step<\/h2>\n<p>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.<\/p>\n<h3>Step 1: Creare la Sezione Hero<\/h3>\n<p>La sezione hero &#232; la prima cosa che i visitatori vedono. Per crearla con impatto:<\/p>\n<ol>\n<li>Clicca sull&#8217;icona <strong>+<\/strong> per aprire il pannello moduli<\/li>\n<li>Trascina un modulo <strong>Titolo<\/strong> nella parte superiore della pagina<\/li>\n<li>Clicca sul modulo appena inserito per aprire le impostazioni<\/li>\n<li>Inserisci il testo del titolo principale (ad esempio &#8220;I Nostri Servizi&#8221;)<\/li>\n<li>Nella scheda <strong>Stile<\/strong>, imposta la dimensione del font, il colore e l&#8217;allineamento<\/li>\n<\/ol>\n<p>Ora configuriamo lo sfondo della riga che contiene il titolo. Clicca sulla riga (passando il mouse sul bordo e cliccando sull&#8217;icona della chiave inglese) e nelle impostazioni della riga:<\/p>\n<ul>\n<li>Nella scheda <strong>Stile<\/strong>, seleziona <em>Foto<\/em> come tipo di sfondo<\/li>\n<li>Carica o seleziona un&#8217;immagine di sfondo dalla libreria media<\/li>\n<li>Imposta l&#8217;overlay con un colore scuro e opacit&#224; al 60{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c} per garantire la leggibilit&#224; del testo<\/li>\n<li>Imposta un padding generoso (100 px sopra e sotto) per dare respiro alla sezione<\/li>\n<\/ul>\n<h3>Step 2: Aggiungere una Sezione con Colonne<\/h3>\n<p>Sotto la hero section, aggiungiamo una riga con tre colonne per presentare i servizi principali:<\/p>\n<ol>\n<li>Trascina un modulo qualsiasi sotto la sezione hero: Beaver Builder creer&#224; una nuova riga<\/li>\n<li>Clicca sulle impostazioni della riga e nella scheda <strong>Colonne<\/strong> seleziona un layout a 3 colonne uguali (33{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c} &#8211; 33{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c} &#8211; 33{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c})<\/li>\n<li>In ogni colonna, inserisci un modulo <strong>Icona + Testo<\/strong> o un modulo <strong>Callout<\/strong><\/li>\n<li>Personalizza ogni colonna con un&#8217;icona, un titolo e una breve descrizione del servizio<\/li>\n<\/ol>\n<p>Il modulo Callout &#232; particolarmente utile per questo tipo di layout perch&#233; combina icona, titolo, testo e pulsante in un unico elemento ben strutturato.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/bb-02-templates.png\" alt=\"Creazione di una pagina con Beaver Builder: sezione servizi a tre colonne\" \/><\/p>\n<h3>Step 3: Inserire una Sezione Testimonial<\/h3>\n<p>Le testimonianze dei clienti sono fondamentali per costruire fiducia. Aggiungi una nuova riga e inserisci un modulo <strong>Testimonial<\/strong> (disponibile nella versione Pro) oppure usa un modulo <strong>Testo<\/strong> con formattazione personalizzata. Per un effetto pi&#249; professionale:<\/p>\n<ul>\n<li>Imposta lo sfondo della riga con un colore di contrasto (grigio chiaro, ad esempio #f5f5f5)<\/li>\n<li>Usa un layout a 2 colonne: nella prima la citazione del cliente, nella seconda la sua foto<\/li>\n<li>Aggiungi un bordo sinistro colorato al blocco di testo per evidenziare la citazione<\/li>\n<\/ul>\n<h3>Step 4: Call to Action Finale<\/h3>\n<p>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:<\/p>\n<ul>\n<li>Un modulo <strong>Titolo<\/strong> con testo bianco: &#8220;Pronto per Iniziare?&#8221;<\/li>\n<li>Un modulo <strong>Pulsante<\/strong> con link alla pagina di contatto<\/li>\n<li>Centra entrambi gli elementi e imposta un padding generoso<\/li>\n<\/ul>\n<h2>Editing in Linea del Testo<\/h2>\n<p>Una delle funzionalit&#224; pi&#249; apprezzate di Beaver Builder &#232; l&#8217;<strong>editing in linea<\/strong> 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.<\/p>\n<p>L&#8217;editor in linea supporta la formattazione di base (grassetto, corsivo, link, elenchi) e per opzioni pi&#249; avanzate puoi sempre aprire il pannello completo del modulo.<\/p>\n<h2>Gestire le Revisioni e la Cronologia<\/h2>\n<p>Beaver Builder include un sistema di <strong>cronologia delle revisioni<\/strong> integrato. Ogni volta che salvi le modifiche, viene creato un punto di ripristino. Per accedere alla cronologia:<\/p>\n<ol>\n<li>Apri il menu principale (icona hamburger)<\/li>\n<li>Seleziona <strong>Cronologia<\/strong><\/li>\n<li>Vedrai un elenco di tutte le revisioni con data e ora<\/li>\n<li>Clicca su una revisione per ripristinare la pagina a quello stato<\/li>\n<\/ol>\n<p>Questa funzionalit&#224; &#232; una rete di sicurezza indispensabile, soprattutto quando lavori su pagine complesse o quando pi&#249; persone collaborano allo stesso progetto.<\/p>\n<h2>Anteprima Responsive<\/h2>\n<p>Beaver Builder integra una funzione di <strong>anteprima responsive<\/strong> direttamente nell&#8217;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&#249; piccoli e, se necessario, apportare modifiche specifiche per ogni breakpoint.<\/p>\n<p>Ogni modulo, riga e colonna offre opzioni di <strong>visibilit&#224; per dispositivo<\/strong>: puoi scegliere di mostrare o nascondere elementi specifici su desktop, tablet o mobile. Questa flessibilit&#224; ti permette di ottimizzare l&#8217;esperienza utente su ogni tipo di schermo senza dover creare pagine separate.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/bb-03-plugins.png\" alt=\"Anteprima responsive nell&#8217;editor Beaver Builder su desktop, tablet e mobile\" \/><\/p>\n<h2>Salvare e Pubblicare la Pagina<\/h2>\n<p>Quando sei soddisfatto del risultato, clicca sul pulsante <strong>Fatto<\/strong> nella barra superiore. Si aprir&#224; un menu con tre opzioni:<\/p>\n<ul>\n<li><strong>Pubblica<\/strong>: la pagina viene salvata e resa immediatamente visibile ai visitatori<\/li>\n<li><strong>Salva Bozza<\/strong>: le modifiche vengono salvate ma la pagina non viene pubblicata (o rimane nella versione precedente se era gi&#224; pubblica)<\/li>\n<li><strong>Annulla<\/strong>: tutte le modifiche vengono scartate e la pagina torna allo stato precedente<\/li>\n<\/ul>\n<p>&#200; 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&#224; perso. Al prossimo accesso all&#8217;editor, ti verr&#224; chiesto se vuoi riprendere dal salvataggio automatico.<\/p>\n<h2>Suggerimenti per un Flusso di Lavoro Efficiente<\/h2>\n<p>Dopo aver creato la tua prima pagina, ecco alcuni consigli pratici per lavorare in modo pi&#249; produttivo con l&#8217;editor:<\/p>\n<ul>\n<li><strong>Usa i template come punto di partenza<\/strong>: non creare ogni pagina da zero, sfrutta i layout predefiniti e personalizzali<\/li>\n<li><strong>Duplica le righe<\/strong>: se hai una riga ben configurata, duplicala e modifica solo il contenuto per mantenere coerenza<\/li>\n<li><strong>Salva i moduli riutilizzabili<\/strong>: elementi come header, CTA e footer di pagina dovrebbero essere salvati come moduli globali<\/li>\n<li><strong>Usa le scorciatoie da tastiera<\/strong>: Ctrl+Z per annullare, Ctrl+S per salvare rapidamente<\/li>\n<li><strong>Lavora per sezioni<\/strong>: concentrati su una sezione alla volta, perfezionala e poi passa alla successiva<\/li>\n<\/ul>\n<h2>Conclusione<\/h2>\n<p>Hai creato la tua prima pagina con Beaver Builder e hai esplorato tutte le funzionalit&#224; principali dell&#8217;editor frontend. L&#8217;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.<\/p>\n<p>Se desideri un sito web professionale realizzato con le migliori tecnologie, il team di G Tech Group &#232; a tua disposizione. Scopri i nostri servizi di <a href=\"https:\/\/gtechgroup.it\/realizzazione-siti-web\/\">realizzazione siti web<\/a> o <a href=\"https:\/\/gtechgroup.it\/contatti\/\">contattaci<\/a> per un preventivo personalizzato.<\/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\/\">Beaver Builder: Tutti i Moduli e Come Usarli<\/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>Dopo aver installato e configurato Beaver Builder, &#232; il momento di mettere le mani sull&#8217;editor e creare la tua prima pagina. L&#8217;editor frontend di Beaver&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":"Accedere all\u2019Editor Frontend | Guida 2026","_seopress_titles_desc":"Dopo aver installato e configurato Beaver Builder, &#232; il momento di mettere le mani sull&#8217;editor e creare la tua prima pagina. L&#8217;editor fron","_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":"Accedere all\u2019Editor Frontend","footnotes":""},"categories":[1,61],"tags":[3662,3329,2520,492],"class_list":["post-167374","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\/167374","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=167374"}],"version-history":[{"count":0,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/167374\/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=167374"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/categories?post=167374"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/tags?post=167374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}