Page Builder Workspace

When Page Builder est activé, la variable Content ​Le processus de création de section et de contenu est modifié pour tirer parti des Page Builder outils pour CMS pages, product et category pages, blocs, et blocs dynamiques. Cette section comprend une_ En-tête du contenu _, un aperçu du contenu et un accès facile au mode plein écran Page Builder workspace.

section Contenu avec Page Builder aperçu {width="700" modal="regular"}

En-tête du contenu

Comme les moteurs de recherche recherchent les en-têtes de niveau 1 (H1), l’ajout d’un en-tête de niveau 1 est un moyen facile de s’assurer que la page est correctement indexée.

NOTE
La variable Content Heading ​Le champ qui apparaît en haut de la page est un champ hérité qui prend en charge le contenu créé avec la version précédente. Commerce versions. Cela ne fait pas partie de Page Builder. La variable Content Heading est formaté en tant qu’en-tête H1 en fonction de la feuille de style associée au thème actif. Il est positionné juste au-dessus de la zone de contenu active définie par la variable Page Builder scène.

Pour un meilleur contrôle sur le positionnement et le format des en-têtes de tous les niveaux, il est recommandé de laisser la variable Content Heading ​vide et utilisez la variable Page Builder En-tête type de contenu.

En-tête de contenu et autres en-têtes {width="700" modal="regular"}

Aperçu

Lorsque vous développez l’objet Content ​et qu’il existe du contenu créé avec Page Builder, il affiche un aperçu du contenu tel qu’il apparaîtrait dans une page. Cliquez sur Edit with Page Builder ​ou dans la zone d’aperçu du contenu pour ouvrir la Page Builder espace de travail, où vous pouvez effectuer les mises à jour nécessaires.

Aperçu de la description du produit {width="500" modal="regular"}

NOTE
Pour les formulaires de produit et de catégorie, cet aperçu de contenu est activé par défaut, mais peut être désactivé. Si les performances souffrent du chargement de l’aperçu, vous pouvez désactiver l’aperçu dans la variable Configuration de la gestion de contenu paramètres.

Évaluation

Lorsque vous ouvrez la variable Page Builder espace de travail de l’aperçu, l’étape est la principale zone de travail dans laquelle vous pouvez créer et formater du contenu, et même apporter des modifications rapides au contenu en direct. La scène est initialement vide. Elle fournit la surface de conception sur laquelle vous pouvez faire glisser des lignes, des colonnes et des onglets à partir du panneau de gauche.

NOTE
À compter de la version 2.4.1, la modification du contenu s’affiche désormais en plein écran uniquement pour toutes les zones contrôlées par Page Builder: pages CMS, pages de produits et de catégories, blocs et blocs dynamiques. La modification en plein écran met l’accent sur votre contenu et fournit une vue qui correspond mieux à l’expérience de l’utilisateur sur le storefront.

Évaluation du contenu de la page {width="600" modal="regular"}

NOTE
Si vous apportez des modifications importantes à la variable Page Builder , il est recommandé d’augmenter le nombre de Durée de vie de la session d’administration pour empêcher l’expiration de la session pendant que vous travaillez.

Fenêtres d’affichage

A viewport est la zone visible d’une page web qu’un utilisateur voit. En mode de conception en plein écran, les boutons de fenêtre d’affichage s’affichent au-dessus de la balise Page Builder étape pour vous montrer le contenu tel que l’utilisateur le voit sur le storefront.

Boutons d’affichage {width="500" modal="regular"}

Page Builder définit également des points d’arrêt pour les fenêtres d’affichage. Les points d’arrêt définissent les largeurs minimales et maximales au sein desquelles certains styles sont appliqués. La variable Page Builder Les fenêtres d’affichage fournissent les points d’arrêt de contenu suivants :

  • Point d’arrêt du bureaumin-width: 1024px. Ce point d’arrêt applique les styles définis pour les largeurs de fenêtre d’affichage qui mesurent 1 024 pixels et plus.
  • Points d’arrêt mobilesmax-width: 768px, min-width: 640px. Ces points d’arrêt appliquent des styles définis pour les largeurs de fenêtre d’affichage comprises entre 768 et 640 pixels.

