Come usare Visual Composer il plugin WordPress per gestire meglio i tuoi contenuti

Come usare Visual Composer, il plugin WordPress per gestire meglio i tuoi contenuti

Questa guida Come usare Visual Composer, il plugin WordPress per gestire meglio i tuoi contenuti è studiata per tutti coloro che si approcciano per la prima volta a questo plugin o anche per coloro che lo conoscono ma vogliono approfondirne la conoscenza.

Visual Composer è un prodotto di Codecanyon.

Il costo è di 34 $ + IVA.

Il plugin è stato comprato da 265.000 utenti e il punteggio di valutazione è ottimo.

È molto importante leggere questi dati in fase di acquisto di un tema o di plugin perché rappresentano il consiglio di chi ha già acquistato e quindi utilizzato il prodotto.

Il prezzo comprende:

  • utilizzo del plug in per 1 sito web
  • aggiornamenti futuri
  • 6 mesi di assistenza

Come quindi avrai capito, il plugin potrà essere utilizzato per la costruzione di 1 sito web.

Potresti pensare che il costo sia alto, in realtà stiamo parlando di un prodotto che da solo ti permette di creare pagine web di alto livello.

Visual Composer è sicuramente in grado di soddisfare le necessità creative di qualunque web design al mondo.

Come usare Visual Composer e prima di tutto come acquistarlo?

Entra nel sito di Envato Market che è un portale web che offre prodotti utili per la creazione di contenuti. Nel sito web, cerca il plugin Visual Composer.

Naturalmente grazie ai motori di ricerca, inserendo come query “Visual Composer”, verrà visualizzato il link per l’acquisto… Acquisto Visual Composer

Effettua il login al sito Envato Market.

Se non hai un account, procedi con l’inserimento del tuo indirizzo e-mail e inserisci una password, la creazione ti prenderà un minuto.

Come usare Visual Composer- Fase 1: Caricamento Plugin nel sito

Una volta effettuato l’acquisto del plugin, procedi con il download.

Come usare Visual Composer

Scarica solo il pacchetto Installable WordPress file only.

All file & documentation ti servirà come archivio.

Licence certificate & purchase code (PDF) o Licence certificate & purchase code (text) contengono lo stesso testo. Non ti servono per capire come usare Visual Composer, ma sono importanti perché comunicano all’acquirente il codice API di acquisto che dovrà essere inserito nel sito web nel quale il plugin verrà caricato.

Carica il plugin sul tuo sito WordPress

La procedura da seguire per scaricare il plugin è semplice.

Come usare Visual Composer

1 – Plugin

2 – Aggiungi nuovo

2 – Carica plugin

3 – Scegli file

4 – Installa ora

attendere qualche minuto senza uscire dalla schermata

5 – Attiva plugin

Prima di procedere con la creazione della tua pagina web e capire bene come usare Visual Composer, devi entrare nelle Impostazioni del Plugin.

Come usare Visual Composer – Fase 2: Impostazioni personalizzate

Come usare Visual Composer

Clicca su Impostazioni Generali, si aprirà questa schermata:

Ci sono diverse tab da aprire per impostare le opzioni:

  • Impostazioni Generali:
  • Role Manager
  • Opzioni Design
  • CSS personalizzato
  • Product License
  • Shortcode Mapper

 

Partiamo con la prima schermata.

1) IMPOSTAZIONI GENERALI

  • Disattivare gli elementi di contenuto responsive: non mettere il segno di spunta
  • Google fonts subsets: lasciate su latin
  • Default template for post types: valido solo se state utilizzando un tema child
  • Guide tours: cliccate per accedere alla guida

 

2) ROLE MANAGER

Come usare Visual Composer

In questa pagina hai la possibilità di attribuire degli specifici ruoli di azione agli utilizzatori:

  • Amministratore
  • Editore
  • Autore
  • Collaboratore

Le impostazioni sono soggettive e da prendere in esame se il vostro sito web ha più utenti.

3) OPTION DESIGN

Come usare Visual Composer

