I temi avanzati per WordPress utilizzano quello che viene definito builder di layout, che non è altro che uno strumento visivo che aiuta a comporre le pagine web.

Quello dei builder visivi è stata una grande novità nella realizzazione di pagine web, che prima necessitavano di specifiche competenze tecniche per essere create, come ad esempio la conoscenza del codice html e dei css.

Oggi, grazie ai sempre più intuitivi e moderni builder visivi, la costruzione di un sito a livello professionale è appannaggio di tutti, basta solo prendere confidenza con lo strumento.

Di builder di layout ce ne sono diversi.

Alcuni sviluppatori di temi come la elegant themes realizzano il proprio plugin esclusivo, altri si affidano a quelli già realizzati che si possono acquistare anche separatamente come ad esempio il famoso visual composer.

Ma come viene costruita una pagina web?

Devi pensare ad una struttura gerarchica, in cui ci sono dei "contenitori principali£, che possono essere di una larghezza prestabilita, in pixel o in percentuale quindi anche larghi quanto l’intera pagina.

Ognuno di questi contenitori può essere personalizzato a piacimento, inserendo un colore o un’immagine di sfondo e con moltissime altre opzioni che impareremo a conoscere.

Questi contenitori possono essere a loro volta suddivisi in righe o in colonne a seconda del tipo di griglia che vuoi realizzare e ovviamente ognuno avrà le suo opzioni di personalizzazione.

All’interno di ognuno di questi elementi, quindi sia contenitori, righe o colonne, vengono inseriti i moduli del tema, che in sostanza ne compongono la grafica finale.

Ogni modulo infatti ha una serie di opzioni specifiche che dovrai modificare fino ad ottenere l’effetto desiderato.

Chiaramente i moduli sono moltissimi, ma ogni produttore ha i suoi e studia il proprio modo per generare la grafica finale che puoi sempre vedere nelle demo dei vari temi.

Ci sono moduli che si possono adattare a ogni tipologia di contenitore e ci sono moduli che sono stati pensati per essere utilizzati solo in determinate posizioni, come ad esempio il classico slider a tutta larghezza, che ovviamente, non potrebbe essere inserito in una piccola colonna.

Questa struttura gerarchica permette al sito di essere molto flessibile, perché per costruire una pagina ti basta aggiungere di volta in volta le sezioni una sotto l’altra ed organizzare al loro interno i contenuti.

Ogni sezione sarà indipendente e garantirà un design responsive, che fa in modo che ogni blocco si possa adattare a seconda del device con cui lo si sta osservando.

Quando progetti una pagina e ne suddividi gli elementi infatti, devi tenere conto di cosa accadrà anche per le visualizzazioni su tablet e mobile.

Le sezioni a tutta pagina resteranno tali, ma si adatteranno in proporzione allo schermo, mentre le colonne, slitteranno alla riga successiva partendo dall’ultima sulla destra.

Nella progettazione quindi prendi in considerazione che i primi contenuti che visualizzerà l’utente se guarda il sito da smartphone, saranno quelli delle colonne di sinistra.

Ci sono i builder visivi più classici che utilizzano il drag & drop per comporre la pagina e ci sono anche builder visivi che lavorano direttamente sul front end del sito.

Grazie a questi ultimi è possibile vedere il tuo sito prendere forma direttamente online.

Facciamo due piccoli esempi per capire la differenza tra le due tipologie.

Nel caso di Enfold abbiamo il costruttore classico nel backend.

I vari moduli, suddivisi per tipologia, sono tutti elencati nella parte superiore.

Abbiamo gli elementi di layout, gli elementi di contenuto, gli elementi Media e i plugin aggiuntivi.

Nel nostro caso abbiamo una pagina già realizzate e se la confrontiamo con la sua versione online possiamo capire meglio come viene costruita.

Abbiamo una sezione con una grossa immagine di sfondo, che racchiunde un titolo centrale e 3 colonne di diverso colore.

Il backend rispecchia la stessa struttura, c’è un modulo chiamato Sezione Colore che funge da contenitore, una colonna larga tutta la larghezza della pagina per il titolo e le tre colonne singole con il resto dei contenuti.

