Modal Element

Last Update: April 16, 2024

The Modal Element is a very vesatile Element, which can be used to display additional content via a popup window on a page. Modal boxes are hidden by default and can be triggered by a Menu item, a button element or a modal text / HTML link element, which can be either text or an image. Most of our other Elements can be used inside it, so you can organize your content however you prefer.

Read below for more information about the Modal Element, and watch the video below for a visual oveview.

For privacy reasons YouTube needs your permission to be loaded.

How To Create A Modal

To start, add the element to your desired column. You can insert the Modal element anywhere on your page, as it will be hidden, but it has to be on the same page as the trigger.

In the ‘Name of Modal’ field, enter a unique identifier for your modal. For example, popup. Keep in mind that this same unique identifier will be used in your modal trigger which will be explained below.

Once you have done configuring the Element, remember to save your changes. After setting up the Modal element, you then have to then setup a Modal Trigger (button, text link or image) on the same page, with the same matching unique identifier you added to the ‘Name of Modal’ field. See the section below for more instructions.

How To Create A Modal Button Trigger

Add the Button Element into your desired column. Locate the ‘Modal Window Anchor’ field. Enter the exact unique identifier you entered into the ‘Name of Modal’ field in your Modal element. For example, popup.

Once done, save your changes. You can now view the modal on the front end of your site by clicking the button you added.

How To Create A Modal Text / HTML Link Trigger

Add the Modal Text / HTML Link Element to your desired column. In the ‘Name Of Modal’ field, enter the exact unique identifier you entered into the ‘Name of Modal’ field in your Modal element. For example, popup.

In the ‘Text or HTML Code’ field, enter the text or content that will trigger the modal when clicked. For example, “Open this popup window for more details”. If you’d like to use an image, then enter the image tag. See below for an example.

Once done, save your changes. You can now view the modal on the front end of your site by clicking the text or image you inserted.

Modal Element - Modal Text Link
Copy to Clipboard

You can use a main menu item to launch your Modal as well. This is beneficial because it allows you to have a sitewide Modal with the same content on every page of your site. This could be used in a variety of ways, but one common method is to use it as a contact form Modal in conjunction with an Avada Forms shortcode.

Note: Since the Modal element needs to be on the same page as its trigger for it to work, you’ll need to be sure that your Modal Element shortcode is also added to a sitewide element. This most easily can be done by adding your Modal shortcode to a Global Header Layout Section (or if you are not using Layouts yet, you could alternatively put it in a footer widget). For information on generating shortcodes in Avada, please see our post here.

Step 1 – Navigate to the Appearance > Menus page in your WordPress admin. Edit the menu that you want to add your Modal menu item link to.

Step 2 – Add a “Custom Link” menu item to the menu and give it a name (the URL can just be “#”).

Step 3 – Now, on your newly added menu item, click the “Avada Menu Options” button.

Step 4 – Locate the “Modal Window Anchor” text field and add your Modal’s ID/Name which was added to the Modal element’s “Name of Modal” field. (If you’re using a Modal Shortcode, it will be the value added to the “name” attribute.)

Step 5 – Save the menu settings and check the frontend. If you’ve already created your Modal Element and added it to the page, it should now launch when your menu item is clicked.

Modal Element - Modal Menu Link

Element Options

HeadingDescription
Name Of ModalNeeds to be a unique identifier (lowercase), used for button or modal_text_link element to open the modal. ex: mymodal.
Modal HeadingHeading text for the modal.
Size Of ModalSelect the modal window size.
Background ColorControls the modal background color.
Border ColorControls the modal border color.
Show FooterChoose to show the modal footer with close button.
Contents of ModalAdd your content to be displayed in modal.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.