Le gestionnaire d'interactions vous permet de créer des interactions personnalisées qui améliorent les fonctionnalités de votre site Web sans nécessiter de code supplémentaire. Ces interactions personnalisées sont créées en combinant des règles prédéfinies, offrant des possibilités illimitées de fonctionnalités.
Considérez les règles comme des ingrédients, elles peuvent être combinées de toutes sortes de façons pour créer une variété de résultats différents.
Vous trouverez quelques exemples de tutoriels de ce qui peut être créé avec le gestionnaire d'interactions sur le site Blocs Academy.
Ouvrir le gestionnaire d'interactions
Pour lancer le gestionnaire d'interactions, rendez-vous sur le Barre du menu principal et de la Windows menu, sélectionnez Gestionnaire d'interactions ou utilisez le raccourci clavier ⌃⌘je.
Ajouter une interaction
Pour créer une nouvelle interaction, cliquez sur le + bouton situé dans le coin supérieur droit de la fenêtre Interaction Manager ou utilisez le raccourci clavier ⌃n.
Renommer l'interaction
Il est possible de renommer une interaction en cliquant simplement sur le texte de l'élément d'interaction et en saisissant un nouveau nom.
Interaction en double
Il est possible de dupliquer une interaction en clic droit et la sélection dupliquer depuis le menu contextuel ou bien utilisez le raccourci clavier ⌘+D.
Supprimer l'interaction
Pour supprimer et effacer une interaction personnalisée, sélectionnez simplement l'élément d'interaction que vous souhaitez supprimer et cliquez sur le bouton - bouton, qui se trouve en haut à droite de la fenêtre Interaction Manager ou utilisez le raccourci clavier ⌘+⌫.
Modifier l'interaction
Pour modifier une interaction, cliquez sur le Paramétres situé à l'extrême droite de l'élément d'interaction, ou double-cliquez simplement sur l'élément d'interaction. Cela ouvrira une fenêtre contextuelle contenant toutes les règles contenues dans l'interaction.
Insérer une règle
Pour insérer une nouvelle règle dans une interaction, cliquez simplement sur le + bouton qui se trouve en haut à droite de la fenêtre d'interaction ou utilisez le raccourci clavier ⌃nCela ouvrira un menu déroulant contenant toutes les règles disponibles pour les interactions personnalisées. Cliquer sur l'une d'elles l'insérera sous la règle sélectionnée.
Conditionnel
Si déclaration
La règle d'instruction if est utilisée pour exécuter une logique conditionnelle. Elle vous permet d'y placer des règles qui ne sont déclenchées que si une condition spécifiée est évaluée comme vraie. Cela est utile pour la prise de décision dans vos interactions personnalisées, en permettant des résultats différents en fonction de certaines conditions.
Les instructions d'interaction personnalisées prennent en charge les variables suivantes : URL, Visible, À l'écran, Défilement Y, Cookie, Système d'exploitation (SE), Plage horaire, Jour, Nuit, Date, Jour, Mois, Jour de la semaine, Week-end. Toutes les variables permettent de spécifier une valeur de comparaison et prennent en charge différents opérateurs.
Navigation
Accéder à la page
Cette règle dirigera le navigateur vers la page spécifiée.
Accéder à l'URL
Cette règle dirigera le navigateur vers l'URL spécifiée.
Faites défiler jusqu'à la cible
Cette règle permettra de faire défiler la page jusqu'à l'élément possédant l'identifiant ou la classe spécifié(e).
Rafraîchir la page
Cette règle rechargera la page actuelle dans le navigateur.
Matière idéale
Basculer la classe
Cette règle activera ou désactivera les classes spécifiées sur les éléments ayant les #ID ou la classe spécifiés.
Ajouter une classe
Cette règle ajoutera les classes spécifiées aux éléments ayant les #ID ou la classe spécifiés.
Supprimer la classe
Cette règle supprimera les classes spécifiées des éléments ayant les #ID ou la classe spécifiés.
Action
Définir l'attribut
Cette règle définira la valeur d'un attribut de données pour l'élément ayant l'identifiant ou la classe spécifié(e).
Basculer la visibilité
Cette règle permettra d'afficher ou de masquer les éléments ayant l'identifiant ou la classe spécifiés.
Basculer modal
Cette règle basculera une modale (afficher/masquer) avec le #ID spécifié.
Lien téléphonique
Cette règle lancera un appel téléphonique (sur les appareils pris en charge) vers le numéro de téléphone spécifié.
Email Lien
Cette règle ouvrira le client de messagerie de l'utilisateur actuel avec le champ d'adresse renseigné avec l'adresse e-mail spécifiée.
Télécharger le fichier
Cette règle déclenchera le téléchargement du fichier spécifié.
Envoyer
Cette règle soumettra un formulaire avec l'identifiant ou la classe spécifié(e).
Réinitialiser le formulaire
Cette règle réinitialisera un formulaire avec l'identifiant ou la classe spécifiés.
Supprimer l'élément
Cette règle supprimera un élément possédant l'identifiant ou la classe spécifiés.
Désactiver l'élément
Cette règle désactivera un élément possédant l'identifiant ou la classe spécifiés.
Appeler JavaScript
Cette règle peut être utilisée pour appeler des fonctions JavaScript personnalisées.
Sélection
Sélectionner l'onglet
Cette règle sélectionnera l'onglet pour un onglet Bric avec le #ID spécifié.
Cliquez sur l'élément
Cette règle cliquera automatiquement sur l'élément ayant l'identifiant ou la classe spécifié(e).
Élément central
Cette règle permettra de cibler par programmation l'élément ayant l'identifiant (#ID) ou la classe spécifiés.
Vérifier l'élément
Cette règle définira par programmation l'état coché de l'élément ayant l'#ID ou la classe spécifié.
Texte
Définir le texte
Cette règle définira le contenu textuel spécifié pour l'élément ayant l'identifiant ou la classe spécifié(e).
Copier le texte
Cette règle copiera une chaîne de texte spécifiée ou le contenu textuel d'un élément dans la table de montage des utilisateurs.
Définir la valeur
Cette règle définira la valeur de l'élément d'entrée ayant l'identifiant ou la classe spécifié(e).
Vidéo
lecteur vidéo
Cette règle peut déclencher des événements tels que la lecture, la pause, l'arrêt et la mise en sourdine pour l'élément du lecteur vidéo avec l'ID spécifié.
Audio
Audio Player
Cette règle peut déclencher des événements tels que la lecture, la pause, l'arrêt et la mise en sourdine pour l'élément lecteur audio avec l'#ID ou la classe spécifiés.
Jouer son
Cette règle lira le fichier audio mp3 attribué (Ajouter des fichiers audio à Asset Manager).
Bootstrap
Carousel
Cette règle peut déclencher des événements tels que lecture, pause, suivant et précédent pour l'élément de carrousel avec l'#ID spécifié.
Interactions
Appeler une interaction personnalisée
Cette règle appellera une autre interaction personnalisée et autorisera un délai défini en millisecondes.
Interaction en pause
Cette règle ajoute un délai (en millisecondes) avant l'exécution des prochaines règles d'interaction.
Arrêter l'interaction
Cette règle empêche une interaction personnalisée d'exécuter des règles supplémentaires après elle.
RETOURS
Notification
Cette règle déclenchera une notification Web du navigateur avec le message spécifié.
Alerte
Cette règle déclenchera une alerte avec le message spécifié.
Journal de la console
Cette règle créera un journal de navigateur avec le texte spécifié.
Cookies
Ensemble de biscuits
Cette règle définira un cookie dans le navigateur de l'utilisateur avec un nom, une valeur et un nombre de jours spécifiés.
Détruire le cookie
Cette règle détruira un cookie dans le navigateur de l'utilisateur avec un nom spécifié.
Divers
Définir HTML
Cette règle définira le code HTML de l'élément ayant l'identifiant ou la classe spécifié(e).
Arrêter le chargement
Cette règle arrêtera le chargement du navigateur Web.
Arrêter le chargement
Cette règle arrêtera le chargement du navigateur Web.
Dupliquer une règle
Il est possible de dupliquer une règle en clic droit et la sélection dupliquer depuis le menu contextuel ou bien utilisez le raccourci clavier ⌘+D.
Supprimer une règle
Pour supprimer une règle d'une interaction, sélectionnez simplement la règle que vous souhaitez supprimer et cliquez sur le bouton - bouton qui se trouve en haut à droite de la fenêtre d'interaction.
Placer dans l'instruction If
Vous pouvez rapidement placer plusieurs règles dans une instruction if en les sélectionnant, en cliquant avec le bouton droit de la souris et en choisissant Placer à l'intérieur > Si déclaration dans le menu contextuel.
Code court de données
Vous pouvez maintenant utiliser le Les données() code court dans une interaction personnalisée pour obtenir une personnalisation attribut de données Valeurs de l'élément déclencheur lors de l'exécution de l'interaction. Placez simplement l'attribut de données cible entre crochets, comme ceci : données(mon-attribut). L'attribut doit être également stocké sur l'élément déclencheur.
Vous pouvez utiliser le Les données() Code court dans n'importe quel champ de texte de règle d'interaction. En savoir plus sur l'ajout d'attributs de données personnalisés aux éléments. ici.
Appliquer des interactions personnalisées
Les interactions personnalisées peuvent être appliquées à presque tous les éléments de Blocs, des articles tels que boutons, simples images. et icônes avoir une option d'interaction personnalisée disponible, dans la liste déroulante des interactions de la barre latérale standard.
D’autres éléments tels que Blocs, lignes, colonnes, div et texte affichera un volet d’interaction personnalisé dans l’inspecteur de la barre latérale.
Le Gestionnaire de menu prend en charge l'utilisation d'interactions personnalisées dans les éléments de menu.
Déclencher une interaction personnalisée
Dans la plupart des cas, les interactions personnalisées peuvent être déclenchées de trois manières : lorsqu'un élément est cliqué, lorsque le curseur de la souris est survol sur un élément et lorsque le curseur de la souris feuilles un élément.
Il est également possible de déclencher une interaction personnalisée une fois qu'une page a chargé, cela peut être fait via le options de paramètres de page.
Il est également possible de faire glisser une interaction personnalisée depuis le gestionnaire d'interactions vers des éléments de l' Blocs concevez un canevas pour les appliquer. De plus, vous pouvez faire glisser des interactions personnalisées sur des pages dans le navigateur de pages pour appliquer une interaction personnalisée de chargement de page.