Vous ne savez pas comment utiliser les liens popup Avada ? 1 minute pour apprendre à mettre en place des déclencheurs de popup avec les éléments Modal Text HTML Link !

en utilisant Thème Avada Lors de la création d'un site web, les pop-ups sont l'un des éléments clés qui améliorent l'expérience de l'utilisateur. Si vous essayez de tirer le meilleur parti de votre site web avec un paragraphe de texte ou une page d'accueil, vous risquez de vous retrouver avec des pop-ups.imagerieFaire apparaître une fenêtre lorsque vous cliquez dessus ? Cet article vous guidera dans l'utilisation de la fonction Texte modal / Élément de lien HTMLLa mise en œuvre rapide de la fonction "click-to-pop-up" (cliquer pour ouvrir) !

Qu'est-ce que l'élément Modal Text / HTML Link ?

Texte modal / Élément de lien HTML est un élément léger mais très utile du thème Avada :Déclencher une fenêtre contextuelle modale prédéfinie à l'aide d'un morceau de texte ou d'un élément HTML.Cela signifie que vous pouvez transformer n'importe quel contenu de la page en une fenêtre contextuelle cliquable "bascule (électronique)"L'expérience de l'utilisateur est ainsi plus fluide et plus naturelle.

Avada propose trois façons de déclencher des popups modaux :

• élément de bouton-poussoir(Bouton)
• Point de menu
• Texte modal / Élément de lien HTML

Différences avec les boutons et les déclencheurs de menu

L'élément Modal Text / HTML Link est l'un des trois moyens par lesquels l'élément Modal Text / HTML Link peut être utilisé.Le plus haut degré de libertéUnique en son genre. Vous pouvez insérer un graphique, un paragraphe HTMLLa fenêtre contextuelle sera déclenchée chaque fois que la zone cliquée contiendra cet élément, même les icônes SVG.

Exemples de scénarios d'utilisation

• Vitrine des produits: cliquez "En savoir plus"Texte.Détails du produit en pop-up.
• Navigation sur carte: CliquezIcônes de cartes(math.) genreCarte contextuelle de l'emplacement des magasins.
• Intégration de formulaires: cliquez "S'inscrire"Les mots.formulaire d'inscription pop-up.
• Déclaration de confidentialité: dans "J'accepte les conditions"en"clause (de contrat ou de loi)"Littéral".Pop-up déclaration de politique détaillée.

Formats de contenu pris en charge

L'un des points forts de l'élément Modal Text / HTML Link est qu'il prend en charge non seulement le texte brut, mais aussi les éléments suivants Structure HTML, notamment en ce qui concerne

• lien hypertexte, lien <a>
• imagerie <img>
• icône (informatique) ou SVG
• Tout style HTML (par exemple <strong>et<span>imbriqué <div> etc.)

Cela lui permet de s'intégrer de manière transparente dans un grand nombre de conceptions de pages sans rompre la mise en page générale, ce qui en fait un outil idéal pour les sites web finement conçus.

Guide étape par étape

1. accès au mode d'édition d'Avada

Assurez-vous d'avoir créé un élément popup modal dans votre page avant de procéder à cette opération. Par exemple, disons que nous avons créé un élément modal popup appelé carte de Modal, qui est utilisée pour afficher une carte de l'adresse de la boutique. Si vous ne savez pas comment mettre en place une modale, consultez cet article, "La modale".Thème Avada : comment créer un élément modal popup ?Les

• Connectez-vous àWordPressl'espace situé derrière une scène de théâtre
• En arrière-plan, cliquez sur "page web"Sélectionnez la page que vous souhaitez concevoir
• Cliquez "Bâtisseur en direct"Entrer dans le mode d'édition d'Avada

2. insérer des éléments de texte modal / lien HTML

• Cliquez sur le contenu que vous souhaitez concevoir et cliquez sur "Ajouter un élément".

• Dans la liste des éléments, sélectionnez "Élément "Texte modal / Lien HTML.

• Comme vous pouvez le voir ci-dessous, le contenu a été ajouté à la rubriqueTexte modal / Élément de lien HTMLDans le cadre rouge à gauche se trouve la propriété de configuration.

• "Nom de la modalité"où le nom de l'élément est défini.
• "Texte ou code HTML"Le code HTML est normalement saisi à l'emplacement
• "Classe CSS" et "ID CSS"est fixéStyle CSSLa classification et le nom du

• Saisissez votre propre code pour le styliser. Par exemple, ce code me permet d'importer le fichier<img>Liens vers des images et<alt> Texte alternatif. Si vous ne savez pas comment l'écrire, vous pouvez demander à l'IA d'en générer un pour vous.

3. les effets de prévisualisation

appuyer sur la touche Maj + P Aller à l'aperçu de la page.

• Cliquez sur l'image que je viens de créer

Texte modal / Élément de lien HTMLUne fenêtre pop-up s'affiche pour le

résumés

L'utilisation de l'élément Modal Text / HTML Link est un moyen souple et pratique d'utiliser la fonction Thème Avada Mettre rapidement en place des fenêtres contextuelles cliquables dans les applications de gestion de l'information. Qu'il s'agisse d'afficher des cartes,formulaire d'inscriptionLe thème Avada permet d'afficher des photos, des offres ou des détails sur les produits afin d'améliorer l'expérience interactive de votre site web. Si vous voulez en savoir plus sur le thème Avada en action, veuillez prêter attention à l'image suivanteRéseau de fluctuation des photonsLe site est mis à jour quotidiennement avec des conseils sur WordPress et des tutoriels sur les thèmes les plus populaires.