.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
.mxw500
Come la classe “mxw” ma la larghezza è 500px.
.mxw300
Come la classe “mxw” ma la larghezza è 300px.
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
titolo h2
paragrafo testo
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
Senza le accortezze elencate sopra, questo testo andrebbe a finire di fianco all’immagine (alla sua destra) su dispositivi desktop.
Come nominare i file
Mettiamo “2dispari” davanti alle immagini che vogliamo marcare come nostre, una sorta di copyright, composizione create da noi
Le immagini degli indici con formato 16:9 possono essere usate come immagine in evidenza del servizio singolo.
abbigliamento_personalizzato-1920×1080-A
abbigliamento_personalizzato-1920×1080-B
magliette_personalizzate-1920×1080-A
magliette_personalizzate-1920×1080-B
magliette_personalizzate-1920×1080-C
magliette_personalizzate-1350×1080-A
magliette_personalizzate-1080×1350-A
magliette_personalizzate-1080×1080-A
magliette_personalizzate-1080×1080-B
magliette_personalizzate-esempi-1080×1350-01
magliette_personalizzate-esempi-1080×1350-02
magliette_personalizzate-esempi-1080×1350-03
magliette_personalizzate-contenuti-nome_contenuto
pagine-perche-copertina–1920×1080–A
pagine-perche-contenuti–nome_contenuto
pagine-perche-contenuti–nome_contenuto
pagine-home-uova–1920×1080–A
pagine-home-uova–1080×1920–A
portfolio–siti–intermedia–01
portfolio–siti–intermedia–02
portfolio–branding–mamurranum–01
blog–perche_cotone_organico–copertina
blog–tshirt_sostenibilita–copertina
blog–tshirt_sostenibilita–contenuti–nome_contenuto
blog–tshirt_sostenibilita–contenuti–nome_contenuto
blog–tshirt_sostenibilita–contenuti–nome_contenuto
blog–tshirt_sostenibilita–contenuti–nome_contenuto–01
blog–tshirt_sostenibilita–contenuti–nome_contenuto–02
2dispari-ricorrenti-icona-maps
2dispari-ricorrenti-firma-email-icona-whatsapp
font-sito-NeueHaasDisplay-Bold.ttf
font-personalizzazioni-angelface.ttf
recensioni-clienti-andrea-colantoni.png
recensioni-clienti-martina-desantis.png
download-agile-manifesto.pdf
download-eisenhower-matrix-quadrata.png
Dimensioni esportazione
Proporzioni 16:9
1920×1080
Proporzioni 5:4
1350×1080
Proporzioni 3:2
600×400
Proporzioni 1:1
1920×1920