Page Builder Présentation de la partie 1 : page simple

Suivez cet exercice en trois parties pour vous familiariser avec la méthode Page Builder espace de travail en créant une page simple qui illustre la facilité de créer des pages riches en contenu de votre propre conception.

Exemple de page simple {width="700" modal="regular"}

NOTE
Ces exercices pratiques sont mis à jour pour prendre en compte les modifications récentes apportées à la variable Page Builder dans la version 2.4.1. Si vous utilisez une version antérieure d’Adobe Commerce, utilisez la variable Page Builder exercices de présentation présentés dans la section Commerce 2.3 Guide de l’utilisateur.

Avant de commencer

Avant de commencer cet exercice, il est recommandé d’augmenter le Durée de vie de la session d’administration pour empêcher l’expiration de la session pendant que vous travaillez.

Vérifiez les paramètres de configuration requis pour la gestion de contenu :

Téléchargement des ressources d’image de présentation

  1. Téléchargez la simple-page-assets et enregistrez le fichier sur votre système local.

  2. Accédez au fichier téléchargé et extrayez les fichiers compressés.

    Sur un système Windows, cliquez avec le bouton droit de la souris et choisissez Extract All fichiers . Sélectionnez ensuite le dossier de destination, puis cliquez sur Extract.

    Sur un système Mac, vous pouvez simplement double-cliquer sur le fichier zip et déplacer les fichiers extraits vers le dossier de destination.

    Le dossier contient les fichiers image suivants :

    Page Builder fichiers de présentation - ressources de page simples {width="500"}

Suivez les trois parties de cette présentation dans l’ordre.

Partie 1 : rangée entière avec bannière

Dans cette partie de l’exercice Page simple, vous créez une page qui comporte une rangée de fond perdu et une bannière. La ligne comporte différentes images d’arrière-plan pour les ordinateurs de bureau et les appareils mobiles.

Page Builder ligne de fond perdu avec bannière {width="700" modal="regular"}

Étape 1 : création d’une page

  1. Sur le Administration barre latérale, accédez à Content > Elements>Pages.

  2. Dans le coin supérieur droit, cliquez sur Add New Page et procédez comme suit :

    • Pour empêcher la publication de cette page dans votre boutique, définissez Enable Page to No.

    • Pour Page Title, saisissez Simple Page.

    Paramètres de page de base {width="600" modal="regular"}

  3. Développer Sélecteur d’extension la valeur Design .

    Notez que Layout est défini sur Page -- Full Width par défaut. En plus des cinq standards layout options, Page Builder ajoute des mises en page pleine largeur pour les pages, les catégories et les produits.

  4. Si les exemples de données sont disponibles, définissez New Theme to Magento Luma. Sinon, vous pouvez choisir un autre thème disponible ou le laisser vide pour utiliser le thème par défaut.

    La variable New Theme ​peut être utilisé pour remplacer le thème par défaut et pour appliquer un autre thème à la page.

    note note
    NOTE
    La disposition Largeur complète ne peut être utilisée qu’avec un paramètre compatible thème.

    Paramètres de conception de page {width="600" modal="regular"}

  5. Dans le coin supérieur droit, cliquez sur Save.

    Lorsque la page est enregistrée, le nom Page simple s’affiche dans le coin supérieur gauche de la page.

