Page Builder Présentation 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. Sélectionnez 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"}

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

• Pour Page Title, saisissez Simple Page.

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

Développez la section sur Design .

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

Si les exemples de données sont disponibles, définissez New Theme sur Magento Luma. Sinon, vous pouvez choisir un autre thème disponible ou le 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 thème différent à 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 sur Content .

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

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

Cliquez sur Edit with Page Builder ou à l’intérieur de la zone d’aperçu du contenu.

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

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.

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

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

Sous Appearance, choisissez Fond complet.

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.

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

Faites défiler l’écran 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 la largeur complète 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 jusqu’en haut de la page 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 sur la scène.

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

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

Outre la boîte à outils, les boutons Télé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 de la bannière, sélectionnez l’icône Paramètres ( {width="20"} ).

Sous Appearance, choisissez Collage Right.

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

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

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

• Pour 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 simples extraites et sélectionnez le fichier wide-banner-background.jpg.

  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.

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

• Pour 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 du navigateur de bureau est redimensionnée à la largeur d’un appareil mobile.

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

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

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

  {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 le paramètre d’aspect Collage à droite .

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 sélectionnant Paramètres dans la boîte à outils de la bannière.

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

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.

  {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"}

Passez la souris pour afficher la boîte à outils de la 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 bannière.

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

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.

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

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

• Définissez Show Button sur Always.

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

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

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

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éfinissez Show Overlay sur Always.

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

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

  Cliquez ensuite sur Apply.

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

• Faites défiler la page jusqu’en haut de la page 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 la scène.

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

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

Cliquez sur cette icône pour revenir à la section Content ​de la page dont l’aperçu est affiché.

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

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

Si vous y êtes invité, cliquez sur le lien Gestion du cache dans le message en haut de la page et actualisez le 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 sur Content .

Cliquez sur Edit with Page Builder ou à l’intérieur de la zone d’aperçu du contenu.

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

La ligne directrice rouge marque la limite 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 rangée à 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 ​sur 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 la commande circulaire Grid ( ) 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 la grille, voir la section Configurer Page Builder dans la rubrique de configuration Page Builder.

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.

{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 l’image am qui se trouve sur votre système, vous pouvez choisir l’une des méthodes suivantes :

• Télé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 simples 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 seconde colonne.

• Faites 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 l’étape Page Builder. Faites ensuite glisser le fichier small-banner-1.jpg depuis le dossier de ressources de page simple, puis 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 seconde colonne.

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

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

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

Associez l’image à une catégorie :

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

• Dans l’arborescence des catégories, recherchez la catégorie Men's Hoodies & Sweatshirt dans la liste déroulante.

• Dans le coin supérieur droit, Save définissez 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 Gear.

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

Cliquez sur cette icône pour revenir à 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 sélectionnez Save & Close.

Lorsque vous y êtes invité, cliquez sur le lien Gestion du cache dans le message en haut de la page et actualisez le 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 sur Content .

Cliquez sur Edit with Page Builder ou à l’intérieur de la zone d’aperçu du contenu.

Dans le panneau Page Builder sous Layout, faites glisser un espace réservé​ Row ​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.

{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 s’étendent sur 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 l’écran 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 jusqu’en haut de la page 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 rangée est désormais un beige pâle.

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

Dans le panneau Page Builder sous Layout, faites glisser un espace réservé​ Column ​sur 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 quatre sur 12 (4/12) sur la grille.

La taille de la seconde 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 sélectionnez l’icône Paramètres ( {width="20"} ).

Faites défiler l’écran 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 jusqu’en haut de la page 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é de l’image, cliquez sur Upload Image.

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

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

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.

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

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

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

Mise en forme du texte :

• Cliquez n’importe où sur 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.

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’icône Paramètres ( {width="20"} ).

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

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

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

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’icône Paramètres ( {width="20"} ).

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

• Définissez Vertical Alignment sur Center.

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

Faites défiler l’écran 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 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 Title, saisissez le nom du produit.

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

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

• Une fois terminé, cliquez sur OK pour enregistrer le lien.

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

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

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

Cliquez sur cette icône pour revenir à 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 la section de Content .

Cliquez sur Edit with Page Builder ou à l’intérieur de la zone d’aperçu du contenu.

Pointez sur la première ligne de l’étape pour afficher la boîte à outils 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é et faites glisser la ligne jusqu’à 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 seconde position.

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

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

Cliquez sur cette icône pour revenir à 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 sélectionnez Save & Close.

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