Probabilmente avete cercato un modo per creare layout personalizzati in WordPress. Ma le guide che trovate sono troppo lunghe o richiedono competenze di codifica. Vi suona familiare?
Se è così, pensiamo che dovreste provare un builder di pagine come Beaver Builder. Molti utenti esperti pensano che i builder di pagina non creino grandi progetti o rallentino i siti web. Ma secondo la nostra esperienza, strumenti come questo possono davvero semplificare la creazione di siti web, soprattutto per i principianti.
Per dimostrarlo, vi mostreremo come creare un layout personalizzato per WordPress utilizzando Beaver Builder. Vi insegneremo a configurarlo, a creare il vostro primo layout personalizzato e a utilizzare design già pronti per salvare tempo.
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 entrano in gioco strumenti come Beaver Builder. Si tratta di un plugin per la creazione di pagine trascina e rilascia per WordPress. Consente di creare layout personalizzati per le pagine senza scrivere alcun codice.
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 questo tutorial su Beaver Builder, vi mostreremo come usare Beaver Builder per creare layout personalizzati per le pagine di WordPress. Per navigare in questo articolo, potete utilizzare i link rapidi riportati di seguito:
Un consiglio da professionista: Volete evitare il fai-da-te? I nostri esperti di WPBeginner Pro Services possono aiutarvi a creare un sito web professionale e a farlo funzionare velocemente, salvando il vostro tempo. Ci occuperemo di tutto, dalla progettazione allo sviluppo, in modo che possiate ricevere il focus sulla vostra attività.
Passo 1: 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 ” Beaver Builder per inserire la chiave di licenza.
Dopo aver inserito la chiave di licenza, si è pronti a creare bellissimi layout di pagina.
Passo 2: Creare il primo layout di pagina personalizzato con Beaver Builder
Per prima cosa, è sufficiente creare una nuova pagina in WordPress visitando Pagine ” Aggiungi nuova pagina.
Prima di aprire Beaver Builder, dare un titolo alla nuova pagina e salvarla come bozza.
Nella nostra esperienza, il builder di pagina non si apriva se non si faceva prima questa operazione.
Una volta fatto ciò, si può premere il pulsante “Launch Beaver Builder” per iniziare.
In questo modo si aprirà il frontend della pagina nell’interfaccia di 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 ‘+’ nel menu in alto. Questo pulsante si trasformerà in un’icona “x”. Passare quindi alla scheda ‘Templates’.
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.
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.
Beaver Builder mostrerà un popup con diverse impostazioni che si possono modificare.
È possibile modificare il carattere, il colore, lo sfondo, il font, la spaziatura interna, il margine e altro ancora.
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.
Beaver Builder aggiungerà la riga all’anteprima live del sito.
È possibile aggiungere elementi ai disponi in riga utilizzando i moduli e i widget di base o avanzati. Questi moduli consentono di aggiungere gli elementi più utilizzati, come pulsanti, head, testo, immagini, slideshow, 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.
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.
È anche possibile riutilizzare un intero layout di pagina per altre pagine del sito WordPress. Basta aprire la pagina con Page Builder e cliccare sul pulsante con la freccia giù per accedere a “Strumenti” in alto.
Beaver Builder mostrerà un popup. È possibile salvare la pagina come modello o creare rapidamente una pagina duplicata con lo stesso layout.
Come gestire i template del layout di pagina in Beaver Builder
È possibile controllare tutti i template creati in Beaver Builder “ Templates. Qui è possibile gestire, vedere l’anteprima e modificare i template esistenti.
Una cosa fantastica dei template di Beaver Builder è che sono dei post type / tipo di contenuto personalizzati. Ciò significa che è possibile esportare facilmente i template di Beaver Builder utilizzando la caratteristica di esportazione integrata in WordPress.
Visitare la pagina Strumenti ” Esportazione e selezionare template. Facendo clic sul pulsante “Scarica file di esportazione”, WordPress invierà un file XML da scaricare.
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 template e importarlo.
Alternativa: Usare SeedProd per creare un tema personalizzato
Sebbene Beaver Builder sia fantastico, potrebbe non essere adatto a tutti. Non c’è problema! Ci sono altre scelte eccellenti, come SeedProd.
SeedProd è un altro builder di pagine di facile utilizzo che consigliamo spesso. Non serve solo per creare landing page. È possibile utilizzarlo anche per creare interi temi per WordPress. Lo abbiamo utilizzato per molti progetti, tra cui la creazione di landing page per OptinMonster.
Ciò che distingue SeedProd sono le sue ampie opzioni personalizzate. Queste vi permettono di aggiungere facilmente alle vostre pagine caratteristiche interessanti, come testimonianze rotanti, animazioni accattivanti, tabelle dei prezzi professionali, boxed altre caratteristiche.
Inoltre, SeedProd dispone di strumenti di intelligenza artificiale in grado di generare rapidamente testi e immagini di buona qualità per il vostro sito. Questo può essere un vero e proprio risparmio di tempo durante la creazione delle pagine.
Volete saperne di più? Verificate queste recensioni per vedere come SeedProd si confronta con altri builder di pagine popolari:
- Elementor vs Divi vs SeedProd (a confronto) – Qual è il migliore?
- Instapage vs Leadpages vs Unbounce vs SeedProd
Speriamo che questo articolo vi abbia aiutato a creare layout personalizzati per le pagine di WordPress utilizzando Beaver Builder. Vi consigliamo di consultare anche la nostra guida su come creare un sito WordPress mobile-friendly e la nostra selezione dei migliori builder per temi WordPress.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.
corey
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
WPBeginner Support
Glad to hear our guide was helpful!
Admin
Rodney Harrier
I started using Elementor to build a blog. If I switch to Beaver Builder, do I lose whatever I have done?
WPBeginner Support
If you change plugins you would lose the customizations from your first plugin.
Admin
Pius Anthony
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
WPBeginner Support
Glad our guides can help you start helping other people too
Admin
Krayl
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!
Lisa Theriault
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
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
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!
WPBeginner Support
Hi David,
You can contact Beaver Builder support, they would be able to help you out.
Krayl
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.
Yeremi Akpan
I had similar issues using Chrome, but they were resolved when I switched to Mirosoft Edge.
Jesse
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.
Gabrielle
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.
Dr. Peter H. Markesteyn
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?
Anthony
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!
Ian Gordon
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
Sam
How nice does Beaver Builder play with other plugins?
WPBeginner Support
It plays well with most plugins. There might be some hiccups with a random less commonly used plugin, but they are quick to solve such issues.
Admin
Rk bhardwaj
This is amazing plugin to make any blog looks pretty
Oliver
Beaver Builder is the best page builder plugin by the best team!
Robby
Hey, Oliver! Thanks for the kind words.
Andrew Peters
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
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
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