Aperçu
Trois composants de mise en page réutilisables apparaissent dans presque toutes les sections du constructeur : Groupe, Texte et Séparateur. Les comprendre vous permet de créer n'importe quelle mise en page dont vous avez besoin sans écrire de CSS.
Groupe
Un Groupe est un conteneur de mise en page flexible. Ajoutez des blocs enfants à l'intérieur (texte, boutons, images, saisies de newsletter et même des groupes imbriqués) et contrôlez exactement comment ils sont organisés.
Direction
- Verticale : les enfants s'empilent de haut en bas (par défaut pour la plupart des sections).
- Horizontale : les enfants se placent côte à côte dans une rangée.
Activez Empiler sur mobile pour basculer automatiquement un groupe horizontal en pile verticale sur les petits écrans.
Alignement et position
Ces deux paramètres contrôlent comment les enfants sont distribués sur les axes principal et transversal. Leur signification change selon la direction du groupe :
- Direction verticale : Position contrôle la distribution verticale (haut, centre, bas ou entre). Alignement contrôle le placement horizontal (gauche, centre, droite ou entre).
- Direction horizontale : Alignement contrôle la distribution horizontale (gauche, centre, droite ou entre). Position contrôle le placement vertical (haut, centre, bas ou entre).
Entre distribue les enfants uniformément avec un espace égal entre eux, ce qui est utile pour étirer les éléments sur une rangée pleine largeur.
Espacement
L'espace en pixels entre les éléments enfants (0–100 px, par défaut 20 px).
Largeur
- Remplir : s'étend pour occuper tout l'espace disponible dans le parent. Utilisez ceci pour les groupes qui doivent partager l'espace de manière égale dans un parent horizontal.
- Ajuster : se rétracte à la taille naturelle de son contenu. Utilisez ceci pour les groupes qui ne doivent être que aussi larges que ce qu'ils contiennent.
- Personnalisé : définissez un pourcentage spécifique (0–100%). Le groupe conservera cette taille sans grandir ni rétrécir.
Palette de couleurs et héritage
Par défaut, un groupe hérite la palette de couleurs de sa section parente. Désactivez Hériter la palette pour assigner une palette de couleurs explicite (1–9) depuis vos paramètres globaux de couleurs. Cela vous permet de créer des zones distinctes de couleur d'arrière-plan ou de texte dans une section sans ajouter une nouvelle section.
Bordure
Ajoutez une bordure autour du groupe. Options : Aucune ou Solide. Lorsque solide est sélectionné, définissez l'épaisseur de la bordure (1–20 px) ; la couleur provient de la couleur de bordure de la palette active.
Rayon
L'arrondi des coins en pixels (0–100). Utilisez ceci pour créer des conteneurs de groupe en forme de carte.
Opacité
Opacité globale du groupe (0–100%, par défaut 100%).
Superposition
Ajoute une couche colorée dans le groupe. Lorsqu'activé, définissez la Couleur de superposition (incluant la transparence via le curseur d'opacité du sélecteur de couleur), le Style (remplissage plat solide ou un dégradé qui s'estompe vers le transparent) et pour le dégradé la Direction (haut ou bas). Cela est couramment utilisé pour créer une couche teintée semi-transparente sur un fond multimédia dans une section héro.
Rembourrage
Espacement sur chaque côté en pixels (haut, gauche, droite et bas), chacun de 0 à 100 px. Le rembourrage est appliqué à l'intérieur de la bordure du groupe, créant de l'espace entre la bordure et les enfants du groupe.
Texte
Un bloc de texte affiche du contenu en texte enrichi (titres, paragraphes et texte formaté) dans une section ou un groupe. L'éditeur prend en charge le gras, l'italique, le soulignement, le barré et le texte coloré.
Préréglage
Le préréglage typographique contrôle la taille de la police, la graisse et le rôle sémantique du texte. Préréglages disponibles :
- Par défaut : hérite du style de texte de base de la section.
- Paragraphe : style de texte de corps.
- Titre 1 à Titre 6 : tailles décroissantes de la plus grande à la plus petite, utilisant la police de titre définie dans vos paramètres typographiques.
Taille
Une taille de police personnalisée en pixels (10–30 px) qui remplace la taille du préréglage. Laissez la valeur par défaut pour que le préréglage détermine la taille.
Largeur
- Ajuster : le bloc de texte est seulement aussi large que son contenu.
- Remplir : le bloc de texte s'étend à 100% de la largeur du conteneur disponible.
Alignement
Alignement horizontal du texte : Gauche, Centre ou Droite.
Hauteur de ligne
Contrôle le rythme vertical : Serré (lignes compactes), Normal (par défaut) ou Large (lignes espacées).
Espacement des lettres
Contrôle l'espacement des caractères : Serré (caractères plus proches), Normal (par défaut) ou Large (caractères plus espacés).
Palette de couleurs et héritage
Par défaut, un bloc de texte hérite sa couleur de la section parente. Désactivez Hériter la palette pour utiliser une palette de couleurs spécifique. Les préréglages de titre utilisent la couleur de titre de la palette ; les préréglages de paragraphe et par défaut utilisent la couleur de texte de corps de la palette.
Rembourrage
Espacement intérieur sur chaque côté en pixels (haut, gauche, droite et bas), chacun de 0 à 100 px.
Séparateur
Une ligne de séparation visuelle. Dans une mise en page verticale, elle apparaît comme une ligne horizontale. Dans un groupe horizontal, elle apparaît comme une ligne verticale. Le séparateur s'adapte automatiquement à la direction de son conteneur parent.
Épaisseur
L'épaisseur de la ligne en pixels (1–10 px, par défaut 1 px).
Longueur
L'étendue de la ligne en pourcentage de son conteneur (5–100%, par défaut 100%). Définissez ceci à moins de 100% et combinez avec l'alignement pour créer une ligne décorative centrée ou en retrait.
Style de terminaison
- Tranchant : extrémités rectangulaires.
- Arrondi : extrémités en forme de pilule.
Alignement
Comment la ligne est positionnée lorsque sa longueur est inférieure à 100% : Début, Centre (par défaut) ou Fin.
Largeur
- Ajuster : le conteneur du séparateur est seulement aussi large que la ligne elle-même.
- Remplir : le conteneur du séparateur s'étend pour remplir l'espace disponible dans son parent.
Palette de couleurs
Définissez optionnellement une palette de couleurs (1–9). Le séparateur utilise la couleur de bordure de la palette sélectionnée. Si aucune palette n'est définie, il hérite la couleur de la section ou du groupe parent.
Rembourrage
Espacement sur chaque côté en pixels. Lorsque le séparateur est utilisé comme section de niveau supérieur, les valeurs de rembourrage vont jusqu'à 200 px pour plus de respiration verticale.
Problèmes courants
- Deux groupes en remplissage dans un parent horizontal : chacun prendra 50% de l'espace disponible, ce qui est généralement ce que vous souhaitez. Si vous avez besoin qu'un côté soit plus large que l'autre, utilisez la largeur Personnalisée sur l'un d'eux.
- Séparateur vertical non visible : un séparateur ne devient vertical que lorsqu'il est un enfant direct d'un groupe défini en direction Horizontale. Assurez-vous que la direction du groupe parent est définie sur horizontale.
- Texte affichant une couleur inattendue : si un bloc de texte apparaît dans la mauvaise couleur, il hérite probablement d'un groupe parent qui a une palette de couleurs différente. Désactivez Hériter la palette sur le bloc de texte et assignez la palette correcte explicitement.