Étape 2 : mise en forme de la ligne

  1. Développer Sélecteur d’extension la valeur Content .

    Cette action affiche la variable Page Builder prévisualisez avec une ligne vide.

    note note
    NOTE
    La variable En-tête du contenu est facultatif. Par défaut, il est formaté en tant qu’en-tête de niveau 1 (H1) en fonction du thème. Pour cet exercice, la variable En-tête du contenu n’est pas renseignée.

    Aperçu du contenu de page avec ligne vide {width="600" modal="regular"}

  2. Cliquez sur Edit with Page Builder ou dans la zone d’aperçu du contenu.

    Dans le Page Builder workspace, le panneau de gauche fournit les outils de contenu que vous pouvez utiliser pour créer votre contenu dans l’étape.

  3. Passez la souris sur la ligne vide pour afficher la boîte à outils.

    Chaque conteneur de contenu comporte une boîte à outils avec un ensemble d’options similaire.

    Page Builder boîte à outils row {width="600" modal="regular"}

  4. Dans la boîte à outils Rangée, sélectionnez l’option Paramètres ( Icône Paramètres {width="20"} Icône

  5. Sous Appearance, choisissez Fond perdu.

    Le paramètre d’aspect Plein lit étend les bordures gauche et droite de la zone de contenu de la ligne et de l’arrière-plan sur toute la largeur de la page.

    Paramètres des lignes : fond perdu {width="600" modal="regular"}

  6. Faites défiler l’écran vers le bas jusqu’à Advanced ​et définissez tous les Margins and Padding ​à 0.

    Ce paramètre garantit que la bannière étend la largeur complète de la ligne.

    Paramètres des lignes - marges et marge intérieure {width="600" modal="regular"}

  7. Pour enregistrer les paramètres et revenir au Page Builder espace de travail, faites défiler la page vers le haut, puis cliquez sur Save dans le coin supérieur droit.

Étape 3 : Ajout d’une bannière

NOTE
Page Builder possède un nouveau type de contenu appelé Bannière, qui est présenté dans cette étape. Qu’était-ce qui était auparavant le Bannière dans le menu Contenu , est désormais une Bloc dynamique.
  1. Dans le Page Builder panneau, développer Media et faites glisser un Bannière espace réservé sur la scène.

    Faire glisser un type de contenu de bannière vers la scène {width="600" modal="regular"}

  2. Passez la souris sur le conteneur de bannière pour afficher la boîte à outils.

    note note
    NOTE
    L’étape comporte désormais deux conteneurs de contenu, chacun avec une boîte à outils distincte. Comme la bannière est imbriquée dans la ligne, assurez-vous que vous travaillez dans la boîte à outils appropriée.

    Outre la boîte à outils, la variable Télécharger l’image et Sélectionner dans la galerie sont inclus afin que vous puissiez apporter rapidement des modifications à la bannière directement depuis l’étape.

    Bannière, boîte à outils {width="600" modal="regular"}

  3. Dans la boîte à outils de la bannière, choisissez la variable Paramètres ( Icône Paramètres {width="20"} ).

  4. Sous Appearance, choisissez Collage Right.

    Le paramètre Collage à droite positionne le contenu sur le côté droit de la bannière.

    Aspect de la bannière - collage {width="600" modal="regular"}

  5. Faites défiler l’écran vers le bas jusqu’à Background ​et définissez l’image d’arrière-plan de la bannière :

    • Pour Background Image, cliquez sur Télécharger.

      Arrière-plan de la bannière - image de téléchargement {width="600" modal="regular"}

      Accédez au répertoire dans lequel vous avez enregistré les ressources de page simples extraites et sélectionnez l’option wide-banner-background.jpg fichier .

      L’image est téléchargée et une miniature de l’image téléchargée s’affiche. Le nom du fichier, les dimensions de l’image et la taille du fichier sont indiqués ci-dessous.

      Image d’arrière-plan téléchargée dans la galerie multimédia {width="600" modal="regular"}

    • Pour Background Mobile Image, cliquez sur Télécharger.

      Dans le même répertoire de fichiers, choisissez la variable wide-banner-background-mobile.jpg fichier .

      L’image d’arrière-plan mobile est utilisée pour les appareils mobiles, ainsi que chaque fois qu’une fenêtre du navigateur de bureau est redimensionnée à la largeur d’un appareil mobile.

      Sélection de l’exemple de fichier image de bannière pour mobile {width="600" modal="regular"}

    • Faites défiler la page vers le haut et cliquez sur Save pour enregistrer les paramètres et revenir au Page Builder workspace.

      L’arrière-plan s’affiche sur la scène et étend la largeur totale de la ligne.

      Bannière avec image de fond {width="600" modal="regular"}

    Remarquez le texte d’espace réservé qui s’affiche sur le côté droit de la ligne. La position de ce texte reflète la Collage à droite paramètre d’aspect.

  6. Cliquez sur le texte de l’espace réservé, puis saisissez le message suivant en deux lignes :

    Get fit and look fab in new seasonal styles.

    New LUMA yoga collection

    La barre d’outils de l’éditeur s’affiche au-dessus de la zone de texte. Le texte peut être saisi et formaté directement à partir de l’étape ou en choisissant Paramètres dans la boîte à outils de la bannière.

    Modification du contenu de la bannière à partir de la scène {width="600" modal="regular"}

  7. Appliquer la mise en forme au texte :

    • Sélectionnez la première ligne de texte. Ensuite, dans la barre d’outils de l’éditeur, sous Formats, choisissez Heading 2.

      Application du format Heading 2 {width="600" modal="regular"}

    • Sélectionnez la deuxième ligne de texte. Ensuite, dans la barre d’outils de l’éditeur, sous Formats, choisissez Paragraph.

    Les paramètres de format appliquent les styles de la feuille de style associée au thème actif.

    Bannière dans l’étape de contenu avec texte formaté {width="600" modal="regular"}

__

  1. Pointez sur la boîte à outils de la bannière pour l’afficher. Sélectionnez Paramètres ( Icône Paramètres {width="20"} ), puis faites défiler l’écran jusqu’à l’icône Content.

    Votre texte s’affiche dans la variable Texte du message de la boîte. Le texte peut être saisi et modifié à partir de l’étape ou du Content ​des paramètres de la bannière.

    Paramètres de bannière - texte du message {width="600" modal="regular"}

  2. Dans la section Content, définissez le lien et le bouton de la bannière :

    • Définir Lien to Category, puis cliquez sur Select pour afficher l’arborescence des catégories.

    • Choisir What's New comme catégorie liée.

      Contenu de bannière - lien vers la catégorie {width="600" modal="regular"}

    • Définir Show Button to Always.

    • Pour Button Text, saisissez Shop Now comme texte qui s’affiche sur le bouton.

    • Pour Button Type, acceptez la variable Primary par défaut.

      Le style du bouton du thème actif détermine le format du bouton.

  3. Définissez la superposition de la bannière :

    Vous pouvez utiliser une superposition pour appliquer une couleur d’arrière-plan à la zone de contenu active définie par le paramètre Apparence . L’image d’arrière-plan de la bannière reste visible pendant toute la largeur de la bannière.

    • Définir Show Overlay to Always.

    • Pour Overlay Color, effectuez l’une des opérations suivantes :

      • Cliquez sur le carré de couleur et choisissez l’échantillon blanc.
      • Cliquez sur dans le Aucune couleur zone de texte et saisissez White ou la valeur hexadécimale #ffffff.

      Cliquez ensuite sur Apply.

      Paramètres de bannière - couleur de la superposition des boutons {width="600" modal="regular"}

    • Faites défiler la page vers le haut et cliquez sur Save pour enregistrer les paramètres et revenir au Page Builder workspace.

      Le bouton s’affiche sous le message de bannière sur la scène.

      Bannière dans la scène de contenu avec message texte et bouton {width="600" modal="regular"}

  4. Dans le coin supérieur droit de l’étape, cliquez sur le bouton Fermer le plein écran ( Icône Fermer le plein écran ).

    Cliquez sur cette icône pour revenir au Content ​pour la page avec l’aperçu affiché.

    Vous pouvez basculer entre les deux modes de l’espace de travail à tout moment.

  5. Dans le coin supérieur droit, cliquez sur le bouton Save flèche et choisissez Save & Close.

  6. Si vous y êtes invité, cliquez sur le bouton Gestion du cache dans le message en haut de la page et actualisez le cache non valide.

Partie 2 : ligne contenue avec deux colonnes égales

Dans cette partie de l’exercice, vous ajoutez une ligne à la page et divisez la ligne en deux colonnes égales. Vous ajoutez ensuite une image liée à chaque colonne. Dans les instructions, chaque nouvelle ligne est ajoutée avant la première pour que la variable Page Builder s’aligne sur la scène. À la fin de l’exercice, vous réorganisez les lignes afin qu’elles correspondent à l’exemple Page simple .

Exemple de page utilisant une ligne contenue avec deux colonnes égales {width="600" modal="regular"}

Étape 1 : Ajouter une ligne

  1. Dans la grille Pages , recherchez le Page simple que vous avez créé dans la première partie de cet exercice et sélectionnez Edit dans le Action ​colonne .

  2. Développer Sélecteur d’extension la valeur Content .

  3. Cliquez sur Edit with Page Builder ou dans la zone d’aperçu du contenu.

  4. Dans le Page Builder panneau sous Layout, faites glisser un Row ​positionnez-le au-dessus de la bannière.

    La ligne directrice rouge marque la limite entre les deux lignes.

    Ajout d’une nouvelle ligne au-dessus de la bannière {width="600" modal="regular"}

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

    Boîte à outils de rangée {width="600" modal="regular"}

  6. Sous Appearance, acceptez la variable Contenu ​paramètre par défaut.

    Ce paramètre limite la zone de contenu de la rangée à la largeur de la page telle que définie par le thème.

    Conservation du paramètre d’aspect Contenu par défaut {width="600" modal="regular"}

  7. Dans le coin supérieur droit, cliquez sur Save pour enregistrer les paramètres et revenir au Page Builder workspace.

Etape 2 : Ajouter une colonne

  1. Dans le Page Builder panneau sous Layout, faites glisser un Column ​balise d’emplacement de la nouvelle ligne.

    Faire glisser un type de contenu de colonne vers la scène {width="600" modal="regular"}

    La ligne est maintenant divisée en deux colonnes de largeur égale. Chaque colonne est un conteneur distinct pour le contenu avec sa propre boîte à outils dédiée d’options.

    Rangée avec deux colonnes de largeur égale {width="600" modal="regular"}

  2. Dans le coin supérieur gauche de la première colonne, cliquez sur la circulaire Grille control ( Contrôle de grille ) pour afficher les directives de grille.

    La grille garantit que le contenu est aligné de manière cohérente et qu’il s’affiche correctement sur les ordinateurs de bureau et les appareils mobiles. Pour plus d’informations sur la configuration de la taille de grille, voir la section Configurer Page Builder dans la section Page Builder Rubrique Configuration.

    Les nombres entre parenthèses (6/12) dans la bordure supérieure de chaque conteneur de colonnes indiquent le nombre de divisions de grille dans chaque colonne, ainsi que le nombre total de divisions dans la ligne.

    Affichage des détails de la taille de grille pour la colonne {width="600" modal="regular"}

Etape 3 : Ajout d'images avec des liens

Au cours de cette étape, vous apprendrez à télécharger une image sur la bannière.

  1. Dans le Page Builder , développez l’objet Media et faites glisser un Image balise d’emplacement de la première colonne.

    Faire glisser le type de contenu de l’image vers la première colonne {width="600" modal="regular"}

  2. Insérez l’exemple d’image dans l’espace réservé.

    Espace réservé de l’image {width="600" modal="regular"}

    Pour l’image am qui se trouve sur votre système, vous pouvez choisir l’une des méthodes suivantes :

    • Chargement du fichier image: dans la première colonne, cliquez sur Upload Image. Ensuite, accédez au répertoire dans lequel vous avez enregistré les ressources de page simples extraites et choisissez l’option small-banner-1.jpg fichier .

      Image téléchargée ajoutée à la première colonne {width="600" modal="regular"}

      Répétez cette action pour ajouter le small-banner-2.jpg dans la seconde colonne.

    • Faire glisser le fichier image: sur votre bureau, ouvrez le dossier de ressources de page simple et positionnez-le à côté de la fenêtre du navigateur d’administration dans laquelle vous travaillez avec Page Builder scène. Faites ensuite glisser le fichier small-banner-1.jpg à partir du dossier de ressources de page simple, puis déposez-le dans la première colonne.

      Faire glisser l’image sur la deuxième colonne {width="600" modal="regular"}

      Répétez cette action pour ajouter le small-banner-2.jpg dans la seconde colonne.

  3. Déterminez la page de votre catalogue que vous souhaitez lier à chaque image.

  4. Passez la souris sur l’image dans la première colonne pour afficher la boîte à outils et sélectionnez l’option Paramètres ( Icône Paramètres {width="20"} ).

    Zone d’outils Image {width="600" modal="regular"}

  5. Associez l’image à une catégorie :

    • Faire défiler vers le bas et définir Lien to Category.

    • Dans l’arborescence des catégories, effectuez une analyse approfondie et sélectionnez la variable Men's Hoodies & Sweatshirt catégorie.

    • Dans le coin supérieur droit, Save les paramètres et revenez à la Page Builder workspace.

  6. Répétez l’étape précédente pour associer l’image de la deuxième colonne au Gear catégorie.

  7. Dans le coin supérieur droit de l’étape, cliquez sur le bouton Fermer le plein écran ( Icône Fermer le plein écran ).

    Cliquez sur cette icône pour revenir au Content ​pour la page avec l’aperçu affiché.

  8. Dans le coin supérieur droit, cliquez sur le bouton Save flèche et choisissez Save & Close.

  9. Lorsque vous y êtes invité, cliquez sur l’icône Gestion du cache dans le message en haut de la page et actualisez le cache non valide.

Partie 3 : rangée pleine largeur avec des colonnes inégales

La dernière ligne de cette page contient le contenu d’une révision de produit. Vous ajoutez une ligne pleine largeur et la divisez en deux colonnes de largeurs différentes. Une image d’arrière-plan est ajoutée à la première colonne, avec une couleur d’arrière-plan correspondante appliquée à la ligne pour un effet unifié.

Exemple de ligne pleine largeur avec des colonnes de largeurs différentes {width="500"}

Étape 1 : Ajouter une ligne

  1. Dans la grille Pages , recherchez le Page simple que vous avez créé dans la première partie de cet exercice et sélectionnez Edit dans le Action ​colonne .

  2. Développer Sélecteur d’extension la valeur Content .

  3. Cliquez sur Edit with Page Builder ou dans la zone d’aperçu du contenu.

  4. Dans le Page Builder panneau sous Layout, faites glisser un Row ​espace réservé sur l’étape et placez-le au-dessus de la ligne qui a été créée dans la deuxième partie de cet exercice.

    Une ligne guide rouge marque la limite entre les deux lignes.

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

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

    Boîte à outils de rangée {width="600" modal="regular"}

  6. Sur la page Modifier la ligne sous Appearance, choisissez Full Width.

    Ce paramètre limite la zone de 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.

    Sélection de l’aspect Largeur totale {width="600" modal="regular"}

  7. Dans le Background, saisissez #f1f1f1 comme la propriété​ Background Color.

    Définition de la couleur de fond {width="600" modal="regular"}

  8. Faites défiler l’écran vers le bas jusqu’à Advanced ​et définissez tous les Marges et marge intérieure ​valeurs à 0.

    Définition des marges et de la marge intérieure {width="600" modal="regular"}

  9. Faites défiler la page vers le haut et cliquez sur Save pour enregistrer les paramètres et revenir au Page Builder workspace.

    La couleur d’arrière-plan de la rangée est désormais un beige pâle.

    Rangée avec la couleur d’arrière-plan dans la scène {width="600" modal="regular"}

Etape 2 : Ajouter des colonnes de largeurs différentes

  1. Dans le Page Builder panneau sous Layout, faites glisser un Column ​espace réservé sur la rangée supérieure de l’étape.

    Faire glisser une colonne vers la scène {width="600" modal="regular"}

  2. Faites glisser la bordure droite de la première colonne sur les quatre de 12 (4/12) sur la grille.

    La taille de la seconde colonne s’ajuste à huit sur 12 (8/12).

    Redimensionnement de la première colonne {width="600" modal="regular"}

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

  4. Faites défiler l’écran vers le bas jusqu’à Advanced ​et définissez tous les Marges et marge intérieure ​valeurs à 0.

    Définition des marges et de la marge intérieure {width="600" modal="regular"}

  5. Faites défiler la page vers le haut et cliquez sur Save pour enregistrer les paramètres et revenir au Page Builder workspace.

Etape 3 : Ajouter une image dans la première colonne

  1. Dans le Page Builder panneau, développer Media et faites glisser un Image type de contenu dans la première colonne.

    Faire glisser un type de contenu d’image vers la première colonne {width="600" modal="regular"}

  2. Dans l’espace réservé de l’image, cliquez sur Upload Image.

    Télécharger l’image {width="600" modal="regular"}

  3. Accédez au répertoire dans lequel vous avez enregistré les ressources de page simples extraites et sélectionnez l’option review-image.jpg fichier .

    L’image chargée apparaît dans la première colonne et se fond parfaitement avec la couleur d’arrière-plan de la ligne.

    Image téléchargée ajoutée à la colonne {width="600" modal="regular"}

Étape 4 : Ajout du contenu de la révision à la deuxième colonne

La deuxième colonne de la ligne doit contenir le contenu d’une révision par le client, y compris l’image d’évaluation cinq étoiles et le message texte formaté.

  1. Dans le Page Builder , développez l’objet Elements et faites glisser la Text type de contenu dans la seconde colonne.

    Faire glisser le type de contenu de texte sur l’étape {width="600" modal="regular"}

  2. Cliquez sur dans l’élément de texte pour afficher la barre d’outils de l’éditeur.

  3. Dans la barre d’outils, cliquez sur l’icône Insérer une image ( Icône Insérer une image ) et procédez comme suit :

    Insérer une image dans le texte {width="600" modal="regular"}

    • Dans le Insert/edit image, cliquez sur_ Rechercher _(  Icône Rechercher  ) en regard de l’icône​ Source champ .

      Boîte de dialogue Insérer/modifier une image {width="600" modal="regular"}

    • Sur le Select Images ​page, cliquez sur Choose Files.

    • Dans le dossier où vous avez enregistré les ressources de page simples, choisissez rating.png.

    • De retour sur la page, double-cliquez sur la mosaïque de l’image pour la sélectionner et insérer son URL dans le champ Source .

      Choix de l’image sur la page {width="600" modal="regular"}

    • Pour Image Description, saisissez 5-Star Rating et cliquez sur OK pour insérer l’image dans la colonne.

    • Dans la barre d’outils de l’éditeur, cliquez sur Centrer ( Bouton Aligner au centre ) pour centrer l’image dans la colonne.

      Image d’évaluation centrée {width="600" modal="regular"}

  4. Placez le point d’insertion juste après l’image cinq étoiles, appuyez sur la touche Entrée/Retour pour commencer une nouvelle ligne, puis saisissez le texte suivant :

    Awesome Tank!

    I'm a long distance runner and it keeps me pretty comfortable, although these companies always act like their shirts are magical and really it's just pretty basic stuff. Still it's a great shirt, and I would recommend it.

    Antonia Racer Tank – Reviewed by Allyson

    Le texte est centré au fur et à mesure que vous tapez.

    Vérifier le texte centré dans la colonne {width="600" modal="regular"}

  5. Mise en forme du texte :

    • Cliquez n’importe où dans la première ligne de texte et dans la barre d’outils de l’éditeur sous Formats, choisissez Heading 2.

    • Sélectionnez le texte restant, puis dans la barre d’outils de l’éditeur, sous Formats, choisissez Paragraph.

    Le texte est formaté selon la feuille de style associée au thème.

  6. Obtenez les dimensions de l’image afin de centrer le contenu verticalement dans la colonne :

    • Passez la souris sur l’image dans la première colonne pour afficher la boîte à outils et sélectionnez l’option Paramètres ( Icône Paramètres {width="20"} ).

    • Sous la miniature de l’image, notez les dimensions de l’image.

      Dimensions de l’image affichées sous la miniature {width="600" modal="regular"}

    • Dans le coin supérieur droit, cliquez sur Fermer.

  7. Centrer le contenu verticalement dans la seconde colonne :

    • Passez la souris sur la deuxième colonne pour afficher la boîte à outils et sélectionnez l’option Paramètres ( Icône Paramètres {width="20"} ).
    note note
    NOTE
    Veillez à sélectionner le conteneur de colonnes plutôt que le conteneur de texte pour afficher la boîte à outils appropriée.
    • Pour Minimum Height, saisissez 450 comme hauteur en pixels de l’image dans la première colonne.

    • Définir Vertical Alignment to Center.

    Définir la hauteur minimale et l'alignement vertical {width="600" modal="regular"}

  8. Faites défiler l’écran vers le bas jusqu’à Advanced ​et définissez tous les Margins and Padding ​valeurs à zéro ( 0 ).

    Définition des marges et de la marge intérieure {width="600" modal="regular"}

  9. Faites défiler la page vers le haut et, dans le coin supérieur droit, cliquez sur Save pour enregistrer les paramètres et revenir au Page Builder workspace.

    Rangée avec contenu de révision sur l’étape {width="600" modal="regular"}

Étape 5 : insertion d’un lien produit catalogue

  1. Sélectionnez la variable Antonia Racer Tank et cliquez sur le bouton Insérer un lien ( Icône Insérer un lien ) dans la barre d’outils de l’éditeur.

  2. Dans le Lien d’insertion , spécifiez le lien vers le produit du catalogue :

    • Saisissez le produit. URL.

      Vous pouvez saisir une URL relative ou complète. Le lien relatif suivant est renseigné dans cet exemple :

      ../antonia-racer-tank.html

    • (Facultatif) Pour Titre, saisissez le nom du produit.

      L’attribut de lien Titre est utilisé par certains navigateurs comme info-bulle.

      Insérer un lien dans le texte {width="600" modal="regular"}

    • Lorsque vous avez terminé, cliquez sur OK pour enregistrer le lien.

      Le texte lié est maintenant mis en surbrillance dans la bannière.

      Bannière avec texte lié {width="600" modal="regular"}

  3. Dans le coin supérieur droit de l’étape, cliquez sur le bouton Fermer le plein écran ( Icône Fermer le plein écran ).

    Cliquez sur cette icône pour revenir au Content ​pour la page avec l’aperçu affiché.

  4. Dans le coin supérieur droit, cliquez sur Save.

Étape 6 : réorganisation des lignes

Une fois les trois lignes terminées, la dernière étape consiste à réorganiser les lignes pour qu’elles correspondent à l’original. Page simple par exemple. Pour correspondre à l’exemple d’origine, la première ligne doit être déplacée vers le bas et la dernière vers le haut.

  1. Si nécessaire, développez Sélecteur d’extension la valeur Content .

  2. Cliquez sur Edit with Page Builder ou dans la zone d’aperçu du contenu.

  3. Passez la souris sur la première ligne de l’étape pour afficher la boîte à outils et sélectionner l’option Déplacer ( Icône Déplacer ).

    Déplacer {width="600" modal="regular"}

  4. Maintenez le bouton de la souris enfoncé pendant que vous vérifiez que tout le contenu de la ligne est sélectionné et faites glisser la ligne jusqu’à la ligne directrice rouge au bas de la page.

    note note
    NOTE
    Si vous déplacez accidentellement une partie seulement du contenu, telle que l’image, il vous suffit de déplacer le contenu à l’endroit où il se trouve, puis de réessayer.

    Déplacement d’une ligne sur la scène {width="600" modal="regular"}

  5. Répétez cette procédure pour déplacer la première ligne vers la seconde position.

    L’ordre des lignes sur votre page correspond désormais à l’exemple Page simple .

  6. Dans le coin supérieur droit de l’étape, cliquez sur le bouton Fermer le plein écran ( Icône Fermer le plein écran ).

    Cliquez sur cette icône pour revenir au Content ​pour la page avec l’aperçu affiché.

  7. Dans le coin supérieur droit, cliquez sur le bouton Save flèche et choisissez Save & Close.

  8. Si vous y êtes invité, cliquez sur le bouton Gestion du cache dans le message en haut de la page et actualisez le cache non valide.

Vous avez terminé l’exercice Page simple . Conservez le travail que vous avez créé afin que vous puissiez y faire référence ultérieurement.

Lorsque vous êtes prêt, passez à Partie 2 : blocs.

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