Page Builder les fenêtres d’affichage proposent deux fonctionnalités : aperçus de contenu et paramètres des points d’arrêt.

Prévisualisations du contenu

Par défaut, Page Builder fournit deux aperçus de fenêtre d’affichage :

  • Bureau — Affiche l’aperçu du contenu sans largeur prédéfinie. Les styles définis par l’appli de bureau (à l’aide d’une largeur minimale de 1 024 pixels au point d’arrêt) sont toujours appliqués à la page. Toutefois, la largeur de la fenêtre d’affichage de l’appli de bureau est définie par les paramètres pour les types de contenu de conteneur, tels que Lignes. La sélection de la fenêtre d’affichage de bureau indique le style de votre contenu sur le storefront lorsque la largeur de la page du navigateur est de 1 024 pixels et plus large.

    Aperçu de la fenêtre d’affichage de bureau avec une largeur minimale de 1 024 pixels {width="500" modal="regular"}

  • Mobile — Affiche l’aperçu du contenu avec une largeur prédéfinie de 768 pixels. Contrairement à la fenêtre d’affichage pour ordinateur de bureau, la fenêtre d’affichage mobile affiche le contenu de votre page avec une largeur de 768 pixels, ainsi que les styles définis pour les largeurs de point d’arrêt de 768 pixels (maximum) et de 640 pixels (minimum).

    Aperçu de la fenêtre d’affichage mobile avec largeur minimale de 768 pixels {width="500" modal="regular"}

Paramètres des points d’arrêt

Les boutons de fenêtre d’affichage offrent également la possibilité d’appliquer différents styles de point d’arrêt aux types de contenu en fonction de la fenêtre d’affichage sélectionnée. Par défaut, Page Builder fournit les paramètres de point d’arrêt pour la variable Minimum Height ​champs de lignes, colonnes, onglets, éléments d’onglet, bannières, curseurs et diapositives. Lorsque vous sélectionnez la fenêtre d’affichage Mobile, puis ouvrez l’éditeur pour l’un de ces types de contenu, vous pouvez saisir des valeurs de champ spécifiques aux points d’arrêt de la fenêtre d’affichage Mobile . Les champs de type Contenu qui autorisent des paramètres de point d’arrêt spécifiques affichent une icône à droite du champ, comme dans l’exemple suivant pour une ligne :

Indicateur d’icône pour le paramètre du point d’arrêt {width="400"}

Panneau

La variable Page Builder situé à gauche de l’étape. Il contient des types de contenu qui peuvent être déplacés vers l’étape. Un conteneur spécifique au type de contenu s’affiche alors avec une boîte à outils d’options. Les types de contenu sont organisés dans le panneau comme suit :

Disposition

La variable Layout ​de la Page Builder permet d’ajouter des lignes, des colonnes ou des onglets à la scène. Lorsque vous faites glisser un type de contenu du panneau vers la scène, un conteneur s’affiche avec une boîte à outils d’options spécifiques au type de contenu.

Par défaut, la variable Page Builder stage est vide. Lorsque vous faites glisser des types de contenu de mise en page du panneau vers la scène, vous pouvez les placer au-dessus, en dessous ou à l’intérieur d’autres conteneurs de mise en page sur la page. Les lignes ne peuvent être ajoutées directement à la scène que.

Page Builder panneau avec les types de contenu de mise en page et étape {width="600" modal="regular"}

Type de contenu de mise en page
Description
Ligne
Une nouvelle ligne peut uniquement être glissée du panneau vers la scène et positionnée au-dessus ou en dessous d’une autre ligne, d’un autre onglet ou d’un autre groupe de colonnes. Vous pouvez également utiliser l’option Dupliquer pour copier une ligne existante.
Colonne
Vous pouvez faire glisser une colonne du panneau vers la scène ou vers des lignes et des onglets. Le nombre maximal de colonnes pouvant être ajoutées est déterminé par le nombre de divisions de grille spécifiées dans la variable configuration.
Onglets
Vous pouvez faire glisser un seul onglet du panneau vers la scène ou vers des lignes et des colonnes. Des onglets supplémentaires peuvent être ajoutés à partir de la boîte à outils.

Éléments

