Guide de styles - Page d'accueil
Gestion des pages de contenu
Création d'une nouvelle page
Dans d'admin de Magento
- Content > Elements > Pages
- Cliquer sur le bouton Add New Page
- Sur la page New Page
- Currently Active
- Enable Page : Yes (pour avoir une page active)
- Page Title : Entrer le Titre de la page
- Content
- Content Heading : Entrer le titre pour une page CMS standard, si titre à personnaliser dans le Page Builder, laisser cette section vide
- Pour bâtir la page, cliquer sur Edit with Page Builder
- Search Engine Optimization
- URL Key : entrer l'url désiré pour cette page
- Pages in Websites
- Choisir le Store sur laquelle la page devra s'afficher
- Design :
- Layout : 1 column
- Currently Active
Éditer une page existante
Dans d'admin de Magento
- Content > Elements > Pages
- Trouver la page à éditer
- Dans la colonne Action, faire Select puis Edit
Affichage de la bannière
Marche à suivre
- Créer une nouvelle Row (Layout > Row) et éditer la Row
- Appearance
- Full Width
- Minimum Height : 725px (mobile : 325px)
- Vertical Alignment : Top Center
- Background
- Background Image : voir Formats images
- Background Mobile Image : voir Formats images
- Background Size : Cover
- Background Position : Center
- Advanced
- CSS Classes : page-title homepage-title
- Appearance
- Ajouter un bloc Text à la Row (Elements > Text) et éditer le bloc
- Ajouter du texte et lui appliquer le format Header 1
- Mettre le titre sur 2 lignes et appliquer la couleur blanche à la première ligne de texte
Formats images
Background Desktop : 3840px x 1450px
Background Mobile Image : 1800px x 800px
Spécifications
Filtre noir sur l'image (à même l'image, voir gabarit)
Gabarit de référence
Chenelière
Éducation
Carrousels catégories
Marche à suivre
- Créer une nouvelle Row (Layout > Row) et éditer la Row
- Appearance
- Contained
- Advanced
- CSS Classes : categories-slider
- Margins and Padding : Margin-bottom à 65
- Appearance
- Ajouter bloc Heading à la Row (Elements > Heading) et éditer le bloc
- Appliquer format H2
- Ajouter un bloc Slider à la Row (Media > Slider) et éditer le bloc
- Slider Settings
- Show Arrows : actif
- Show Dots : inactif
- Slides to Show - Desktop : Inscrire 3 ou 4
- Save
- Éditer Slide 1
- Background
- Background Image : voir Formats images
- Background Mobile Image : voir Formats images
- Content
- Link : Insérer lien vers la page de destination
- Show Button : Always
- Button Text : Texte du button (s'assurer d'avoir un texte unique pour respecter les normes d'accessibilitées)
- Button Type : Link
- Background
- Répéter pour les Slides 2-3-4
- Slider Settings
Formats images
Carrousel 4 images
Background Desktop : 660px x 600px
Background Mobile Image : laisser vide, même image qu'en desktop
Carrousel 3 images
Background Desktop : 900px x 600px
Background Mobile Image : 660px x 600px
Spécifications
En desktop, les bannières ont la même hauteur pour tous les types de contenus. Le gabarit comprend de référence comprend l'utilisation du filet pointillé et d'une couleur de fond qui se partage entre les images d'une même rangée.
Gabarit de référence
Colonnes catégories
Marche à suivre
- Créer une nouvelle Row (Layout > Row) et éditer la Row
- Appearance
- Contained
- Advanced
- Margins and Padding : Margin-bottom à 65
- Appearance
- Ajouter les colonnes requises (1 ou 3)
puis pour chaque colonnes, répéter les étapes 3 à 6 - Éditer la colonne
- Advanced
- CSS Classes : category-column
- Advanced
- Ajouter un bloc Heading à la Row (Layout > Text) et éditer le bloc
- Appliquer format H2
- Ajouter un bloc Image (Media > Image) et éditer le bloc
-
- Image : voir Formats images
- Mobile Image : voir Formats images
- Link : Insérer lien vers la page de destination
-
- Ajouter un block Boutons (Elements > Buttons) et éditer le bouton ajouté (** Faire attention de ne pas éditer Buttons le bouton uniquement
- Content
- Button Text : Texte du button (s'assurer d'avoir un texte unique pour respecter les normes d'accessibilitées)
- Button Type : Link
- Button Link : Insérer lien vers la page de destination
- Advanced
- CSS Classes : arrow-link
- Content
Formats images
1 colonne
Background Desktop : 2820px x 600px
Background Mobile Image : 900px x 600px
2 colonnes TBD
3 colonnes
Background Desktop : 900px x 600px
Background Mobile Image : laisser vide, même image qu'en desktop
Spécifications
Les colonnes séparées sont crées avec le bleu de Chenelière.
Gabarit de référence
Références générales
Couleurs d'arrière-plan
À appliquer sur une Row ou une Column
Cheneliere-Primary
class = bg-primary
(hexa : #1d63ad)
Cheneliere-Primary-Dark
class = bg-secondary
(hexa : #004379)
Grey-Light
class = bg-grey-light
(hexa : #f4f5f9)
Grey-Dark
class = bg-grey-dark
(hexa : #36404c)
Dégradé Grey-Light
class = bg-light-gradient
Couleur de texte
À appliquer sur une Row, une Column ou un bloc Text
Texte blanc
class = white
Alignement carrousel
À appliquer sur une Carrousel (slider)
- Classe : v-center
Style liste avec crochets
Appliquer le format List Check Style à une liste UL
Exemple de liste
- Élément 1
- Élément 2
- Élément 3
Exemple de liste
- Élément 1
- Élément 2
- Élément 3
Boutons avec icône
Bouton Play
Exemple - Button type : link
Appearearance : inline
Appearearance : stack
Obligatoire : pour avoir le bon affichage des boutons, il est important que les boutons contiennent un lien
Styles de liens
Pour éléments qui ne doivent pas avoir de balises <a> soulignées : ajouter la classe links-no-underline
Pour éléments dont les balises <a> qui doivent être soulignées seulement lors du passage de la souris (hover): ajouter la classe links-reverse
Exemples :
Lien sans soulignage (class = links-no-underline)
Lien avec soulignage inversé (class = links-reverse)
Liste des icônes
Ancres
Les liens ancrés remontant le contenu ancré au haut de la page, le contenu est partiellement caché par le menu sticky. Pour contrer ce comportement, une classe a été créé. Donc, sur l'élément ancré (id=""), ajouter la classe suivante (class="id-target")
Mobile
Inverser l'ordre d'affichage des colonnes en mobile
Appliquer la classe reverse-col-mobile à la Row
Élément 2 en mobile
Élément 1 en mobile
Sur mobile, aligner à gauche du contenu centré ou aligné à droite en desktop.
Appliquer la classe mobile-left à l'élément qui a un autre alignement dans le page builder
Titre à droite
Affichage uniquement en desktop ou mobile
*Attention à l'utilisation. Nous cherchons à avoir la même information sur tous les écrans. Ces classes pourraient principalement être utiliser pour des images d'accompagnements par exemple.
Pour affichage uniquement sur Desktop, appliquer la classe pagebuilder-mobile-hidden
Pour affichage uniquement sur Mobile, appliquer la classe pagebuilder-mobile-only