fbpx
Come usare Visual Composer, plugin di WordPress

Come usare WPBakery Page Builder (Visual Composer), plugin di WordPress

Lo amo. Non ne ho mai fatto un segreto. Lo Adoro.

WPBakery Page Builder (nuovo nome del Visual Composer) è uno dei migliori plugin di WordPress in circolazione ed è presente ormai in moltissimi temi WordPress di ultima generazione. Ti aiuta a rendere semplice e veloce la costruzione della tua pagina web e a personalizzarla come vuoi tu.

Nelle mie ultime consulenze WordPress sto spiegando proprio questo: come usare il plugin WPBakery Page Builder (Visual Composer) per personalizzare al 100% le pagine del sito, senza scrivere nemmeno una riga di codice. È molto intuitivo e la personalizzazione è assicurata.

WPBakery Page Builder (Visual Composer) è responsive e funziona con qualsiasi template stai utilizzando. Se il tuo tema non lo prevede, lo puoi acquistare qui. In altri casi su Themeforest trovi già tantissimi template con WPBakery Page Builder (Visual Composer) compreso. Assicurati che sia nell’elenco dei plugin del tema.

 

Come funziona

Una volta attivato il plugin, WPBakery Page Builder (Visual Composer) consente di controllare e gestire il layout delle pagine e degli articoli. Basta aggiungere una nuova pagina e fare clic sul pulsante blu Backend Editor per accedere al Page Builder. Poi è sufficiente cliccare sul bottone vedere Add Element.

Visual composer backend editor
Visual Composer nuova pagina

Il passo successivo è quello di iniziare ad aggiungere gli elementi che vuoi inserire nella pagina. Dopo aver fatto clic sul pulsante Aggiungi elemento (Add Element) si apre la finestra con la griglia degli elementi da aggiungere. Sono tanti, alcuni propri di WordPress altri più specifici e dipendono dal tema che usi. Eccone alcuni, quelli più usati:

  • riga e colonne
  • titoli
  • blocchi di testo
  • immagini, gallerie, portfolio
  • condivisione social
  • elementi grafici, divisori, spazi
  • toggle, testimonial, staff
  • gli ultimi post del blog
  • bottoni e call to action
  • widget sidebr, ecc …
Visual composer - Elementi da aggiungere

Il primo elemento da aggiungere è sempre la riga (Row) e successivamente gli altri. Ti consiglio di inserire al massimo 3/4 elementi per riga, la pagina così non si appesantisce, gli elementi sono ordinati tra loro e non si fa confusione. Se volessi, in un secondo momento, eliminare alcune sezioni di quella pagina, puoi cancellare in un clic solo quella riga, senza toccare le altre. Una riga la puoi anche suddividere in più colonne. È sufficiente cliccare sull’icona in alto a sinistra, quella con le lineette orizzontali e scegliere quali e quante colonne inserire. Come in questa immagine.

Visual Composer - Divisione in colonne

Ecco qui in basso un esempio di pagina realizzata con 2 righe. La prima riga è divisa in 3 colonne, ogni colonna ha 2 elementi: un’immagine e un blocco testo. La seconda riga non è divisa in colonne ed ha al suo interno un unico elemento: il blocco testo.

Esempio di pagina realizzata da Visual Composer

Infine, come avrai notato, ogni riga ha 3 icone nell’angolo in alto a destra. Sono tre caratteristiche aggiuntive.

  • la X cancella la riga e tutto il suo contenuto
  • l’icona a forma di doppio foglio duplica la riga e tutto il suo contenuto
  • la matitina serve per accedere alle opzioni di formattazione di quella riga, come ad esempio inserire un colore o immagine di fondo

Duplicare una riga è molto utile quando la riga successiva ha delle caratteristiche simili a quella precedente, sia per numero di colonne che per elementi. Poi puoi modificare solo alcuni elementi che variano, come i contenuti, le immagini ed i titoli.

Visual Composer - caratteristiche della riga

Come usare WPBakery Page Builder (Visual Composer)

In questo nuovo articolo, ti faccio vedere come fare pace con il WPBakery Page Builder (Visual Composer). Nel video ti mostro tutti passaggi concreti per realizzare una porzione di pagina web.