Qui è possibile modificare l’aspetto visivo degli elementi di contenuto predefiniti del compositore visivo. Per impostazione predefinita, esso utilizza un tema neutro di colore grigio chiaro.

Anche in questo caso le impostazioni sono soggettive.

4) CSS PERSONALIZZATO

Come usare Visual Composer

Opzione da utilizzare solo se conosci i codici CSS

5) PRODUCT LICENSE

Come usare Visual Composer

Cliccando su Activate Visual Composer, verrai rimandato alla pagina del sito web Envato:

Come usare Visual Composer

Clicca su Approvare

Ti si aprirà la seguente schermata dove andrai ad inserire il codice API di acquisto del quale parlavo a inizio guida e che avrai scaricato dopo l’acquisto del plugin.

Come usare Visual Composer

Inserisci il codice e digita su ACTIVATE.

Avrai la possibilità di contattare il servizio assistenza per 6 mesi in caso di problemi e potrai accedere alla galleria template messa a disposizione dal plugin.

 

6) SHORTCODE MAPPET

Come usare Visual Composer

Se vuoi utilizzare un particolare short code all’interno della tua pagina creata con Visual Composer, dovrai inserire qui il tuo codice. Te lo troverai a disposizione nel compositore visivo.

Impostate le opzioni personalizzate, puoi finalmente procedere con la creazione della tua prima pagina!

Come usare Visual Composer –  Fase 3: Creazione Pagina (o Post)

Clicca su Pagina=>Aggiungi Nuova

Si aprirà la pagina vuota e vedrai 2 nuove icone.

Backend editor è la schermata per la creazione della pagina con il builder visivo.

Frontend editor è l’anteprima del sito web che stai strutturando.

Clicca su Backend.

Come usare Visual Composer

Visual Composer ti chiede di cominciare ad aggiungere contenuto alla tua pagina appena aperta.

Hai a disposizione 3 sezioni:

+AGGIUNGI ELEMENTO

ADD TEXT BLOCK

ADD TEMPLATE

In alto, trovi il pannello degli strumenti, da sinistra:

  • il logo del plugin: ti collegherà direttamente con il sito web del programmatore, dove potrai trovare consigli utili e il forum
  • il simbolo + Aggiungi Elemento: ti permette di aggiungere gli elementi di struttura singoli (li vedremo in dettaglio successivamente)
  • il simbolo Add Template: ti permette di aggiungere template da te creati e salvati o accedere ad una libreria di template già realizzati in base all’obbiettivo della pagina
  • il simbolo estendi: permette di allargare la schermata di visualizzazione del Backend
  • il simbolo rotella: ti permette di visualizzare i codici CSS inseriti precedentemente nelle impostazioni personalizzate del tema
  • Frontend: ti permette di vedere l’anteprima della pagina web che stai creando

 

ADD TEMPLATE

Comincia con entrare in Add Template.

Qui siamo nell’idillio assoluto. Il plugin mette a disposizione pagine già costruite con il builder in base all’obbiettivo stesso della pagina.

Come usare Visual Composer

Hai a disposizione 2 tab:

My Template: dove troverai strutture di pagine da te create e che hai deciso di salvare

Template library: i template già creati e messi a disposizione da Visual Composer

Come usare Visual Composer

Scegli il template e scaricalo cliccando su Download Template.

Come usare Visual Composer

Il template sarà pronto per essere visionato e modificato.

Questa è una fase di analisi, dovrai trovare tempo per valutare i singoli template.

Una volta scaricato che avrai scaricato il template e non dovesse piacerti, per eliminare, devi cancellare ogni sezione caricata (cliccando sull’icona del cestino a livello di riga).

Come usare Visual Composer

ADD TEXT BLOCK

Cliccandoci sopra, si aprirà questa schermata. Analizziamola:

Come usare Visual Composer

Prima di tutto la riga di blocco più essere composta da più colonne, con la funziona che indicato con A puoi modificare il numero di colonne per riga. Le colonne possono avere anche misure differenti.

