Ajout de widgets Editeur de texte à l'agencement de la page d'arrivée

Dans cette leçon, vous ajoutez deux widgets Editeur de texte afin de créer des bannières publicitaires dans la partie supérieure de votre agencement. Dans le widget Editeur de texte, vous pouvez utiliser du code HTML qui affiche le texte dans la bannière publicitaire.

Pourquoi et quand exécuter cette tâche

La capture d'écran suivante représente deux widgets d'éditeur de texte qui forment les annonces publicitaires Livraison gratuite et Lunettes de soleil de designer dans les agencements :


Widgets Editeur de texte

Pour en savoir plus sur le widget Editeur de texte, lisez la rubrique suivante :

Procédure

  1. Dans l'outil Commerce Composer, assurez-vous de vous trouver dans l'onglet Conception d'agencement.
  2. Dans la maquette fonctionnelle, cliquez sur l'emplacement 2.
  3. Dans la zone Filtrer par, entrez Texte.
  4. Cliquez sur Widget Editeur de texte, puis cliquez sur OK.
    Le widget est créé et l'éditeur s'affiche sous ses propriétés.
  5. Entrée
    Dans l'éditeur, vous pouvez travailler en mode éditeur ou en mode source :
    • En mode éditeur, vous pouvez éditer le contenu avec les fonctions proposées dans la barre d'outils et afficher les modifications au fur et à mesure.
    • En mode source HTML, vous pouvez écrire ou coller du code HTML. Le code peut contenir des styles internes qui définissent la couleur d'arrière-plan, le style et la couleur de la police ainsi que l'alignement du texte. Votre contenu peut apparaître différemment dans votre boutique en ligne et dans l'éditeur. En effet, votre magasin peut utiliser des feuilles de style (fichiers CSS) qui peuvent potentiellement remplacer le style de base que l'éditeur utilise. Il est important d'utiliser l'aperçu du magasin pour vérifier l'affichage de votre contenu HTML, même si l'éditeur fournit un affichage tel écrit - tel écran.
  6. Entrez Livraison gratuite tout le mois !. Utilisez les fonctions d'édition de la barre d'outils pour formater le texte et le mettre en couleur.
    Vous pouvez aussi aller plus vite en collant du code HTML dans l'éditeur :
    1. Cliquez sur Source.
    2. Collez le code HTML suivant dans l'éditeur : 
      <div dir="ltr" style="padding:10px 0;background-color:#f5f5f5;color:#ff0000;font-size:15px;text-align:center;">
	<b>Free Shipping</b> All This Month!</div>
    3. Cliquez sur Source à nouveau.
      L'éditeur affiche une version tel écran - tel écrit du contenu du widget :
      Exemple de widget Editeur de texte
  7. Cliquez sur OK.
  8. Dans la maquette fonctionnelle, cliquez sur l'emplacement 3.
  9. Dans la zone Filtrer par, entrez Texte.
  10. Cliquez sur Widget Editeur de texte, puis cliquez sur OK.
    Le widget est créé et l'éditeur s'affiche sous ses propriétés.
  11. Cliquez sur Source.
  12. Collez le code HTML suivant dans l'éditeur : 
    <div dir="ltr" style="padding:10px 0;background-color:#f5f5f5;color:#003366;font-size:15px;text-align:center;">
	<b>Designer Sunglasses</b> 50% Off</div>
  13. Cliquez sur Source à nouveau.
    L'éditeur affiche une version tel écran - tel écrit du contenu du widget :
    Exemple 2 de widget Editeur de texte
  14. Cliquez sur OK.
  15. Cliquez sur Enregistrer et prévisualiser.

    Votre agencement contient désormais trois widgets, comme illustré ci-après :


    Widgets Editeur de texte - Résultat

Résultats

Au cours de cette leçon, vous avez ajouté deux widgets Editeur de texte afin d'afficher des bannières publicitaires dans l'agencement. Dans la leçon suivante, vous allez ajouter un widget Recommandation de contenu qui affiche l'annonce principale de l'agencement.