Cosa ne pensi

L’ho già detto che lo adoro? Mi trovo benissimo con questo plugin e lo utilizzo per i siti web che realizzo. L’articolo che stai leggendo è stato interamente realizzato con WPBakery Page Builder (Visual Composer), come del resto tutto il mio sito.  Inoltre, mi permette di creare dei layout grafici personalizzati al 100%, proprio come vogliono le mie clienti.

 

Puoi approfondire l’argomento del WPBakery Page Builder (Visual Composer), leggendo anche questi articoli che ho scritto apposta per te, per fartelo conoscere meglio e per imparare ad usarlo.

 

Hai bisogno di aiuto?

Se invece desideri un aiuto, ti aspetto su Skype per un’ora di consulenza online con me dove possiamo:

  • fare insieme l’acquisto della licenza di WPBakery Page Builder (Visual Composer)
  • aggiornare il plugin sul tuo sito e
  • vedere poi come usarlo al meglio sulle pagine del tuo sito per raggiungere i tuoi obiettivi

Che fai, prenoti?

Crea da sola il tuo primo sito web WordPress

Il video corso WordPress senza segreti ti guida attraverso i miei video tutorial, nella creazione del tuo primo sito web in WordPress, senza più ansie. Impari le basi di WordPress, scegli e carichi il template giusto per te, imposti il menu e lo slider, crei articoli, gallerie immagini, fai SEO e colleghi Mailchimp al sito.

Costa 69€. Che fai, sei ancora qui?

Vuoi capire come far funzionare sul serio il sito?

Scarica la ricetta perfetta

Iscriviti alla newsletter e ricevi subito:

Separatore testo Maddalena Pisani siti in WordPress

✔ Il corso:
La ricetta perfetta per il sito

Un’email al giorno per 6 giorni, molto pratica per capire cosa sta dietro un sito, per realizzarlo bene e farlo funzionare sul serio.

✔ In più, una volta al mese, hai acceso ai miei consigli pratici per gestirlo bene, storie nuove, anticipazioni e cose belle!