Con il tasto B aggiungi una riga (raw).

Il composer di un singolo blocco è strutturato in riga=>colonna=>elemento.

La riga è il livello più grande.

La colonna è un livello più piccolo della riga.

L’elemento è il componente specifico che vai a scegliere tra l’ampia galleria a disposizione.

Lo vedremo presto nel dettaglio; per ora, per poter lavorare e per capire appieno come usare Visual Composer, devi capire la logica.

Ti mostro il Backend e il Frontend editor della struttura:

Come usare Visual Composer

Analizzando lo schema, si potrà ben capire la disposizione degli elementi.

Ho deciso che per la riga (row) voglio uno sfondo verde. La riga è la base della struttura.

Per la colonna singola, a sinistra, ho deciso di inserire un’immagine (Marketing) di background, all’interno della singola colonna ho inserito un elemento di testo.

Quindi per essere ancora più chiari, questa è la gerarchia.

Come usare Visual Composer

Insisto con il concetto, perché, una volta compresa la logica della struttura a blocchi, sarà semplice creare la una pagina. A quel punto deve uscire la creatività del designer!

Per sapere come usare Visual Composer è necessario conoscere le opzioni di impostazioni per riga, colonna e elemento.

1) RIGA

Per ogni riga, in alto a destra, troverai questo pannello dove puoi (partendo da sinistra):

  • Nascondere la riga
  • Modificarla
  • Duplicarla
  • Cancellarla

Cliccando sulla pennina di modifica della riga, ci appare questo pop-up

Tab GENERAL

Come usare Visual Composer

Vado a spiegare le singole opzioni:

Row stretch (la misura della riga nella pagina):

  • Default
  • Stretch raw: mostra solo la riga a piena larghezza
  • Stretch raw and content: mostra la riga, colonna e elemento a piena larghezza
  • Strech raw and content (no paddings): mostra la riga, colonna e elemento a piena larghezza (dove l’elemento non ha i margini definiti)

Columns gap: misura, in pixel, la distanza tra il margine della colonna e la riga

Full height row?: mettere il segno di spunta se voglio l’altezza massima della riga.

Unitamente di chiederà la posizione della colonna rispetto alla riga (middle= al centro, top=in alto, bottom= in basso, stretch = ugual misura)

Egual eight: se vuoi che la colonna sia della stessa altezza della riga

Content position: la posizione dell’elemento contenuto nella colonna (default, top: in alto, middle=al centro, bottom=in basso)

Use video background: se vuoi inserire un video, sarà lo sfondo della riga.

Parallax: nessuno, simple (semplice), with fade (dissolvenza). Aggiungi un’immagine che sarà a piena riga con effetto parallasse.

Parallax speed: velocità parallasse

Animazione CSS: animazione della riga in fase di visualizzazione. Qui potete sbizzarrirvi a provarle tutte (saranno sempre le stesse, e sono tante, per tutte le animazioni che il builder mette a disposizione.

RAW ID: se non conosci il codice HTML, non toccate questa funzione

Disable raw: disabilitare la visione della riga alla visualizzazione frontend. Con il Visual Composer, la riga diventerà meno visibile per ricordarti che ne hai escluso la visualizzazione.

Nome classe extra: se non sei pratico di codice CSS, non toccate questa opzione.

Ricordati sempre di salvare i cambiamenti.

TAB Opzioni Design

Come usare Visual Composer

Troviamo le seguenti funzioni:

Border color: modificare il colore del bordo

Border style: modificare lo stile del bordo (provare tutti i bordi)

Border radius: stabilire il livello di curvatura del bordo in pixel

Background: decidere il colore di sfondo della riga o aggiungere una immagine. Per capire è meglio che fai delle prove singole e poi fai l’anteprima. Tutte le righe del builder ragionano nello stesso modo, è quindi importante fare tutte le prove possibili per conoscere tutte le opzioni che sono messe a disposizione

CSS box: serve per stabilire la misura del margine tra riga=>colonna=elemento

Ricordati sempre di salvare i cambiamenti.

 

2) COLONNA

