Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coppa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Come creare layout WordPress personalizzati con Beaver Builder

Nota editoriale: guadagniamo una commissione dai link dei partner su WPBeginner. Le commissioni non influenzano le opinioni o le valutazioni dei nostri redattori. Per saperne di più su Processo editoriale.

Volete imparare a creare layout di pagina personalizzati in WordPress?

Beaver Builder consente di creare i propri layout di pagina senza scrivere alcun codice. Potete facilmente progettare il vostro sito web in modo rapido grazie all’editor drag-and-drop integrato.

In questo articolo esamineremo Beaver Builder e vi mostreremo come creare layout di pagina personalizzati in WordPress con Beaver Builder.

Creating custom page layouts in WordPress with Beaver Builder

Perché e quando servono i layout di pagina personalizzati

Molti temi premium per WordPress sono dotati di layout di pagina pronti all’uso per le diverse sezioni di un sito web. Tuttavia, a volte un layout integrato potrebbe non essere adatto alle vostre esigenze.

È possibile creare modelli di pagina personalizzati in WordPress creando un tema figlio e aggiungendo poi i propri modelli di pagina. Ma per farlo è necessario avere una certa conoscenza di PHP, HTML e CSS.

È qui che entra in gioco Beaver Builder. Si tratta di un plugin drag-and-drop per la creazione di pagine per WordPress. Consente di creare layout di pagina personalizzati senza scrivere alcun codice.

Recensione di Beaver Builder

Beaver Builder è molto facile da usare e adatto ai principianti. Allo stesso tempo, è ricco di incredibili funzioni per creare pagine dall’aspetto professionale.

Funziona con tutti i temi di WordPress e ha tonnellate di moduli che potete semplicemente trascinare e rilasciare sulla vostra pagina. È possibile creare qualsiasi tipo di layout e configurarlo come si desidera.

In questa recensione di Beaver Builder, vi mostreremo come utilizzare Beaver Builder per creare layout di pagina personalizzati in WordPress.

Cominciamo.

Impostazione del plugin Beaver Builder

Innanzitutto, è necessario acquistare il plugin Beaver Builder. Si tratta di un plugin a pagamento, con prezzi a partire da 99 dollari per un numero illimitato di siti.

Successivamente, è necessario installare e attivare il plugin Beaver Builder. Per maggiori dettagli, consultate la nostra guida passo passo su come installare un plugin di WordPress.

Dopo l’attivazione, è necessario visitare la pagina Impostazioni ” Page Builder per inserire la chiave di licenza.

Entering your Beaver Builder license key

Dopo aver inserito la chiave di licenza, si è pronti a creare bellissimi layout di pagina.

Creare il primo layout di pagina personalizzato con Beaver Builder

È sufficiente creare una nuova pagina in WordPress visitando Pagine ” Aggiungi nuova pagina. Si noterà una nuova scheda Page Builder nell’editor di WordPress.

Da qui, premere il pulsante “Launch Beaver Builder” per iniziare.

launch beaver builder

Se è la prima volta che utilizzate Beaver Builder, vedrete un popup di benvenuto che vi offrirà una visita guidata.

Successivamente, è necessario fare clic sul pulsante “Modelli” nel menu superiore.

Choosing a template for your page layout in Beaver Builder

Beaver Builder viene fornito con alcuni modelli progettati in modo professionale per iniziare subito a lavorare.

Non preoccupatevi, potete personalizzare il modello a vostro piacimento. È solo un modo rapido per iniziare a creare un layout.

Choose a template for your page layout

Quando si seleziona un layout, Beaver Builder lo carica nella finestra di anteprima. Portando il mouse su un elemento, Beaver Builder lo evidenzierà.

È sufficiente fare clic sull’icona della chiave inglese su qualsiasi voce evidenziata per modificarla.

wrench icon

Beaver Builder mostrerà un popup con diverse impostazioni che si possono modificare.

È possibile modificare il testo, il colore, lo sfondo, il carattere, il padding, il margine, ecc.

headings popup

