Modifier un composant et ses variantes
Un composant est un modèle commun utilisé à plusieurs endroits. Modifier son design peut changer toutes ses instances, même sur d’autres pages. Une variante propose d’autres valeurs de contenu ; une personnalisation ne concerne qu’une instance.
Dans ce guide, deux cartes Alma partagent le même modèle sur une page. Une troisième carte utilise ce modèle sur une autre page. Nous contrôlons les deux pages sur ordinateur et téléphone, après enregistrement et rechargement.
1. Choisir ce que vous voulez modifier
Avant d’agir, distinguez trois besoins :
- Changer le design commun : ouvrez Modifier le composant.
- Préparer un contenu réutilisable : créez une variante du modèle.
- Changer une seule carte : réglez les propriétés de cette instance.
Une variante ne crée pas un second modèle indépendant. Les instances continuent de partager le design du composant. Donner une valeur personnelle à une propriété ne détache pas non plus l’instance du modèle.
2. Modifier le modèle commun
Lecture impossible. Réessayez avec les commandes vidéo.
Sélectionnez une instance en mode Expert, puis cliquez sur Modifier le composant dans son panneau. Vous entrez dans l’édition du modèle. Sélectionnez le titre de la carte, ouvrez Couleur et choisissez une couleur du thème.
La première vidéo montre les deux titres changer ensemble. Leurs textes restent identiques. Le contrôle vérifie aussi la troisième carte sur l’autre page, puis le rendu publié aux deux largeurs.
Enregistrez avant de quitter l’édition. Utilisez Échap pour revenir à la page, puis sélectionnez une instance pour retrouver ses propriétés.
3. Créer une variante
Lecture impossible. Réessayez avec les commandes vidéo.
Sélectionnez une instance et ouvrez Modifier le composant. Dans le panneau des propriétés du modèle, Ajouter une propriété ouvre la fenêtre qui contient les onglets Propriétés et Variantes. Choisissez Variantes, puis Ajouter une variante.
Donnez-lui un nom parlant, par exemple Séance découverte. Remplacez ensuite les valeurs des propriétés proposées. La démonstration change le champ title en Une séance pour vous.
Les propriétés sont préparées par le créateur du composant. Si aucune propriété n’est disponible, commencez par préparer les options du modèle ; créer une variante vide ne suffit pas à rendre sa carte différente.
L’entrée Défaut utilise les valeurs de base du modèle. Une variante ne remplace que les propriétés que vous personnalisez dans son éditeur.
4. Renommer et choisir une variante
Dans l’éditeur, modifiez Nom de la variante. Nous renommons ici Séance découverte en Séance privée. Fermez la fenêtre et quittez l’édition du modèle avec Échap.
Sélectionnez maintenant la première carte et choisissez Séance privée dans sa liste Variante. Son titre change ; la seconde carte et celle de l’autre page conservent les valeurs par défaut.
Enregistrez puis rechargez pour contrôler le nom, le contenu et le choix de variante. Changer le nom d’une variante ne doit pas vous conduire à recréer toutes ses utilisations.
5. Personnaliser une instance et réinitialiser
Une propriété de l’instance prend le dessus sur la variante. Dans la vidéo, nous saisissons Votre séance privée dans le titre de la première carte. Les autres cartes restent inchangées.
La commande de réinitialisation à côté du champ retrouve Une séance pour vous, la valeur de Séance privée. Elle ne remet pas automatiquement l’instance sur Défaut.
Pour retrouver entièrement le contenu de base, choisissez Défaut puis réinitialisez les propriétés encore personnalisées. L’ordre des valeurs est : modèle de base, puis variante, puis personnalisation de l’instance.
6. Supprimer une variante
Ouvrez de nouveau l’éditeur des variantes. Survolez la variante et utilisez Supprimer la variante, puis confirmez la suppression. Enregistrez et vérifiez qu’elle a disparu de la liste.
Avant de supprimer une variante utilisée, contrôlez les instances qui la choisissent. Prévoyez leur contenu de remplacement et vérifiez leur rendu après rechargement. Supprimer une variante ne supprime pas le composant ni ses cartes.
Notre recette supprime uniquement la variante créée pour la démonstration. Après enregistrement et rechargement, la première carte retrouve le titre du modèle. Les deux pages publiées sont contrôlées de nouveau sur ordinateur et téléphone. Cette opération est contrôlée séparément du film de création et de choix. La boîte de confirmation actuelle et les indications du panneau sont consignées dans le suivi d’amélioration de l’interface.
7. Vérifier les pages concernées
Contrôlez une carte par défaut, une carte avec variante et une carte personnalisée. Regardez aussi une autre page qui utilise le même modèle. En préproduction, vérifiez les textes, les couleurs et la disposition sur ordinateur et téléphone avant de publier.
Le lot vérifie deux pages à 1440 et 375 pixels : propagation du design commun, variante sur une seule carte et conservation des valeurs par défaut ailleurs. Le projet de démonstration est ensuite restauré. Cela ne certifie pas chaque type de propriété ni chaque composition de votre site.
L’éditeur propose aussi des réglages A/B Testing. Ils servent à répartir des variantes entre visiteurs et relèvent d’un parcours distinct ; ils ne sont pas nécessaires pour choisir manuellement une variante sur une instance.