Ultimate Addons for Elementor 文檔

Enabling Automatic Beta Updates for UAE

We follow a beta testing process for the Ultimate Addons for Elementor. According to this, we release a working copy of the upcoming major update so that our users can give it a try and share their feedback on the newly added features, improvements, and fixes. It is a part of our efforts to release stable and thoroughly tested updates. You can read more to know about UAEL Beta Testing Process.
Until now, you had to log in your account on our store, download the beta version and install it manually on your website. But, we』ve made this easier. You can now enable automatic beta updates for UAE on your website.
Go to Settings -> UAE
You will see the Allow Beta Updates box as shown in the screenshot below. Click on the Enable Beta Updates button.

Note: Beta versions are tested and stable as far as possible. But, it is highly recommended that you use them on a staging environment. Learn more.

Elementor editor not loading/stop working

Sometimes activating Ultimate Addons for Elementor plugin might freeze Elementor editor. The editor keeps spinning and does not load.

Why does it happen? This happens due to the low WordPress memory. Sometimes WordPress plugins you use requires more memory than the currently allocated memory.

How to fix this?In order to get this working, you need to increase the WordPress memory limit. Below are the steps –

Edit the wp-config.php file Search for the line /* That』s all, stop editing! Happy blogging. */Just before the above line add – define( 『WP_MEMORY_LIMIT』, 『512M』 );

For further help, refer – How to Increase the Memory Limit of your site?

Off-Canvas Widget

The Off-Canvas widget allows you to design a stunning off-canvas panel that can slide-in over your page.  The off-canvas panel can be triggered with a button, text, image, icon or through any other widget. This panel can display content, menu, saved -sections/page/widgets.

Key features –

The off-canvas panel can display – Content/ Menu / Saved Section / Saved Page / Saved Widget
Trigger off-canvas content with – Button / Icon / Custom Class / Custom ID
Off Canvas window width and position option (Left/Right)
Off Canvas window appear effect (Slide/Push)
Preview off canvas window in the backend
Close Button style (icon, alignment, size, color)
Off Canvas window background color and content spacing

Below are the settings available for Off-canvas Widget

Content Type

Under the Content tab, you will see two options –

Preview: Enabling this option will give you a preview of the Off-Canvas so that you can see how it will appear in real time.
Content Type: Choose what type of content you wish to display in the off-canvas window. available options are – Content (text, HTML) / Menu / Saved Section / Saved Page / Saved Widget

OFF-CANVAS

Under Off Canvas tab you will see two options –

Width: This allows you to control the width of the canvas. You can specify width in px and responsive devices with toggle.
Position ( left/right ): Choose a direction off-canvas content should appear
Appear Effect: Choose entry effect for the off-canvas window.
Overlay Color: This will be applied to the rest of the window than off-canvas. It will help to highlight off-canvas window.

Canvas background color ans padding can be managed from Style tab > Off Canvas

Display Settings

Display settings will allow you to choose a trigger for canvas. You can display it on the click of a text, icon, button or any other element (with CSS class/ID).

Button / Icon display settings offer a floating option. This will allow setting a floating button / Icon along the right or left edge of the browser. Below is the example of how it works –

Read how you can trigger a canvas from Menu Element or from another Elementor widget.

Close Button

You can customize the button that will close your canvas. You can set its size, position and related style of the close button. Options to close popup on ESC Keypress and on Overlay Click are available.

How to Design an Off-Canvas menu for Elementor – 3 Easy Steps!

Off-Canvas navigation is trending today! It is an attractive way to display a navigation menu whenever triggered by a button/icon/Custom class/ID. With Ultimate Addons for Elementor, showcasing such a vertical Off-Canvas menu is made easy.

UAE offers Off-Canvas widget that has inbuilt option to display navigation menu. Read about all available options here.

Below are the steps to create Off-Canvas menu for Elementor –

Step 1 – Drag and drop UAE』s Off – Canvas widget.Step 2 – Go to Content -> Content Type, select Menu. All WordPress menus will appear in the list. Choose the required menu.

Step 3 – Now go to Display Settings and choose Display On – Button/ Icon / Custom Class / Custom ID.

And you are done!

In the frontend, clicking on the trigger (Button/ Icon / Custom Class / Custom ID) will open a Off-Cavas navigation menu. You can customize it with rest of the available options with Off-Canvas widget.

Trigger Off-Canvas from any Elementor Widget

The Ultimate Addons for Elementor comes with an Off-Canvas widget that can be displayed on the click of a button, icon, or through any other widget.

In order to display an Off-Canvas from another widget, you will have to use a unique class name or ID that is shared between the Off-Canvas and the respective widget.

Here are the steps you need to follow:

