Modal Text / HTML Link Element
The Modal Text / HTML Link Element is another simple element, that allows you to add a text or html link to trigger a modal dialog, in conjunction with the Modal Element. The two work hand in hand. With this simple element, you can add some text to trigger a modal, or you can add html or shortcodes (like an image) to trigger a modal that way as well.
As of Avada 6.2, you can now also add a Modal Text/HTML Link using the Inline Editor in Fusion Builder Live. See below to read more about this handy element.
This image triggers a large Modal window.
How to use the Modal Text / HTML Link Element
Let’s add some simple text to trigger a Modal, using the Modal Text / HTML Link Element.
Step 1Â – Create a new page or post, or edit an existing one.
Step 2Â – Add a Modal Text / HTML Link Element via the Fusion Builder.
Step 3Â – The first thing to add is the Name of the Modal (which you will also add to the Modal element you add beneath this element). This tells the Element which Modal to trigger.
Step 4Â – The next step is to add our triggering text / HTML to the text or HTML code field. For example, we could write Open this popup window for more details. Alternatively, to use an image to trigger the modal, insert the image code. Example below.
Step 5Â – Click Save.
Step 6 – The next step is to create the Modal Element you wish to trigger. To read more about the Modal Element, view this documentation.
Element Options
Location: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Name of Modal – Unique identifier of the modal to open on click.
Text or HTML code – Insert text or HTML code here (e.g: HTML for image). This content will be used to trigger the modal popup. This will also work with Shortcodes.
CSS Class – Allows you to add a class to the wrapping HTML element.
CSS ID – Allows you to add an ID to the wrapping HTML element.
Global Options
The Modal Text / HTML Link Element does not have any global options.
