Créer et réutiliser un composant
Un composant est un modèle que vous pouvez utiliser à plusieurs endroits. Il évite de refaire le même élément sur chaque page : une carte, une introduction ou un groupe de boutons, par exemple.
Vous choisissez ensuite comment le réutiliser : Synchroniser garde un lien avec le modèle ; Copier crée des éléments indépendants. Les deux modes répondent à des besoins différents.
1. Préparer un élément à réutiliser
Sur votre page, sélectionnez l’élément en mode Expert. Pour réutiliser une carte entière, sélectionnez le groupe qui contient son image, son texte et son bouton. Choisir seulement le titre enregistrerait seulement le titre.
Vérifiez son contenu, ses liens et son rendu sur téléphone avant de l’enregistrer. Dans la démonstration, nous choisissons une courte introduction Alma. Elle ne dépend pas de propriétés de contenu ni d’une collection CMS.
2. Enregistrer le composant dans un stock
Lecture impossible. Réessayez avec les commandes vidéo.
Faites un clic droit sur l’élément et choisissez Enregistrer comme composant. Donnez-lui un nom précis, comme Introduction Alma, puis choisissez le stock où le ranger. Un stock est une bibliothèque de modèles dans votre site.
Si vous avez plusieurs stocks, choisissez celui qui convient. L’option de création d’un stock permet de préparer un rangement distinct ; il n’est pas nécessaire d’en créer un pour chaque composant.
Cliquez sur Enregistrer comme composant, puis fermez la confirmation. Le contenu reste sur la page : son élément est maintenant une instance du modèle créé. Son panneau affiche le nom du composant.
Enregistrez votre page. Le contrôle de la démonstration recharge le builder et vérifie aussi la page en préproduction, sur ordinateur et téléphone.
3. Insérer une instance sur une autre page
Lecture impossible. Réessayez avec les commandes vidéo.
Ouvrez la page où vous voulez réutiliser le modèle. Sélectionnez un élément près de l’endroit souhaité, puis ouvrez Ajouter, Composant, et la source Stocks. Retrouvez votre modèle dans sa bibliothèque.
Choisissez Synchroniser, puis cliquez sur la carte du composant. Le clic l’insère après l’élément sélectionné. Vous pouvez ensuite ajuster sa position dans les calques. Le glisser-déposer est une autre commande ; cette vidéo montre le clic pour rendre le choix de mode facile à suivre.
Une instance synchronisée utilise le modèle commun. Modifier le design de ce modèle change ses instances, y compris sur une autre page. Personnaliser une propriété d’une instance concerne seulement son contenu ; cela ne crée pas une copie indépendante.
4. Créer une copie indépendante
Dans le même panneau, choisissez Copier avant de cliquer sur le composant. Le builder recopie ses éléments dans la page. Cette copie ne pointe plus vers le modèle : vous pouvez modifier son design sans changer les instances synchronisées.
La vidéo place une copie et une instance sur la seconde page. Nous changeons ensuite la couleur du texte du modèle avec le panneau nocode. L’instance synchronisée change ; la copie conserve sa couleur. L’introduction sur la première page suit aussi le modèle.
| Votre besoin | Choix conseillé |
|---|---|
| Garder un design commun sur plusieurs pages | Synchroniser |
| Partir d’un modèle puis modifier librement son design | Copier |
| Changer seulement le contenu d’une carte | Propriétés de l’instance, si le modèle les propose |
La copie filmée contient du texte fixe. Pour un composant qui utilise des propriétés, des données CMS ou d’autres composants, contrôlez aussi ses liaisons après la copie. Cette démonstration ne valide pas automatiquement ces dépendances.
5. Comprendre la portée du stock
Les stocks affichés sont ceux du site ouvert. Réutiliser le modèle sur une autre page de ce site est le parcours montré ici. Un stock ne donne aucun droit d’accès à votre projet.
Le partage communautaire des stocks n’est actuellement pas ouvert aux utilisateurs ordinaires : ses réglages de publication sont réservés à l’administration de Communik. Ne présentez donc pas un stock privé comme une bibliothèque publique, ni comme une synchronisation automatique entre plusieurs projets.
Pour réutiliser un design entre des sites distincts, préparez et vérifiez un transfert adapté au projet. Ce guide ne propose pas de bouton de partage interprojets que l’interface utilisateur ne fournit pas.
6. Contrôler le résultat
Enregistrez et rechargez les deux pages. Vérifiez le contenu, les liens et la disposition sur ordinateur et téléphone. Avant de modifier un modèle partagé, repérez les pages qui l’utilisent.
Notre contrôle compare le texte et les couleurs de l’instance synchronisée et de la copie, après rechargement et sur les deux pages publiées à 1440 et 375 pixels. Le projet de démonstration retrouve ensuite exactement son état initial.