Don't know how to use Avada popup links? 1 minute to learn how to implement popup triggers with Modal Text HTML Link elements!

in using Avada Theme When building a website, pop-ups are one of the key components that enhance the user experience. Trying to improve the user experience with a paragraph of text or aimageryPop up a window when you click on it? This article will walk you through using Avada's Modal Text / HTML Link element, a quick implementation of the click-to-pop-up feature!

What is the Modal Text / HTML Link element?

Modal Text / HTML Link element is a lightweight but very useful element of the Avada theme:Trigger a predefined Modal popup with a piece of text or HTML element.This means you can make anything on the page into a clickable pop-up window "flip-flop (electronics)", resulting in a smoother and more natural user experience.

Avada provides three ways to trigger Modal popups:

• push button element(Button)
• Menu Item
• Modal Text / HTML Link element

Differences with buttons and menu triggers

The Modal Text / HTML Link element is one of the three ways in which theHighest degree of freedomOne of a kind. You can insert a graph, a paragraph HTMLThe popup will be triggered whenever the clicked area contains this element, even SVG icons.

Examples of usage scenarios

• Product Showcase: click "Learn more"Text.Pop-up product detailsThe
• Map navigation: ClickMap Icons(math.) genusPop-up map of store locationsThe
• Form Embedding: click "Register Now"The words.pop-up registration formThe
• Privacy Statement: in "I agree with the terms"in"clause (of contract or law)"Literal.Pop-up detailed policy statementThe

Supported content formats

One of the highlights of the Modal Text / HTML Link element is that it supports not only plain text, but also HTML structure, specifically including:

• hyperlink, link <a>
• imagery <img>
• icon (computing) or SVG
• Any HTML style (e.g. <strong>,<span>nested <div> etc.)

This allows it to fit seamlessly into a variety of page designs without breaking the overall layout, making it perfect for fine-designed websites.

Step-by-step instructions

1. Access to Avada editing mode

Make sure you have created a Modal popup element in your page before you do this. For example, let's say we've set up a modal popup element called map of Modal, which is used to display a map of the store's address. If you don't know how to set up a Modal, see this article, "TheAvada theme how to create Modal popup elementsThe

• Login toWordPressthe area behind a theatrical stage
• In the background click on "web page", select the page you want to design
• Click "Live Builder"Entering Avada Edit Mode

2. Insert Modal Text / HTML Link elements

• Click on the content you want to design and click "Add Element".

• In the list of elements, select "Modal Text / HTML Link" elementThe

• As you can see below, at the content has been added to theModal Text / HTML Link elementIn the red box on the left is the setup property.

• "Name of Modal" where the name of the element is set.
• "Text or HTML code"The HTML code is generally entered at the
• "CSS Class" and "CSS ID"is setCSS styleThe classification and name of the

• Enter your own code to style it. For example, what this code does for me is to import the<img>Image links and<alt> Alternative text. If you don't know how to write one, you can have the AI generate one for you.

3. Preview effects

press a button Shift + P Go to page preview.

• Click on the image I just set up

Modal Text / HTML Link elementA pop-up window will appear for the

summarize

Using the Modal Text / HTML Link element is a flexible and practical way of Avada Theme quickly realize the effect of clicking on a pop-up window in the Whether it's for displaying a map,registration form, offers or product details to enhance the interactive experience of your website. If you want to know more about Avada theme in action, please pay attention to thePhoton fluctuation network, updated daily with WordPress advice and how-to tutorials on popular themes.