Disposition - Colonne

Dans le panneau Page Builder sous Layout, faites glisser un Column ​sur la scène.

{width="600" modal="regular"}

Le groupe de colonnes est maintenant divisé en deux colonnes de largeur égale. Chaque colonne est un conteneur distinct pour le contenu et possède son propre ensemble d’options de boîte à outils.

{width="600" modal="regular"}

Dans le coin supérieur gauche du groupe de colonnes, cliquez sur l’outil Grid ( ) et ajustez la taille de la grille selon les besoins.

Le positionnement du contenu sur la grille permet d’aligner le contenu de manière cohérente et d’afficher correctement la page sur les ordinateurs de bureau et les appareils mobiles. Pour plus d’informations, voir la section Outils de contenu avancé de la configuration Page Builder.

{width="600" modal="regular"}

Pointez sur la bordure entre deux colonnes.

La bordure est mise en surbrillance et la boîte à outils de la colonne sélectionnée s’affiche.

{width="600" modal="regular"}

Maintenez le bouton de la souris enfoncé pour afficher la grille et faites glisser la bordure vers un nouvel emplacement sur la grille.

La largeur des deux colonnes s’ajuste pour refléter la modification. La nouvelle largeur de chaque colonne apparaît après le libellé, par exemple 4/12 (quatre sur 12) et 8/12 (huit sur 12).

{width="600" modal="regular"}

Passez la souris sur la colonne que vous souhaitez supprimer pour afficher la boîte à outils et sélectionnez l’icône Supprimer ( {width="20"} ).

{width="600" modal="regular"}

Si la colonne contient du contenu, cliquez sur OK pour confirmer.

Pour accélérer le processus à l’avenir, vous pouvez ignorer l’étape de confirmation en cochant la case Do not show this again .

Le groupe de colonnes comporte désormais une seule colonne (12/12) et une seule grille. La grille n’étant disponible que pour les colonnes, vous pouvez utiliser cette technique pour afficher la grille.

{width="600" modal="regular"}

Si vous souhaitez que le groupe de colonnes étende la colonne restante à la largeur complète de la ligne ou de l’étape :

• Passez la souris sur la colonne pour afficher la boîte à outils et sélectionnez l’icône Paramètres ( {width="20"} ).

• Faites défiler l’écran jusqu’à la section Advanced ​et définissez les quatre valeurs Padding ​sur 0.

  {width="600" modal="regular"}

• Dans le coin supérieur droit, cliquez sur Save pour fermer la page Edit Column.

Cliquez sur l’icône Fermer le plein écran ( {width="20"} ) dans le coin supérieur droit de l’espace de travail, puis cliquez sur Save dans le coin supérieur droit.

Passez la souris sur la colonne pour afficher la boîte à outils et sélectionnez l’icône Paramètres ( {width="20"} ).

{width="600" modal="regular"}

Modifiez les paramètres Appearance si nécessaire.

• Choisissez le paramètre d'alignement qui détermine la position de la colonne par rapport à son conteneur.

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
  Option	Description
  Full Height	La colonne étend la hauteur complète de son conteneur.
  Top Aligned	La colonne est alignée en haut de son conteneur.
  Centered	Colonne au centre de son conteneur.
  Bottom Aligned	La colonne est alignée au bas de son conteneur.

• Si nécessaire, saisissez le Minimum Height de la colonne. Par exemple, vous pouvez définir la hauteur minimale pour qu’elle corresponde à la hauteur d’une image d’arrière-plan.

• Si vous définissez la hauteur minimale, définissez Vertical Alignment pour contrôler la position des conteneurs de contenu ajoutés à la colonne (Top, Center ou Bottom).

Modifiez l’arrière-plan du contenu de la colonne.

• Background Color - Indiquez 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. Ce paramètre détermine la couleur de fond de la colonne.

• Background Image - Si nécessaire, utilisez les outils fournis pour choisir une image d’arrière-plan à appliquer à la colonne :

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  Outil	Description
  Upload	Télécharge un fichier image de l’ordinateur local vers la galerie, puis l’applique comme image d’arrière-plan pour la colonne.
  Select from Gallery	Vous invite à choisir une image existante de la galerie comme image d’arrière-plan pour la colonne.
  {width="25"}	Permet de faire glisser l’image sur la mosaïque de l’appareil photo ou de naviguer jusqu’à l’image dans votre système de fichiers local.

• Background Mobile Image - Si nécessaire, utilisez les mêmes outils pour choisir une image d’arrière-plan différente à utiliser pour l’affichage sur les appareils mobiles.

• Background Size - Modifiez ce paramètre pour déterminer la mise à l’échelle de l’image d’arrière-plan par rapport à la largeur de la colonne :

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  Option	Description
  Cover	L’image d’arrière-plan couvre toute la largeur de la colonne.
  Contain	L’image d’arrière-plan est limitée à la largeur de la zone de contenu.
  Auto	Applique la taille d’arrière-plan par défaut indiquée dans la feuille de style du thème actif.

• Background Position - Modifiez ce paramètre pour déterminer le point d’ancrage de l’image par rapport à la colonne. Options : Top Left, Top Center, Top Right, Center Left, Center, Center Right, Bottom Left, Bottom Center ou Bottom Right

• Background Attachment - Modifiez ce paramètre pour déterminer comment l’image d’arrière-plan se déplace par rapport à la page de défilement :

  table 0-row-2 1-row-2 2-row-2 layout-auto
  Option	Description
  Scroll	L’image d’arrière-plan est synchronisée pour se déplacer vers le bas au fur et à mesure que la page fait défiler.
  Fixed	(Non disponible pour les appareils mobiles) L’image d’arrière-plan ne se déplace pas lorsque le conteneur fait défiler l’image et est fixe à la position d’arrière-plan spécifiée.

• Background Repeat - Si vous souhaitez répéter l’image d’arrière-plan pour remplir l’espace, modifiez ce paramètre Yes.

Mettez à jour les paramètres Advanced ​si nécessaire.

• Pour contrôler le positionnement horizontal des conteneurs de contenu qui sont ajoutés à la colonne, choisissez un 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 les conteneurs de contenu le long de la bordure gauche du conteneur de colonnes, en tenant compte de toute marge intérieure spécifiée.
  Center	Aligne le conteneur de contenu au centre du conteneur de colonnes, en tenant compte de toute marge intérieure spécifiée.
  Right	Aligne le conteneur de contenu le long de la bordure droite du conteneur de colonnes, en tenant compte de toute marge intérieure spécifiée.

• Définissez le style Border qui s’applique aux quatre côtés du conteneur de colonnes :

  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 de colonnes.

  Séparez plusieurs noms de classe par un espace.

• Saisissez des valeurs, en pixels, pour que Margins and Padding spécifient les marges extérieures et la marge intérieure de la colonne.

  Saisissez chaque valeur correspondante dans le diagramme de conteneur de colonnes.

  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.