Per iniziare ad apportare le prime modifiche posso semplicemente cliccare sul modulo che ci interessa e controllare le opzioni disponibili.

Per questo modulo abbiamo infatti ulteriori opzioni che controllano il tag H1, H2 ect, se deve essere cliccabile, lo stile, la dimensione personalizzata, se ci deve essere un sottotitolo sopra e sotto e così via.

Per il momento limitiamoci a fare una piccola modifica di testo.

Poi abbiamo anche altre voci, come Spaziatura, in cui stabilisci il margine in pixel, i colori, e persino la modalità di visualizzazione sui vari device.

Questo tipo di logica vale per tutti i moduli che trovi all’interno del builder, quindi andiamo ad esmepio all’interno degli elementi di contenuto e proviamo ad inserire un’icona.

Per farlo basta trascinare il modulo dove desideri, la grandezza del modulo si adatta in relazione alla grandezza della riga o della colonna in cui sono inseriti.

Aprendo ogni modulo poi, puoi scendere nel dettaglio perchè avrà una serie di ozpioni che valgono solo per lui.

In questo caso scegli l’immagine dell’icona, il tipo di visualizzazione, la didascalia e così via.

A lato puoi vedere un anteprima del risultato finale.

Puoi facilmente capire quanto siano ampie le possibilità di personalizzazione e quanto si possa scendere nel dettaglio di ogni aspetto.

All’inizio dovrai prenderci un pò la mano, ma presto imparerai a controllare ogni modulo che ti serve.

Come detto all’inizio abbiamo anche altre versioni dei builder di layout e, come esempio di riferimento, scegliamo ancora una volta Divi, anche perchè è uno dei pochi temi ad avere la doppia opzione.

La versione backend segue più o meno la stessa logica di Enfold, ma cambia ovviamente l’aspetto grafico.

Anche qui abbiamo le sezioni per suddividere la pagina in righe e colonne e al loro interno possiamo inserire diversi moduli.

E anche qui per ogni modulo troviamo un’infinità di opzioni con cui personalizzare ogni dettaglio.

C’è la sezione dei contenuti base, in cui si inseriscono i testi, i link e gli altri contenuti che valgono per il modulo call to action, ma ovviamente ogni modulo ha i suoi.

C’è la sezione design che basta scorrere un attimo per capire quanto sia ricca di opzioni perchè controlliamo le ombre, abbiamo tutti i parametri per gestire il carattere tipografico di titoli e testi interni, abbiamo le opzioni per il pulsante, gli stili, i filtri simili a quelli di photoshop da applicare e tutta la sezione per le animazioni.

Anche in Divi c’è poi una tab dedicata alle impostaizoni avanzate.

Divi però offre anche il builder in versione front end, che è decisamente più intuitiva e veloce da utilizzare.

Le funzionalità sono le stesse rispetto alla versione backend, ma lavorando direttamente sul front end puoi vedere immediatamente che aspetto avrà la tua pagina e intervenire con modifiche in tempo reale.

Passando con il mouse sopra le varie sezioni si evidenzia quella che stai controllando e cliccando sull’ingranaggio si apre un comodo pop up con le funzioni ordinate una sotto l’altra.

Modificando i parametri modifichi in tempo reale il tuo sito web.

La cosa migliore da fare è analizzare tutti i moduli che offre il tema che scegli, provare ad inserirli tutti in una pagina di test, valutare le opzioni che puoi controllare e poi decidere quali utilizzare per il tuo progetto.

Ci vediamo nel prossimo video

Ciao, hai una domanda su questa lezione?

