Bloc Collection
Marche à suivre
- Créer une nouvelle Row(Layout > Row) et éditer la Row
- Appearance
- Full-Width
- Advanced
- CSS Classes: bloc-collection (+ classe de la couleur du background. Pour l'exemple ici en noir = bg-secondary)
- Appearance
- Ajouter 1 column (3/12)
- Apppearance
- Full Height
- Advanced
- CSS Classes: bloc-collection-info
- Si le fond choisi est foncé, ajouter la classe whiteégalement
- CSS Classes: bloc-collection-info
- Ajouter un block texte
- Titre Heading 2
- Texte régulier
- Ajouter un bouton
- Choisir style selon l'arrière-plan (ici Secondary-Alt)
- Apppearance
- Ajouter 2e colonne (9/12)
- Apppearance
- Full Height
- Advanced
- CSS Classes: bloc-collection-slider-container
- Ajouter un carroussel (Media>slider)
- Slider Setting
- Slides to Show - Desktop = 4
- Show Arrows : Yes
- Show Dots : No
- Advanced
- CSS Classes : bloc-collection-slider
- Slider Setting
- Apppearance
- Pour chaque slide du carrousel
- Content
- Message Text
- Placer l'image en premier (s'assurer que l'image sont dans une balise Paragraphe (P >> IMG)
- Ajouter un paragraphe avec le Nom de la collection et appliquer en gras (bold)
- Ajouter un paragraphe pour le Nom de l'auteur
- Link
- Les 4 types de liens peuvent être utiliser, mais pour le cas de collection, choisir Category et sélectionner la catégorie créé pour la collection.
- Message Text
- Advanced
- CSS Classes : bg-grey-light
- Margins and Padding : 15 droite et gauche
- Content
Collections
Leader québécois incontesté en matière d'ouvrages parascolaires, Les Éditions Caractère présentent une quarantaine de collections dans ce créneau, dont les très populaires « Incollables » et « Toute mon année ».
Nom de la collection avec une texte beaucoup plus long
Nom de l'auteur, nom de l'auteur 2
Nom de la collection
Nom de l'auteur
Nom de la collection
Nom de l'auteur
Nom de la collection
Nom de l'auteur
Nom de la collection
Nom de l'auteur
Références générales
Couleurs d'arrière-plan
À appliquer sur une Row ou une Column
Caractere-Primary
class = bg-primary
(hexa : #c5150c)
Caractere-Secondary
class = bg-secondary
(hexa : #000000)
Caractere-Secondary-Dark
class = bg-secondary-dark
(hexa : #980700)
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
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
Link Play
Link File Text
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