Utilisez la variable Elements ​de la Page Builder pour ajouter du texte, des en-têtes, des boutons, des séparateurs et du code de HTML à n’importe quel conteneur de mises en page du panneau Page Builder étape. Lorsque vous faites glisser un type de contenu du panneau vers une ligne ou une colonne, ou vers un ensemble d’onglets sur la scène, un conteneur s’affiche. Utilisez la boîte à outils de type de contenu pour accéder aux paramètres spécifiques au type.

Page Builder panneau avec types de contenu d’élément {width="600" modal="regular"}

Type de contenu de l’élément
Description
Texte
Ajoute un conteneur de texte et un éditeur à l’étape.
En-tête
Ajoute un conteneur d’en-tête à la scène.
Boutons
Ajoute un conteneur pour un bouton individuel ou un ensemble de boutons à la scène.
Diviseur
Ajoute un conteneur pour un séparateur à la scène.
Code HTML
Ajoute un conteneur pour le code de HTML à la scène.

Média

Utilisez la variable Media ​de la Page Builder pour ajouter des images, des vidéos, des bannières, des curseur et des Google Maps à n’importe quel conteneur de mises en page de Page Builder étape. Lorsqu’un type de contenu multimédia est glissé du panneau vers la scène, un conteneur s’affiche avec une boîte à outils contenant les options propres au type de contenu.

Page Builder panneau avec types de contenu multimédia {width="600" modal="regular"}

Type de contenu du média
Description
Image
Ajoute un conteneur d’images à la scène.
Vidéo
Ajoute un conteneur vidéo à la scène.
Bannière
Ajoute un conteneur de bannières à la scène.
Curseur
Ajoute un conteneur de curseur à la scène.
Carte
Ajoute un Google Maps conteneur à l’étape.

Ajouter du contenu

Utilisez la variable Add Content ​de la Page Builder pour ajouter du contenu existant au panneau Page Builder étape. Lorsque vous faites glisser un type de contenu multimédia du panneau vers la scène, un conteneur s’affiche. Utilisez la boîte à outils de type de contenu pour accéder au_ Paramètres _qui sont spécifiques au type.

Page Builder panneau avec types Ajouter du contenu {width="600" modal="regular"}

Type de contenu
Description
Bloc
Ajoute un bloc existant à la scène.
Bloc dynamique
Ajoute un bloc dynamique existant à la scène.
Produits
Ajoute une liste de produits à la scène.
Adobe Commerce uniquement Recommendations de produit
Ajoute une unité de recommandation à l’étape.

Toolbox

Chaque conteneur de contenu sur la scène comporte une boîte à outils d’options. Les options varient selon le type de contenu, mais incluent généralement Déplacer, Paramètres, Masquer/Afficher, Dupliquer et Supprimer.

Afficher la boîte à outils

Pointez sur le conteneur pour afficher la boîte à outils et sélectionnez une option.

Options de la boîte à outils Rangées {width="600" modal="regular"}

Options de boîte à outils

Option
Icône
Description
Déplacer
Icône Déplacer {width="25"}
Déplace le conteneur de contenu actuel vers une autre position sur la scène.
Ajouter
Icône Ajouter {width="25"}
Ajoute des éléments enfants tels qu’un bouton, une diapositive ou un onglet.
(label)
Identifie le type de contenu du conteneur.
Paramètres
Icône Paramètres {width="25"}
Ouvre les propriétés du conteneur de contenu en mode d’édition.
Masquer
Icône Masquer {width="25"}
Masque le conteneur de contenu actuel.
Afficher
Icône Afficher {width="25"}
Affiche le conteneur de contenu actuel.
Dupliquer
Icône Dupliquer {width="25"}
Effectue une copie du conteneur de contenu actuel.
Supprimer
Supprimer {width="25"}
Supprime le conteneur de contenu actuel de la scène.
NOTE
Les éléments masqués sont stockés dans la base de données et invisibles pour les clients. Toutefois, ces éléments sont visibles par les moteurs de recherche et d’autres robots qui analysent votre site. Elles sont également renvoyées dans le cadre du contenu si nécessaire par le biais d’un appel API avec un attribut d’invisibilité, sauf si vous les supprimez de l’étape.
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d