Step 1: In the Off-Canvas widget settings, under the Display settings tab, select to display the canvas on a Custom Class / ID.For Custom Class – Enter the unique class name in the text box. Note: Do not add a dot 」 . 」 before the class name. For Custom ID – Enter the unique ID in the text box. Note: Do not add a hash character(#) before the ID.

Step 2: Make sure the same class name is entered in the Advanced Settings tab of the widget you wish to use.For example, we are using the Call to Action widget here. Take a look at the screenshot below.

This method will display the Off-Canvas on the click of the Call to Action or any other widget you apply the CSS class name/ID for.

How to Trigger Off-Canvas on the Click of a Menu Element?

The Off-Canvas widget of the Ultimate Addons for Elementor allows you to display the off-canvas based on various actions. In this article, we』ll see how to trigger an off-canvas on the click of a WordPress Menu element. You can do this using a custom CSS class.

Here are a few steps you need to follow:

Step 1: Drag drop Off-Canvas widget and set it as per you requirements.

Step 2: Open Display Settings of the Off-Canvas widget. Select the Custom Class option from the dropdown menu.

Add your custom class name in the field as shown below.

Step 3. Now go to WordPress Dashboard -> Appearance -> Menu

Step 4. Create a Custom Menu element on click of which you wish to trigger an off-Canvas.

Step 5. Enable the CSS Classes option under the Screen Option settings

Step 6. Add the respective CSS class name ( the one you entered in step 2 ) under the selected menu element.

Also, select the location you wish to display the menu element on. Like we』ve selected Primary Menu in the screenshot below.

Trigger the Off-Canvas Sitewide

The above process will open off-canvas window only on the page where you have added the off-canvas widget. If you wish to trigger this Off-Canvas on the entire website and make it work with all your pages/posts, use the 『wp_footer『 hook with a PHP function. You can paste the following code into the functions.php file of your theme/child theme.

function ultimate_elementor_off_canvas() {
echo do_shortcode( '[uael-template id="your-off-canvas-section-id"]' );
}
add_action('wp_footer', 'ultimate_elementor_off_canvas');

You would need to replace your-off-canvas-section-id in the above code. To get this ID, follow steps below –

1. Save the off-canvas widget you set in step 1 above as a template.

2. Get the ID for this saved template. Refer to an article here. This assures that the Off-Canvas you just created, will be displayed on all the pages/posts of your website!

How to Open a Modal Popup on the Click of an Elementor Widget?

The Ultimate Addons for Elementor comes with a modal popup widget that can be displayed automatically, or on the click of a button, text, image, or through any other widget.
In order to display a modal popup from another widget, you will have to use a unique class name or ID that is shared between the Modal popup and the respective widget.
Here are the steps you need to follow:
1. In the Modal popup settings, under the Display settings tab, select to display the popup on a Custom Class / ID.
2. Enter the unique class name in the text box below.

Note: Do not add a dot 」 . 」 before the class name.
3. Make sure the same class name is entered in the Advanced Settings tab of the widget you wish to use.
For example we are using the Button widget here. Take a look at the screenshot below.

This method will display the modal popup on the click of the button or any other widget you apply the CSS class name for.

How to install the Ultimate Addons for Elementor plugin?

Let us quickly begin with the installation so that you can proceed to create wonders with Elementor and Ultimate Addons for Elementor!
In order to install the UAEL on your WordPress Website, you will have to follow the steps mentioned below.

Login to our store.
Go to Account-> Downloads
Download the plugin. You』ll get a zip file on your computer.
On your WordPress website, install the zip file like you install any other plugin.
Activate the plugin.

And you are done
Please activate the license for automatic updates, support.

About Beta Versions

While working on a major update for the Ultimate Addons for Elementor, we make it a point to release a few beta versions before the final stable product. If you wish to try the new features, test and share feedback, you can try the beta version until the stable one is ready.
We strongly recommend you to use the beta version of the plugin in a test environment only. Do not use it on a live site. This will let you try new features and make a note of errors and bugs without worrying what breaks.
The beta version may further come in multiple minor updates until we are perfectly sure of releasing the final version.

Things you should know before using the beta version –

Beta releases contain the early versions of a major update. They might be released a couple of weeks or a few days before the final version. Although we make sure every version offered to you is tested, there might be some minor bugs that need to be worked on.
During the beta phase, there is a freeze on a code. This means that only the present errors and bugs will be fixed. Apart from these, any feedback requesting for a new feature will be considered only in the next major update.
We will make sure we inform you prior to the first beta release before a major update.

Where can you download the beta version?

When beta versions are available, you can download them from your My Accounts page. You will find a section for Beta Testing under downloads. These versions can also be updated on your WordPress website using the updater when new versions are released.

How can I install a Beta Version?

There are 2 methods in which you can get the beta version on your website.

Automatic Beta Updates
Manual Process

For the manual process, you can install and get going with a Beta version in 4 easy steps.

Deactivate & uninstall UAEL plugin from your website. Don』t worry, nothing will be lost!
Download beta version from the given link.
Now install downloaded beta version.
Clear cache of your website.

How can I update the plugin?

Auto updates are not sent for Beta releases. Therefore, in order to switch from a beta version to the updated version of a plugin, you will have to download the updated file and install the plugin manually.
Share your feedback!
If you have something to share; whether it is a good experience working on the new features or errors and bugs you come across, please do share them with us in our support center, or post it our Facebook group for other users

Filters/Actions for Content Toggle Widget

Filters available for Content Toggle are listed below.

 HELPS MODIFY 「on」 LABEL IN label box switch.

add_filter( 'uael_toggle_on_label', function( $on_label, $settings ) { // Modify the string here     return $on_label;}, 10, 2 );

Note: $on_label –  The ON label string in Label Box switch style.

HELPS MODIFY 「OFF」 LABEL IN LABEL BOX SWITCH.

add_filter( 'uael_toggle_off_label', function( $off_label, $settings ) { // Modify the string here return $off_label; }, 10, 2 );

Note: $off_label –  The OFF label string in Label Box switch style.