Introduction
Le composant tuiles est un moyen visuel et personnalisable pour mettre en avant et publier des pages pour vos utilisateurs. Il vous permet de créer des boutons de navigation esthétiques avec un support pour un style et un design avancés.
Les tuiles offrent une grande flexibilité et proposent un large éventail d’options en termes de comportement, de mise en page, de décoration et de design, vous permettant d’adapter le parcours utilisateur exactement comme ils en ont besoin.
Comment configurer
Vous avez besoin d’un modèle de page avec le composant "Tiles" intégré.
Créez une page dans l’administration des pages. Assurez-vous que cette page utilise un modèle contenant ce composant.
Allez sur la page et commencez à éditer.
En mode édition, vous accédez aux options des tiles en cliquant sur la roue dentée en dessous.
Paramètres généraux
Les paramètres généraux s’appliquent à toutes les tiles en même temps. Sous l’onglet "général" nous avons les réglages suivants.
- Styles : Choisissez entre plusieurs options de mise en page. Dans notre exemple ci-dessus, nous utilisons le réglage "un et deux".
- Affichage : Ce réglage permet de sélectionner la présentation visuelle globale des tiles.
| Normal | Pleine largeur | Carte | ||
| Les tiles sont centrées sur la page et espacées entre elles. | Les tiles couvrent toute la largeur de la page et n’ont pas d’espace entre elles. | Mise en page en carte avec le texte en dessous. Permet aussi d’ajouter un petit texte descriptif. |
- Titre : Titre principal au-dessus des tiles.
- Sous-titre : Texte additionnel au-dessus des tiles.
- Arrière-plan : Fond derrière toute la section des tiles. (Notez que l’arrière-plan de chaque tile est contrôlé dans la section des tiles. Voir ci-dessous)
- Inverse : Inverse la couleur du texte du titre, du sous-titre (et des textes des tiles en style carte si utilisés).
- Permissions de groupe : Permet de décider quels groupes d’utilisateurs peuvent voir chaque tile. Notez que si les permissions de groupe sont activées, toute tile SANS groupe utilisateur sélectionné deviendra invisible. Les permissions de groupe ne montrent aucune tile aux visiteurs en "accès public". Voir ci-dessous comment modifier les "permissions de groupe" pour chaque tile.
- Charger plus : Définit un nombre de tiles affichées. Les tiles supplémentaires seront cachées derrière un bouton "Afficher plus".
- Enregistrer : Sauvegarde et publie vos modifications immédiatement.
Paramètres pour chaque tile :
Chaque tile a des paramètres individuels qui les rendent uniques. Rappelez-vous que les tiles DOIVENT être liées pour fonctionner.
- Ajouter une tile : Cliquer sur Ajouter une tile en haut à droite créera un nouvel élément tile. Cette tile sera vide et non configurée, vous devrez donc remplir les champs suivants pour la préparer.
- BG (Arrière-plan) : Vous pouvez sélectionner une couleur de fond, une image ou une vidéo à afficher pour chaque tile. Pensez à utiliser des images optimisées pour le web afin de ne pas augmenter les temps de chargement. Vous pouvez aussi combiner image/vidéo et couleur de fond grâce au curseur de fondu.
- Icône : Vous pouvez choisir une icône à afficher sur la tile. Les icônes disponibles sont celles fournies par le système. Vous pouvez aussi demander une mise à jour pour ajouter vos propres icônes à cette liste.
- Focus : Si vous utilisez une image ou une vidéo, vous pouvez définir le “point de focus”. Par exemple, si quelqu’un consulte la page sur un téléphone, la tile peut être recadrée, vous décidez alors où se situe le point focal sur l’image.
- Titre : Le texte principal sur (ou sous) la tile.
- Plus - Changer la description : Sur les tiles de type "carte", vous pouvez ajouter un texte supplémentaire.
- Plus - Lien : Toutes les tiles doivent être liées. Décidez ce que fait un clic sur cette tile.
- Inverse : Inverse la couleur du texte (non utilisé pour les tiles de type "carte").
- Actions - Dupliquer : Duplique la tile pour créer rapidement une version alternative.
- Supprimer : Supprime la tile (uniquement celle-ci).
- Copier depuis : Si vous avez une solution multilingue, vous pouvez copier la configuration depuis d’autres langues.
- Enregistrer : Pensez à enregistrer vos modifications.
- Permissions de groupe : Activer les permissions de groupe (voir ci-dessus dans les paramètres généraux) ajoutera un nouveau bouton sur la tile.
Ce nouveau bouton vous permet de configurer quels groupes d’utilisateurs peuvent voir cette tile. Il est important de noter les points suivants :
- Si vous activez les permissions de groupe, ne pas activer les groupes utilisateurs sur chaque tile les rendra invisibles pour les utilisateurs.
- Si cette page est publique, toute la section sera cachée aux utilisateurs en accès public. Cette fonctionnalité peut être utile car les utilisateurs publics ne verront pas les tiles destinées aux utilisateurs internes connectés.
- L’ordre choisi de vos tiles peut varier selon qui les voit. Si un utilisateur n’a pas accès à une tile, celle-ci disparaît et la suivante prend sa place.
- Désactiver l’accès à une tile ne signifie PAS que la page est inaccessible. Il est important de faire correspondre l’accès à la page avec l’accès aux tiles.
Remplissez un ou plusieurs groupes d’utilisateurs sur chacune des tiles puis cliquez sur enregistrer pour confirmer vos modifications.
Paramètres d’animation
En allant sur l’onglet "Animations", vous accédez au comportement visuel général pour toutes les tiles.
Apparition
Que se passe-t-il lorsque vous chargez la page contenant ces tuiles ? Comment les tuiles apparaissent-elles ?
Effets au survol
Lorsque les utilisateurs déplacent leur curseur de souris sur une tuile, celle-ci modifie son apparence.
- Style de survol : Définir un style d'animation.
- Couleur de superposition : La tuile change de couleur.
- Couleur du texte au survol : Le texte sur la tuile change de couleur.
- Couleur de l'icône au survol : L'icône sur la tuile change de couleur.
Pour plus d’informations, contactez votre Customer Success Manager ou votre spécialiste produit.
Commentaires
0 commentaire
Cet article n'accepte pas de commentaires.