Cliccando sulla pennina di modifica della colonna, appare questo pop-up

Tab GENERAL

Come usare Visual Composer

Hai solo 3 opzioni:

Animazione CCS: sono le animazioni in fase di visualizzazione nel frontend (fai tutte le prove per vedere ciò che ti piace)

Element ID: usarla solo se conosci i codici HTML

Nome classe extra: usarla solo se conosci i codici HTML

 

Tab OPTION DESIGN

Praticamente le stesse opzioni della riga (vedi istruzioni nella sezione riga)

 

Tab RESPONSIVE OPTIONS

Come usare Visual Composer

Si tratta delle opzioni per le impostazioni visualizzazione su cellulare.

Width: si tratta della scelta della misura della colonna in riferimento alla riga

Responsiveness: fai le prove per la visualizzazione sui vari dispositivi. Ti chiede anche se vuoi nascondere una particolare impostazione su un particolare dispositivo.

La rotellina in alto ti permette di salvare come di default quindi di fare il reset delle tue impostazioni personali o di salvarle.

3) ELEMENTO

Passiamo ora all’elemento, ossia ciò che una colonna può contenere. Gli elementi a disposizione sono tantissimi.

Prima di passare alla spiegazione dei singoli elementi, vediamo le opzioni disponibili:

Come usare Visual Composer

Nell’esempio, l’elemento inserito è un blocco di testo. Quindi nel caso specifico, l’opzione ti permette di modificare il testo. Le opzioni cambiano in base all’elemento inserito nella colonna.

Le altre opzioni sono uguali a quelle della riga e colonna.

Come usare Visual Composer. Fase 4: Inserire un elemento

All’interno della colonna trovi un + che ti permette di scegliere l’elemento.

Ecco tutti gli elementi a disposizione:

Come usare Visual Composer

Sono tantissimi! Puoi decidere di visualizzare tutti gli elementi, rimanendo nella tab Tutto.

Puoi decidere di scegliere l’elemento selezionando un sottogruppo di elementi:

Tab Contenuto

Come usare Visual Composer

Trovi tanti elementi anche di intuitivo e facile utilizzo.

  • Blocco testo: per inserire un contenuto testuale
  • Icona: per inserire un elemento grafico predefinito anche con l’animazione
  • Separatore: per separare i blocchi con particolari e accattivanti grafiche sono di vari tipi fate delle prove
  • Separatore con testo: lo stesso del separatore ma possiamo inserire un contenuto testuale e media. Ottimi per inserire i motti per esempio.
  • Messaggio box: puoi inserire un messaggio all’utente, una notifica, una rettifica.
  • FAQ: ti permette di inserire la tipica schermata di domanda con risposta a discesa nel caso la volessi leggere. Ottimo!
  • Singola immagine: per inserire un’illustrazione
  • Galleria immagini o Image carosel: per inserire più immagini da visualizzare insieme o a carosello
  • Schede: per inserire tab di scelta
  • Tour: per inserire tab e sotto cartelle tab
  • Fisarmonica: un’altra versione dei 2 precedenti
  • Pageable container: contenitore di immagini con titolo
  • Custom heading: per inserire un titolo ben visibile
  • Go: pulsante call di action
  • Call di action: similare al precedente ma la possibile di inserire testo è ben maggiore
  • Slider post: per inserire gli articoli tipo carosello animato
  • Video player: per inserire un video
  • Google maps: per inserire una mappa con il codice API di google. Come ottenere codice.
  • Widget Flockr: si tratta di un strumento per archiviare le vostre foto e i vostri video on line.
  • Barra di caricamento: puoi inserire un testo e definire i colori
  • Pie chart: ved. sopra
  • Round chart: ved. sopra
  • Line chart: ved. sopra
  • Empty space: spazio vuole dove inserire uno sfondo a colori o un’immagine.
  • Post Grid: utilissima funzione per visualizzare anteprime di pagine, articoli, e molto altro in griglie. Utilissimo e consigliato!
  • Media Grid: stessa funzione del precedente ma per gestire le immagini. Gli effetti visivi sono molto belli. Da provare!
  • Post masonry grid: un’altra versione di Post grid
  • Media masonry grid: un’altra versione di media grid

 

