Vue d'ensemble
Trois composants de mise en page réutilisables apparaissent dans presque chaque section du builder : Groupe, Texte et Séparateur. Ensemble, ils vous permettent de créer n'importe quelle mise en page sans écrire de CSS. Sélectionnez un bloc pour ouvrir ses paramètres.
Groupe
Un Groupe est un conteneur de mise en page flexible. Ajoutez des blocs enfants à l'intérieur (texte, boutons, images, champs d'inscription à la newsletter, voire des groupes imbriqués) et contrôlez leur disposition.
Direction
- Verticale : les enfants sont empilés de haut en bas.
- Horizontale : les enfants sont placés côte à côte sur une ligne.
L'option Empiler verticalement sur mobile apparaît uniquement lorsque la direction est horizontale. Activez-la pour passer d'une ligne horizontale à une pile verticale sur les petits écrans.
Position et alignement
Ces paramètres distribuent les enfants selon les axes principal et secondaire. Leur signification change selon la direction, et l'option Entre (espacement égal entre les enfants) n'existe que sur l'axe principal :
- Direction verticale : Position correspond à l'axe principal (vertical) : haut, centre, bas ou entre. Alignement correspond à l'axe secondaire (horizontal) : gauche, centre ou droite.
- Direction horizontale : Alignement correspond à l'axe principal (horizontal) : gauche, centre, droite ou entre. Position correspond à l'axe secondaire (vertical) : haut, centre ou bas.
Largeur
- Remplir : s'étend pour occuper tout l'espace disponible dans le parent. Utilisez ceci pour les groupes qui doivent partager l'espace de façon égale dans un parent horizontal.
- Ajuster : se réduit à la taille naturelle de son contenu.
- Personnalisée : affiche un curseur Largeur personnalisée défini en pourcentage (0 à 100 %). Le groupe garde cette taille sans grandir ni rétrécir.
Espacement
L'espacement en pixels entre les éléments enfants (0 à 100 px, 20 px par défaut).
Palette de couleurs
Utiliser la palette du parent est activé par défaut, donc le groupe hérite de la palette de son parent. Désactivez-le pour afficher le sélecteur Palette de couleurs et choisir l'une de vos palettes globales. Cela permet de créer des zones de couleur distinctes dans une section.
Bordure
Bordure est Aucune ou Pleine. Pleine affiche deux curseurs : Épaisseur de la bordure (1 à 20 px, 1 par défaut) et Opacité de la bordure (0 à 100 %, 100 par défaut). La couleur provient de la couleur de bordure de la palette active.
Rayon des coins
Arrondi des coins en pixels (0 à 100), indépendant de la bordure. Utilisez-le pour des conteneurs de type carte.
Superposition d'arrière-plan
L'option Superposition d'arrière-plan ajoute une couche colorée au-dessus de l'arrière-plan du groupe. Quand elle est activée, définissez la Couleur de superposition (y compris la transparence via le curseur d'opacité), le Style de superposition (Pleine ou Dégradé qui s'estompe vers la transparence), et pour le dégradé la Direction du dégradé (vers le haut ou vers le bas). Utilisé couramment pour teinter un arrière-plan média.
Marge intérieure
Espacement interne de chaque côté en pixels, chacun de 0 à 100 px. La marge intérieure se situe à l'intérieur de la bordure, entre celle-ci et les enfants.
Texte
Un bloc texte affiche des titres, paragraphes et du texte formaté. L'éditeur de texte riche prend en charge le gras, l'italique, le souligné, le barré et le texte coloré.
Préréglage
Le préréglage de typographie définit la police, le poids par défaut et la balise HTML sémantique (son rôle sur la page) :
- Défaut : hérite du style de texte de base de la section.
- Paragraphe : style de texte principal.
- Titre 1 à Titre 6 : styles de titres, utilisant vos polices de titres et sous-titres.
Taille
Une taille de police personnalisée en pixels (10 à 30 px, 16 par défaut). C'est la taille réellement affichée par le bloc.
Largeur et alignement
- Ajuster : le bloc est seulement aussi large que son contenu.
- Remplir : le bloc s'étend à 100 % de la largeur du conteneur.
Alignement (Gauche, Centre, Droite) n'apparaît que lorsque la largeur est sur Remplir, car l'alignement n'a de sens que lorsque le bloc occupe tout le conteneur.
Hauteur de ligne et espacement des lettres
Hauteur de ligne règle le rythme vertical : Normal (par défaut), Serré ou Large. Espacement des lettres règle l'espacement des caractères avec les mêmes trois options.
Palette de couleurs
Dans un groupe, Utiliser la palette du parent est activé par défaut. Désactivez-le pour afficher le sélecteur Palette de couleurs. Les préréglages de titre utilisent la couleur de titre de la palette ; paragraphe et défaut utilisent la couleur du texte principal. En section autonome, le sélecteur s'affiche seul sans option d'héritage.
Marge intérieure
Espacement interne de chaque côté en pixels, chacun de 0 à 100 px.
Séparateur
Une ligne de séparation qui s'adapte à son parent. En disposition verticale (colonne), c'est une ligne horizontale ; dans un groupe horizontal, elle devient verticale.
Largeur
- Ajuster : le conteneur est seulement aussi large que la ligne.
- Remplir : le conteneur s'étend pour occuper tout l'espace disponible.
Épaisseur
Épaisseur de la ligne en pixels (1 à 10 px, 1 par défaut). Pour un séparateur horizontal, c'est la hauteur ; pour un vertical, c'est la largeur.
Longueur
La longueur de la ligne en pourcentage de son conteneur (5 à 100 %, 100 par défaut). Réglez-la sous 100 % pour créer une ligne partielle ou en retrait.
Alignement
Positionne la ligne quand sa longueur est inférieure à 100 % : Début, Centre (par défaut) ou Fin. Ce contrôle est masqué tant que la longueur est à 100 %.
Rayon des coins
- Angulaire : extrémités rectangulaires.
- Arrondi : extrémités en forme de pilule.
Palette de couleurs
Vous pouvez choisir une Palette de couleurs. Le séparateur utilise la couleur de bordure de cette palette. Si aucune n'est définie, il hérite de la couleur de la section ou du groupe parent.
Marge intérieure
Espacement de chaque côté en pixels. En tant que bloc, la plage va de 0 à 100 px. Quand le séparateur est ajouté comme section principale, la marge intérieure va jusqu'à 200 px (20 par défaut) pour plus d'espace vertical.
Pièges courants
- Deux groupes en remplissage dans un parent horizontal : chacun prend 50 % de l'espace, ce qui est généralement souhaité. Pour élargir un côté, réglez la largeur de ce groupe sur Personnalisée.
- Séparateur vertical non visible : un séparateur ne devient vertical que s'il est un enfant direct d'un groupe en Direction horizontale. Vérifiez la direction du groupe parent.
- Option Entre manquante : Entre n'apparaît que sur l'axe où les enfants s'écoulent, donc sur Position pour les groupes verticaux et sur Alignement pour les groupes horizontaux.
- Texte de la mauvaise couleur : il hérite probablement d'un groupe parent avec une palette différente. Désactivez Utiliser la palette du parent sur le bloc texte et choisissez la palette explicitement.
Pour savoir où ces composants peuvent être placés, consultez Sections et blocs.