Entry-content: Testo redazionale link strong Corsivo
titolo h1 Entry content
titolo h2 Entry content
titolo h3 Entry content
- item
- item
Hero
Requisiti
- L'hero può essere usato anche per comunicazioni di promo o notizie importanti:
se non si carica il logo viene visualizzata la scritta associata come titoletto inziale prima dell'h2 - Logo: ingombro fisso. 100% height e width auto:
L'ingombro è differente nei diversi hero di minisito (da 53px altezza a 95). E' stata per questo assegnata una max-width di 100px per il logo. - Titolo h2
- Testo: rich editor con elenco stili prestabiliti:
sono gestiti i tag principali - Possibilità di decidere il colore del font. Si potrebbero inserire colori diversi all'interno
dello
stesso
modulo di testo.
Vedere commenti nel codice per i possibili punti di inserimento di classi colore, stili in linea e blocchi di stile embed per la personalizzazione dei colori - Immagine di sfondo: unica con bollo promozione all'interno dell'immagine. Gestione due formati
immagine
(desktop / mobile).
Su richiesta, sono stati inseriti anche i formati 2x per mobile e desktop - L'immagine avrà un link che sarà deciso dall'editor.
Il link non può essere inserito sull'immagine, viene inserito nel foot dell'hero, dove si trova anche il bottone (quando c'è) - Bottone in posizione fissa. Testo base: ORDINA SUBITO modificabile dall'editor. Può non esserci
- Colori bottone predefiniti (giallo e nero), ma modificabili da editor
vedere commenti per modalità di assegnazione colori custom
Specifiche aggiuntive minisito
- Immagine unica, stesso taglio della home page.
Nella grafica le immagini del minisito sono sempre più alte i quelle usate nella home, si è utilizzata un'altra classe (hero-ms) per gestire questa e altre differenze - Testo: variante dimensione o 1/2 o 3/4 della larghezza totale.
È stato rivisto il codice per:
- Gestione Link:
eliminato link attorno all'immagine,aggiunto link nel block footer per definire il link su tutto il blocco (oltre a link opzionale su bottone cta) - Revisione misure logo
- Inserimento blocco style oltre a classi colore e stili inline: necessario soprattutto per customizzazione link in hero minisito
- Gestione testo a 50% o a 75% della larghezza totale:
si possono aggiungere al div hero-content__body le classi bs: col-md-6 o col-md-9 - Gestione immagine retina nell'immagine principale modificato il tab picture
Hero home page. Class: hero hero-main
Hero Testata minisito. Class: hero hero-ms
La navigazione tra sezioni va stilizzata dal blocco stile come segue:
// colore pallino #id-hero
.nav-link::after {background-color:yellow;}
// hover pallino
#id-hero .nav-link:hover::after, #id-hero .nav-link:focus-within::after {background-color:red;}
// testo link
#id-hero .nav-link .text {background-color: black; color: white;}
Hero Offerte
Soluzione da valutare e da definire bene per il mobileQuesto tipo di hero va sempre inserito in un div container, all'interno di una sezione o di un
blocco
Per offerte con immagine di background unica: mancano specifiche mobile:
in questo caso è stata lasciata la dimensione immagine dell'hero in home per il mobile
Card
Product Card
requisiti- Link anche su immagine → pagina di prodotto
-
Link bottone → lo sceglie editor, se non viene inserito va nella
pagina di prodotto.
Il bottone potrà cambiare colore di sfondo e scritta. customizzazione colore bottone tramite classi colore o style inline:
style="color:valore;background-color:valore;" - Il testo potrà cambiare di stile, colore.
il titolo può essere nascosto aggiungendo la classe .visually-hidden
customizzazione colore bottone tramite classi colore o style inline:
style="color:valore;font:... etc"
È stato rivisto il codice per:
- Gestione Link aggiunto link nel card-body prima dell'immagine per definire il link su tutto il blocco (oltre a link opzionale su bottone cta)
100%
70%
Card text only (comunicazioni slider home e pagina comunicazioni)
Titolo
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Card Contatti
Titolo
-
Indirizzo
-
telefono
Note costo telefonata
- esempio-mail@hachette-fascicoli.it
Blocchi
testo + Immagine - vedere pagina blocco grid per il blocco revisionato con nuova classe
testo + Immagine - 50 / 50
Titolo
Entry-content: Testo redazionale link strong Corsivo
titolo h1 Entry content
titolo h2 Entry content
titolo h3 Entry content
- item
- item
testo + video - 50 / 50
Titolo
Entry-content: Testo redazionale link strong Corsivo
titolo h1 Entry content
titolo h2 Entry content
titolo h3 Entry content
- item
- item
testo + immagine - 40 / 60 ed esempio classe colore
Titolo
Entry-content: Testo redazionale link strong Corsivo
titolo h1 Entry content
titolo h2 Entry content
titolo h3 Entry content
- item
- item
testo + video - 40 / 60
Titolo
Entry-content: Testo redazionale link strong Corsivo
titolo h1 Entry content
titolo h2 Entry content
titolo h3 Entry content
- item
- item
Bottoni
.button
+ .button--small
Lorem ipsum
Lorem ipsum
+ .button--round
i Lorem ipsum
i Lorem ipsum
+ .button--light
Lorem ipsum
Lorem ipsum
+ .button--dark
Lorem ipsum
Lorem ipsum
+ .colors--light
Lorem ipsum
Lorem ipsum
.button-square
Se il css non specifica altrimenti bordo e testo prendono colore del parent