Eléments - Texte

Utilisez la variable Texte type de contenu pour ajouter un conteneur de texte avec un éditeur WYSIWYG ("Ce que vous voyez est ce que vous obtenez") dans la variable Page Builder étape. Vous pouvez en outre ajouter des liens, des images, des variableset des widgets au texte à partir de la barre d’outils de l’éditeur.

Texte formaté sur une bannière {width="700"}

NOTE
Si vous apportez des modifications importantes à la variable Page Builder , il est recommandé d’augmenter le nombre de Durée de vie de la session d’administration pour empêcher l’expiration de la session pendant que vous travaillez.

Outils de l’éditeur de texte

Vous pouvez accéder à l’éditeur de texte directement à partir de l’étape ou d’une page de paramètres. Les modifications apportées directement à la scène sont enregistrées automatiquement. Pour plus d’informations, voir Utilisation de l’éditeur.

Outil d’éditeur de texte - TinyMCE {width="600"}

Zone d’outils Conteneur de texte

Zone d’outils Conteneur de texte {width="600"}

Outil
Icône
Description
Déplacer
Icône Déplacer {width="25"}
Déplace le conteneur de texte vers un autre emplacement valide sur la page.
(label)
TEXTE
Identifie le conteneur actif en tant qu’élément de texte.
Paramètres
Icône Paramètres {width="25"}
Ouvre les propriétés du conteneur de texte en mode d’édition.
Masquer
Icône Masquer {width="25"}
Masque le conteneur de texte.
Afficher
Icône Afficher {width="25"}
Affiche le conteneur de texte masqué.
Dupliquer
Icône Dupliquer {width="25"}
Effectue une copie du conteneur de texte.
Supprimer
Icône Supprimer {width="25"}
Supprime le conteneur de texte 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 du texte

  1. Dans le Page Builder panneau, développer Elements et faites glisser un Text d’un espace réservé à une ligne, une colonne ou un ensemble d’onglets sur l’étape.

    Faire glisser un espace réservé de texte sur l’étape {width="600" modal="regular"}

  2. Utilisez l’éditeur pour saisir et mettre en forme le texte, le cas échéant.

    Pour plus d’informations, voir Utilisation de l’éditeur.

    Éditeur de texte avec contenu {width="600"}

Création d’un lien

Le bouton Insérer un lien de l’éditeur facilite l’ajout d’un lien hypertexte à une image dans la galerie. Cependant, il peut également être utilisé pour créer un lien intégré dans du texte, si vous disposez déjà de l’URL. Contrairement au bouton Widget, le bouton Insérer/Modifier le lien n’est pas intégré aux pages, produits ou catégories du magasin.

Pour créer un lien vers un numéro de téléphone ou un email, voir Ajout de variables personnalisées.

  1. Dans le storefront, accédez à la page qui doit être la destination cible du lien et copiez les informations sur le lien.

    Vous pouvez utiliser l’URL complète ou une URL relative qui omet la référence à votre domaine de magasin.

    URL complète - https://mystore.com/women/tops-women/tees-women.html

    URL relative - ../women/tops-women/tees-women.html

  2. Sélectionnez le texte dans l’espace de l’éditeur, puis cliquez sur Lien d’insertion/de modification ( Bouton Insérer/Modifier un lien {width="20"} ) dans la barre d’outils de l’éditeur.

    Ajout d’un lien vers du texte formaté {width="500" modal="regular"}

  3. Pour URL, saisissez le lien relatif que vous avez préparé.

  4. Définir Target to None.

    Ce paramètre permet d’ouvrir la page dans la même fenêtre du navigateur, plutôt que d’ouvrir un nouvel onglet.

  5. Pour Title, saisissez Shop Tees.

    La variable Title L’attribut link est utilisé par certains navigateurs comme info-bulle.

  6. Pour enregistrer le lien et revenir au Page Builder espace de travail, cliquez sur OK.

    Détails du lien {width="500" modal="regular"}

Insérer une image

  1. Placez le curseur dans le texte à l’endroit où vous souhaitez insérer l’image.

  2. Cliquez sur Insérer/modifier une image ( Bouton Insérer/modifier une image {width="20"} ) dans la barre d’outils de l’éditeur.

  3. Pour Source, cliquez sur l’icône de recherche pour utiliser l’espace de stockage multimédia pour localiser et sélectionner une image.

  4. Pour Image Description, saisissez un texte descriptif pour l’image.

    Ce texte renseigne la variable alt l’attribut link pour l’image et est utilisé par certains navigateurs pour l’accessibilité.

  5. Saisissez la largeur et la hauteur. Dimensions, en pixels, pour le rendu de l’image sur la page.

    Conserver la variable Constrain proportions cochée pour conserver automatiquement les proportions de l’image.

  6. Pour insérer l’image, puis revenir au Page Builder espace de travail, cliquez sur OK.

Modification des paramètres de texte

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

    note note
    NOTE
    Étant donné que le conteneur de texte est imbriqué de manière stricte dans un autre conteneur, assurez-vous que vous disposez de la boîte à outils appropriée.
  2. Mettez à jour le contenu suivant vos besoins.

  3. Mettez à jour le Advanced ​selon les besoins.

    • Pour contrôler le positionnement du texte dans le conteneur parent, 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 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.
    • Définissez la variable Border style appliqué aux quatre côtés du conteneur de texte :

      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 des bordures :

      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 des CSS classes de la feuille de style actuelle à appliquer au conteneur.

      Séparez plusieurs noms de classe par un espace.

    • Saisissez des valeurs, en pixels, pour la variable Margins and Padding pour déterminer les marges extérieures et la marge intérieure du conteneur de texte.

      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
  4. Lorsque vous avez terminé, cliquez sur Save pour appliquer les paramètres et revenir au Page Builder workspace.

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