Préparation des assets
Il va falloir, dans un premier temps, préparer nos dif férents assets.
La page chargée dans le f luidbook ne contiendra
que les boutons en mode inactifs.
Déf inir ensuite la zone d’emplacement des liens Image
(pour faciliter l’intégration, privilégiez des coordonnées
et dimensions arrondies dans Illustrator).
Enf in, préparer les images qui seront af fichées pour chaque
bouton en respectant les dimensions déf inies dans l’étape
précédente. Privilégiez un format en .svg pour l’export, de
sortes à garder une qualité maximale sur les textes.
Intégration des assets
Une fois sur le Toolbox, positionner les dif férents liens d’Af fichage sur
chaque bouton. Veillez à bien leur appliquer le mode Af ficher et masquer
tous les autres. Placez également vos images sur l’emplacement
déf ini puis attribuer leur ID respectif à chaque bouton associé.
Onglets intégrés
Le mode Af ficher et masquer tous les autres permet d’af ficher un élément tout en masquant l’ensemble des autres actuellement présents sur la page.
Il est très souvent utilisé avec des liens Image, pour réaliser des interactions comme des systèmes d’onglets intégrés, comme l’exemple suivant.
Click
Click
Click
Click
Click
Intégrer directement les boutons actifs dans les
images afin d’accentuer le design de l’interaction.
Afficher (avec déclenchement délayé, vu précédemment) un des popins directement
à l’ouverture de la page, afin de la rendre moins vide à l’ouverture.
Section 1
Section 2
Section 3
Section 4
Section 5
Bon à savoir
Il est maintenant plus facile d’ajouter des liens aux seins
des images af fichées dans les onglets intégrés. Pour ce faire,
sélectionner le lien Image en question, puis cliquer sur les
touches
Ctrl
+
L
de votre clavier. Une fois à l’intérieur du lien,
vous pouvez y placer les types de liens que vous souhaitez (web,
vidéo, etc.). Ces liens seront automatiquement associés à votre
lien Image et ne s’af ficheront que lorsque celui‑ci sera visible.
Voir un exemple
Nouveauté