Tab SOCIAL

Come usare Visual Composer

Per inserire il profilo personale o la pagina fan di Facebook bisogna, scrivere l’ID. Questo vale anche per Google+ e Pinterest. Per Twitter bisogna inserire l’username.

Tab STRUTTURA

Come usare Visual Composer

Usa queste funzioni solo se conoscete le modalità di codifica. Altrimenti non toccare alcun elemento.

Tab WIDGET WORDPRESS

Come usare Visual Composer

Si tratta dei soliti widget che troviamo in WordPress. Non starà a descriverli perché sicuramente li conoscerai già.

Tab WOOCOMMERCE

Come usare Visual Composer

Questa categoria non si trova di default. Nel mio CMS ho installato WooCommerce per mostrarti la capacità di Visual Composer di integrarsi con plugin importanti come appunto WooCommerce.

Con questa guida su Come usare Visual Composer, il plugin WordPress per gestire meglio i tuoi contenuti, voglio anche spronarti a sperimentare la “collaborazione” tra plugin come in questo esempio.

Tab DEPRECATED

Gli elementi all’interno di questa lista sono obsolete e non sono più supportati nelle versioni più recenti di Visual Composer. Visual Composer quindi sconsiglia di utilizzare gli elementi di questa categoria.

Come usare Visual Composer

Come usare Visual Composer. Fase 5: Controllare la struttura finale e riposizionare i blocchi

Ultimo concetto da evidenziale è il drag&drop di Visual Composer.

Visual Composer ti permette di spostare riga ed elementi dove preferisci.

Tenete premuto il tasto sinistro del mouse sull’icona a forma di croce:

per la riga 

per l’elemento 

Se lo spostamento è possibile, tenendo sempre premuto il tasto sinistro del mouse, ti si aprirà un varco con sfondo grigio per l’inserimento. Se il posizionamento non è possibile, sul display non si visualizzerà alcun spazio libero e, lasciando il tasto sinistro del mouse, la riga o l’elemento torneranno nella posizione di origine.

 

La mia guida su Come usare Visual Composer è finita.

Come avete letto Visual Composer è un builder completo che ti permette di strutturare un sito web completo e originale.

Al primo utilizzo è bene studiare attentamente tutti gli elementi a disposizione.

Aprite una pagina di prova, come bozza, e provateli tutti visualizzando naturalmente le anteprime.

Io sono Arianna Donadeo, web designer e seo specialist. Mi occupo inltre di content e digital marketing, visita il mio sito web Marketing e Back Office Virtuale

