Carrousel principal

Marche à suivre

  1. Créer une nouvelle Row (Layout > Row) et éditer la Row
    • Appearance
      • Full bleed
    • 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 full-width-books
    • Save
  3. É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
    • Advanced
      • CSS Classes : si arrière plan foncé, ajouter la classe white
  4. 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.

Découvrer le livre

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.

Découvrer le livre

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.

Découvrer le livre

Bloc promo (2 versions en exemple)

Marche à suivre

  1. 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
  2. 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)
    • Ajouter un bloc texte
      • TItre Heading 2
      • Texte régulier
    • Ajouter un bouton
      • Choisir style selon l'arrière-plan
  3. 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

Le mois de la poésie autochtone

Lorem ipsum dolor sit amet, consectetur adispiscine elit, sed do 

Découvrir plus de produits

Carrousel éditeurs

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 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
  3. 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

 

Les éditeurs

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore it, sed do eiusmod tempor incididunt 

Logo Somabec

Logo Somabec

Logo Somabec

Logo Somabec

Logo Somabec

Logo Somabec

Logo Somabec

Logo Somabec

Découvrir tous les éditeurs

Colonnes de contenus

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 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
  1.  

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

Sur votre espace confluence : Manuel d'utilisation > Page builder. Section guide de styles - Pages chapitres / Gabarits photoshop pour les images de contenus.

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

Styles de bouton

Elements > Buttons ou Elements > Texts (et format Button)

Primary
Secondary
CTA
Primary Alt
Secondary Alt

Boutons avec icône

Bouton Play
class= icon icon-play-circle
class= icon icon-play-circle
class= icon icon-play-circle
class= icon icon-play-circle
class= icon icon-play-circle
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

Boutons à 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

Titre version desktop

Titre version mobile