I layout di Beaver Builder si basano su righe. È possibile trascinare e rilasciare per riorganizzare le righe. È anche possibile rimuovere o aggiungere una nuova riga.

È sufficiente fare clic sul menu Layout di riga e selezionare il numero di colonne desiderato nella riga.

row and columns layout

Beaver Builder aggiungerà la riga all’anteprima live del sito.

È possibile aggiungere elementi alla riga utilizzando i moduli e i widget di base o avanzati. Questi moduli consentono di aggiungere gli elementi più utilizzati, come pulsanti, intestazioni, testo, immagini, presentazioni, audio, video, ecc.

È sufficiente selezionare un elemento e trascinarlo nella riga appena aggiunta. Fare clic su un elemento per modificarne le proprietà.

È anche possibile salvare una riga o un modulo per riutilizzarlo in seguito in altre pagine. Fare clic sul pulsante “Salva con nome” di mentre si modifica una riga o un modulo.

Save element to reuse

Al termine della modifica della pagina, fare clic sul pulsante “Fatto” nell’angolo superiore destro.

Beaver Builder mostrerà una serie di pulsanti per pubblicare o salvare la pagina come bozza.

publish button

È anche possibile riutilizzare un intero layout di pagina per altre pagine del vostro sito WordPress. Basta aprire la pagina con Page Builder e poi fare clic sul pulsante con la freccia rivolta verso il basso per accedere a Strumenti nella barra superiore.

Beaver Builder mostrerà un popup. È possibile salvare la pagina come modello o creare rapidamente una pagina duplicata con lo stesso layout.

Beaver Builder tools

Gestione dei modelli di layout di pagina in Beaver Builder

Ogni licenza di Beaver Builder dà diritto all’utilizzo su un numero illimitato di siti web. Ma come si fa a spostare i modelli di pagina da un sito WordPress a un altro?

Beaver Builder memorizza i modelli creati dall’utente in un tipo di post personalizzato chiamato template. Per impostazione predefinita è nascosto, ma è possibile renderlo visibile andando in Impostazioni ” Page Builder e cliccando sulla scheda Templates.

È sufficiente selezionare la casella accanto all’opzione “Abilita l’amministrazione dei modelli” e fare clic sul pulsante “Salva le impostazioni dei modelli”.

Show template admin

Nella barra di amministrazione di WordPress apparirà una nuova voce di menu denominata Modelli. Tutti i layout di pagina salvati come modelli appariranno in quella pagina.

Trattandosi di un tipo di post personalizzato, è possibile esportare facilmente i modelli di Beaver Builder utilizzando la funzione di esportazione integrata in WordPress.

Visitare la pagina Strumenti ” Esportazione e selezionare Modelli. Fare clic sul pulsante “Scarica il file di esportazione” e WordPress invierà un file XML da scaricare.

Exporting templates

Ora accedere al sito WordPress in cui si desidera importare i modelli. Visitare la pagina Impostazioni ” Importazione e fare clic su WordPress.

Vi verrà chiesto di scaricare e installare il plugin WordPress importer. Dopodiché, potrete semplicemente caricare il file xml del vostro modello e importarlo.

Questo è tutto; speriamo che questo articolo vi abbia aiutato a creare layout di pagina personalizzati in WordPress utilizzando Beaver Builder. Potreste anche voler consultare la nostra guida su come nascondere gli elementi non necessari dall’amministrazione di WordPress con Adminimize e la nostra scelta di esperti dei migliori temi e template di Beaver Builder.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

