Disposition - Ligne
Utilisez le type de contenu Ligne pour ajouter une ligne dans le Page Builder étape.
Boîte à outils Ligne
La boîte à outils de lignes s’affiche lorsque vous pointez sur le conteneur de lignes. La boîte à outils comprend des options permettant de déplacer, masquer, dupliquer, modifier ou supprimer la ligne. La sélection de paramètres détermine l’aspect, l’arrière-plan et la mise en page de la ligne. Vous pouvez faire glisser d’autres éléments de contenu sur la ligne à partir du panneau Page Builder sur la gauche.






Ajouter une ligne
-
Dans le panneau Page Builder sous Layout, faites glisser un nouveau Row vers la scène, juste en dessous de la première ligne.
-
Pour formater la ligne, passez la souris sur le conteneur de lignes pour afficher la boîte à outils et choisissez l’icône Paramètres (
Consultez les sections suivantes pour obtenir des informations détaillées sur la définition des paramètres disponibles.
Modifier les paramètres des lignes
-
Pointez sur le conteneur de lignes pour afficher la boîte à outils et choisissez l’icône Paramètres (
-
Consultez les sections suivantes pour obtenir des informations détaillées sur la mise à jour des paramètres disponibles.
-
Une fois l’opération terminée, cliquez sur Save pour appliquer les paramètres et revenir à l’espace de travail Page Builder.
Apparence
Utilisez les paramètres Apparence pour déterminer comment le contenu s’affiche dans la ligne.
-
Pour déterminer l’aspect de la couleur et/ou de l’image d’arrière-plan par rapport au conteneur et à la largeur de la zone de contenu, choisissez l’alignement :
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Option Description Contained La couleur ou l’image d’arrière-plan est limitée à la largeur de page maximale définie par le thème. Full Width Limite le contenu à la largeur maximale de page définie par le thème. La couleur et/ou l’image d’arrière-plan ne sont pas limitées et s’étendent sur toute la largeur de la ligne. Full Bleed Le contenu, l’image d’arrière-plan et/ou la couleur ne sont pas limités et étendent toute la largeur de la ligne. Le fond perdu ne peut être utilisé qu’avec des thèmes qui prennent en charge la mise en page. -
Saisissez le Minimum Height de la ligne. Cette valeur peut être un nombre avec une unité CSS valide (par exemple
100px
,50%
,50em
,100vh
) ou un calcul (par exemple100vh - 237px
).Par exemple, vous pouvez définir la hauteur minimale d’une ligne pour étirer toute la hauteur de la page, ce qui vous offre des options attrayantes pour les images et vidéos d’arrière-plan de toute la page.
-
Sélectionnez un paramètre de Vertical Alignment pour aligner tous les conteneurs de contenu ajoutés à la ligne (Haut, Centre ou Bas).
Contexte
Il existe de nombreuses options pour définir l’affichage en arrière-plan d’une ligne. Vous pouvez appliquer une couleur ou une image d’arrière-plan simple et gérer des effets plus sophistiqués.
Couleur d’arrière-plan
Spécifiez la couleur d’arrière-plan 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. Ce paramètre détermine la couleur d’arrière-plan de la ligne. Vous pouvez également régler l’opacité de la couleur.
Vous pouvez définir la valeur de l’une des trois façons suivantes :
- Un nom de couleur prédéfini, tel que
White
- Valeur hexadécimale de la couleur, telle que
#ffffff
- Valeur rgba de la couleur, avec le pourcentage d’opacité, tel que
rgba(255, 255, 255, 0.75)
Pour sélectionner une couleur, cliquez sur l’échantillon à gauche de la zone Aucune couleur.
Si vous cliquez sur la zone de couleur pour ouvrir à nouveau le sélecteur de couleurs, la zone située sous le curseur affiche les valeurs actuelles rouge, vert, bleu et alpha (rgba). Le dernier nombre indique le pourcentage d’opacité actuel sous la forme d’une décimale. Vous pouvez utiliser le curseur pour ajuster l’opacité ou saisir la valeur décimale souhaitée.
Background Type
Un type d’arrière-plan peut être une image ou une vidéo. Page Builder est défini par défaut sur Image
et affiche divers paramètres d’image. Si vous sélectionnez Video
, Page Builder permute les paramètres de l’image avec les paramètres vidéo. Les deux types d’arrière-plan sont décrits comme suit.
Paramètres de type d’image
Si vous définissez la Background Type sur Image
, utilisez les paramètres suivants pour définir l’affichage de l’image d’arrière-plan.
-
Background Image - Si nécessaire, utilisez les outils fournis pour choisir une image d’arrière-plan à appliquer à la ligne :
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Option Description Upload Télécharge un fichier image de votre ordinateur local dans la galerie, puis l’applique comme image d’arrière-plan pour la ligne. Select from Gallery Vous invite à choisir une image existante de la galerie comme image d’arrière-plan pour la ligne. 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 - Définissez cette option pour déterminer la mise à l’échelle de l’image d’arrière-plan par rapport à la largeur de la ligne :
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 ligne. Contain
L’image d’arrière-plan est limitée à la largeur de la zone de contenu. Auto
Applique la taille de la feuille de style active. -
Background Position - Définissez cette option pour déterminer comment l’image d’arrière-plan est ancrée par rapport à la ligne :
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Point d’ancrage Position Top
Gauche / Centre / Droite Center
Gauche / Centre / Droite Bottom
Gauche / Centre / Droite Le point d’ancrage est semblable à une goupille qui attache l’image à la ligne à la position d’arrière-plan spécifiée.
-
Background Attachment - Définissez le type de pièce jointe 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 jointe est synchronisée pour se déplacer vers le bas lors du défilement de la page. Utilisez l’arrière-plan parallèle pour contrôler la vitesse de défilement. 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 - Définissez sur
Yes
pour répéter l’image d’arrière-plan afin de remplir l’espace disponible dans la ligne.
Paramètres de type vidéo
Si vous définissez le Type d’arrière-plan sur Video
, utilisez les paramètres suivants pour définir l’affichage de l’image d’arrière-plan.
-
Video URL - Saisissez une URL de vidéo valide. Les URL de vidéo valides peuvent être des liens vers :
- Vidéos YouTube :
https://youtu.be/CoDhMRUUjeI
- Vidéos Vimeo :
https://vimeo.com/190156113
- Fichiers vidéo valides (
.mp4
recommandé) :https://myvideos.com/spiral.mp4
- Vidéos YouTube :
-
Overlay Color - Sélectionnez une couleur pour appliquer une teinte transparente à la vidéo.
-
Infinite Loop - Définissez sur
No
pour que la vidéo soit lue une fois et arrêtée. Lorsque cette option est définie surYes
(par défaut), la vidéo se répète en boucle infinie. -
Lazy Load - Définissez sur
No
pour que la vidéo se charge avec la page, même si elle n’est pas visible. Lorsque cette option est définie surYes
(par défaut), la vidéo se charge à partir de la source uniquement lorsqu’elle est visible à l’écran. -
Play Only When Visible - Définissez sur
No
pour que la vidéo commence à être lue immédiatement après son chargement, qu’elle soit visible ou non. Lorsque cette option est définie surYes
(par défaut), la vidéo ne commence à être lue que lorsqu’elle est visible. -
Fallback Image - Si nécessaire, spécifiez une image à afficher à l’écran avant le chargement de la vidéo et si la vidéo ne se charge pas pour une raison quelconque.
Arrière-plan parallèle
Utilisez ces options pour contrôler la vitesse d’une image ou d’une vidéo d’arrière-plan qui défile par rapport au défilement de la page. L’arrière-plan peut être défini pour défiler plus lentement afin de créer une impression d’immersion.
- Définissez Activer l’arrière-plan parallèle sur
Yes
. - Saisissez la Vitesse parallèle comme valeur décimale entre
-1.0
et2.0
.
Avancé
-
Pour contrôler le positionnement horizontal des conteneurs de contenu ajoutés à la ligne, 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 ligne, en tenant compte de la marge intérieure spécifiée. Center
Aligne le conteneur de contenu au centre du conteneur de lignes, 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 lignes, en tenant compte de la marge intérieure spécifiée. -
Définissez le style de Border appliqué aux quatre côtés du conteneur de lignes :
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. La ligne de l’exemple suivant a un rayon de bordure de 15.
-
(Facultatif) Spécifiez les noms des CSS classes de la feuille de style actuelle à appliquer au conteneur de lignes.
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 ligne.
Saisissez chaque valeur correspondante dans le diagramme de conteneur de lignes.
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