Comments (50)

  1. Reply Tizinaa

    Ciao, innanzitutto complimenti per il sito. Io avrei una curiosità.. ma se acquisto un template già comprendente il visual composer è possibile poi utilizzarlo anche per la costruzione di un altro sito, magari con template gratuito ?

  2. Reply madesign

    Ciao Tizinaa. Grazie per i complimenti.
    Puoi usare il Visual Composer su un altro template solo è compatibile con il nuovo tema che scegli. Nelle caratteristiche tecniche del tema dovresti trovare qualche informazioni a riguardo. Tra un tema e l’altro potresti perdere, però, l’uso di alcuni elementi del Visual Composer perché sono propri di quel tema. 😉

  3. Reply Alberto

    Ciao Super complimenti a te per al spiegazione e il sito 🙂
    alcuni chiarimenti…

    1) non capisco se visual composer è solo un plugin di wordpress o se è anche un qualcosa a se

    2) Acquistando il plugin come “costruttore di siti” lo posso usare su ogni sito che costruisco (sempre che il tema usato lo supporti)? Per essere più chiaro: plugin acquistato = 1 solo sito oppure più siti?

    3) Rispetto a plugin gratuiti (o in parte tali) come ad esempio “Page Builder by SiteOrigin” quale è la differenza in termini d iaffidabilità e compatibilità?

    Grazie delle eventuali risposte e ancora complimenti

    1. Reply madesign

      Ciao Alberto. Grazie per i complimenti.
      1) Si, il Visual Composer è un plugin di WordPress
      2) Si, lo puoi usare su altri siti, ma nella maggior parte dei nuovi template professionali è già compreso
      3) Il VC rispetto al Page Builder by SiteOrigin è più sicuro, aggiornato di frequente dai sui costruttori, ha un supporto tecnico al quale rivolgersi in caso di necessità e in base al tema che acquisti, nel VC ci sono diversi Elementi/Addons in più (oltre a quelli di default), specifici di quel tema che ti permettono di personalizzare ancora di più il tuo sito.
      A presto.
      Ciao
      Maddalena

      1. Reply Alberto

        molte grazie della tua risposta! Getnilissima! 🙂

  4. Reply Mauro

    Ciao Maddalena,

    finalmente una pspiegazione un po’ più esauriente sul visual composer! grazie! 🙂

    Ho letto i commenti precedenti e se ho capito giusto, posso acquistare visual composer e utilizzarlo tutte le volte che voglio su siti diversi, domini diversi (a patto che sia compatibile col tema) corretto? cioè lo compro una volta e ci posso fare potenzialmente un num,ero infinito di siti?

    Usando molti temi free, a tuo parere ed esperienza, c’è buona compatibilità o c’è una cerchia ristretta di temi free che lo supportano?

    Non avendolo mai utilizato mi scuso per le domande sciocche ma… posso inserire all’interno di una pagina o post costruito con visual composer anche widget di terze parti ad esempioi o è compatibile solo con una cerchia ristretta di widget o add on? (per add on immagino si intenda plugin giusto?)

    Ho visto sulla home page del plugin che ci sono varie ozpini di acquisto… non ne ho capito molto… Non si acquista il plugin per 34 dollari e basta?

    Chiedo ancora scusa per tutte qeuste domande ma non sono esperto e sarebbe il mio primo acquisto wordpress 🙂

    Grazie ancora e in bocca al lupo a te! 🙂

    1. Reply Maddalena

      Ciao Mauro, la licenza del VC la compri a parte e costa 34$ con già compresi 6 mesi di assistenza tecnica. Se vuoi estenderla a 12 mesi paghi qualcosa in più. La licenza la puoi attivare solo su un sito. I temi free sono spesso poco compatibile con il VC. Su una pagina/articolo puoi inserire tutti gli elementi di default (blocco testo, riga, immagine, ecc) che ti propone il VC e quelli propri del tema che stai usando.

  5. Reply Marco Rilli

    Ciao, ottima guida. Ho un problema , dopo l’ultimo aggiornamento di WP alla versione 4.6.1.il plugin non funziona piu, ho installato la versione 4.3.5. il thema è AbbyBased child theme .. come posso risolvere ??

    1. Reply Maddalena

      Ciao Marco. Devi aggiornare il plugin Visual Composer alla sua ultima versione, la 4.12.1. Qui lo puoi acquistare: https://codecanyon.net/item/visual-composer-page-builder-for-wordpress/242431
      La vecchie versioni del VC sono ormai incompatibili con i nuovi aggiornamenti di WordPress. A presto. Ciao.

  6. Reply laura

    Ciao. Finalmente qualcuno che mi ha illuminato un pó su sto plugin. io non capisco una cosa: ho acquistato un tema, che obbligava l installazione di questo plugin. L ho installato senza pagare niente, da allora mi compare un messaggio dove mi parla di attivare una copia x avere il supporto premium, credo a pagamento. a me interessa solo usare questo plugin. Domanda: devo attivarlo qst supporto?

    1. Reply Maddalena

      Ciao Laura. Sì, puoi usare il plugin anche se non è aggiornato, anche se te lo consiglio. Se vuoi aggiornarlo all’ultima versione dovresti acquistare a parte la sua licenza. Molto spesso, però, quando aggiorni la versione del tuo template, i costruttori del tema aggiornano anche la versione del plugin del Visual Composer per evitare, con il passare del tempo, che questo diventi obsoleto rispetto a tutto il resto. Prova a chiedere al costruttore del tema. 😉

  7. Reply marina

    Ciao Maddalena. Da poco ho intrapreso il mio viaggio con wordpress e, leggendo a un po’ ovunque per conoscerlo meglio, ho scoperto l’esistenza zampe di Visual composer. Vorrei chiederti alcune cose. Questo plugin e’ tradotto anche in lingua italiana? Come faccio a sapere se e’ compatibile con il templare scelto?
    Ti ringrazio.
    Marina

    1. Reply Maddalena

      Ciao Marina. Il plugin è in italiano. Se il tema l’hai comprato prima di acquistare il visual composer il modo migliore per capire se è compatibile è quello di chiederlo a chi ha costruito il tema. Se hai acquistato il tema ad esempio su themeforest.com puoi risalire al costruttore del tema e chiedere informazioni. 😉

  8. Reply Maria Adelina Alberti

    Ciao. Volevo chiederti: io vorrei costruire delle pagine con una griglia di post (riassunto) solo di una categoria. Con Visual Composer lo posso fare? Su qualsiasi pagina o solo sulla home?
    Grazie.

    1. Reply Maddalena

      Ciao. Si lo puoi fare, su tutte le pagine che vuoi. Puoi usare gli elementi Masonry Post Grid o Post Grid.

  9. Reply Ida

    Ciao Maddalena!
    Bellissimo articolo: complimenti!
    Provo a chiederti una cosa:
    E’ possibile modificare lo spazio tra le righe che inserisco? Mi spiego meglio ho inserito una riga formata da tre colonne come nel tuo esempio poi ho duplicato la riga per continuare l’inserimento tuttavia lo spazio che si crea automaticamente sul sito tra le due righe risulta eccessivo: c’è un modo per ridurlo?
    Grazie mille in anticipo per il tuo aiuto!!!

    1. Reply Maddalena

      Ciao Ida, grazie per i complimenti.
      Controlla nelle impostazioni della riga (matita in alto a destra) i valori inseriti in Padding top o Padding Bottom. Li puoi definire la distanza tra una riga e l’altra.
      Oppure controlla che tra una riga e l’altra non ci sia un Empty space o un divider. 😉

      1. Reply Ida

        Grazie!!!!!!!!!!!!!!!!!

  10. Reply Nick

    Ciao Maddalena, mi sembri la più esperta su VC che trovo in giro. Io volevo inserire una gallery ma non riesco a far comparire i titoli delle immagini nello slideshow. Sai se è possibile Grazie

    1. Reply Maddalena

      Ciao, questo dipende molto dal tema che usi e di quali elementi del Visual Composer dispone. Ti consiglio di visionare bene le impostazioni della gallery che stai usando oppure di usare questo valido plugin http://www.enviragallery.com. A presto.

  11. Reply alpadellinoFabio

    Ciao Maddalena, ho da poco scoperto il tuo blog e devo dire che riesci a chiarire dubbi amletici per me che sono neofita di WordPress…ho letto i tuoi commenti sul Visual Composer; volevo chiederti cosa ne pensi di Divi? Ultimamente lo stanno pubblicizzando in modo maniacale e da quello che si legge nei vari blog pare sia rivoluzionario per l’immediatezza con cui permette di personalizzare ogni aspetto del sito in creazione. Grazie.

    1. Reply Maddalena Pisani

      Ciao Fabio,
      mi fa piacere esserti di aiuto. Ho costruito diversi siti con Divi, è molto gettonato e consigliato. Io continuo a preferire il Visual Composer associato ad un buon tema WordPress, sia un po’ per gusto personale e sia perchè nella costruzione delle pagine, è più flessibile, puoi personalizzare meglio la pagina e capisci a colpo d’occhio quali sono gli elementi che la compongono. Ciò nonostante ti confermo che Divi è un buon tema. A presto. Ciao.

  12. Reply alfonsocapraro1972

    Ciao Maddalena,
    intanto ti faccio i complimenti per il tuo blog, mi hai fatto comprendere tante cose di Visual Composer e tolto tanti dubbi.
    Volevo avere un tuo parere, ho trovato questo template ( https://themeforest.net/item/blue-ocean-hotels-resorts-responsive-wordpress-theme/19173189 ) mi sapresti dire se Visual Composer è compreso nel prezzo e se poi potrò utilizzarlo per fare altri siti?
    Grazie per la tua gentile risposta.
    Alfonso

    1. Reply Maddalena Pisani

      Ciao Alfonso, grazie. 😉 Il tema che mi hai indicato mi pare buono. Il VC è compreso nel pacchetto e nel prezzo. Lo trovi specificato nei dettagli del tema. Quel VC lo potrai usare solo sul quel tema. Ciao!

  13. Reply Simone

    Ciao, complimenti per la guida. Utilizzo visual composer con tema newspaper 7 e ho il seguente problema: le pagine costruite con il VC sui dispositivi mobili vengono visualizzate vuote, c’è header, titolo e footer, ma nessun elemento che ho inserito in VC. Puoi aiutarmi a capire qual è il problema?

    1. Reply Maddalena Pisani

      Ciao Simone. Difficile da dire così, su due piedi. Prova a guardare nelle impostazione del VC se è disattivata la visualizzazione mobile e anche nelle impostazioni di ogni riga.

  14. Reply valentinaoliveri2valentina

    ciao, grazie per la tua guida è stata determinante nel mio percorso di apprendimento. Volevo chiederti, se io creo una struttura per una pagina e voglio la medesima struttura in altre pagine, come posso copiarmela? Io uso wordpress e VC. GRAZIE

    1. Reply Maddalena Pisani

      Ciao Valentina. Puoi duplicare la pagina (ci sono plugin appositi che lo fanno) oppure salvi il template della pagina cliccando sull’icona accanto al + del VC.

  15. Reply Paolo

    Ciao e complimenti per il tutorial, hai idea di come eliminare gli spazi bianchi tra le righe? Mi spiego meglio, su una pagina ho messo due righe contenenti due immagini da me create, le imposto larghe come lo schermo ma sopra, sotto e ai lati mi rimane un bordo bianco che non riesco a togliere

    1. Reply Maddalena Pisani

      Ciao Paolo, inserisci le immagini nella stessa riga e controlla che nelle impostazioni immagini, non ci sia l’effetto bordo.

  16. Reply Maurizio

    Ciao Maddalena, intanto ti dico che apprezzo molto le tue disponibilità e competenza.

    Vorrei poi un suggerimento sul Visual Composer. Negli oggetti ‘Schede’ (tabbed content) e ‘Tour’ (vertical tabbed content) vorrei poter definire colori aggiuntivi delle linguette oltre quelli disponibili di serie così da uniformarli ai colori del logo. Vorrei anche, se possibile, modificare la dimensione di tali linguette e il font con cui sono intestate. Ho provato a farlo ma non ci sono riuscito.

    Secondo te, come potrei farlo?

    Grazie in anticipo.

    Maurizio

    1. Reply Maddalena Pisani

      Ciao Maurizio, quegli elementi sono basic, quindi puoi personalizzarli fino ad un certo punto, con i colori di default che ti vengono proposti. I font li impostati nella sezione Font del tuo template (se la prevede). Prova a vedere se il tuo tema predispone Schede e Tour suoi, così da avere più personalizzazioni.

  17. Reply Giorgio (Verona)

    Bello. Però quando ho acquistato il tema non mi hanno detto che da lì a poco per poterlo utilizzare avrei dovuto spendere più di 30 dollari per la licenza. Che storia è? Meglio se avessero proposto una versione base gratis e poi un upgrade a pagamento.

    1. Reply Maddalena Pisani

      Ciao Giorgio,
      nella maggior parte dei casi, il VC è sempre utilizzabile anche se non aggiornato alla sua ultima versione. Inoltre, quando viene rilasciato un aggiornamento del tema, li è compreso anche l’aggiornamento alla nuova versione del VC. Nel caso in cui non volessi attendere l’aggiornamento del tema, puoi acquistare il VC a 30$ e sarà tuo per sempre.

  18. Reply Maria Grazia

    Ciao!complimenti per il sito, io ho seguito le tue istruzioni ma non riesco in ogni caso ad inserire le componenti perchè nel momento in cui le seleziono non le aggiunge. Mi aiuti? Grazie

    1. Reply Maddalena Pisani

      Ciao Maria Grazia,
      grazie per i complimenti. Difficile capire così, senza vedere, quale sia il problema. Mi vien da pensare un’incompatibilità tra tema e Visual Composer o che il Visual Composer non sia aggiornato alla sua ultima versione. Se vuoi un maggiore aiuto puoi scrivermi via email a info@studiomadesign.net. Ciao!

  19. Reply camilla tranquilli

    Ciao Maddalena,
    innanzitutto grazie per le spiegazioni!
    Ho una domanda: io ho acquistato un tema su themeforest che una volta caricato mi faceva installare il visual composer. Non mi chiede aggiornamenti ma mi chiede l’attivazione con licenza. La domanda è: posso usarlo senza rischi nonostante non abbia la licenza estesa?
    Grazie in anticipo,
    Camilla

    1. Reply Maddalena

      Ciao Camilla, la licenza del Visual Composer (che ti permette di aggiornare il plugin ogni volta che c’è un aggiornamento) non è mai compresa nei temi. Il VC è quasi sempre utilizzabile, anche se non aggiornato alla sua ultima versione. Di solito, quando viene rilasciato un aggiornamento al tuo tema, li è compreso anche l’aggiornamento alla nuova versione del VC. Nel caso in cui non volessi attendere l’aggiornamento del tema, puoi acquistare la licenza del VC a circa 34$, sarà tuo per sempre e potrai fare sempre gli aggiornamenti, quando saranno disponibili.

  20. Reply 6gengy

    Ciao ho ereditato il mio sito già costruito, Visual Composer funzionava benissimo , ora dopo un aggiornamento fatto a giungo 2016 di WordPress non funziona più e non riesco più a modificare nulla di quelle pagine e/o articoli. Cosa devo fare ? Gira ininterrottamente a vuoto e non si apre 🙁

    1. Reply Maddalena

      Ciao, molto probabilmente devi aggiornare VC alla sua ultima versione. Per farlo puoi acquistare la licenza e così sarà tua per sempre. Oppure c’è qualche incompatibilità con un altro plugin.

  21. Reply Fabio

    Ciao Maddalena.
    Volevo sapere se posso nascondere una sezione della home page con VC per non cancellarla definitivamente.
    Riguarda i commenti dei clienti ed era preimpostata nel template acquistato da Themeforest. Al momento non mi serve ma vorrei recuperla in futuro e non capisco come escluderla momentaneamente. Grazie

    1. Reply Maddalena

      Ciao Fabio. Puoi duplicare quella pagina e tenerla in bozza. In quel modo hai una copia della pagina con i commenti dei clienti che puoi ripristinare quando vuoi.

  22. Reply iana_90

    Ciao Maddalena,
    volevo sapere se VC funziona anche con tema che ho acquistato. Ho acquistato il mio Tema da https://www.pipdig.co
    Grazie 🙂

    1. Reply Maddalena

      Ciao,
      questo non saprei dirtelo. Dovresti chiederlo direttamente al costruttore del tema o guardare nelle caratteristiche del tema, plugin compatibili o compresi. A presto. 😉

  23. Reply valerio

    Ciao Maddalena,
    volevo chiederti se sai come è possibile aumentare la grandezza delle icone, provo a modificare la dimensione selezionando la “size L” ma non cambia assolutamente nulla, solo la posizione dell’icona.
    mi sapresti dire come fare ad ingrandire le icone?

  24. Reply Paolo

    Buon giorno

    Complimenti per l’articolo, davvero molto interessante e utile.
    Ho una domanda tecnica, con il visual composer, c’è modo di avere del testo nascosto?
    Mi spiego meglio, vorrei indicizzare il sito, la home page, quindi vorrei inserire del testo con il minimo di 300 parole senza che questo venga visto, sia sul pc che tablet e smartphone. C’è un modo?

    Saluti

    1. Reply Maddalena

      Ciao Paolo, grazie. Non c’è modo di avere con il Visual Composer del testo nascosto e te lo sconsiglio. Inserire testo nascosto per indicizzare il sito è una pratica obsoleta e che danneggerà il sito. 😉

  25. Reply Marco Adriani

    Ciao Maddalena, complimenti per l’articolo.

    Stavo cercando di realizzare una Landing Page con il Visual Composer (Tema Soledad), ho visto alcuni tutorial dove mostrano le opzioni per le singole pagine per poter ad esempio disabilitare l’header o fare altre modifiche.

    Il problema è che io ho solo poche opzioni, è forse un recente aggiornamento o potrebbe essere un problema del tema?

    Grazie in anticipo.
    Marco

    1. Reply Maddalena

      Ciao Marco, si, può dipendere dal tema. Se il tuo tema predispone l’impaginazione landing page, la trovi nel box Attributo pagina.

      1. Reply Marco

        Maddalena grazie mille per risposta velocissima! Ho pensato ad un’altra cosa, forse può dipendere dal fatto che ho la licenza standard, quella che danno insieme al tema. Credo che per avere maggiori opzioni devo acquistare la licenza diretta. Grazie ancora!
        Marco

Lascia un tuo commento