Le bloc Point d'accès vous permet de transformer n'importe quelle image statique en une expérience interactive et cliquable en plaçant des marqueurs de point d'accès directement dessus. Lorsque les visiteurs survolent ou cliquent sur un point d'accès, une bulle d'aide apparaît avec votre contenu personnalisé — ce qui en fait un moyen puissant de mettre en évidence les caractéristiques du produit, d'annoter des diagrammes, de présenter des conceptions de pièces ou de guider les visiteurs à travers n'importe quel visuel.
Chaque point d'accès est entièrement personnalisable avec sa propre icône, couleur, position, contenu de bulle d'aide et lien. Vous pouvez ajouter autant de points d'accès que nécessaire et contrôler le style d'animation pour les marqueurs et leurs bulles d'aide contextuelles.
Ajouter le bloc Point d'accès à vos pages
Suivez ces étapes pour ajouter un bloc Point d'accès à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, faites glisser et déposez le bloc Point d'accès dans la section souhaitée de votre page.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc Point d'accès pour ouvrir ses paramètres. L'onglet Contenu est organisé en trois sections : Image, Point d'accès et Bulle d'aide.
Image :
- Image : Téléchargez ou sélectionnez l'image d'arrière-plan sur laquelle vos points d'accès seront placés.
- Texte alternatif : Entrez un texte alternatif descriptif pour l'image afin d'améliorer l'accessibilité et le référencement.
- Taille de l'image : Définissez la largeur et la hauteur de l'image en pixels (px) ou en pourcentage (%).
- Alignement : Définissez l'alignement horizontal du bloc Point d'accès dans sa section — Gauche, Centre ou Droite. Prend en charge les valeurs par appareil pour ordinateur, tablette et mobile.
Point d'accès :
La section Point d'accès répertorie tous les marqueurs de point d'accès ajoutés à votre image. Chaque ligne de point d'accès affiche son icône et un aperçu du contenu de la bulle d'aide. Vous pouvez faire glisser les points d'accès pour les réorganiser, les dupliquer ou les supprimer. Cliquez sur une ligne de point d'accès pour développer ses paramètres individuels :
- Orientation horizontale : Définissez la position horizontale du marqueur de point d'accès sur l'image en pourcentage de 0 à 100.
- Orientation verticale : Définissez la position verticale du marqueur de point d'accès sur l'image en pourcentage de 0 à 100.
- Contenu de la bulle d'aide : Entrez le contenu qui apparaît dans la bulle d'aide lorsque le point d'accès est déclenché. Prend en charge le formatage de texte enrichi, y compris le gras, l'italique, les liens et les couleurs en ligne.
- Couleur : Définissez la couleur du marqueur de l'icône du point d'accès.
- Paramètres avancés : Activez pour révéler des options supplémentaires par point d'accès, y compris l'étiquette, le lien (avec les options Ouvrir dans une nouvelle fenêtre et Pas de suivi), la position de l'icône (Gauche ou Droite), le sélecteur d'icônes, le sélecteur de taille d'icône personnalisée et le curseur de taille d'icône (10–150 px, visible lorsque la taille d'icône personnalisée est activée).
Cliquez sur + Ajouter un point d'accès en bas de la liste pour ajouter un nouveau marqueur de point d'accès à votre image.
Sous la liste des points d'accès, le menu déroulant Animation du point d'accès définit le style d'animation continu appliqué à tous les marqueurs de points d'accès — choisissez parmi Aucun, Battement doux ou Expansion.
Bulle d'aide :
- Position : Choisissez où l'infobulle apparaît par rapport au marqueur de point d'accès — Haut, Droite, Bas ou Gauche.
- Déclencheur : Définissez l'action qui ouvre l'infobulle — Aucune, Survol ou Clic.
- Animation : Choisissez le style d'animation utilisé lors de l'apparition de l'infobulle — Fondu, Zoom, Oscillation, Glissement ou Chute.
- Durée : Définissez la durée de l'animation d'ouverture/fermeture de l'infobulle en millisecondes (0–10 000 ms).
- Afficher la flèche : Activez ou désactivez la petite flèche directionnelle sur la bulle d'infobulle.
- Largeur max : Définissez la largeur maximale de la fenêtre contextuelle de l'infobulle en pixels (0–1000 px).
Étape 3 : Personnaliser le design
Dans l'onglet Avancé, vous pouvez personnaliser le style de l'image et l'espacement de votre bloc Point d'accès.
Styles :
- Ombre de l'image : Ajoutez une ombre portée derrière l'image. Choisissez parmi Aucune, Cheveux, Petite, Moyenne, Grande, Très grande ou 2x grande.
- Bordure de l'image : Ajoutez une bordure autour de l'image. Définissez le style de bordure (Solide, Pointillé ou Tirets), la couleur de la bordure, la largeur de la bordure (Haut, Droite, Bas, Gauche) et le rayon de la bordure pour arrondir les coins.
Espacement :
- Marge : Contrôlez l'espacement extérieur autour de votre bloc Point d'accès (Haut, Droite, Bas, Gauche). Prend en charge les valeurs par appareil pour ordinateur, tablette et mobile.
- Rembourrage : Ajustez l'espacement intérieur de votre bloc Point d'accès (Haut, Droite, Bas, Gauche). Prend en charge les valeurs par appareil pour ordinateur, tablette et mobile.
Attributs :
- ID CSS : Affiche l'identifiant unique généré automatiquement pour votre bloc Point d'accès, créé automatiquement par SeedProd pour un style personnalisé ou un ciblage JavaScript.
- Classe personnalisée : Ajoutez des classes CSS personnalisées pour appliquer des styles spécifiques de votre thème ou de votre CSS personnalisé.
- Attributs personnalisés : Ajoutez des attributs HTML à l’élément d’encapsulation du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-attribut|valeur.
Visibilité de l'appareil :
- Masquer sur ordinateur : Masquez le bloc Point d'accès sur les écrans d'ordinateur.
- Masquer sur tablette : Masquez le bloc Point d'accès sur les appareils tablettes.
- Masquer sur mobile : Masquez le bloc Point d'accès sur les appareils mobiles.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Point d'accès et de personnaliser son apparence, assurez-vous de sauvegarder votre travail.
Vous avez ajouté avec succès un bloc Point d'accès à votre page ! En transformant des images statiques en expériences interactives, vous pouvez guider l'attention des visiteurs, mettre en évidence les détails clés et augmenter l'engagement. Expérimentez avec différentes animations de points d'accès, positions d'infobulles et styles d'icônes pour créer une expérience qui correspond à votre marque et incite les visiteurs à explorer votre contenu.