.sx1

Contenitore che applica più spazio sopra. Serve soprattutto per il primo blocco di contenuti oppure per sezioni che vanno separate particolarmente dal resto. Se utilizzato come primo blocco contiene l’H1 e, se necessario, un piccolo paragrafo.

.sx2

Contenitore con spazio sopra intermedio. Serve per tutti i blocchi della pagina dal secondo in poi.

.sx3

Contenitore senza spazio sopra. Serve quando 2 blocchi hanno lo stesso colore di sfondo. Siccome ogni blocco ha una spazio sotto utilizziamo questo per non averne troppo tra i due.

.sx1, .sx2, .sx3

Lo spazio a sinistra è ampio per seguire il nostro ultimo design asimmetrico ma si riduce su dispositivi mobile.

.cln

colonna

Applica padding 0 per far attaccare le immagini al bordo, arrotonda i bordi del contenitore e delle immagini all’interno.

.cln-t

testi dentro

Contenitore che applica padding a tutti i testi interni alla colonna.

.cln > .cln-t

risultato

Immagine messa come contenuto (non come sfondo) così Google la legge. Testo sovrapposto perché l’immagine ha posizione assoluta. Se c’è l’immagini non applicare colore di sfondo perché si vede un piccolissimo bordino che sembra un difetto.

.brd2

Arrotonda i bordi delle immagini quando queste non sono in un contenitore con classe “.cln”

.sx3

Qui puoi vedere l’utilizzo della classe spiegata sopra, la .sx3, che va utilizzata quando due blocchi hanno lo stesso sfondo e non devono avere troppo spazio tra loro perché trattano lo stesso argomento oppure sotto-argomenti.

.mxw

Questa classe può essere applicata a contenitori o a testi direttamente. Serve a fissare una larghezza massima che aiuta la leggibilità. I nostro occhi non riescono ad andare a capo nella lettura se le righe di testo sono troppo larghe. Per questo applichiamo una valore che 

Casistiche particolari

Qui sotto verranno elencati tutti i casi particolari di layout, in modo che, se necessario, sarà possibile attingere con un semplice “copia e incolla”.

Caso 1: proporzioni differenti

In questo caso basta impostare la larghezza delle colonne con il valore desiderato. Poi va impostata l’altezza in pixel solo all’immagine che ha le proporzioni più verticali (nel caso qui sotto quella della shopper).

Così facendo le immagini non subiscono distorsioni tra dispositivi desktop e mobile.

titolo h2

paragrafo testo

shopper personlizzate

titolo h2

paragrafo testo

buste carta riciclata personalizzate

Caso 2: immagine sola con testo a capo

La larghezza va impostata solo al contenitore, NON all’immagine, e deve essere “larghezza piena” in pixel*.

*quanti pixel larga dipende dall’immagine che si inserisce, a discrezione del creativo.

In questo modo su dispositivi mobile si stringe proporzionalmente, mentre impostando larghezza o altezza all’immagine viene tagliata fuori l’eccedenza.

Inoltre il testo sottostante va inserito in un contenitore con impostata “larghezza piena”.

titolo H2

paragrafo testo

scatole personalizzate varie dimensioni ecommerce

Senza le accortezze elencate sopra, questo testo andrebbe a finire di fianco all’immagine (alla sua destra) su dispositivi desktop.