Iscriviti al sito o effettua il login


  1. silvia
    silvia dice:

    spiego meglio: ho acquistato un tema su themeforest, una volta caricato per realizzare il sito, non ho trovato l’editor di enfold (….) pensi quello WPBakeryPageBuilder…. e quindi ho sbagliato io nell’acquisto perché non specificavano quale editor fosse utilizzato. a questo punto per lavorare cosa mi consigli fare?…. una cosa che non appare in modo chiaro ad esempio è la struttura del sito… mi piacerebbe poter vedere in modo schematico come è costruito per intervenire meglio…ora come ora l’unica cosa che mi mettono a disposizione è la Home con la modifica testi, inserimento logo, effetti vari…..ad eccezione delle slide…..e dei link. con Guteberg vedo queste cose e anche con editor classico….quindi secondo te devo acquistare anche l’editor WPBakery? mi trovo veramente spiazzata….se vuoi ti mando illink al tema cosi ti fai un’idea più chiara….
    grazie
    silvia

    Rispondi
    • Lorenzo
      Lorenzo dice:

      Ciao Silvia,
      attenzione l’editor di Enfold lo trovi se hai Enfold come tema. Enfold non è il nome di un plugin come il WP Bakery, ma è il nome del tema (che ha il builder proprietario).
      … Quindi NON hai comprato Enfold, ma un altro tema e questo tema utilizza WPBakery come Builder.
      Quello che devi fare è vedere cosa questo tema mette a disposizione. Ha delle demo? Si possono installare demo complete con tutte le pagine? O solo demo per singole pagine? Cosa c’è scritto nella documentazione del tema?
      Di temi ce ne sono migliaia e ognuno realizzato da un’azienda diversa, pertanto queste cose le devi cercare sulla sua pagina di vendita del prodotto che hai comprato e qualsiasi domanda la fai direttamente al loro supporto.
      Se è un tema buono come quelli che utilizziamo nei corsi e consigliamo nell’articolo Migliori Temi WordPress, allora non dovresti avere problemi.

      Buona giornata

  2. silvia
    silvia dice:

    buon giorno, ho acquistato un tema su enfold, ho seguito il vostro consiglio di installare la versione demo per personalizzarla, ovviamente insieme al tema erano compresi tutti i plugin necessari. ora però dovrei inserire le immagini dei miei lavori e non riesco a farlo, come editor usano WPBakeryBuilder, mi chiedo se per modificare i contenuti relativi alle slide non debba acquistare anche questo editor…..e’ possibile?
    Grazie Silvia

    Rispondi
    • Lorenzo
      Lorenzo dice:

      Ciao Silvia,
      aiutami a capire meglio. Hai acquistato un tema su Themeforest. Questo tema è Enfold.
      Enfold ha il suo builder di Layout compreso, ma tu hai installato WP Bakery Builder. Perché? Non utilizzarlo, ma usa quello di Enfold che è spettacolo.
      Enfold include anche lo slider come il Layer Slider WP, pertanto non devi comprarlo.

      Buona giornata

    • Lorenzo
      Lorenzo dice:

      Ciao Luisa,
      se c’è qualche aspetto di un video che non capisci, allora scrivi il tuo dubbio che lo chiariamo subito.
      Ma uno degli aspetti più importanti, se vuoi diventare autonoma in questo campo è la capacità di provare, fare test e cercare di arrivare a realizzare quello che si ha in mente.
      Se già prima di provare fai domande per ogni possibilità, questo non è il giusto processo e il supporto non è più tale.

      Detto questo, se quello che vuoi fare è duplicare delle pagine, allora c’è un plugin che si chiama Duplicate Post.

      Il mio consiglio però è quello di aprire e giocare con le diverse funzioni. Solo con la pratica e l’esperienza puoi arrivare a creare landing page che hai in mente nel giro di pochi minuti.

      Buona giornata

  3. Luisa
    Luisa dice:

    Ciao.. ho un’altra domanda: se voglio aggiungere pagine a una demo, come compaiono? le devo configurare io totalmente usando il builder e cercando di farle simili alle altre pagine del tema studiandole, oppure compare fatta gia simile a una del tema, o ancora devo duplicare una pagina del tema?
    grazie ancora e scusate le mille domande !!!

    Rispondi
    • Lorenzo
      Lorenzo dice:

      Ciao Luisa,
      per favore dimmi cosa hai provato a fare e dove ti sei bloccata.

      grazie

  4. Luisa
    Luisa dice:

    ciao! volevo sapere se, nel momento in cui sto iniziando il mio sito e ho ancora pochi contenuti, è consigliabile creare il layout facendo l’import di una demo oppure usando il layout builder e quindi facendo tutto da sola…
    grazie mille

    Rispondi
    • Luisa
      Luisa dice:

      Volevo anche sapere se una volta acquistato un tema è possibile accedere a tutte le demo e se fosse possibile ad esempio in un primo momento utilizzare solo il layout builder del tema per fare delle prove e poi scegliere eventualmente in seguito una demo eliminando le prove…Grazie ancora!

    • Lorenzo
      Lorenzo dice:

      Ciao Luisa,
      leggi la risposta alla tua domanda precedente che è molto simile.

      Se installi una demo di un sito che è simile a quello che avevi in mente, puoi utilizzare le pagine che ti interessano, cancellare le altre e crearne di nuove da sola.

      Alcuni temi danno la possibilità quando si importa una nuova demo di cancellare quella precedentemente installata, dipende dal tema. Ti consiglio però di fare quanto descritto nella riga precedente e nel caso di utilizzare un sito di test.

      Buona giornata

    • Lorenzo
      Lorenzo dice:

      Ciao Luisa,
      allora metti il sito in manutenzione, così il risultato lo puoi vedere solo tu e non gli utenti normali.

      Poi se sei alle prima armi non ce modi di iniziare se non importando una demo e curiosando fra le impostazioni che hanno usato per arrivare ad ottenere quello specifico trisultato.

      In linea di massima ho sempre un sito di test a portata di mano (soprattutto quando il sito è già online) in cui, per esempio, se mi piace una pagina o una sezione di una demo in particolare, allora me la installo per vedere come l’hanno costruita.

      Ti potrebbe interessare questo articolo: due installazioni di WordPress nello stesso hosting e stesso dominio.

      Ricorda anche e soprattutto per questo di metterlo in manutenzione.

      Buona giornata

  5. Alessandro
    Alessandro dice:

    Buongiorno e commplimenti per i video. Sto iniziando a seguire le lezioni da poco e sono chiari e ben fatti. Per quanto riguarda i temi avanzati. come faccio a scegliere il tema avanzato senza doverlo acquistare per forza? cioè è possibile testarli prima e vedere il progetto come viene e poi acquistare il tema bisogna scegliere prima e poi sviluppare il progetto?

    Grazie.
    Alessandro

    Rispondi
    • Lorenzo
      Lorenzo dice:

      Ciao Alessandro,
      no purtroppo non è possibile. Inoltre tieni presente che per padroneggiare un tema ci vuole un pochino di tempo.
      Quindi il mio consiglio è di guardare le demo dei diversi temi e vedere cosa ti piace di più.
      Inoltre nel corso puoi vedere le diverse funzioni che hanno e quindi farti un’idea anche lato amministratore.

      Buona giornata

  6. Monica
    Monica dice:

    Domanda… ma se il tema che ho acquistato su themeforest non contemplasse un Builder Avanzato di Layout e possibile istallarne uno sotto forma di plugin? Ho mi devo accontentare degli shortcode messi a disposizione dello sviluppatore del template per curare di più l’aspetto delle pagine?
    Grazie.

    Rispondi
    • Lorenzo
      Lorenzo dice:

      Ciao Monica,
      attualmente tutti i temi migliori hanno un builder per costruire le pagine. È lo strumento più importante in un tema, pertanto ti sconsiglio di prenderne uno che non ha questa caratteristica. È importante secondo avere un tema con il builder incorporato perché questo ci garantisce totale compatibilità e leggerezza, senza il caricamento di codice supplementare.

      Un tema può avere il builder proprietario (ovvero specifico per quel tema) oppure utilizzare un plugin, ma customizzandolo sul tema stesso (un esempio è il famoso plugin Visual Composer, che molti temi utilizzano).

      Buona giornata

  7. Domenico
    Domenico dice:

    Ciao, installando il tema Avada sto riscontrando delle difficoltà sull’attivazione dl tema stesso.
    Avendo già attivato il tema, se vado sulla sezione Avada > Theme Options o Aspetto > Theme Options non trovo le stesse cose del video.
    un aiuto grazie.

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Domenico,
      Ad ogni nuovo aggiornamento dei temi è probabile che vengano modificate delle impostazioni e dovrai continuamente essere pronto per cambiamenti di questo genere.

      Come spieghiamo nella lezione Gestire le opzioni del tema, ogni tema ha un suo pannello di controllo.

      Sono tutti molto simili, alcuni sono più semplici, altri sono più complessi, ma non è possibile analizzarli tutti singolarmente, perché di temi ce ne sono migliaia.

      Per quanto riguarda Avada ricordati che, dopo averlo attivato, la prima cosa da fare è installare anche tutti i plugin dedicati (alcuni come Fusion core e Fusion builder sono proprio necessari).

      Poi puoi iniziare a navigare nella sezione opzioni tra tutte le voci di menu.

      Avada è uno dei temi più completi in assoluto e vedrai che troverai moltissimi parametri da impostare in ogni voce, che consentono un livello di personalizzazione incredibile.

      Tutto quello che devi fare è prenderti un po di tempo per analizzarle tutte e provare a modificare le impostazioni di base, fino a che non otterrai il risultato che desideri.

      Se ti serve qualche informazione specifica su “come fare cosa” chiedi pure, vedrò di indirizzarti nel pannello giusto.

      Buona giornata

  8. Alberto
    Alberto dice:

    ciao, passare da un tema avanzato ad un altro cosa comporterebbe? un lavoraccio…?! Parlo di sito già avviato, grazie

    Rispondi
    • Lorenzo
      Lorenzo dice:

      Ciao Alberto,
      dipende da come hai creato il tuo sito e mi riferisco all’utilizzo che hai fatto del BUilder del Tema.
      Infatti il builder è diverso per ogni tema. Ha i suoi moduli, i suoi shortcode ecc… e sono tutti diversi.
      Quindi se hai fatto un sito con 5 o 6 pagine utilizzando il builder, mentre per il resto, per esempio gli articoli o i prodotti, non lo hai utilizzato, allora questo vuol dire che dovrai rifare le pagine con il nuovo builder, oltre ovviamente alle impostazioni generali del sito.

      Buona giornata

  9. Giuseppe
    Giuseppe dice:

    Buongiorno

    Uso il tema Enfold

    Volevo sapere se è possibile modificare – l’elemento di contenuto – (COMMENTI) in quanto mi escono 2 caselle con scritto:

    1)Avvertimi via email in caso di risposte al mio commento.
    2)Avvertimi via email alla pubblicazione di un nuovo articolo.

    Il problema è che sui dispositivi mobile si vede un pasticcio

    Ho notato che sui vostri articoli non c’è questa possibilità per questo vi chiedo se è possibile sapere come toglierli

    Grazie

    Giuseppe

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Giuseppe,
      Il modulo commenti di Enfold è fisso e si limita a riportare i commenti in un punto specifico della pagina.

      Sul nostro sito non lo vedi perché non lo utilizziamo.

      Per la sezione blog, la cosa migliore da fare è di inserire i contenuti dall’editor di default di WordPress (senza utilizzare quindi il builder visivo di enfold).

      Le impostazioni dei commenti, in questo modo le puoi gestire da Impostazioni > Discussione

      Un saluto

  10. roberto
    roberto dice:

    Salve ragazzi forse mi è sfuggito nei tanti corsi acquistati da voi..ho bisogno di inserire una messaggeria istantanea ad un sito web.. cioè ogni qualvolta una persona si connette al sito in basso sulla destra appare una finestra per chattare …mi serve per rispondere ad eventuali domande ..
    potete suggerirmi se c’è gia una spiegazione per inserire una chat nei corsi che ho gia acquistato oppure un consiglio su come fare?
    grazie in anticipo..

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Roberto,
      quella di cui hai bisogno non è una funzionalità che si trova nei temi avanzati.

      Per poter installare una chat devi affidarti ad un servizio esterno.
      Noi utilizziamo Live Chat e abbiamo scritto un articolo che parla proprio delle chat wordpress.

      Un saluto.

Non vuoi fare da solo?

Non vuoi fare da solo?

Per realizzare il tuo progetto o per risolvere qualsiasi problematica, rivolgiti al nostro Team di professionisti.

oppure chiamaci allo 02.9843140

You have Successfully Subscribed!

Pin It on Pinterest