Creare pagine con il plugin WordPress Page Builder di SiteOrigin

Immagine avatar per Andrea Di Rocco

Pubblicato da Andrea Di Rocco in

1K+ Visite sul post corrente.

Guida al plugin Page Builder di SiteOrigin

Lo strumento che ti presento oggi è un page builder veramente interessante. Si tratta del plugin WordPress Page Builder di SiteOrigin.

Sai che cos’è un page builder?

Un plugin WordPress Page Builder ti permette di creare in maniera semplice e precisa pagine responsive con un layout personalizzato.

Se vuoi creare pagine statiche, come la pagina dei Contatti o quella del Chi Siamo, esso ti sarà di grande aiuto.

Molti temi WordPress hanno questo tipo di funzionalità già inclusa.

Uno dei più diffusi è Visual Composer di WPBakery, che è possibile anche acquistare separatamente al costo di $46.

Trovi tutte le informazioni sul Visual Composer qui.

Se nel tuo tema questa funzionalità non è presente, puoi provare ad utilizzare il plugin WordPress Page Builder di Site Origin. È completamente gratuito e molto apprezzato dagli utenti di WordPress, con oltre un milione di download.

Iniziamo a vedere come funziona questo strumento.

Configurare il WordPress Page Builder di SiteOrigin

Configurare il WordPress Page Builder di SiteOrigin

Come per tutti i plugin, la prima cosa che devi fare è installare ed attivare lo strumento.

Una volta completata l’installazione, naviga in Impostazioni > SiteOrigin Page Builder, dove troverai alcune opzioni generali su cui lavorare per configurare lo strumento.

Ecco le principali:

  • Generale > Tipi di notifiche:
    • WordPress Page Builder è perfetto per creare pagine, ma, da questa voce, puoi selezionare la voce Articoli se vuoi utilizzarlo anche per scrivere gli articoli.
  • Widget > Widget suggeriti:
    • WordPress Page Builder utilizza i widget come elementi della pagina.
    • Attivalo per mostrare i suggerimenti sui widget da inserire.
  • Layout > Layout di risposta:
    • Spuntando la casella, le pagine create con Page Builder saranno responsive, ossia verranno visualizzate perfettamente su dispositivi di qualsiasi dimensione.
    • Puoi anche impostare per quali dimensioni dovrà avvenire il passaggio da versione desktop a versione mobile.
  • Contenuto > Copia Contenuto:
    • Selezionando questa voce, i contenuti creati con Page Builder saranno disponibili anche nell’Editor> tradizionale di WordPress.

Usare il plugin WordPress Page Builder per creare pagine e articoli

Abbiamo configurato le impostazioni di base del plugin. Ora iniziamo ad usarlo per creare le nostre pagine.

Se crei una nuova pagina, noterai subito che è apparsa un’altra tab: accanto a Visuale e Testo, troverai Page Builder. Selezionando questa voce, attiverai la nuova funzione.

WordPress Page Builder - Nuova tab del plugin Page Builder nell'editor WordPress

Potrai tornare all’editor classico cliccando su Revert to editor.

WordPress Page Builder - Pulsante Torna all'editor nel plugin page builder

Riga

Iniziamo a creare la griglia nella quale posizionare gli elementi, o widget: clicca Aggiungi riga per aggiungere una riga alla pagina.

La riga può avere da una a dodici colonne, della larghezza che desideri.

Nel menu “Colonne con un rapporto di…” troverai le varie opzioni per le loro dimensioni e proporzioni, oppure puoi trascinare i lati delle colonne per stabilirne la larghezza.

Sulla destra avrai la sezione Stili della riga, con varie impostazioni.

Da Caratteristiche, potrai aggiungere classi CSS o applicare stili CSS personalizzati.

Da Layout, invece, puoi impostare il margine, il gutter (lo spazio tra le colonne) e il padding.

Infine, lavorando sulle opzioni disponibili nella sezione Design, puoi personalizzare lo sfondo della riga con un colore o un’immagine.

In qualunque momento puoi modificare, cancellare o duplicare una riga cliccando l’icona a forma di chiave inglese in alto a destra. Le righe possono inoltre essere trascinate e posizionate dove preferisci.

Widget

Adesso passiamo a inserire i widget, i contenuti veri e propri.

Clicca Aggiungi widget per visualizzare quelli disponibili.

