Guide

Creare pagine responsive con il plugin Page Builder

Un PageBuilder serve ad organizzare contenuti ed elementi su più righe e colonne di diversa grandezza, come se questi fossero posizionati all’interno di una griglia invisibile. Hai mai provato ad usarlo? Vediamo come funziona.

Oggi ti presento uno strumento molto interessante: il plugin Page Builder by SiteOrigin.

plugin PageBuilder

Un Page Builder è uno strumento che serve a creare pagine responsive con un layout personalizzato. È quindi particolarmente utile per creare pagine statiche (per esempio, la pagina “Contatti” o quella “Servizi”) e pagine di vendita.

Esistono diversi strumenti che permettono di implementare questo tipo di funzionalità su WordPress. Molti temi premium ne hanno uno integrato chiamato Visual Composer di WPBakery (acquistato separatamente costa $33. Trovi tutte le informazioni sul Visual Composer qui.)

Se però il tuo tema non include già uno strumento di questo tipo, Page Builder by Site Origin è sicuramente un’ottima alternativa, del tutto gratuita. Non a caso, ad oggi conta oltre 1 milione e 400 mila download.

Non ci resta che iniziare a vedere come funziona questo strumento.

Installazione e configurazione di PageBuilder by SiteOrigin

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

Effettuata correttamente l’installazione, naviga in Impostazioni > SiteOrigin Page Builder. Qui troverai alcune opzioni generali su cui lavorare per configurare lo strumento.

Vediamo quelle più importanti:

  • Post Types: Page Builder può essere usato sia per creare post che per creare pagine. Probabilmente, lo troverai utile per lavorare principalmente sulle pagine statiche, però qualora volessi usarlo anche per creare articoli, spunta la voce “Articoli”.
  • Copy Content: se vuoi che i contenuti che crei con il Page Builder siano disponibili anche all’interno dell’ Editore WordPress tradizionale, spunta questa voce.
  • Bundled Widget: Page Builder include un numero abbastanza ampio di widget proprietari (questi sono gli elementi che aggiungerai e trascinerai all’interno della griglia creata sulla pagina).
  • Responsive Layout: questa è un’opzione molto importante. Spuntando la casella, renderai le pagine create con Page Builder responsive, cioè perfettamente visibili sugli schermi di tutte le dimensioni (se desideri, puoi anche impostare il numero di pixel che determinerà il passaggio da versione mobile a versione desktop).

Usare il plugin Page Builder per creare pagine ed articoli

Ora che hai configurato il plugin, è arrivato il momento di iniziare ad usarlo per creare i tuoi layout.

Per prima cosa, inizia a creare una nuova pagina. Ora noterai che c’è una terza linguetta nell’angolo in alto a destra del campo di testo. Quindi vedrai: “Visuale”, “Testo” e “Page Builder”.

Clicca su “Page Builder” per attivare il pannello per la configurazione dinamica della pagina (se lo desideri, puoi tornare in qualunque momento all’editore tradizionale cliccando “Switch to Editor”).

Row

Per iniziare a creare la griglia dove posizionerai i vari elementi (chiamati widget), clicca Add Row. In questo modo, aggiungerai una riga alla pagina.

La riga può avere da una ad otto colonne, della larghezza che desideri.

Per configurare la larghezza delle colonne, scegli una delle opzioni disponibili nel menu “Columns with Ratio” oppure trascina i lati delle singole colonne verso destra/sinistra per regolarne la larghezza in percentuale.

Puoi personalizzare ulteriormente le righe espandendo la sezione “Row Styles” sulla destra. Qui puoi associare classi CSS o scrivere vere e proprie regole CSS applicabili alla singola riga (nel campo CSS Styles).

Usa invece i campi in “Layout” per impostare margine, gutter (cioè, lo spazio tra una colonna e l’altra all’interno della riga) e 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 la piccola chiave inglese che appare in alto a destra. Puoi anche spostare le righe trascinandole nella posizione desiderata.

Widget

Configurata la tua prima riga, inizia a posizionarvi i widget all’interno.

Clicca “Add Widget” per visualizzare quelli disponibili. Ecco una selezione di quelli secondo me più interessanti/utili:

  • Editore Visuale. Questo widget serve ad aggiungere un campo di testo con l’editore classico WordPress. Qui puoi aggiungere contenuti di testo ed HTML. Il widget Editore Visuale può anche incorporare immagini ed altri file media.

