Sections

Pour commencer

Les sections sont les premiers éléments constitutifs de votre mise en page. Elles sont utilisées pour séparer les contenus d’une page en blocs de styles différents. Chaque section peut accueillir une ou plusieurs grilles dont vous pouvez régler le nombre de colonnes

Survolez une section et cliquez sur l’icône  juste à côté de son nom pour ouvrir les paramètres de la section. Deux onglets sont affichés à droite: Paramètres et Avancé.

Paramètres

STYLE

Sélectionnez le style d’arrière-plan de la section

OPTION	DESCRIPTION
None	Fond transparent
Default	Couleur de fond Default, en général blanc
Muted	Couleur de fond Muted, en général gris clair
Primary	Couleur de fond Primary, la couleur primaire du site
Secondary	Couleur de fond Secondary, la couleur secondaire du site

Les styles Primary et Secondary, étant de manière générale des couleurs colorées ou sombres, utilisent une couleur de texte claire. Cochez l’option Préserver la couleur du texte pour désactiver la recoloration automatique du texte. Par exemple, les colonnes de grille  peuvent avoir leur propre couleur d’arrière-plan. Ainsi vous ne voudrez peut-être pas que leur contenu soit recoloré.

LARGEUR

Définissez la largeur de contenu maximale pour la section. Choisissez entre Default, Small, Large et X Large pour définir une largeur maximale fixe. Expand prend toute la largeur, en conservant une marge interne horizontale alors que None occupe 100% de l’espace disponible.

HAUTEUR

Définissez la hauteur de la section.

OPTION	DESCRIPTION
Auto	La hauteur de la section s’adapte au contenu
Viewport	La hauteur occupe 100% de la fenêtre du navigateur
Viewport minus the following section	La hauteur occupe 100% de la fenêtre du navigateur – la hauteur de la section suivante
Viewport minus 20%	La hauteur occupe 100% de la fenêtre du navigateur – 20%

Si une hauteur de section est définie, le paramètre Alignement vertical devient disponible pour aligner le contenu de la section verticalement. Choisissez entre Top (haut), Middle (milieu) et Bottom (bas).

IMAGE

Sélectionnez une image d’arrière-plan pour la section. Une fois qu’une image est sélectionnée, un bouton Editer image apparaît pour modifier les paramètres d’affichage de l’image. Cliquer dessus pour paramétrer les options suivantes :

L’option Taille permet de définir la taille de l’image d’arrière plan dans la section 

OPTION	DESCRIPTION
Auto	Redimensionne l’image d’arrière-plan afin que ses proportions soient conservées
Cover	L’image est redimensionnée pour être aussi grande que possible et pour conserver ses proportions. L’image couvre toute la largeur et la hauteur de la section et les parties qui dépassent sont rognées
Contain	Redimensionne l’image afin qu’elle soit la plus grande possible et que l’image conserve ses proportions. L’image est contrainte dans la section

Lorsque la valeur Auto est sélectionnée l’option Répéter l’image est disponible pour permettre la répétition de l’image dans la section. La répétition de l’image est visible uniquement si la taille de l’image est plus petit que la section. Cette option est idéale pour créer par motif ou pattern décoratif de fond.

Position de l’image permet de définir la position initiale de l’image d’arrière-plan par rapport à la section. Par défaut, l’image est centrée.

Avec l’option Visibilité de l’image vous définissez à partir de quelle largeur d’appareil l’image d’arrière plan est visible. Cela est utile pour masquer les images d’arrière-plan si le contenu devient illisible sur les petits appareils ou pour alléger la version smartphone de votre page en vue d’améliorer le référencement.

Avec l’option Effet d’image appliquez un effet Fixed ou Parallax à l’arrière-plan. L’effet est visible pendant le défilement de la page. L’option Parallax active les champs Vertical start et Vertical end qui sont les valeurs en pixel du début et de fin d’animation de l’image dans la section. Vous pouvez renseigner des valeurs négative et positive. Essayez par exemple avec -100 et 100. L’image va se déplacer de 200px lors du defilement de la page.  

L’option Parallax peut également être utilisé pour recentré l’image sans animation en entrant les mêmes valeurs dans les 2 champs Vertical start et Vertical end.

MARGES INTERNES

Ajuster ici les marges internes (padding) verticales de la section. Les valeurs de ces marges peuvent être définies dans Styles. Vous pouvez également supprimer la marge supérieure et/ou la marge inférieure. 

MENU TRANSPARENT

Le menu principale de navigation, logo inclus, peut être transparent et être superposé à l’arrière-plan de la section. Pour cela sélectionnez si le contenu de la barre de navigation doit utiliser du texte dark (sombre) ou light (clair) et cochez la case Section sous le menu. Cela ne fonctionne que pour la première section de votre page. 

VISIBILITÉ

L’option permet de masquer l’élément sur les écrans plus grands qu’une largeur spécifiée. Par exemple vous voudrez peut-être masquer une section sur la version smartphone de votre site. Prévisualisez en temps réel en simulant une taille de fenêtre en bas du panneau de contrôle.

OPTION	DESCRIPTION
Always	Toujours visible
Small	Visible uniquement sur les appareils de 640px et plus
Medium	Visible uniquement sur les appareils de 960px et plus
Large	Visible uniquement sur les appareils de 1200px et plus
X-Large	Visible uniquement sur les appareils de 1600px et plus

Avancé

OPTION	DESCRIPTION
Nom	Définissez un nom pour identifier facilement cette section dans l’éditeur de pages.
Class	Définissez une ou plusieurs classes pour l’élément. Séparer les classes par un espace. Pour en savoir plus sur les classes consultez Pour les experts
Id	Définissez un identifiant unique pour cette section.

Chaque option peut être paramétrée dans Design > Styles. Pour en savoir plus sur les styles, veuillez consulter Styles