10 Comments

  • Angus

    31 marzo 2017, 10:05

    Ottimo articolo interessante.
    Una domanda stupida,se volessi acquistarlo per fare pratica e imparare ad usarlo, e quindi installarlo su un sito di prova, devo attivarlo per forza?

    Spiego meglio, se lo uso per studio attivandolo per me poi posso riattivarlo su un sito commerciale che sviluppo per il cliente?

    Grazie e articolo molto chiaro.

    • Lauryn

      31 marzo 2017, 10:23

      Ciao Angus, alcuni plugin possono essere non attivati, semplicemente non riceveranno gli aggiornamenti. Non sono sicura se Visual Composer lo permetta, fai una prova. Mal che vada quando poi dovrai usarlo per un tuo cliente lo disattivi dalla tua area di prova ed usi quel codice per il tuo cliente. Poi per ogni cliente dovrai usare una nuova licenza, o se vuoi puoi acquistare direttamente la licenza sviluppatore che ti permette di utilizzarlo su innumerevoli siti (salvo poi fornire sempre i files di aggiornamento a tutti i tuoi clienti). spero di essere stata chiara 🙂

  • Luca

    31 marzo 2017, 10:45

    Ciao Lauryn, interessante articolo.
    Pensavo si potesse aggiungere semplicemente a WordPress ed usarlo poi su tutti i siti che creo pagandolo una sola volta. 34euro per ogni progetto mi sembra un po’ troppo, no? Anche se si creano cose di alto livello…Grazie

    • Lauryn

      31 marzo 2017, 12:03

      Ciao Luca, la policy di Codecanyon è questa, se selezioni lateralmente il tipo di licenza noterai che puoi acquistare quella unlimited a 170 dollari, che puoi decidere comunque di ricaricare sui singoli progetti e che ricopri facilmente con 4 progetti. https://codecanyon.net/licenses/standard

  • Edoardo

    4 aprile 2017, 15:34

    Buongiorno Lauryn, è la prima volta che visito questo sito e l’ho fatto dopo aver acquistato il tuo ebook sul “web coso”.
    Nella tua descrizione dici di essere “front-end developer (wordpress)”.
    Visto che mi sto affacciando in questi mesi allo studio del web design, volevo porti alcune domande sul tuo ruolo.
    Che differenza c’è tra il web designer classico, il front-end developer e te? Forse tu non usi il codice dato che wordpress lo permette tranquillamente?
    Bisogna conoscere i linguaggi html, css, js e php? Di che mansione si tratta esattamente?
    Grazie

    • Lauryn

      4 aprile 2017, 16:26

      Ciao Edoardo, ti ringrazio per seguirmi anche qui. WordPress, al contrario di quanto si pensi, ha bisogno anche di front-end developers, persone cioè che sviluppino i temi grafici. Un sito è pertanto fattibile su motore WordPress per gestire i contenuti, ma poi l’aspetto esteriore (front-end, al contrario di back-end, che produce plugin in questo caso o cms proprietari) lo fa lo sviluppatore. Il webdesigner si occupa anche dell’aspetto progettuale di tutto ciò, quindi anche dell’aspetto grafico, di usabilità, etc. Sono a tutti gli effetti una webdesigner, esperta in WordPress. E sì, html, css, js e un pizzico di php è necessario (anche se i temi di WordPress usano più che altro dei “tag”, che si basano però sul php). Spero di essere stata esaustiva 😀 Se nel libro non era chiaro dimmelo che lo aggiorno!!

      • Edoardo

        4 aprile 2017, 17:14

        No no sei stata chiarissima e pure il libro lo è.
        Si tratta di dubbi miei che sono nuovo del mestiere a capire le figure in gioco oggi, nel 2017.
        Ma il PHP è obbligatorio conoscerlo anche se NON si vuole usare WordPress?
        Ed è vero che volendo si può usare WordPress in modo visuale? Anche senza Visual Composer?
        Grazie
        P.S.: Sarebbe bello un tuo prossimo ebook sulla creazione di un piccolo sito web responsive, dalla A alla Z, (schizzo, psd, coding completo, hosting)

      • Lauryn

        4 aprile 2017, 18:11

        non è assolutamente obbligatorio, ma non sarai front developer ma solo grafico web o webdesigner. in realtà c’è: http://www.html.it/guide/web-design-di-base-consigli-e-best-practices/

  • Edoardo

    5 aprile 2017, 10:00

    Ciao Luryn, scusa se disturbo anche oggi, ma in una risposta di ieri hai scritto “i temi di WordPress usano più che altro dei “tag”, che si basano però sul php”.
    mi sono venute in mente due curiosità…
    Siginfica che non si tratta proprio di php?
    Esiste una bella guida in rete per la creazione da zero di un tema wordpress?
    Grazie

    • Lauryn

      5 aprile 2017, 10:18

      Ciao Edoardo, esatto, non è php, lo ricorda solo un po’ per la sintassi, ma per fare un tema non è necessario conoscere il php. Anche a questo fine ho fatto una guida, un inizio, che è possibile ricevere in mail iscrivendosi alla newsletter. Fammi sapere se ti arriva, se no te la mando direttamente.
      Grazie a te!

Lasciaci un tuo commento!