Avada Modal Documentation

Each of our other items can be used in it, so you can organise your contents the way you want. In order to see the modal pop-up in operation and to see variants for implementing the modal, please attend our online demonstration by following this links. Stage 1 - Create a pedestal on the page and select a columns format.

Stage 2 - Click the "+ Element" icon in the row to open the Elements pane. Find the modal and click it to open the Options pane. The modal can be inserted anywhere on your page. 3 - In the Name of Modal box, type a unique ID for your modal.

Notice that the same unambiguous identification is used in your modal triggers that is discussed below. Keep your identification unambiguous. You can use generically named classes as classes within the topic, resulting in conflicts and the modal pop-up not working.

4 - When finished, click the Save icon to add it to the page. Stage 5 - Once you have set up the modal item, you will need to set up a modal trigger (button, text-link, or image) with the same unambiguous identification you added to the "Name of Modal" area.

Stage 1 - Create a pedestal on the page and select a columns format. Stage 2 - Click the "+ Element" icon in the row to open the Elements pane. Find the item and click it to open the Options dialog. Stage 3 - Locate the'Modal anchor' box.

In the Name of Modal box in your Modal item, type exactly the unique ID you typed. 4 - When finished, click the "Save" icon. Now you can see the modal at the frontend of your website by pressing this one. A modal text link is a content driven item.

That means that this item is intended to be used with other texts or contents in order to operate correctly. Modal text links can be added to almost any item that has the WordPress default editor. For more information, please see our articles entitled Inhalt Based Elements. Please click here. Stage 1 - Create a pedestal on the page and choose the required columns format.

Stage 2 - Click the "+ Element" pushbutton in the row to open the Elements pane. Paste any item that has a default WordPress content editor. A text block for example. When you' ve decided which item you want to use, click it to open the Options pane. 3 - In the WordPress Content Editor, click the Generator (Fusion Builder logo) item symbol on the taskbar to open the content-based items.

4 - Locate the modal text link item and click it to open the Options pane. 5 - In the Name of Modal box, type exactly the unambiguous ID you typed into the Name of Modal box in your Modal item. 6 - In the Text or HTML Code box, type the text or contents that triggers the modal when you click.

Example: "Click here to open the Contact Modal! Example: "http://www.yoursite.com/path/to/img. jpg" Schritt 7 - When finished, click "Insert" to insert the modal text link element into the WordPress editor. Stage 8 - Insert the remainder of your contents as usual and then click "Save". Now you can see the modal at the frontend of your website by click on this text or picture.

PLEASE NOTE IMPORTANT please be aware that apart from the Text Block tag, you can include a modal text link tag in any tag that has a WordPress editor, such as titles, toggles, warnings, tabs, and so on. If you want, you can use a top level option to start your Modal. That is advantageous because it allows you to have a site wide modal with the same contents on every page of your site.

It can be used in various ways, but a commonly used way is to use it as a modal request for information in combination with a short code of the request for information 7. Hint: Since the modal item must be on the same page as its triggers for it to work, you need to make sure that your modal item speed dial is also added to a Sitewide item.

The easiest way to do this is to insert your modal shortcut into a text widget in the bottom line. Please read our article here for information on how to generate crude abbreviations in Avada. Stage 1 - Go to the Appearance > Menus page in your WordPress administrator. Modify the modal entry you want to be added to.

Stage 2 - Custom Link the menus and give them a name (the address can simply be "#"). Stage 3 - In your recently added option, click the "Avada Options" icon to open the Avada Options dialog. Stage 5 - Store the menus preferences and inspect the front end.

After you have already added your modal element to the page, it should now start when you click on your modal name. REMARK: This must be added to a head level element and does not work with meal Widget. Modal name - displayed as A. Allows you to specify the unambiguous modal name.

It is used to connect the modal to a modal trigger. A modal headline - displayed as B. Allows you to specify the headline text of your modal. Modal Resize - Shown as C. Allows you to adjust the modal sizing. Wallpaper Colour - Displayed as D. Allows you to select the wallpaper colour of your modal.

Margin colour - Displayed as E. Allows you to adjust the colour of the modal margin. Display footing - displayed as F. Allows you to specify whether your modal displays the footing with the Exit pushbutton or not. Modal Inhalt - Illustrates as G. Allows you to adjust the modal volume.

CSS Classic - Shown as H. Allows you to append a Classic to the enveloping HTML part. HTML ID - Illustrates as I. Allows you to append an ID to the enveloping HTML part. PLEASE NOTE IMPORTANT please be aware that you may have more than one modal on a particular page, but each modal on the page must have a distinct identification.

Modal ones that are added on different pages, on the other hand, can have the same ID.