Guide de styles - Création de blocs

Création d'un nouveau bloc

Dans d'admin de Magento

1. Content > Elements > Blocks
2. Cliquer sur le bouton Add New Block
3. Sur la page New Block
   • Currently Active
     • Enable Page : Yes (pour avoir une page active)
     • Block Title: Entrer le Titre du block (choisir un titre clair pour identifier le block)
     • Identifier : Entrer un identifiant unique pour le bloc
     • Store View : Choisir le Store sur laquelle la page devra s'afficher 

Éditer un bloc existant

Dans d'admin de Magento

1. Content > Elements > Blocks
2. Trouver le block à éditer
3. Dans la colonne Action, faire Select puis Edit

Marche à suivre

1. Créer une nouvelle Row (Voir Bloc de contenu - Row)
   • Appearance
     • Full Width
     • Minimum Height : 500px (mobile : laisser vide)
     • Vertical Alignment : Center
   • Advanced 
     • CSS Classes : bg-light-gradient reverse-col-mobile 
     • Margins and Padding : Padding Top and Bottom (65)
2. Ajouter 2 colonnes requises (4 et 8 colonnes)
3. Colonne 1
   • Ajouter un bloc Text (Elements > Text)
   • Ajouter le contenu au bloc
   • Appliquer format H2 au titre et mettre en italique (car I+ Interactif doit être en italique)
   • Pour le style de liste avec crochet, sélectionner le bloc de liste et appliquer le format List Check Style
   • Pour le bouton, appliquer le format pagebuilder-button-primary afin d'avoir un bouton permettant de mettre 
4.  Colonne 2
   • Ajouter un bloc Image (Media > Image)
     • Image : Sélectionner l'image Image_i__Intercatif.png
     • Mobile Image : Sélectionner l'image Image_i__Intercatif_Mobile.png
   • Search Engine Optimization
     • Alternative Text : I+ Interactif
   • Advanced
     • Margins and Padding : Padding Top and Bottom (25)

Marche à suivre

1. Créer une nouvelle Row (Voir Bloc de contenu - Row)
   • Appearance
     • Full Bleed
   • Advanced 
     • CSS Classes : bg-primary
2. Ajouter 4 colonnes requises (5-1-5-1)
3. Colonne 1 (éditer)
   • Appearance
     • Full Height
     • Minimum Height : 400px
   • Background
     • Background Image : ImageEnseignate_RessourcesPedagogique.jpg
     • Background Position : Top Center
4.  Colonne 2 et 4
   • Laisser vide 
5. Colonne 3 (éditer)
   • Appearance 
     • Full Height
   • Advanced
     • CSS Classes : white
     • Margins and Padding : padding 65 48 65 48
6. Ajouter un bloc Heading à la colonne 3 (Elements > Heading) et éditer le bloc
   • Appliquer format H2
7. Ajout un bloc text à la colonne 3 (Elements > Text) et éditer le bloc
   • Pour le style de liste avec crochet, sélectionner le bloc de liste et appliquer le format List Check Style
8. Ajout un bloc Boutons (Element > Buttons) et éditer le bouton ajouté (** Faire attention de ne pas éditer Buttons, le bouton uniquement
   • Content
     • Button Text : Explorer les ressources
     • Button Type : Primary Alt
     • Button Link : Insérer lien vers la page de destination