Questa pagina illustra l’elenco dei blocchi e dei componenti che consentono di comporre le pagine.
Le pagine foglia del sito sono totalmente personalizzabili utilizzando i blocchi secondo ordine personalizzato.
Inoltre ogni blocco è personalizzabile, rendendo più facile variare l’aspetto di ogni blocco, mantenendo il coordinamento estetuci della pagina.

I blocchi, descritti più avanti in questa guida, possono contenere testo o immagini.
Le immagini, quando presenti, sono rappresentate da un componente speciale che permette di definire il comportamento della singola immagine.
In particolare:

• Il contenuto grafico, ovvero l’immagine rappresentata
• I testi sovraimpressi
• Le azioni: click e hovering
• I colori applicati
• L’appartenenza alla galleria della pagina

L’utilizzo di un unico componente utilizzato in modo trasversale in tutto il sito permette di modulare comportamenti differenti, mantenendo graficamente coordinata la rappresentazione delle immagini nonostante le differenze di configurazione.

Questo esempio rappresenta due esempi tipo di immagine con diverse configurazioni.

La prima immagine:

• Un testo fisso;
• l’azione di hover svela un secondo testo e un colore sovrapposto.
• Il click attiva un link a una pagina interna del sito.

La seconda immagine:

• l’azione di hover svela quattro testi differenti e una nuova immagine.
• Il click attiva la galleria che rappresenta tutte le immagini indicate come appartenenti alla galleria della pagina corrente.

Questo blocco consente l’inserimento di uno spazio che separa un blocco dal successivo.
Ogni spazio può essere configurato modificando l’altezza.
Per questo sito si è scelto di adottare spazi multipli di 80.

Questo blocco consente l’inserimento di uno slider. Ogni slide può essere un’immagine o un embed Vimeo.

Nota su immagine
Nel caso in cui la slide sia un’immagine, vigono le regole specificate per il componente [immagine].

Nota su embed
Estrarre da Vimeo lo snippet di codice con questa sintassi:
<iframe src="https://player.vimeo.com/video/82196042" width="640" height="360" allow="autoplay; fullscreen" allowfullscreen></iframe>

Il blocco “Text 1” consente l’inserimento di un testo grande e centrato.

Questo, compreso il titolo, è un blocco “Text 2”.
Consente l’inserimento di un’etichetta, di un titolo, di un testo esteso (questo) e di un’immagine.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce scelerisque semper nulla a hendrerit. Fusce sagittis viverra dolor, in euismod mi egestas non. Fusce ut magna in ex dapibus placerat ut sit amet nunc. Mauris auctor in nunc sed auctor. Maecenas placerat ac mauris porta cursus. Fusce sagittis, tortor vel hendrerit varius, nisl sapien imperdiet justo, id fermentum erat odio a sapien. Curabitur sollicitudin eget neque vel iaculis. Mauris mauris est, interdum vitae consequat vel, cursus luctus est. Ut velit enim, vehicula quis pharetra in, auctor imperdiet ante. Morbi malesuada tempus venenatis. Nulla facilisi.

Questo blocco consente l’inserimento di un grande testo che sborda oltre i limiti del viewport.

Questo blocco consente l’inserimento di 3 componenti immagine secondo uno scherma predefinito.
La composizione di più pattern in sequenza, unito a differenti configurazioni dei componenti immagine, consente di realizzare pagine di immagini senza apparente ordine tipico delle gallerie di immagini.

Questo blocco definisce la prima fascia di una scheda famiglia prodotto.
E’ costituita da un componente immagine, da un titolo, da un testo e da due pulsanti.

Questo blocco consente l’inserimento di un’immagine con effetto parallasse.

Questo blocco consente l’inserimento di una pagina con un componente immagine posizionato al centro.
Il colore dello sfondo è personalizzabile.

Questo blocco consente l’inserimento di un’immagine a piena larghezza e altezza.

Questo blocco consente l’inserimento di un’intestazione.
E’ possibile inserire un’etichetta e un titolo, potendo configurare:

• Allineamento del testo;
• se il titolo deve apparire prima o dopo.

Questo blocco consente l’inserimento di un’intestazione (variante).
E’ possibile inserire un’etichetta e un titolo, potendo configurare:

• Allineamento del testo;
• se il titolo deve apparire prima o dopo.

Questo blocco stampa uno dei menù creati all’interno del sito.
E’ possibile creare nuovi menù utilizzando le funzioni di WordPress: “Aspetto” -> “Menù”.

Questo blocco consente l’inserimento di una lista di link.
La configurazione consente di impostare:

• Una intestazione, composto da un’etichetta e da un titolo;
• ogni quanti elementi dividere la lista (consente la realizzazione di più colonne a seconda della risoluzione);
• un elenco di link, costituito da un’etichetta, da un url e da una descrizione. Per ogni link è possibile stabilire se sarà aperto nella finestra corrente o in una nuova finestra.

Il blocco galleria consente l’inserimento di più componenti immagine.

Questo blocco consente l’inserimento di un modulo di contatto.

Questo blocco consente l’inserimento di una lista di bottoni-immagine.
Per ogni bottone è possibile inserire un’immagine, un testo alternativo e l’url.

Esempio:
Lancia questo link!

Metodo con HTML:
Tutti i link <a href…> che contengono l’attributo data-lightbox-trigger diventano automaticamente trigger per avviare la galleria di pagina.
Esempio (da inserire nella modalità “TEXT” degli editor.

<a href="#" data-lightbox-trigger>Lancia questo link!</a> 

Metodo con WordPress Shortcode:
Wordpress consente la creazione di codici utilizzabili sia nella modalità “TEXT” che nella modalità “VISUAL” degli editor di testo.
Esempio:

[lightbox-trigger label="Lancia la galleria di pagina"]