Usare il builder avanzato di layout

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