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

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

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. Choisissez ensuite le dossier de destination et 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 :

{width="500"}

Dans la barre latérale Admin, accédez à Content > Elements>Pages.

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 sur No.

• Par Page Title, saisissez Simple Page.

{width="600" modal="regular"}

Développez la section Design .

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

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

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

{width="600" modal="regular"}

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.

Développez la section Content .

Cette action affiche l’aperçu Page Builder avec une ligne vide.

{width="600" modal="regular"}

Cliquez sur Edit with Page Builder ou dans la zone de prévisualisation du contenu.

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

Pointez sur la ligne vide pour afficher la palette.

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

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

Dans la boîte à outils Ligne, choisissez l’icône Paramètres ( {width="20"}.

Sous Appearance, choisissez Fond perdu total.

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

{width="600" modal="regular"}

Faites défiler jusqu’à la section Advanced​et définissez tous les paramètres Margins and Padding​sur 0.

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

{width="600" modal="regular"}

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

Dans le panneau Page Builder, développez Media et faites glisser un espace réservé Bannière vers la scène.

{width="600" modal="regular"}

Survolez le conteneur de bannières pour afficher la palette d’outils.

Outre la boîte à outils, les boutons Charger l’image et Sélectionner dans la galerie sont inclus afin que vous puissiez apporter des modifications rapides à la bannière directement depuis la scène.

{width="600" modal="regular"}

Dans la boîte à outils Bannière, choisissez l’icône Paramètres ( {width="20"} ).

Sous Appearance, choisissez Collage Right.

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

{width="600" modal="regular"}

Faites défiler jusqu’à la section Background​et définissez l’image d’arrière-plan de la bannière :

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

  {width="600" modal="regular"}

  Accédez au répertoire dans lequel vous avez enregistré les ressources de page simple extraites et choisissez le fichier wide-banner-background.jpg.

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

  {width="600" modal="regular"}

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

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

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

  {width="600" modal="regular"}

• Faites défiler la page vers le haut et cliquez sur Save pour enregistrer les paramètres et revenir à l’espace de travail Page Builder.

  L’arrière-plan apparaît sur la scène et étend toute la largeur de la ligne.

  {width="600" modal="regular"}

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

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

Get fit and look fab in new seasonal styles.

New LUMA yoga collection

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

{width="600" modal="regular"}

Appliquez une 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.

  {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.

{width="600" modal="regular"}
__

Pointez pour afficher la boîte à outils Bannière, sélectionnez à nouveau l’icône Paramètres ( {width="20"} ), puis faites défiler l’écran jusqu’à la section Content.

Notez que votre texte s’affiche dans la zone Texte du message. Le texte peut être saisi et modifié à partir de l’étape ou de la section Content​des paramètres de la bannière.

{width="600" modal="regular"}

En poursuivant dans la section Content, définissez le lien et le bouton de la bannière :

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

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

  {width="600" modal="regular"}

• Définissez Show Button sur Always.

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

• Par Button Type, acceptez la valeur par défaut Primary.

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

Définissez la superposition de 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 sur toute la largeur de la bannière.

• Définissez Show Overlay sur Always.

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

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

  Cliquez ensuite sur Apply.

  {width="600" modal="regular"}

• Faites défiler la page vers le haut et cliquez sur Save pour enregistrer les paramètres et revenir à l’espace de travail Page Builder.

  Le bouton s’affiche sous le message de bannière sur l’étape.

  {width="600" modal="regular"}

Dans le coin supérieur droit de la scène, cliquez sur l’icône Fermer le plein écran ( ).

Cliquer sur cette icône vous renvoie à la section Content​de la page dont l’aperçu est affiché.

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

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

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

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

Développez la section Content .

Cliquez sur Edit with Page Builder ou dans la zone de prévisualisation du contenu.

Dans le panneau Page Builder sous Layout, faites glisser un espace réservé​ Row ​vers la scène et placez-le au-dessus de la bannière.

La ligne directrice rouge marque la frontière entre les deux lignes.

{width="600" modal="regular"}

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

{width="600" modal="regular"}

Sous Appearance, acceptez le paramètre par défaut Contenu.

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

{width="600" modal="regular"}

Dans le coin supérieur droit, cliquez sur Save pour enregistrer les paramètres et revenir à l’espace de travail Page Builder.

Dans le panneau Page Builder sous Layout, faites glisser un espace réservé​ Column ​vers la nouvelle ligne.

{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.

{width="600" modal="regular"}

Dans le coin supérieur gauche de la première colonne, cliquez sur le contrôle circulaire Grid ( ) pour afficher les instructions relatives à la grille.

La grille garantit l’alignement cohérent du contenu et son rendu correct sur les ordinateurs de bureau et les appareils mobiles. Pour plus d’informations sur la configuration de la taille de la grille, consultez la section Configurer Page Builder de la rubrique Configuration de la Page Builder.

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

{width="600" modal="regular"}

Dans le panneau Page Builder, développez la section Media et faites glisser un espace réservé Image vers la première colonne.

{width="600" modal="regular"}

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

{width="600" modal="regular"}

Pour une image située sur votre système, vous pouvez choisir l’une des méthodes suivantes :

• Charger le 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 simple extraites et choisissez le fichier small-banner-1.jpg.

  {width="600" modal="regular"}

  Répétez cette action pour ajouter le fichier small-banner-2.jpg à la deuxième colonne.

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

  {width="600" modal="regular"}

  Répétez cette action pour ajouter le fichier small-banner-2.jpg à la deuxième colonne.

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

Pointez sur l’image de la première colonne pour afficher la boîte à outils et choisissez l’icône Paramètres ( {width="20"} ).

{width="600" modal="regular"}

Associez l’image à une catégorie :

• Faites défiler vers le bas et définissez Lien sur Category.

• Dans l’arborescence des catégories, accédez à la catégorie Men's Hoodies & Sweatshirt et sélectionnez-la.

• Dans le coin supérieur droit, Save les paramètres et revenez à l’espace de travail Page Builder.

Répétez l’étape précédente pour lier l’image de la deuxième colonne à la catégorie Engrenage.

Dans le coin supérieur droit de la scène, cliquez sur l’icône Fermer le plein écran ( ).

Cliquer sur cette icône vous renvoie à la section Content​de la page dont l’aperçu est affiché.

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

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

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

Développez la section Content .

Cliquez sur Edit with Page Builder ou dans la zone de prévisualisation du contenu.

Dans le panneau Page Builder sous Layout, faites glisser un espace réservé​ Row ​vers la scène et placez-le au-dessus de la ligne créée dans la deuxième partie de cet exercice.

Une ligne directrice rouge marque la frontière entre les deux lignes.

{width="600" modal="regular"}

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

{width="600" modal="regular"}

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 étendent toute la largeur de la ligne.

{width="600" modal="regular"}

Dans la section Background, saisissez #f1f1f1 comme Background Color.

{width="600" modal="regular"}

Faites défiler jusqu’à la section Advanced​et définissez toutes les valeurs Marges et marge intérieure​sur 0.

{width="600" modal="regular"}

Faites défiler la page vers le haut et cliquez sur Save pour enregistrer les paramètres et revenir à l’espace de travail Page Builder.

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

{width="600" modal="regular"}

Dans le panneau Page Builder sous Layout, faites glisser un espace réservé​ Column ​vers la ligne supérieure de la scène.

{width="600" modal="regular"}

Faites glisser la bordure droite de la première colonne vers la position 4 de 12 (4/12) sur la grille.

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

{width="600" modal="regular"}

Pointez sur le conteneur de la première colonne pour afficher la boîte à outils et choisissez l’icône Paramètres ( {width="20"} ).

Faites défiler jusqu’à la section Advanced​et définissez toutes les valeurs Marges et marge intérieure​sur 0.

{width="600" modal="regular"}

Faites défiler la page vers le haut et cliquez sur Save pour enregistrer les paramètres et revenir à l’espace de travail Page Builder.

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

{width="600" modal="regular"}

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

{width="600" modal="regular"}

Accédez au répertoire dans lequel vous avez enregistré les ressources de page simple extraites et choisissez le fichier review-image.jpg.

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

{width="600" modal="regular"}

Dans le panneau Page Builder, développez la section Elements et faites glisser le type de contenu Text vers la deuxième colonne.

{width="600" modal="regular"}

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

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

{width="600" modal="regular"}

• Dans la boîte de dialogue Insert/edit image, cliquez sur l’icône_ Rechercher _( ) en regard du champ​Source.

  {width="600" modal="regular"}

• Sur la page Select Images, cliquez sur Choose Files.

• Dans le dossier dans lequel vous avez enregistré les ressources de la page simple, 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 .

  {width="600" modal="regular"}

• Par 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 Aligner au centre ( ) pour centrer l’image dans la colonne.

  {width="600" modal="regular"}

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 le tapez.

{width="600" modal="regular"}

Mettre en forme le 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 et, dans la barre d’outils de l’éditeur, sous Formats, choisissez Paragraph.

Le texte est mis en forme en fonction de la feuille de style associée au thème.

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

• Pointez sur l’image de la première colonne pour afficher la boîte à outils et choisissez l’icône Paramètres ( {width="20"} ).

• Sous la miniature de l’image, prenez note des dimensions de l’image.

  {width="600" modal="regular"}

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

Centrer le contenu verticalement dans la deuxième colonne :

• Passez la souris sur la deuxième colonne pour afficher la palette et sélectionnez l’icône Paramètres ( {width="20"} ).

• Par Minimum Height, saisissez 450 comme hauteur en pixels de l’image dans la première colonne.

• Définissez Vertical Alignment sur Center.

{width="600" modal="regular"}

Faites défiler jusqu’à la section Advanced​et définissez toutes les valeurs Margins and Padding​sur zéro ( 0 ).

{width="600" modal="regular"}

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 à l’espace de travail Page Builder.

{width="600" modal="regular"}

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

Dans la boîte de dialogue Insérer un lien, spécifiez le lien vers le produit du catalogue :

• Saisissez le URL du produit.

  Vous pouvez saisir une URL relative ou complète. Le lien relatif suivant est saisi pour cet exemple :

  ../antonia-racer-tank.html

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

  L’attribut Lien du titre est utilisé par certains navigateurs comme info-bulle.

  {width="600" modal="regular"}

• Une fois l’opération terminée, cliquez sur OK pour enregistrer le lien.

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

  {width="600" modal="regular"}

Dans le coin supérieur droit de la scène, cliquez sur l’icône Fermer le plein écran ( ).

Cliquer sur cette icône vous renvoie à la section Content​de la page dont l’aperçu est affiché.

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

Si nécessaire, développez dans la section Content .

Cliquez sur Edit with Page Builder ou dans la zone de prévisualisation du contenu.

Pointez sur la première ligne de la scène pour afficher la palette et sélectionnez l’icône Déplacer ( ).

{width="600" modal="regular"}

Maintenez le bouton de la souris enfoncé pendant que vous vérifiez que tout le contenu de la ligne est sélectionné, puis faites glisser la ligne en dessous de la ligne directrice rouge, au bas de la page.

{width="600" modal="regular"}

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

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

Dans le coin supérieur droit de la scène, cliquez sur l’icône Fermer le plein écran ( ).

Cliquer sur cette icône vous renvoie à la section Content​de la page dont l’aperçu est affiché.

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

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