Come usare visual composer, la guida rapida al compositore visivo

by Marco
3 anni ago
452 Views

Il 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. Come usare il plugin Visual Composer per personalizzare al 100% le pagine del sito, senza scrivere nemmeno una riga di codice? È molto intuitivo e la personalizzazione è assicurata.

Visual Composer è responsive e funziona con qualsiasi template stai utilizzando. Se il tuo tema non lo prevede, lo puoi acquistare.

Come funziona

Una volta attivato il plugin, 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.

 

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 …

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.

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.

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.

Il video che ti spiega come usare il Visual Composer

Ti mostro tutti passaggi concreti per realizzare una porzione di pagina web.

 

Tag:, , ,

Lascia un commento