Nota! Affinché questo widget funzioni correttamente, devi installare anche il plugin Black Studio TinyMCE Widget.

  • Animated Image. Vuoi visualizzare immagini con effetti dinamici? Questo è il widget che fa per te. Ti servirà ad aggiungere immagini visualizzate con un’animazione.
  • Simple Image. A differenza del Widget precedente, le Simple Image non sono animate. Sono invece immagini, appunto, semplici, a cui può essere aggiunto un url di destinazione.
  • Button. Usando questo widget puoi aggiungere un bottone sulla tua pagina con, ovviamente, un url di destinazione personalizzato.
  • Gallery. Se vuoi mostrare più di un’immagine, usa questo widget. Semplicemente, inserisci gli ID delle immagini che vuoi includere, configura le dimensioni delle singole foto, su quante colonne vuoi organizzarle e la pagina alla quale vuoi linkare i file.
  • Layout Builder. Se desideri, puoi inserire un altro Layout Builder (quindi, la possibilità di creare altre righe/colonne) all’interno del Page Builder stesso.
  • Price Box. Un ottimo widget per le pagine di vendita. Scegli questo elemento per aggiungere una tabella prezzi alle tue pagine.
  • SiteOrigin Post Carousel. Questo elemento serve a visualizzare un carosello dei tuoi post, filtrati per categoria, autore, o secondo uno degli altri parametri disponibili. Questa funzionalità è particolarmente utile se usi come homepage una pagina statica ma vuoi comunque visualizzare su di essa un collegamento al blog.
  • SiteOrigin Google Maps. Un widget che serve ad aggiungere in modo semplicissimo alle tue pagine una mappa Google.

Nota! Affinché i widget contrassegnati con la dicitura “SiteOrigin” siano disponibili all’interno del tuo PageBuilder, dovrai installare il plugin SiteOrigin Widgets Bundle.

Installato il plugin, potrai controllare quali plugin attivare o meno sul tuo sito navigando in Plugin > SiteOrigin Widgets.

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

Questi sono solo alcuni degli elementi messi a tua disposizione dal plugin Page Builder. Ce ne sono infatti molti altri. Ti consiglio di creare una pagina di prova e testarli, così da conoscerne le varie funzionalità.

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

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

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

Prebuilt Layout

Se hai creato un layout che ti piace, che esso si trovi su una pagina o su un post, puoi replicarlo cliccando “Prebuild Layout” e “Clone: Pagine” o “Clone: Articoli”.

History

In qualunque momento, puoi visualizzare un resoconto delle modifiche fatte sulla pagina cliccando “History”.

Su una nuova finestra, vedrai nella parte di sinistra un elenco delle versioni disponibili, sulla destra un’anteprima live della pagina.

Live Editor

Se preferisci vedere in anteprima le tue modifiche, puoi usare la funzionalità Live Editor. In questo caso, vedrai una schermata molto simile a quella “Personalizza”, presentata in questa guida.

In questo caso, puoi selezionare i vari elementi direttamente sulla pagina di anteprima e modificarli singolarmente.

Page Builder funzionerà con il mio tema?

Il plugin 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 sconsiglierei di installare il plugin descritto in questa guida, in quanto andrebbe a duplicare (e forse generare problemi di compatibilità) con funzionalità native del tuo tema.

Se PageBuilder ti piace e sei alla ricerca di un tema (gratuito) perfettamente compatibile, ti consiglio di dare un’occhiata anche ai temi sviluppati sempre da SiteOrigin.

Si tratta senza dubbio di template dal look molto semplice, però funzionali e ben visibili su tutti i dispositivi.

Conclusione

Siamo arrivati alla fine di questa guida sul plugin Page Builder. Come vedi, si tratta di uno strumento estremamente utile se vuoi creare pagine dal layout interessante, senza dover necessariamente saper codificare.

Il tuo tema ha già integrato uno strumento di questo tipo? Oppure 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 tu messaggio qui sotto.

Alla prossima guida.

Altre guide della stessa
categoria

37 COMMENTI
Commenta
  1. 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

    Rispondi
  2. 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

    Rispondi
  3. 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!

    Rispondi
  4. 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.

    Rispondi
  5. 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!

    Rispondi
  6. 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!

    Rispondi
  7. 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??

    Rispondi
  8. 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….

    Rispondi
    • 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!

      Rispondi
Mostra più commenti

Lascia qui il tuo commento

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