Éléments - Diviseur
Utilisez le type de contenu Diviseur pour ajouter une règle comme saut visuel entre les sections de contenu dans l’ Page Builder étape. Vous pouvez spécifier la couleur, l’épaisseur et la largeur de la ligne du séparateur. Vous pouvez également contrôler l’alignement, définir les marges, la marge intérieure et le format de la bordure du conteneur. Par défaut, le séparateur est une règle libre qui étend la largeur totale du conteneur, avec une marge intérieure suffisante.
{width="500" modal="regular"}
Bien que la plupart des conteneurs de séparateurs soient invisibles, l’exemple suivant affiche le conteneur avec une bordure en tirets rouges afin que vous puissiez voir la relation entre le séparateur, la marge intérieure et le conteneur. Vous pouvez ajuster la marge intérieure en haut et en bas du séparateur pour contrôler l’espacement entre les éléments.
{width="500" modal="regular"}
Boîte à outils du séparateur
Ajout d’un séparateur
-
Dans le panneau Page Builder, développez Elements et faites glisser un espace réservé Divider sur une ligne, une colonne ou un ensemble d’onglets sur la scène.
Utilisez la ligne directrice rouge à titre de référence lorsque vous positionnez le séparateur avant ou après un autre conteneur de contenu sur l’étape.
{width="600" modal="regular"}
Dans l’exemple suivant, le séparateur marque le début d’une nouvelle section de texte.
{width="500" modal="regular"}
-
Pour spécifier les paramètres du nouveau séparateur, procédez comme suit.
Modification des paramètres du séparateur
-
Pointez sur le conteneur du séparateur pour afficher la boîte à outils et sélectionnez l’icône Paramètres ( {width="20"} ).
{width="500" modal="regular"}
-
Modifiez le séparateur Line Color à l’aide de l’une des méthodes suivantes :
- Saisissez un nom de couleur HTML valide. Par exemple,
Teal
. - Saisissez la valeur de couleur hexadécimale. Par exemple,
#008080
.
Une fois l’opération terminée, cliquez sur Apply.
{width="600" modal="regular"}
- Saisissez un nom de couleur HTML valide. Par exemple,
-
Saisissez le Line Thickness en pixels.
-
Pour indiquer l’unité de mesure, saisissez la valeur Line Width suivie de
px
ou%
.{width="600" modal="regular"}
-
Mettez à jour les paramètres Advanced si nécessaire.
-
Pour contrôler le positionnement du séparateur dans le conteneur parent, choisissez la propriété Alignment :
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto Option Description Default
Applique le paramètre d’alignement par défaut spécifié dans la feuille de style du thème actif. Left
Aligne la liste le long de la bordure gauche du conteneur parent, en tenant compte de toute marge intérieure spécifiée. Center
Aligne la liste au centre du conteneur parent, en tenant compte de toute marge intérieure spécifiée. Right
Aligne le bloc le long de la bordure droite du conteneur parent, en tenant compte de toute marge intérieure spécifiée. Dans l’exemple suivant, les options sont définies pour utiliser un alignement central pour le séparateur.
{width="600" modal="regular"}
-
Définissez le style Border appliqué aux quatre côtés du conteneur du séparateur :
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto Option Description Default
Applique le style de bordure par défaut spécifié par la feuille de style associée. None
Ne fournit aucune indication visible des bordures du conteneur. Dotted
La bordure du conteneur s’affiche sous la forme d’une ligne pointillée. Dashed
La bordure du conteneur s’affiche sous la forme d’une ligne en pointillés. Solid
La bordure du conteneur s’affiche sous la forme d’une ligne pleine. Double
La bordure du conteneur s’affiche sous la forme d’une ligne double. Groove
La bordure du conteneur s’affiche sous forme de ligne droite. Ridge
La bordure du conteneur s’affiche sous la forme d’une ligne à droite. Inset
La bordure du conteneur s’affiche sous la forme d’une ligne d’insertion. Outset
La bordure du conteneur apparaît comme une ligne de départ. -
Si vous définissez un style de bordure autre que
None
, renseignez les options d’affichage de la bordure :table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Option Description Border Color Définissez la couleur en choisissant un échantillon, en cliquant sur le sélecteur de couleurs ou en saisissant un nom de couleur valide ou une valeur hexadécimale équivalente. Border Width Saisissez le nombre de pixels pour la largeur de la ligne de bordure. Border Radius Saisissez le nombre de pixels pour définir la taille du rayon utilisé pour arrondir chaque coin de la bordure. -
(Facultatif) Indiquez les noms de CSS classes dans la feuille de style actuelle à appliquer au conteneur.
Séparez plusieurs noms de classe par un espace.
-
Saisissez des valeurs, en pixels, pour le Margins and Padding afin de déterminer les marges extérieures et la marge intérieure du conteneur du séparateur.
Saisissez les valeurs correspondantes dans le diagramme.
table 0-row-2 1-row-2 2-row-2 layout-auto Zone de conteneur Description Margins Espace vide appliqué au bord extérieur de tous les côtés du conteneur. Options : Top
/Right
/Bottom
/Left
Padding Espace blanc appliqué au bord intérieur de tous les côtés du conteneur. Options : Top
/Right
/Bottom
/Left
-
-
Une fois l’opération terminée, cliquez sur Save pour appliquer les paramètres et revenir à l’espace de travail Page Builder.
{width="500" modal="regular"}
Dupliquer un séparateur
Pour un séparateur formaté avec des paramètres spécifiques, il est plus efficace de créer un doublon plutôt que de recommencer avec un nouvel espace réservé.
-
Pointez sur le conteneur du séparateur pour afficher la boîte à outils et sélectionnez l’icône Dupliquer ( {width="20"} ).
Le conteneur de séparateurs en double apparaît juste en dessous de l’original.
{width="500" modal="regular"}
-
Pointez sur le nouveau conteneur de séparateurs pour afficher la boîte à outils et sélectionnez l’icône Déplacer ( {width="20"} ).
{width="500" modal="regular"}
-
Sélectionnez le séparateur et faites-le glisser jusqu’à ce que la ligne directrice rouge marque la nouvelle position.
Les bordures supérieure et inférieure de chaque conteneur apparaissent sous forme de lignes tirets lorsque le séparateur est déplacé.
{width="500" modal="regular"}