Ecco una selezione di quelli secondo me più interessanti:

  • Testo – Con questo widget aggiungerai un campo di testo con l’editor classico WordPress:
    • Potrai inserire contenuti di testo, immagini, file media e codice HTML.
  • SiteOrigin Image – Inserisce un’immagine e permette di impostare diverse personalizzazioni:
    • Dimensioni, l’allineamento, e l’URL se vogliamo farla diventare un link.
  • Immagine – Inserisce un’immagine semplice.
    • A differenza del widget precedente, non permette di personalizzarla.
  • Galleria – Se vuoi mostrare più di un’immagine, puoi usare questo widget.
    • Inserisci gli ID delle immagini che vuoi includere, imposta le dimensioni delle singole foto, il numero di colonne da visualizzare e la destinazione di eventuali link.
  • Video – Utilissimo per:
    • Incorporare un video da YouTube, Vimeo o altri provider video.
    • Inserirne uno dalla tua libreria media.
  • Layout Builder – Da questa sezione, puoi aggiungere un altro layout builder all’interno della pagina.
    • Otterrai quindi una sezione in qui inserire altre righe e colonne.
  • SiteOrigin Button – Usando questo widget puoi aggiungere un pulsante sulla tua pagina con, ovviamente, un URL di destinazione personalizzato.
  • SiteOrigin Price Table – Da qui, inserirai una tabella dei prezzi, utilissimo per le pagine di vendita.
  • SiteOrigin Post Carousel. Questo widget mostra un carosello dei post.
    • Puoi visualizzarli in base alla categoria, all’autore o ad altri parametri.
    • Una funzionalità molto utile nelle homepage statiche in cui si vuole mostrare comunque un richiamo al blog.
  • SiteOrigin Google Maps. Con questo widget sarà facilissimo inserire una mappa di Google nella tua pagina.

Nota! I widget con la dicitura “SiteOrigin” saranno disponibili nel Page Builder solo se avrai installato SiteOrigin Widgets Bundle.

Aggiungere i widget con il WordPress Page Builder

Cosa sono i widget per WordPress

Dopo averlo installato, vai su Plugin > SiteOrigin Widget e seleziona i widget che vuoi attivare.

Oltre che all’interno del Page Builder, i widget possono anche essere aggiunti alle sidebar in Aspetto > Widget.

Quelli di cui abbiamo parlato sono solo alcuni degli innumerevoli widget che Page Builder mette a disposizione.

Ti consiglio di creare una pagina di prova e testare tutte le funzionalità, così da scoprire tutti gli elementi di questo utile plugin.

Come le righe, i widget possono essere trascinati in un’altra posizione, duplicati o eliminati.

Inoltre, tutti gli elementi possono essere personalizzati con margini, sfondi, CSS custom eccetera.

Per comprendere meglio il funzionamento di Page Builder by SiteOrigin (in particolare, la funzionaità drag-and-drop), guarda il video di presentazione ufficiale incorporato qui sotto.

Prebuilt Layout

Ora siamo giunti al punto in cui hai creato un buon layout, su una pagina o su un articolo, e vuoi replicarlo in altre pagine.

Come fare? È molto semplice: clicca su Layouts e vai su Clona: Pagine oppure Clona: Articoli.

Storia

Se hai necessità di tornare indietro nelle modifiche che hai effettuato, cliccando su Storia puoi visualizzare una cronologia delle varie versioni della tua pagina, compresa una loro anteprima.

Live Editor

Molti utenti di WordPress amano vedere le proprie modifiche in tempo reale.

Per questo Page Builder ha creato la funzionalità Live Editor, da cui selezionare e modificare i singoli elementi direttamente sulla pagina di anteprima.

Questa pagina sarà molto simile al pannello Personalizza.

Page Builder funzionerà con il mio tema?

Page Builder funzionerà con il mio tema

Il plugin WordPress Page Builder< è compatibile con la maggior parte dei temi WordPress.

Prima di installarlo, ti consiglio comunque di verificare che il template che stai utilizzando (soprattutto se è premium) non abbia già funzionalità integrate per la costruzione dinamica delle pagine.

In questo caso, ti sconsiglio di installare Page Builder poiché potrebbe creare conflitti, non funzionare correttamente o creare malfunzionamenti nel tuo tema.

Se vuoi utilizzare WordPress Page Builder e cerchi un tema perfettamente compatibile (e anche gratuito), dai un’occhiata ai temi sviluppati sempre da SiteOrigin.

In genere, questi template hanno un look molto semplice, ma sono decisamente funzionali e ben visibili su tutti i dispositivi.

Aggiungo, inoltre, che il page builder SiteOrigin è compatibile con Yoast SEO.

Conclusione

