The Modal Element can be used to display additional content via a popup window on a page. Modal boxes are hidden by default and can only be triggered by a Menu item, a button element or a modal text / HTML link element, which can be either text or an image. Any of our other elements can be used inside it, so you can organize your content however you prefer.
This Button Opens A Modal Window!,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsLinks & Resources,How To Create A ModalStep 1 – Add a Container to the page and choose a column layout.
Step 2 – Click the 『+ Element』 button on the column to open the Elements window. Locate the Modal Element and click it to open the Options window. You can insert the Modal element anywhere on your page.
Step 3 – 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.
IMPORTANT NOTE: Remember to keep your identifier unique. Do not use generic identifiers like video, image, footer, header etc. Generic names may be used as class names within the theme, thereby conflicting and causing the modal popup to not work.Step 4 – Once done, click the Save button to insert it into the page.
Step 5 – After setting up the Modal element, you then have to then setup a Modal Trigger (button, text link or image) 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 TriggerStep 1 – Add a Container to the page and choose a column layout.
Step 2 – Click the 『+ Element』 button on the column to open the Elements window. Locate the Button Element and click it to open the Options window.
Step 3 – 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.
Step 4 – Once done, click the 『Save』 button. You can now view the modal on the front end of your site by clicking this button.
How To Create A Modal Text / HTML Link TriggerStep 1 – Add a Container to the page and select your desired column layout.
Step 2 – Click the 『+ Element』 button on the column to bring up the Elements window. Choose the Modal Text / HTML Link Element to open the Options window.
Step 3 – 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.
Step 4 – 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.
Step 5 – Once done, click 『Save』 to add the Modal Text Link Element into the page content.
Step 6 – You can now view the modal on the front end of your site by clicking the text or image you inserted.
Step 7 – Once done, click 『Insert』 to add the Modal Text Link Element into the WordPress Content Editor.
Step 8 – Add the rest of your content as normal, then click 『Save』. You can now view the modal on the front end of your site by clicking this text or image.
Copy to Clipboard
1IMPORTANT NOTE – Aside from the Text Block element, you can add a Modal Text Link element to any element that has a WordPress Content Editor such as Titles, Toggles, Alert, Tabs etc.How to Launch a Modal From a Menu ItemYou 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 a Contact Form 7 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 text widget in your footer. For information on generating raw 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 Options」 button to open the menu』s Avada settings.
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.
NOTE: This will need to be added to a header menu item and won』t work from menu widgets.767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Element OptionsLocation: 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.
IMPORTANT NOTE – You can have more than one modal on any given page, however each modal on the page must have a unique identifier. Modals added to different pages, in contrast can have the same identifier.
Name Of Modal – Allows you to set your Modal』s unique identifier. This is used for linking the Modal to a Modal Trigger.
Modal Heading – Allows you to set your Modal』s heading text.
Size of Modal – Allows you to set the size of your Modal.
Background Color – Allows you to set the background color of your Modal.
Border Color – Allows you to set the Modal border color.
Show Footer – Allows you to set if your Modal will show the footer with the close button or not.
Contents of Modal – Allows you to set your Modal』s content.
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.
View The Options ScreenGlobal OptionsThere are no Global Options for the Modal Element.,Useful Links & ResourcesAnchor ScrollingMenu Anchor ElementModal Text / HTML Link ElementOne Page Text Link ElementOne Page Menu with Multi-Page Links