Création d'un bloc de contenu pour la page chapitre

Dans d'admin de Magento

1. Content > Elements > Blocks
2. Cliquer sur le bouton Add New Block
3. Sur la page New Page
   • Currently Active
     • Enable Block : Yes (pour avoir une page active)
     • Block Title : Entrer le Titre de la page (titre propre à la catégorie (exemple: Cat- Scolaire Québec - Secondaire - Fr)
     • Identifier : Identifiant unique représentant le block (cat-scolaire-quebec-secondaire-fr)

Associé votre bloc de page chapitre à sa catégorie

Dans d'admin de Magento

1. Catalog > Categories
2. Sélectionner la catégorie où afficher la page chapitre
3. Dans la section Display Setting > Display Mode, sélectionner Static block only
4. Dans la section  Content > Add CMS Block, sélectionner le bloc associé à la catégorie
5. Dans la section Design > Layout, sélectioner TC - Category Landing Page

Marche à suivre

1. Créer une nouvelle Row (Layout > Row) et éditer la Row
   • Appearance
     • Contained
     • Minimum Height : 500px (mobile : 284px)
     • Vertical Alignment : Top
   • Background
     • Background Image : voir Formats images
     • Background Mobile Image : voir Formats images
     • Background Size : Cover
     • Background Position : Center
   • Advanced
     • CSS Classes :page-title landing-title
       et selon le titre:
       • one-line
       • two-lines
       • three-lines
2. 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 1 à 3 lignes (selon la catégorie) et appliquer la couleur blanche à toute les lignes sauf la dernière si plus d'une ligne 

Marche à suivre

1. Créer une nouvelle Row (Layout > Row) et éditer la Row
   • Appearance
     • Contained
   • Advanced
     • Margins and Padding : Margin-bottom à 65
2. Ajouter un bloc Category Selector à la Row (Add Content > Category Selector) et éditer le bloc
   • Selector title : Entrer un texte qui s'affichera sur le bouton de sélection
   • Category ID : Entrer les numéros de ID des catégories à afficher sur le sélecteur. Voir Catalog -> Categories. Le numéro de ID est entre parenthèse. 
   •  Selector id : Par défault, ce sera category-list, mais si vous placez plus d'un sélecteur sur une même page, vous assurer d'avoir un idenfiant unique par sélecteur.

Marche à suivre

1. Créer une nouvelle Row (Layout > Row) et éditer la Row
   • Appearance
     • Contained
   • Advanced
     • Margins and Padding : Margin-bottom à 65
2. Ajouter un bloc Slider à la Row (Media > Slider) et éditer le bloc
   • Minimum Height : vide
   • Slider Settings
     • Show Arrows : actif
     • Show Dots : actif
     • Slides to Show - Desktop : Laisser à 1
   • Advanced
     • CSS Classes : pagebuilder-slider landing-slider
   • Save
3. Éditer Slide 1
   • Appearance : Collage Left
     • Minimum Height : 550px (mobile : vide)
   • Background
     • Background Color : Appliquer le couleur du bas de la background image
     • Background Image : voir Formats images
     • Background Mobile Image : voir Formats images
   • Content
     • Message Text : Insérer le contenu
     • Show Button : Always (si un seul bouton), sinon appliquer les boutons dans Message Text
     • Button Text : Texte du button (s'assurer d'avoir un texte unique pour respecter les normes d'accessibilitées)
     •  Button Type : Link
4. Répéter pour les autres les Slides

Marche à suivre

1. Créer une nouvelle Row (Layout > Row) et éditer la Row
   • Appearance
     • Contained
   • Advanced
     • Margins and Padding : Margin-bottom à 65
2. Ajouter les colonnes requises (1 ou 3)
   puis pour chaque colonnes, répéter les étapes 3 à 6
3. Éditer la colonne 
   • Advanced 
     • CSS Classes : category-column
4. 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
   • Search Engine Optimization 
     
     • Alternative Text : Texte décrivant l'image et le lien auquel l'image redirige
5. Ajouter un bloc Text à la Row (Layout > Text) et éditer le bloc
   • Entrer le texte pour le titre
     • Appliquer le format Heading 2
     • Puis appliquer également le format hn style 4
   • Entrer le texte de description
   • Appliquer une marge haut de 4px
6. 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

Marche à suivre pour ligne de webinaire

1. Ajouter 3 colonnes sous les colonnes de titre
   • Colonne 1 et 3
     • 1/12 chacune et vide
   • Colonne 2
     • 10/12
     • Ajouter un bloc Divider à la Row (Elements > Divider) et éditer le bloc
2. Ajouter 4 colonnes sous les colonnes de titre
   • Colonne 1 et 4
     • 1/12 chacune et vide
   • Colonne 2
     • 7/12
     • edAppearance : Centered
       •  Vertical Alignment : Top
     • Ajouter un bloc Text à la Row (Elements > Text) et éditer le bloc
       • Première ligne : appliquer format H5 et ajouter le lien du webinaire
       • Deuxième ligne : ajouter les informations de date avec le format paragraph  
   • Colonne 3
     • 3/12
     • Appearance : Centered
       •  Vertical Alignment : Top
     • Ajouter un bloc Buttons à la Row (Elements > Text) et éditer ce bloc
       • Apperance : Inline
       • Advanced
         • Alignment : Right
         • CSS Classes : mobile-left 
     • Éditer le bouton (Button)
       • Content
         • Button Text : M'abonner
         • Button Type : Primary Alt
         • aria-label : Pour l'accessibilité, les boutons génériques doivent avoir un aria-label avec un texte unique (exemple : M'abonner au Webinaire de formation : la plateforme I+ Interactif au primaire)
         • Button Link : Insérer lien vers la page de destination
3. Répéter les étapes 1 et 2 selon le nombre de webinaires