Eléments - Texte
Utilisez le type de contenu Texte pour ajouter un conteneur de texte avec un éditeur WYSIWYG ("Ce que vous voyez est ce que vous obtenez") dans l’ Page Builder étape. De plus, vous pouvez ajouter des liens, des images, des variables et des widgets au texte à partir de la barre d’outils de l’éditeur.
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.
Zone d’outils Conteneur de texte
Ajouter du texte
-
Dans le panneau Page Builder, développez Elements et faites glisser un espace réservé Text sur une ligne, une colonne ou un ensemble d’onglets sur la scène.
{width="600" modal="regular"}
-
Utilisez l’éditeur pour saisir et mettre en forme le texte, le cas échéant.
Pour plus d’informations, voir Utilisation de l’éditeur.
{width="600"}
Créer 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 pour un numéro de téléphone ou un email, voir Ajout de variables personnalisées.
-
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
-
Sélectionnez le texte dans l’espace de l’éditeur et cliquez sur Insérer/modifier le lien ( {width="20"} ) dans la barre d’outils de l’éditeur.
{width="500" modal="regular"}
-
Pour URL, saisissez le lien relatif que vous avez préparé.
-
Définissez Target sur
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.
-
Pour Title, saisissez
Shop Tees
.L’attribut de lien
Title
est utilisé par certains navigateurs comme info-bulle. -
Pour enregistrer le lien et revenir à l’espace de travail Page Builder, cliquez sur OK.
{width="500" modal="regular"}
Insérer une image
-
Placez le curseur dans le texte à l’endroit où vous souhaitez insérer l’image.
-
Cliquez sur Insérer/modifier l’image ( {width="20"} ) dans la barre d’outils de l’éditeur.
-
Pour Source, cliquez sur l’icône de recherche pour utiliser l’espace de stockage multimédia pour localiser et sélectionner une image.
-
Pour Image Description, saisissez un texte descriptif pour l’image.
Ce texte renseigne l’attribut de lien
alt
pour l’image et est utilisé par certains navigateurs pour l’accessibilité. -
Saisissez la largeur et la hauteur Dimensions, en pixels, pour le rendu de l’image sur la page.
Laissez la case Constrain proportions cochée pour conserver automatiquement les proportions de l’image.
-
Pour insérer l'image, puis revenir à l'espace de travail Page Builder, cliquez sur OK.
Modification des paramètres de texte
-
Pointez sur le conteneur de texte pour afficher la boîte à outils et sélectionnez l’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. -
Mettez à jour le contenu suivant vos besoins.
-
Mettez à jour les paramètres Advanced si nécessaire.
-
Pour contrôler le positionnement du texte dans le conteneur parent, 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 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 le style Border 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 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.
Séparez plusieurs noms de classe par un espace.
-
Saisissez des valeurs, en pixels, pour le Margins and Padding afin de 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
-
-
Une fois l’opération terminée, cliquez sur Save pour appliquer les paramètres et revenir à l’espace de travail Page Builder.