Tutoriel Kadence : Guide d'utilisation du bloc modal popup

Kadence Blocks Pro Le plug-in fournit Modal Blocs de fenêtres contextuelles pouvant être utilisés pour ajouter à une page des zones de contenu de fenêtres contextuelles déclenchées par un clic. Qu'il s'agisse de l'affichage d'une notification, d'un remplissage rapide ou d'une fenêtre d'information.formulaire (document)Qu'il s'agisse d'orienter les utilisateurs vers un contenu spécifique, ce module est d'une grande utilité.

Dans cet article, nous présenterons les paramètres de base du bloc modal, y compris les liens pop-up, l'édition du contenu, la personnalisation du style et les méthodes de déclenchement personnalisées, ainsi que d'autres procédures opérationnelles.

Ajout de blocs modaux

Ouvrez l'éditeur, cliquez sur Ajouter un bloc et, dans la liste des blocs, sélectionnez le bloc Modalet l'insère dans la page. Un texte de lien et une zone de contenu contextuelle apparaissent automatiquement après l'insertion.

Définition du texte du lien

Sélectionnez le bloc et saisissez le texte du lien qui déclenche la fenêtre contextuelle dans le champ de droite, par exemple "Voir plus" ou "Ouvrir".fenêtre contextuelle". Ce texte sera affiché sur la page comme point d'entrée sur lequel l'utilisateur pourra cliquer.

Modifier le contenu de la fenêtre pop-up

N'importe quel bloc peut être inséré dans la fenêtre contextuelle, comme du texte, des images, des boutons, des formulaires, etc.ouverture (jargon des échecs). Identique à la modification d'un bloc de contenu normal, avec des ajustements au niveau du style, de la typographie et de la structure.

Styles de liens personnalisés

Les paramètres d'apparence tels que les polices, les couleurs, les bordures, les arrière-plans, etc. des liens déclenchés peuvent être ajustés pour les rendre cohérents avec le style général de la page.

Définition du masque d'arrière-plan

Lorsque la fenêtre contextuelle s'ouvre, un masque d'arrière-plan semi-transparent apparaît sur la page. Vous pouvez choisir la couleur et la transparence du masque pour mettre en évidence le contenu de la fenêtre contextuelle tout en conservant un arrière-plan clair sur la page.

Définition de l'animation et de la position

Vous pouvez choisir l'animation d'ouverture et de fermeture de la fenêtre pop-up dans la barre de réglage, par exemple fondu, glissement, zoom, etc. Vous pouvez également spécifier l'endroit où la fenêtre pop-up doit apparaître sur la page, par exemple en haut, au milieu, en bas, à gauche ou à droite.

Réglage de la taille de la fenêtre pop-up

La largeur et la hauteur de la fenêtre contextuelle peuvent être ajustées à la demande pour s'adapter à différents types d'affichage de contenu. Ces paramètres peuvent être définis sous forme de pourcentage ou de valeur spécifique à un pixel.

Ajuster le style du bouton de fermeture

Le bouton de fermeture situé dans le coin supérieur droit prend en charge les paramètres de style, y compris la taille de l'icône, la couleur, la position, etc. Un bouton de fermeture bien conçu contribue à rendre la page simple et facile à utiliser.

Définition de l'apparence de la fenêtre pop-up

Vous pouvez ajouter des couleurs d'arrière-plan, des bordures, des coins arrondis et des ombres aux fenêtres contextuelles afin de renforcer la hiérarchie du contenu. Une conception adéquate peut mettre en évidence le contenu des fenêtres contextuelles et assurer la coordination de la page.

Ajuster le style et l'enregistrer dans la vue frontale

Utilisation de liens déclencheurs personnalisés

Les blocs modaux permettent de créer manuellement des boutons pour déclencher des fenêtres contextuelles en plus des liens intégrés, ce qui permet de personnaliser la structure de la mise en page à des endroits spécifiques.

La procédure est la suivante :

• Désactiver le commutateur de lien par défaut dans les paramètres modaux

• Définir un identifiant d'ouverture pour la fenêtre contextuelle, par exemple customid
• Insérer un bouton avancé n'importe où sur la page
• Définir le lien du bouton sur #customid
• Ajouter un nom de classe à un bouton déclencheur modal

Une fois le réglage effectué, un clic sur le bouton déclenche l'ouverture d'une fenêtre contextuelle qui permet de combiner librement le contenu et d'optimiser la structure de la page.

résumés

Les blocs modaux sont Kadence Blocks Pro Il s'agit d'un outil très utile pour afficher du contenu. La fenêtre pop-up est clairement structurée et prend en charge une variété detypographiqueAjustement de la manière et du style, avec un mécanisme de déclenchement flexible, adapté à une variété de scénarios de pages web.