27 commentiLascia una risposta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. corey says

    this helps me out a lot.
    i am using astra and beaver. been needing to upgrade to grwoth plan soon
    is still over my head unlike Guttenberg

  3. Rodney Harrier says

    I started using Elementor to build a blog. If I switch to Beaver Builder, do I lose whatever I have done?

  4. Pius Anthony says

    Dear Sir,

    Happy new year, i have being watching your wpbeginner video it really inspiring I believe before the next six month i will be teaching other people.

    Regard
    Pius Anthony

  5. Krayl says

    When using Beaver Builder, are you using it on a child theme only? If not, how does it hold up to theme updates?

    Thank you team WPbeginner!

  6. Lisa Theriault says

    I really need some help. This is supposed to be easy but when I click on a module or a row nothing happens. I tried dragging and dropping, saving, etc. Nada. I made sure the settings were correct and that the plug in was active. Beaver Builder shows up on the page for editing but I’m obviously an idiot. Getting frustrated, but I’m sure it’s just some silly thing. Can someone offer suggestions? I followed the beginner tutorial and thay is really easy. When I try to do it in Live mode….nothing. Please help. Thank you in advancd.

    • WPBeginner Support says

      Hi Lisa,

      Try editing a new page. If that doesn’t work try switching to a default WordPress theme like twenty seventeen and then try editing with Beaver Builder. If that works, then your theme probably has compatibility issues with the page builder.

      Admin

      • David Sharp says

        I’m having the same problem as Lisa. I used Beaver Builder a couple of years ago to create a landing page, and it worked very well. In fact, I’m still using that same landing page without any problems. But today I tried to create a new landing page using Beaver Builder, but this time, Beaver Builder wouldn’t work.

        Here’s what happened: I created a new page. I clicked the Beaver Builder tab. But instead of seeing a button that says “Launch Beaver Builder,” I was taken to a screen that said, “Drop a row layout or module to get started.” Unfortunately, Beaver Builder failed to produce a Beaver Builder toolbar or any other tools (such as modules or rows) with which to build the page.

        Here’s what I tried to do to fix the problem, without success:

        1. I deactivated my other plugins.
        2. I switched to the Twenty Sixteen Theme.
        3. I made sure I’m using the latest version of everything (WordPress, Beaver Builder, etc.)
        4. I noticed that if I typed something into the page and then clicked Beaver Builder tab, tools would show up. But when I clicked on them, I just got a spinning circle.
        5. I tried using Beaver Builder on my website that’s online, and also on my localhost test site, but Beaver Builder failed to work on either site.
        6. I tried using a different browser (Safari instead of my usual Chrome) without success.

        Any idea what might be wrong and how I might fix it?

        Thanks!

    • Krayl says

      Same thing happened to me Lisa. I think it is my theme not playing well with BB. Looking to switch themes to have full compatibility.

  7. Jesse says

    I am so grateful for all the wpbeginner ‘how-to’ articles. They are clear and direct, and they make my life so much easier. Because I could follow the trail from ecommerce through Beaver Builder I am now in a place to get OptInMonster. Thanks Syed & team.

  8. Gabrielle says

    Hi, is BB outputting [shortcodes] or html content, when switching back to normal editor?
    I wonder if this works well, when building products pages for woocommerce.

  9. Dr. Peter H. Markesteyn says

    Would I have to create a child theme (20-17) to preserve all the changes I would make with BeaverBuilder when there is an update?

  10. Anthony says

    While this plugin is great, I was wondering if you teach how to customize them yourself? I am looking to build my portfolio and knowing how to do it yourself would be fantastic!

  11. Ian Gordon says

    WIth the Beaver Builder plugin, I can take an existing theme and create a completely new Header and Footer without editing any of the existing template files? My

  12. Andrew Peters says

    I LOVE Beaver Builder. I’ve used it for close to a dozen sites since making the switch back in the fall. I’m actually going back and converting some of my clients from VC to BB. It’s fire!

    • Shaiful says

      Hi there,

      Just wondering, can it support shortcodes that have conditional context? Such as:

      [if user_loggedin]
      hello user.
      (show logged in user content build with beaver builder)
      [else]
      hello guest.
      (show public content build with beaver builder)
      [/if]

      • WPBeginner Support says

        Yes it supports shortcode. Paste them in any field that you can insert text and they will be rendered automatically. When placing shortcodes on the page, it is best to use the HTML module compared to the Text Editor module. The latter tends to add additional p tags which sometimes break the layout.

        Admin

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.