Une mise en page définit la structure et la conception de toutes les pages d’un groupe de pages. Elle hérite des styles globaux de votre site, mais vous pouvez également personnaliser la conception des sections individuelles en modifiant les polices, les couleurs et les mappages de contenu au niveau de la section. Chaque groupe de pages dispose d'une mise en page et chaque entité de ce groupe l'utilise.
Remarque : Vous modifiez un modèle de mise en page. Les modifications que vous apportez s’appliquent à chaque page du groupe de pages, pas seulement à celle qui est en aperçu.
Accéder à l'Éditeur de mise en page
Depuis l’écran des groupes de pages, cliquez sur Modifier la mise en page à côté du groupe de pages que vous souhaitez modifier.
L'éditeur de mise en page. Des références numérotées sont utilisées tout au long de cet article.
| N° | Zone | À quoi ça sert |
| 1 | Panneau de droite | Modifier les propriétés de la section — associer le contenu aux champs d’entités ou définir des valeurs statiques, changer les polices et les couleurs |
| 2 | Aperçu de la page | Aperçu en direct de vos modifications ; cliquez sur n'importe quelle section pour la sélectionner |
| 3 | Panneau de gauche | Afficher les sections disponibles et le plan de mise en page ; faites glisser les sections vers l'aperçu à partir d'ici |
| 4 | Basculement entre groupes de pages ou entités | Basculer entre les groupes de pages, les entités et les paramètres régionaux pour prévisualiser |
| 5 | Bascule des champs d’entité | Mettez en évidence où les champs du graphe de connaissances sont utilisés dans la mise en page. |
| 6 | Boutons de bascule du panneau | Réduire ou développer les panneaux de gauche et de droite pour disposer de plus d’espace de travail |
| 7 | Contrôles de la fenêtre d'affichage | Basculez entre les vues ordinateur, tablette et mobile, zoomez et dézoomez |
| 8 | Modifier les contrôles | Annuler, rétablir, supprimer ou publier vos modifications |
| 9 | Aperçu / liens en direct | Ouvrir un aperçu partageable ou votre site dans un nouvel onglet |
| 10 | Mettre à jour la bibliothèque | Intégrer les dernières mises à jour des produits (n'apparaît que lorsque vous êtes en retard) |
Les modifications sont enregistrées automatiquement au fur et à mesure que vous travaillez. Vous pouvez donc partir et revenir sans perdre votre progression.
Ajouter, réorganiser et supprimer des sections
Les sections constituent le fondement d'une mise en page. Le panneau de gauche (3) affiche toutes les sections disponibles dans le panneau des sections ainsi qu'un aperçu de ce qui se trouve actuellement dans la mise en page.
Pour ajouter une section : Faites glisser une section du panneau des sections sur l'aperçu (2) à l'endroit souhaité.
Pour réorganiser les sections : Faites glisser et déposez les sections dans l'aperçu (2) ou dans le contour du panneau de gauche (3).
Pour supprimer une section : Cliquez sur la section dans l'aperçu ou le contour pour la sélectionner, puis cliquez sur l'icône de la corbeille dans la barre d'action qui apparaît.
Utilisez le bouton Afficher les libellés pour voir la source du contenu (statique ou graphe de connaissances) pour chaque élément dans votre mise en page actuelle en un coup d'œil.
Remarque : Les sections disponibles dans le panneau de gauche proviennent de la bibliothèque de votre site. Si certaines sections que vous vous attendez à trouver sont manquantes, vous devrez peut-être mettre à jour votre bibliothèque. Voir Mettre à jour votre bibliothèque.
Modifier les propriétés de la section
Cliquez sur une section de l'aperçu (2) ou de la présentation (3) pour la sélectionner. Ses propriétés apparaissent dans le panneau de droite (1). Les actions courantes comprennent :
- Mappage du contenu dans un champ d’entité graphe de connaissances ou définition d’une valeur statique (voir Propriétés de la section Carte)
- Modification des polices et des couleurs au niveau de la section pour remplacer les styles globaux
- Afficher ou masquer des éléments dans une section
Utilisez le bouton des champs d'entité (5) pour mettre en évidence les champs de la mise en page qui sont extraits du graphe de connaissances. Cette fonction est utile pour vérifier que vos mappages de contenu sont correctement configurés.
Ajouter un code personnalisé
Le composant Code personnalisé vous permet d’ajouter du code HTML, du CSS et du JavaScript personnalisés directement à une page. Utilisez-le lorsque vous avez besoin de fonctionnalités qui ne sont pas disponibles dans les sections intégrées.
Pour intégrer les valeurs des champs du graphe de connaissances dans un code personnalisé, utilisez la notation Handlebars :
<div class="custom-banner">
<h2>Bienvenue à {{name}}</h2>
<p>Rendez-nous visite à l'adresse {{address.line1}}, {{address.city}}</p>
<p>Appelez-nous : {{mainPhone}}</p>
</div>Meilleures pratiques en matière de code personnalisé :
- Dans la mesure du possible, préférez le code HTML et CSS au JavaScript. Le contenu statique est indexé de manière plus fiable par les moteurs de recherche et les robots d'indexation. Les implémentations très riches en JavaScript peuvent ne pas être indexées correctement.
- Utilisez d'abord les sections intégrées. Les sections fournies par Yext sont gérées par Yext et optimisées pour l'accessibilité et le SEO. Utilisez du code personnalisé uniquement pour les fonctionnalités que les sections intégrées ne couvrent pas.
Copier et coller des sections
Si vous avez plusieurs groupes de pages avec des sections partagées — comme un en-tête ou un pied de page qui doit être identique partout — vous pouvez copier une section entièrement configurée d’une mise en page et la coller dans une autre au lieu de la reconfigurer à partir de zéro.
Pour copier et coller une section :
- Dans l'écran Groupes de pages, cliquez sur Modifier la mise en page à côté du groupe de pages contenant la section que vous souhaitez copier.
- Cliquez sur la section dans l'aperçu ou sur le plan. Une barre d'action apparaît au-dessus de la section.
- Cliquez sur l'icône de copie (première icône dans la barre d'action).
- Retournez à l'écran Groupes de pages et cliquez sur Modifier la mise en page à côté du groupe de pages cible.
- Si la section ne fait pas encore partie de la mise en page, faites-la glisser depuis le panneau de gauche. Puis cliquez dessus pour la sélectionner.
- Cliquez sur l'icône Coller (deuxième icône de la barre d'action).
Toutes les propriétés sont copiées, y compris les traductions localisées. Prévisualisez, modifiez et publiez comme d'habitude.
Afficher un aperçu de vos modifications
Avant de publier, validez vos modifications dans différentes entités et fenêtres.
- Aperçu de la page (2) — Les modifications apparaissent en direct dans l'aperçu au fur et à mesure que vous les effectuez.
- Bascule des entités (en haut de l’éditeur) : passez d’une entité à l’autre dans le groupe de pages pour vérifier que la mise en page est correcte avec différents contenus.
- Contrôles d'affichage (7) — Vérification des vues sur ordinateur de bureau, tablette et mobile.
- Aperçu des modifications (9) — Génère un lien d'aperçu partageable à un moment donné avec toutes les modifications locales. Notez que cet instantané ne sera pas mis à jour pour refléter les modifications ultérieures — générez un nouvel aperçu pour voir les changements ultérieurs.
Publier vos modifications
Cliquez sur Publier dans les commandes de modification (8) pour que les mises à jour de votre mise en page soient appliquées simultanément à toutes les pages du groupe de pages. Si vos pages sont déjà en ligne, ce bouton indique Mettre à jour # Pages.
Pour vérifier, ouvrez le site en ligne (9) et actualisez pour confirmer que les mises à jour sont visibles.
Remarque : Le bouton Publier est désactivé lorsqu'un déploiement est en cours ou que votre site comporte des erreurs. Vous pouvez toujours effectuer et enregistrer des modifications localement — elles seront prêtes à être publiées une fois le déploiement terminé ou l’erreur résolue. Pour plus d'informations, consultez les rubriques Afficher les Pages et Rechercher les erreurs.