Disposition - Ligne

Utilisez le type de contenu Row pour ajouter une ligne dans l’ Page Builder stage.

NOTE
Si vous apportez des modifications importantes au contenu Page Builder, il est recommandé d’augmenter la durée de vie de la session d’administration afin d’empêcher l’expiration de la session pendant que vous travaillez.

Boîte à outils de rangée

La boîte à outils de rangée s’affiche lorsque vous passez la souris sur le conteneur de rangées. La boîte à outils contient des options permettant de déplacer, masquer, dupliquer, modifier ou supprimer la ligne. La sélection des paramètres détermine l’aspect, l’arrière-plan et la mise en page de la ligne. D’autres éléments de contenu peuvent être déplacés vers la ligne à partir du panneau Page Builder sur la gauche.

Boîte à outils de lignes

Outil
Icône
Description
Déplacer
Icône Déplacer {width="25"}
Déplace la rangée vers une autre position par rapport aux autres rangées de la scène.
(label)
Row
Identifie le conteneur de contenu actuel sous la forme d’une ligne. Passez la souris sur le conteneur pour afficher la boîte à outils.
Paramètres
Icône Paramètres {width="25"}
Ouvre la page Modifier la rangée, dans laquelle vous pouvez modifier les propriétés du conteneur.
Masquer
Icône Masquer {width="25"}
Masque la ligne actuelle.
Afficher
Icône Afficher {width="25"}
Affiche la ligne masquée.
Dupliquer
Icône Dupliquer {width="25"}
Effectue une copie de la ligne.
Supprimer
Supprimer l’icône {width="25"}
Supprime le conteneur de lignes et son contenu de la scène.
NOTE
Les éléments masqués sont stockés dans la base de données et invisibles pour les clients. Toutefois, ces éléments sont visibles par les moteurs de recherche et d’autres robots qui analysent votre site. Elles sont également renvoyées dans le cadre du contenu si nécessaire par le biais d’un appel API avec un attribut d’invisibilité, sauf si vous les supprimez de l’étape.

Ajouter une ligne

  1. Dans le panneau Page Builder sous Layout, faites glisser un nouveau Row ​sur la scène, juste en dessous de la première ligne.

  2. Pour mettre en forme la ligne, passez la souris sur le conteneur de lignes pour afficher la boîte à outils et choisissez l’icône Paramètres ( Icône Paramètres {width="20"} ).

    Pour plus d’informations sur l’exécution des paramètres disponibles, reportez-vous aux sections suivantes.

    Ajout d’une ligne {width="600" modal="regular"}

Modification des paramètres de ligne

  1. Pointez sur le conteneur de lignes pour afficher la boîte à outils et sélectionnez l’icône Paramètres ( Icône Paramètres {width="20"} ).

    Boîte à outils de lignes {width="600" modal="regular"}

  2. Pour plus d’informations sur la mise à jour des paramètres disponibles, reportez-vous aux sections suivantes.

  3. 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 le mode d’affichage du contenu dans la ligne.

Paramètres d’aspect

  • Pour déterminer la couleur de fond et/ou 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 maximale de page définie par le thème.
    Full Width Limite le contenu à la largeur maximale de la page définie par le thème. La couleur de fond et/ou l’image n’est pas limitée et étend la largeur totale de la ligne.
    Full Bleed Le contenu et l’image d’arrière-plan et/ou la couleur ne sont pas limités et s’étendent sur toute la largeur de la ligne. Le fond perdu ne peut être utilisé qu’avec les thèmes qui prennent en charge la mise en page.
  • Saisissez le Minimum Height pour la ligne. Cette valeur peut être un nombre avec n’importe quelle unité CSS valide (telle que 100px, 50%, 50em, 100vh) ou un calcul (telle que 100vh - 237px).

    Vous pouvez, par exemple, définir la hauteur minimale d’une ligne pour étirer la hauteur totale de la page, ce qui vous donne des options attrayantes pour les images et vidéos d’arrière-plan de la page entière.

  • Choisissez un paramètre Vertical Alignment pour aligner les conteneurs de contenu qui sont 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 simple couleur ou une image d’arrière-plan et gérer des effets plus sophistiqués.