Oggi ti ho parlato del plugin WordPress Page Builder, uno strumento estremamente utile e dalle innumerevoli funzionalità, ottimo per creare pagine dal layout accattivante, senza dover scrivere una riga di codice.

Il tuo tema ha già integrato uno strumento di questo tipo o ne usi uno alternativo?

Ritieni che sia utile o preferisci la configurazione classica delle pagine WordPress?

Come sempre, per domande, commenti, suggerimenti ed idee, ti invito a lasciare il tuo messaggio qui sotto.

Guide correlate:

Immagine di Andrea Di Rocco autore articoli SOS WP
Andrea Di Rocco Fondatore di SOS WP™
La mia passione per WordPress mi ha portato negli ultimi 10 anni a voler aiutare sempre più persone a creare blog e siti web in WordPress in completa autonomia. Spero che troverai utili le oltre 700 guide su WordPress e sulla SEO che ho pubblicato su questo blog. Se ne hai voglia ti invito a leggere la mia storia, cliccando sul pulsante qui sotto.
51Commenti
Lascia un commento
  1. Immagine avatar per matteo
    matteo

    Ciao, il mio problema è che proprio non riesco a vedere il wp backery all’interno di una nuova pagina.

    Vedo solo il foglio bianco del classico editor, senza poter seleziona un altro editor (wp backery in questo caso).

    Eppure ho appena completato la creazione della Home Page con WPBakery

    Com’è possibile?

    Grazie mille

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Matteo, WordPress, i plugin e il tema sono tutti aggiornati?

  2. Immagine avatar per Fate
    Fate

    Ciao Andrea
    Ho creato una pagina con il page builder di siteorigin e ho messo una immagine come fullscreen in background. Il problema è che sul cellulare l’immagine viene tagliata e anche il testo che ho scritto sopra. Qualche idea?
    Grazie mille.

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao, che tema stai utilizzando?

    2. Immagine avatar per Fate
      Fate

      Il tema che sto usando si chiama siteorigin corp.

    3. Immagine avatar per SOS WP Team
      SOS WP Team

      Dovremmo analizzare la situazione direttamente per trovare una soluzione. Per questo puoi contattare il nostro reparto servizi da questo link.

  3. Immagine avatar per Rosetta
    Rosetta

    Ciao sono Rosetta e sul sito che ho indicato non riesco a far comparire una nuova pagina appena creata, nel menu in alto a destra, dove già ci sono altre pagine con le sottopagine, grazie, non ho creato io questo sito e sto imparando a gestirlo 😉

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Rosetta, vai su Aspetto>Menu e intervieni sulla pagina che vorresti aggiungere come spiegato nella nostra guida. Un saluto!

    2. Immagine avatar per Rosetta
      Rosetta

      …non trovo Aspetto e poi Menu…. io sto operando su una versione 4.9.8 , cambia qualcosa ?
      Grazie.
      Potete indicarmi dove guardare , un tutorial o nel vostro sito ecc… per capire cosa mi permette di creare WP 4.9.8 e come operare?
      Grazie

    3. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Temiamo che se non vedi Aspetto, tu non abbia gli accessi da Admin.

  4. Immagine avatar per jasmine
    jasmine

    Ciao Andrea, non ho capito bene se è possibile creare una homepage dinamica con Page Builder. Vorrei creare una homepage dove vengono visualizzati gli ultimi articoli scritti nel blog, ma voglio rendere creativa la mia homepage con questo plugin. E’ possibile farlo? grazie infinite! Colgo l’occasione per congratularmi per la vostra assistenza prioritaria perché mi avete salvato in diversi casi, sempre precisi e affidabili. Grazie a voi ho sistemato il blog per la GDPR senza problemi. Vi sto consigliando a tutti!

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Jasmine!Certo, puoi personalizzare la pagina blog con questo plugin. Puoi usare per questo l’apposito Widget: Post Loop widget. Grazie del tuo feedback sulla Assistenza WordPress, felici di essere di aiuto.

  5. Immagine avatar per fate
    fate

    Ciao Andrea
    Come si fa a togliere la scritta in inglese dal lente di grandomento della ricerca. Cioè mi spiego meglio se cerco una parole esempio che non c’è mi viene fuori la scritta in inglese “Sorry but nothing mached your search terms. Please try again”. Vorrei che tutta questa scritta uscisse in italiano.

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao, prova a modificarla con il plugin Loco Translate.

  6. Immagine avatar per stefania de liguoro
    stefania de liguoro

    Ciao Andrea, buongiorno. Leggevo con interesse il tuo articolo. Io sono una neofita nell’uso di wordpress. Tuttavia con il dovuto smanettare ho compreso abbastanza e ho messo su il sito internet. Tuttavia ieri sono incorsa in uno spiacevole errore al quale non riesco a porre rimedio. Mi spiego. Premessa: nella costruzione della mia homepage, lavoro molto sia col Backend editor, sia col frontend editor (wpbakery page builder), tuttavia a seguito di un qualche errore, che non ho ancora compreso quale esso sia, se passo in modalità frontend editor mi sparisce il corpo del sito su cui poter lavorare e mi appare solo il main menù ed il footer menù.
    Come potrei fare per fare in modo da poter tornare a lavorare sl corpo del sito col wpbakery page builder?
    Ti ringrazio anticipatamente,
    Stefania

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Stefania! Prima di tutto verifica che non vi sia un conflitto in corso tra le varie risorse, disattivando gli altri plugin.

  7. Immagine avatar per Maryloni
    Maryloni

    Ciao Andrea, grazie per l’articolo, avrei bisogno di chiederti, come mai ogni volta che creo una pagina con questo plugin non riesco a farlo in altre lingue, nel senso, ho la pagina in italiano, quando voglio tradurre in inglese, cambia la lingua anche quella di italiano. Sapresti aiutarmi? Grazie

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Stai usando WPML per rendere il tuo sito multilingua? Un saluto!

  8. Immagine avatar per Mario
    Mario

    Ciao Andrea,
    ho installato il plugin “Page Builder” ma va in conflitto con un altro plugin “Responsive Lightbox – Lightcase”. E’ possibile risolvere questa cosa in qualche modo?
    Grazie!

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Dovresti verificare con lo sviluppatore del plugin 🙁

  9. Immagine avatar per Fabrizio
    Fabrizio

    Ciao Andrea e grazie per i tuoi articoli.
    Ho bisogno di aiuto, sto cercando un semplice plugin per wp che mi permetta di aggiungere in un certo punto dell’articolo delle colonne, 2, 3, 4 o più colonne, dove devo inserire dei prodotti, Testo + link immagine di Amazon, così da dare una formattazione meno disordinata.

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Salve Fabrizio, puoi lavorare con Page Builder, oppure devi intervenire sul tema. Contatta per una consulenza il nostro team di supporto, da qui: https://sos-wp.it/assistenza/. Un saluto!

  10. Immagine avatar per Marghe
    Marghe

    Ciao Andrea sai che non torvo l’opzione Responsive Layout 🙁

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Che tema usi?

    2. Immagine avatar per Marghe
      Marghe
    3. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Non lo conosco, prova a chiedere se è compatibile con il plugin.

  11. Immagine avatar per Elisa
    Elisa

    Ciao Andrea, volevo sapere se questo plungin è compatibile con genesis framework. Io non sono molto a favore dei page builder però quando realizzo i siti a volte ho la necessità di dividere in colonne il contenuto della pagina. Di solito tramite l’editor inserisco dei div, ma se il cliente deve metterci le mani evito. Hai qualche suggerimento in merito? Cioè esiste qualche plugin che mi permetta di usare del codice html e al tempo stesso permetta al mio cliente di modificare i testi senza creare casini cancellando parti di codice? O l’unica soluzione è usare un page builder? Grazie, spero di essermi spiegata bene!

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Elisa, si dovrebbe funzionare senza problemi, testalo pure 😉

  12. Immagine avatar per Roby
    Roby

    Ciao, sto lavorando al sito http://www.spaziomalini.com , ho creato la home con page builder, ma i rettangoli mi appaiono come se fossero semi trasparenti. Cosa ho sbagliato secondo te?

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Roby, scrivici a info@sos-wp.it, indicando anche il tema in uso. Un saluto!

  13. Immagine avatar per sonia
    sonia

    Ciao Andrea, vorrei cambiare la home del mio sito che è legata al tema. Ho già apportato modifiche al codice ma non so qual’è il sistema più pratico per crearne i contenuti. Posso solo creare pagine widget da inserire nelle sidebar del tema? Ho provato con Live Composer ma non funziona l’editing del testo. grazie!

    1. Immagine avatar per sonia
      sonia

      Per caso c’è un modo per integrare solo nella home un template per landing page?

    2. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Sonia,
      in che senso non funziona l’editing del testo?

    3. Immagine avatar per sonia
      sonia

      Se importo un box che ad esempio include un’immagine o simbolo + testo, scrivendo nell’apposito spazio testo non va e se va non è possibile staccare le parole perchè se premo la barra si sposta la schermata. Comunque è evidente che vada in conflitto con qualcosa. L’ho eliminato.. Mi piacerebbe realizzare uno home più “landing”. Hai un altro sistema da consigliarmi?

    4. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Sonia, dai un’occhiata a questo post: https://sos-wp.it/creare-landing-page-con-plugin-wordpress/.

  14. Immagine avatar per daniela
    daniela

    Buona sera,
    dopo aver trasferito da locale a remoto il sito qiuando entro nelle singole pagine per modificarle non visualizzo più i contenuti e quindi non riesco a modificarli.
    Le pagine on line si visualizzano correttamente a parte alcuni errori che dovrei correggere ma non visulaizzando i contenuti nn riesco.
    Il tema utilizzato è truking con plugin Content Maker!!!
    Da cosa può dipendere??

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Daniela,
      sicura di aver effettuato la procedura corretta di trasferimento da locale a remoto?
      Hai attivato tutti i plugin?

  15. Immagine avatar per Salvatore
    Salvatore

    Ciao Andrea,
    utilizzo da sempre questo plugin con tutti i suoi accessori…ma negli ultimi giorni non mi fa più effettuare modifiche al testo, alle slide e a tutto quanto concerne i contenuti delle pagine. Davvero non so come fare….

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Salvatore,
      il plugin è correttamente aggiornato? Hai installato altri plugin o hai cambiato tema di recente?
      Un saluto e grazie del tuo commento!

  16. Immagine avatar per Mauro
    Mauro

    Ciao Andrea,
    ho un problema non so se legato al page builder o al visual editor.
    In pratica succede che se riapro un testo per apportare delle modifiche, compaiono tutti i codici html di formattazione che vengono poi pubblicate sul sito online. Ho cercato, senza riuscire, a capire la natura del problema. Tutto questo succede da non molto, più o meno dall’ultimo aggiornamento di wordpress, mentre prima tutto funzionava a meraviglia. Ho provato anche ad aggiornare il template che sto usando (Preferential acquistato su styledthemes.com) nella speranza di risolvere senza ottenere alcun risultato.
    Non so proprio cosa fare, per cui ogni possibile aiuto/consiglio sarebbe apprezzato.
    Grazie
    Mauro

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Mauro,
      puoi scrivere a info@sos-wp.it, inviandoci anche una screenshot per evidenziare meglio il problema?
      Intanto un saluto, e grazie del tuo commento!

  17. Immagine avatar per Claudio
    Claudio

    Ciao Andrea,
    sto utilizzando il plugin, lo trovo molto comodo,
    ho la necessità di sviluppare un sito multilingua,
    ho provato qtranslate, ma non funziona correttamente mantenendo attivo Page Builder,
    che plugin mi consigli per sviluppare siti multilingua?
    Grazie mille anticipatamente.
    Claudio

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Claudio,
      ti consiglio vivamente di utilizzare WPML, il migliore plugin per configurare siti multilingua.
      In questo post trovi una guida utile sull’argomento.
      Spero di esserti stato di aiuto,
      Un saluto!

  18. Immagine avatar per Silvia
    Silvia

    Io ho scaricato ed installato il plugin come hai descritto tu, ma in alto a destra non mi appare la voce Page Builder a fianco di visuale e testo.
    Ho anche installato come tema Vantage uno dei temi realizzati semore da SiteOrigin.

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Silvia,
      devi andare nella pagina di impostazioni di Page Builder (la trovi nel menu della Bacheca WP) ed attivare il page builder sia per le pagine che per tutti i tipi di post dove vuoi usarlo.
      Spero di esserti stato di aiuto,
      Un saluto!

  19. Immagine avatar per leonardo
    leonardo

    Ciao,
    una domanda ma usando page builder inserendo un widget di testo non ho più a disposizione i font per la formattazione del testo che avevo con il plugin TinyMCE ?

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Leonardo,
      trattandosi di due plugin che agiscono entrambi sulle funzionalità dell’editore di testo, non dovrebbero essere usati assieme.
      Spero di esserti stato di aiuto,
      Un saluto!

    2. Immagine avatar per leonardo
      leonardo

      Chiaro, ti ringrazio e complimenti per il tuo sito. Molto interessante.
      Ciao

    3. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Grazie Leonardo!

  20. Immagine avatar per brazir
    brazir

    Ho installato Page Builder e ho iniziato ad usarlo
    Lo trovo decisamente comodo, anche se lo utilizzo penso al minimo delle potenzialità.

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao,
      facci sapere come procede il tuo rapporto con il plugin, grazie del commento ;-).

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *