Creare pagine responsive con il plugin Page Builder

plugin PageBuilder

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

Un Page Builder è uno strumento che serve a creare pagine responsive con un layout personalizzato. Cioè, 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.

Un Page Builder è 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 pubblicata di recente.

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 sapere 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.

Andrea Di Rocco

Andrea Di Rocco

Ciao! Sono Andrea, il webmaster di SOS WordPress. La mia missione è di aiutarti a diventare autonomo nel creare il tuo sito web, posizionarti sui motori di ricerca e guadagnare online grazie al tuo progetto. Oltre a questo voglio far si che tu spenda il minor quantitativo di soldi e tempo mentre raggiungi i tuoi obiettivi sul web. Conosciamoci nell'area commenti di questo articolo!

PROMOZIONE HOSTING WORDPRESS SITEGROUND

SiteGround - Miglior hosting per Wordpress
33 commenti
  1. dice:

    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
  2. dice:

    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
  3. dice:

    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
  4. dice:

    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
  5. dice:

    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
  6. dice:

    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
    • dice:

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

      Rispondi
  7. dice:

    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

    Rispondi
  8. dice:

    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

    Rispondi
    • dice:

      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!

      Rispondi
  9. dice:

    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.

    Rispondi
    • dice:

      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!

      Rispondi
  10. dice:

    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 ?

    Rispondi

Lascia un Commento

Vuoi partecipare alla discussione?
Fornisci il tuo contributo!

Lascia un commento

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