UAE』s Business Reviews widget requires the Yelp API key to display Yelp reviews. This article will help you find your Yelp Business ID.
It is easy to get Yelp Business ID –
Go to your Yelp business pageObserve the URL of this pageThe ID appears at the end of the URL. For example – www.yelp.com/biz/your-yelp-business-id
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.
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.
With UAE – Particle Backgrounds you get some prebuild particles styling. Apart from these default styles you can customize and personalize background style with JSON code. You can do so with a few easy steps and don』t need to have any coding skills.
You can customize and add custom JSON code from the link here. Below are the steps –
1. Visit the link here to design a custom particles styling.
2. Choose options as per requirement. You can select particles styling like shape, color, size, number, etc. From interactivity options, you can choose interactive effects on mouse hover/click. You can even set a page background for particles.
Screen Recording 2019-05-18 at 06.08.55.00 PM.mp4
3. Once you are done with setting custom styling, click on the Download current config (json). This will export the required JSON code for your custom styling.
4. Open the above-downloaded file and COPY the entire code.
5. Go to your Elementor page and open the Style tab for the section you want to set background for.
6. Under UAE – Particle Backgrounds, choose Style as Custom. Paste the above-copied code under Add Particles Json window.
Save the changes and you are done!
Filters available for Hotspot Widget are listed below.
Helps Modify 「Next」 text in hotspot tour.
add_filter( 'uael_hotspot_next_label', function( $next_label, $settings ) { // Modify the string here return $next_label; }, 10, 2 );
Note: $next_label – The next string in hotspot tour navigation.
HELPS MODIFY 「PREVIOUS」 text IN HOTSPOT TOUR.
add_filter( 'uael_hotspot_previous_label', function( $previous_label, $settings ) { // Modify the string here return $previous_label; }, 10, 2 );
Note: $previous_label – The previous string in hotspot tour navigation.
HELPS MODIFY 「End tour」 text IN HOTSPOT TOUR.
add_filter( 'uael_hotspot_endtour_label', function( $endtour_label, $settings ) { // Modify the string here return $endtour_label; }, 10, 2 );
Note: $endtour_label– The End Tour string in hotspot tour navigation.
HELPS to set the maximum width of the tooltip.
add_filter( 'uael_tooltip_maxwidth', function( $maxwidth, $settings ) { // Modify the maximum width here return $maxwidth; },10,2);
Note: $maxwidth– Maximum width of the Tooltip.
HELPS TO SET THE Minimum WIDTH OF the TOOLTIP.
add_filter( 'uael_tooltip_minwidth', function( $minwidth , $settings ) { // Modify the minimum width here return $minwidth; },10,2);
Note: $minwidth– Minimum width of the Tooltip.
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!
Please make sure the following things are present on your website –
1. You have installed the Ultimate Addons for Elementor version 1.1.0 or higher.
2. You have installed & activated the Contact Form 7 plugin.
3. Contact Form 7 widget is enabled in UAEL Widget settings.
UAE』s Sticky Video feature allows to stick the video on page scroll. Your video will float along the left or right side of the browser window. So, as the reader scrolls the content both the video and your marketing messages will stay in focus.
To make the video sticky, enable the Sticky Video toggle under Content (tab) > Sticky Video setting.
For sticky video feature you get different alignments options for the video, Call to Action Bar and settings to control every part of the sticky video. Below are the key features –
Different alignments for sticky video across the edgesAdd a background for the video and manage its spacing and styleInfo bar to display the description for the videoResponsive supportClose button customizationsDrag sticky video across the window in the frontend
VIDEO SIZE
Specify the width of the Video in px. The video height and width will apply as per the Aspect Ratio set for the video. The aspect ratio for video can change from Content (tab) > Video.For example – If 16:9 ratio is set for video then the sticky video width and height will apply as per the selected ratio.
STICKY ALIGNMENT & SPACING
Sticky Alignment: Manage the position of the sticky video across the edges of the window. Below are the available positions –
Top Left Top Right Bottom Left Bottom Right Center Left Center Right
Spacing from Edges: You can manage the spacing around the video. This spacing will apply from the edges of the screen. Note: Spacing will depend on Sticky Alignment selected. For example – For Top Left alignment, only spacing will apply from the top and left edges of the video.
BACKGROUND SIZE & STYLE
You can add the background to the sticky video. Background size and color option will be available.
MANAGE STICKY VIDEO ON RESPONSIVE DEVICES
Under Sticky Video section, you get an option to Hide the Sticky Video on responsive devices. Here, you can select multiple devices on which you want to hide the sticky video.
CLOSE BUTTON
You can Enable/Disable the close button for the sticky video. Controls to manage the style of the close button are available.
INFO BAR
This option allows adding informative text under the sticky video. Here, you can display the description of the sticky video which provides information about the video currently playing on the page.
You can manage the color, background color, typography and padding to the Info bar. The text field supports the HTML content so, you can apply the custom style to the Info Bar content.
DRAGGABLE SUPPORT
The sticky video can be dragged anywhere on the screen using this feature. You can move the sticky video anywhere within the viewport by clicking and dragging it. The sticky video supports the draggable functionality by default.
Note: The drag functionality do not work in the backend editor of the Elementor and on Mobile devices.
Sometimes enabling the Particle Background does not change anything in the background. This might happen because widgets are covering the entire row/column and there is no space for particles background to show up.
For example – In a row, you have added a heading and added a spacer above and below the heading. Consider you applied a background color for all these widgets. This will occupy the entire space in the row. So particle background added to row will not display as it has heading and spacer above it. In case columns or widgets have a transparent background, particles background will be visible.
To solve this make sure to set a transparent background to all columns/widgets that display above the row where particles background is enabled.
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.
