Carrousel principal
Marche à suivre
- Créer une nouvelle Row (Layout > Row) et éditer la Row
- Appearance
- Full bleed
- Advanced
- Margins and Padding : Margin-bottom à 65
- Appearance
- 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 full-width-books
- Save
- Éditer Slide 1
- Appearance:
- Poster
- Minimum Height : 550px
- Background
- Background Size:Cover
- Background Image : voir Formats images
- Background Mobile Image : voir Formats images
- Content
- Message Text: Insérer le contenu
- Image (couverture) : style Carrousel image left(être sur style Paragraph)
- Nom auteur : style Small Paragraph
- Titre : Hn style 2
- Description : paragraphe régulier
- Bouton : ajouter un paragraphe avec une lien et appliquer une style de bouton (ex: Button Primary Alt) ainsi que le style Button Smaller
- Message Text: Insérer le contenu
- Advanced
- CSS Classes : si arrière plan foncé, ajouter la classe white
- Appearance:
- Répéter pour les autres les Slides
Formats images
Background Desktop : 1900px x 550px
Background Mobile Image : 900px x 550px
Images fournis
- arriereplan_texture_blanche.png
- arriereplan_texture_bleu.jpg
- arriereplan_texture_noir.jpg
Spécifications
Utiliser des fonds texturés, mais léger qui peuvent bien se fondre vers une couleur dans le bas qui soit unie.
Formats images
Background Desktop : 1900px x 550px
Background Mobile Image : 900px x 550px
Images fournis
- arriereplan_texture_blanche.png
- arriereplan_texture_bleu.jpg
- arriereplan_texture_noir.jpg
Spécifications
Utiliser des fonds texturés, mais léger qui peuvent bien se fondre vers une couleur dans le bas qui soit unie.
Andrew Biel test
Traité d'anatomie palpatoire
Le Topoguide du corps indique clairement comment utiliser les mains pour naviguer à travers le corps et en découvrir les muscles, les os, les ligaments, les artères, les veines, les nerfs, etc.
Andrew Biel
Traité d'anatomie palpatoire
Le Topoguide du corps indique clairement comment utiliser les mains pour naviguer à travers le corps et en découvrir les muscles, les os, les ligaments, les artères, les veines, les nerfs, etc.
Andrew Biel
Traité d'anatomie palpatoire
Le Topoguide du corps indique clairement comment utiliser les mains pour naviguer à travers le corps et en découvrir les muscles, les os, les ligaments, les artères, les veines, les nerfs, etc.
Bloc promo (2 versions en exemple)
Marche à suivre
- Créer une nouvelle Row (Layout > Row) et éditer la Row
- Appearance
- Full Bleed
- Advanced
- CSS Classes :bloc-promo
- Margins and Padding : Margin-bottom à 65
- Appearance
- Ajouter 1 column (4/12)
- Appearance :
- Full Height
- Background
- Background Image : choisir une image ou non
- Advanced
- CSS Classes: bloc-promo-info
- si fond foncé > ajouter classe white
- si fond texturé > ajouter bloc-promo-grey-opacity et white
- si couleur d'arrière-plan, ajouter la classe de la couleur
(ex: bg-complementary-1)
- CSS Classes: bloc-promo-info
- Ajouter un bloc texte
- TItre Heading 2
- Texte régulier
- Ajouter un bouton
- Choisir style selon l'arrière-plan
- Appearance :
- Ajouter 2e colonne (8/12) pour les produits
- Ajouter Add Content > Products
- Appearance
- Product Grid
- Sélectionner les produits à afficher
- Nombre de produits:Inscrire 4ou 8
- Advanced
- CSS Classes :
- 4 produits = bloc-promo-products-4
- 8 produits = bloc-promo-products-8
- CSS Classes :
- Appearance
- Ajouter Add Content > Products
Le mois de la poésie autochtone
Lorem ipsum dolor sit amet, consectetur adispiscine elit, sed do
-
INFRASTRUCTURE DES RÉSEAUX INFORMATIQUES 2E ÉD.50 FICHES SYNTHÉTIQUES ET 100 EXERCICES CORRIGÉS -
SUITES ET SÉRIES NUMÉRIQUES 2E ÉD.SUITES ET SÉRIES DE FONCTIONS -
JEUX ET GRAPHES 2E ÉD.LA THÉORIE DES GRAPHES DE 5 à 95 ANS -
ANALYSE MATHÉMATIQUEFONCTIONS DÉFINIES SUR UNE PARTIE DE LA DROITE... -
CRÉEZ VOTRE BIÈRE 2E ÉD.DE LA COMPRÉHENSION À LA RÉUSSITE
Le mois de la poésie autochtone
Lorem ipsum dolor sit amet, consectetur adispiscine elit, sed do
- INFRASTRUCTURE DES RÉSEAUX INFORMATIQUES 2E ÉD.50 FICHES SYNTHÉTIQUES ET 100 EXERCICES CORRIGÉS
- SUITES ET SÉRIES NUMÉRIQUES 2E ÉD.SUITES ET SÉRIES DE FONCTIONS
- JEUX ET GRAPHES 2E ÉD.LA THÉORIE DES GRAPHES DE 5 à 95 ANS
- ANALYSE MATHÉMATIQUEFONCTIONS DÉFINIES SUR UNE PARTIE DE LA DROITE...
Carrousel éditeurs
Marche à suivre
- Créer une nouvelle Row (Layout > Row) et éditer la Row
- Appearance
- Contained
- Advanced
- Margins and Padding : Margin-bottom à 65
- Appearance
- 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
- Entrer le texte pour le titre
- Ajouter un Slider (Media > Slider)
- Classe pour alignement vertical : v-center
- Éditer le Slider
- Activer Show Arrows
- Slides to Show – Desktop : choisir combien de logo afficher en même temps sur la version desktop
- Ajouter du padding pour espacer les logos des flèches
- Sur chaque slide
- Section Content > Message Text
- Inclure le logo de l'éditeur
- Ajout son nom comme texte alternatif
- Section Content > Message Text
Les éditeurs
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore it, sed do eiusmod tempor incididunt
Colonnes de contenus
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 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
- 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
- Entrer le texte pour le titre
- Ajouter un block Boutons (Elements > Buttons) et éditer le bouton ajouté (** Faire attention de ne pas éditer Buttonsle 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
- Content
Formats images
3 colonnes
Background Desktop : 900px x 520px
Background Mobile Image : laisser vide, même image qu'en desktop
Gabarit de référence
Titre
Lorem ipsum
Titre
Lorem ipsum
Titre
Lorem ipsum
Références générales
Couleurs d'arrière-plan
À appliquer sur une Row ou une Column
Somabec-Primary
class = bg-primary
(hexa : #0085cd)
Somabec-Primary-Dark
class = bg-secondary
(hexa : #000000)
Somabec-Complementary-1
class = bg-complementary-1
(hexa : #f0af24)
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