Disposition - Colonne
Utilisez le type de contenu Colonne pour diviser une page en plusieurs colonnes dans la Page Builder étape. Lorsque vous ajoutez une colonne à une ligne ou un onglet ou directement à la phase, le groupe de colonnes est initialement divisé en deux colonnes de largeur égale. Vous pouvez ajouter ou supprimer des colonnes, si nécessaire. Vous pouvez redimensionner une colonne en faisant glisser la bordure entre deux colonnes. La largeur de la colonne suivante est ajustée pour remplir l’espace disponible dans la ligne, la tabulation ou l’étape. Une seule colonne étend toute la largeur de la scène ou de son conteneur.
Mises à jour de la version 2.4.5
Les fonctionnalités de Page Builder sont mises à jour dans la version 2.4.5 afin que les utilisateurs utilisent désormais Columns comme conteneur parent pour les colonnes individuelles. Ce nouveau conteneur prend également en charge les propriétés pour l’arrière-plan et élimine la nécessité d’encapsuler les colonnes dans une ligne. Il réduit les balises inutiles et offre un contrôle plus fin de l’affichage et de l’expérience du storefront.
Vous pouvez modifier la disposition du conteneur de Columns en faisant glisser une colonne au-dessus ou en dessous d’autres colonnes du groupe et en les empilant. Cela ouvre une nouvelle variété de combinaisons de mises en page possibles qui peuvent être obtenues sans avoir besoin d’être personnalisées par les développeurs.
Regardez cette vidéo pour découvrir comment le conteneur Columns peut être utilisé pour affiner vos mises en page :
Boîte à outils Colonnes
Chaque colonne comporte une boîte à outils d’options qui s’affiche lorsque vous pointez sur le conteneur.




Grille de colonne
Le grid garantit que le contenu est aligné de manière cohérente dans une colonne et permet à la page de s’afficher correctement sur les ordinateurs de bureau et les appareils mobiles. Pour plus d’informations, consultez la section Outils de contenu avancés de la configuration Page Builder.
Dans l’exemple à deux colonnes suivant, les nombres entre parenthèses (6/12) dans la bordure supérieure de chaque conteneur de colonne indiquent le nombre de divisions de la grille dans chaque colonne et le nombre total de divisions. Dans ce cas, la colonne est la largeur de six unités de grille sur un total de 12.
Ajouter une colonne
-
Dans le panneau Page Builder sous Layout, faites glisser un Column vers la scène.
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 jeu d’options de boîte à outils.
-
Dans le coin supérieur gauche du groupe de colonnes, cliquez sur l’outil Grille (
Le positionnement du contenu sur la grille permet d’aligner le contenu de manière cohérente et d’effectuer correctement le rendu de la page sur les ordinateurs de bureau et les appareils mobiles. Pour plus d’informations, consultez la section Outils de contenu avancés de la configuration Page Builder.
Redimensionnement d’une colonne
-
Passez la souris 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.
-
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) et8/12
(huit sur 12).
Supprimer une colonne
-
Pointez sur la colonne à supprimer pour afficher la boîte à outils et choisissez l’icône Supprimer (
-
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 grille. Étant donné que la grille n’est disponible que pour les colonnes, vous pouvez utiliser cette technique pour afficher la grille.
-
Si vous souhaitez que le groupe de colonnes étende la colonne restante à toute la largeur de la ligne ou de l’étape :
-
Pointez sur la colonne pour afficher la boîte à outils et sélectionnez l’icône Paramètres (
-
Faites défiler l’écran jusqu’à la section Advanced et définissez les quatre valeurs Padding sur
0
. -
Dans le coin supérieur droit, cliquez sur Save pour fermer la page Edit Column.
-
-
Cliquez sur l’icône Fermer le plein écran (
Modifier les paramètres de colonne
-
Pointez sur la colonne pour afficher la boîte à outils et sélectionnez l’icône Paramètres (
-
Modifiez les paramètres de Appearance selon vos besoins.
-
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 toute la hauteur de son conteneur. Top Aligned
La colonne est alignée en haut de son conteneur. Centered
La colonne est centrée au milieu 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 la Vertical Alignment pour contrôler la position des conteneurs de contenu qui sont ajoutés à la colonne (
Top
,Center
ouBottom
).
-
-
Modifiez l’arrière-plan du contenu de la colonne.
-
Background Color - Spécifiez 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 d’arrière-plan 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 votre ordinateur local dans la galerie, puis l’applique en tant qu’image d’arrière-plan de la colonne. Select from Gallery Vous invite à choisir une image existante de la galerie comme image d’arrière-plan pour la colonne. Vous permet de faire glisser l’image vers la mosaïque de la caméra ou d’accéder à 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 spécifié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
ouBottom Right
-
Background Attachment - Modifiez ce paramètre pour déterminer le déplacement de l’image d’arrière-plan 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 lors du défilement de la page. Fixed
(Non disponible pour les appareils mobiles) L’image d’arrière-plan ne se déplace pas lorsque le conteneur défile sur 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
Yes
ce paramètre.
-
-
Mettez à jour les paramètres Advanced selon vos besoins.
-
Pour contrôler le positionnement horizontal des conteneurs de contenu ajoutés à la colonne, choisissez une 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 colonne, en tenant compte de la marge intérieure spécifiée. Center
Aligne le conteneur de contenu au centre du conteneur de colonne, en tenant compte de la marge intérieure spécifiée. Right
Aligne le conteneur de contenu le long de la bordure droite du conteneur de colonne, en tenant compte de la marge intérieure spécifiée. -
Définissez le style de Border, qui est appliqué aux quatre côtés du conteneur de colonne :
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 tirets. Solid
La bordure du conteneur s’affiche sous la forme d’une ligne continue. Double
La bordure du conteneur s’affiche sous la forme d’une ligne double. Groove
La bordure du conteneur s’affiche sous la forme d’une ligne rainurée. Ridge
La bordure du conteneur s’affiche sous la forme d’une ligne crantée. Inset
La bordure du conteneur s’affiche sous la forme d’une ligne insérée. Outset
La bordure du conteneur s’affiche sous la forme d’une ligne de départ. -
Si vous définissez un style de bordure autre que
None
, renseignez les options d’affichage des bordures :table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Option Description Border Color Spécifiez la couleur en choisissant une nuance, 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) Spécifiez les noms des CSS classes de la feuille de style actuelle à appliquer au conteneur de colonnes.
Séparez plusieurs noms de classe par un espace.
-
Saisissez les valeurs, en pixels, du Margins and Padding pour spécifier 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 conteneur Description Margins Quantité d’espace vide appliqué au bord extérieur de tous les côtés du conteneur. Options : Top
/Right
/Bottom
/Left
Padding Quantité d’espace vide 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.