Couleur d’arrière-plan

Spécifiez la couleur d’arrière-plan 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 ligne. Vous pouvez également régler l’opacité de la couleur.

Aucune couleur (par défaut)

Vous pouvez définir la valeur de l’une des trois façons suivantes :

  • Un nom de couleur prédéfini, tel que White
  • La valeur de couleur hexadécimale de la couleur, par exemple #ffffff
  • La valeur rgba de la couleur, avec le pourcentage d’opacité, comme rgba(255, 255, 255, 0.75)

Si vous souhaitez choisir une couleur, cliquez sur l’échantillon à gauche de la zone Aucune couleur.

Choix d’un échantillon de 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 chiffre indique le pourcentage d’opacité actuel sous forme décimale. Vous pouvez utiliser le curseur pour ajuster l’opacité ou saisir la valeur décimale souhaitée.

Paramètre d’opacité

NOTE
Page Builder prend également en charge une couche de transparence, ou couche alpha, dans les images d’arrière-plan qui peuvent être utilisées pour créer des arrière-plans avec différents degrés d’opacité.

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.

Type d’arrière-plan

Paramètres de type d’image

Si vous définissez Background Type ​sur Image, utilisez les paramètres suivants pour définir l’affichage de l’image d’arrière-plan.

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 l’ordinateur local vers la galerie, puis l’applique comme image d’arrière-plan de la ligne.
    Select from Gallery Vous invite à choisir une image existante de la galerie comme image d’arrière-plan pour la ligne.
    Icône Appareil photo {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 - 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 rangée.
    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 actuelle.

    Taille d’arrière-plan {width="250"}

  • 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 épingle push qui joint l’image à la rangée à 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 au fur et à mesure que la page fait défiler. Utilisez l’arrière-plan de Parallax 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 fait défiler l’image et est fixe à la position d’arrière-plan spécifiée.
  • Background Repeat - Défini 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 - Entrez 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

    URL de la vidéo d’arrière-plan {width="300"}

  • Overlay Color - Sélectionnez une couleur pour appliquer une teinte transparente à la vidéo.

  • Infinite Loop - Définissez cette variable sur No pour que la vidéo soit lue une fois et s’arrête. Lorsque cette option est définie sur Yes (valeur par défaut), la vidéo se répète en boucle infinie.

  • Lazy Load - Défini sur No pour que la vidéo se charge avec la page, même lorsqu’elle n’est pas visible. Lorsque cette option est définie sur Yes (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 cette variable sur No pour que la lecture de la vidéo démarre immédiatement après son chargement, qu’elle soit visible ou non. Lorsque cette option est définie sur Yes (valeur par défaut), la lecture de la vidéo démarre uniquement 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.

Contexte de Parallax

Utilisez ces options pour contrôler la vitesse d’une image ou d’une vidéo d’arrière-plan de défilement 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 un sentiment d’immersion.

  • Définissez Activer l’arrière-plan Parallax sur Yes.
  • Saisissez la vitesse de parallaxe comme valeur décimale entre -1.0 et 2.0.

Paramètres d’arrière-plan de Parallax

Avancé

  • Pour contrôler le positionnement horizontal des conteneurs de contenu qui sont ajoutés à la ligne, 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 lignes, en tenant compte de toute 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 qui est spécifiée.
    Right Aligne le conteneur de contenu le long de la bordure droite du conteneur de lignes, en tenant compte de toute marge intérieure spécifiée.
  • Définissez le style 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 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 :

    Couleur de bordure {width="600" modal="regular"}

    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.

    La ligne de l’exemple suivant a un rayon de bordure de 15.

    Rangée avec un rayon de bordure de 15 {width="500"}

  • (Facultatif) Indiquez les noms de CSS classes dans la feuille de style actuelle à appliquer au conteneur de lignes.

    Séparez plusieurs noms de classe par un espace.

  • Entrez des valeurs, en pixels, pour que Margins and Padding indique les marges extérieures et le remplissage intérieur 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 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

    Marges et marge intérieure {width="600" modal="regular"}

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d