How to Enable Infinite Load Pagination for Posts?

How to Enable Infinite Load Pagination for Posts?

Posts widget provide a unique feature of Infinite Load for posts. Posts that are selected from the query builder can be set to load automatically on the scroll. This is very useful when you display posts dynamically on the page. All posts will load in a predefined posts widget design. You do not need to manually set a number of posts to display on each page.
Read How Query Builder Works for Posts Widget?
The setting can be found under Content (tab) > General > Pagination. You get two options here, Numbers and Infinite. Numbers pagination will display numbers at the bottom of the page, the user will need to click numbers manually to visit next page. While Infinite option will load posts automatically depending on the selected Infinite Load Event. There are two options for Infinite Load Event –
1. Scroll: Posts will load automatically as the user scrolls the page. 
2. Button: 『Load More』 button will appear at the bottom of the posts. When the user clicks on this button next posts will load. Customization options for this button are available under Style (tab) > pagination.
Note:
1. Infinite posts option will display the x number of posts for each load; where x is the value that entered in Post Per Page setting under Content (tab) > General > Posts Per Page.
2. Infinite Pagination option depends on the skin and the layout selected for the posts. This option is available for all skins except News. And available for all layouts except Carousel.

How to enable Quick View for WooCommerce Products?

How to enable Quick View for WooCommerce Products?

A quick view option in the Woo – Products widget shows the product details in a popup. This allows users to take a closer look at the product and its details without moving on to a new page.
This setting can be enabled or disabled from Woo – Products widget options. You can choose to display a quick view on the click of a button or image.  
When you enable a quick view on the image it will show the popup on the click of the image.
While when you enable a quick view on the button, it will add a Quick view badge to the product image and will show a popup on its click. Below is the example for the button option.

More customization options are available under the Style Tab -> Quick View section. (?)

How Query Builder Works for Posts Widget?

How Query Builder Works for Posts Widget?

Posts widget provides a very powerful query builder to display posts. Below is the description for query builder options –
There are two Query Types – Main Query and Custom Query.  

Main Query

This is an advanced option that allows displaying posts dynamically dependent on a page on which posts widget is displaying.
For Example –

Consider you have designed a template with posts widget and selected option Main Query and set it to display on all archive pages.
When you visit any archive page, related posts will display.
Let』s say you have posts category – 『Food』. If you visit the 『Food』 category page where the above template is applied, you will see posts displaying that are assigned category 『Food』.
Sometimes category can be empty and it does not have any posts to display. In this case, a message entered in If Posts Not Found box will display.
If you choose to display Show Search Box, it will display with the above message.

 

Custom Query

It allows choosing posts, pages, media, templates manually based on categories, tags, author.
1. Post Type –  Posts widget allows displaying following post type.

Posts
Pages
Media
My Templates ( Templates saved with Elementor )

2.  Categories / Tags / Author Filter Rule – These rules allow filtering posts on the basis of categories, tags, and author.

Every filter rule has two options. To Match or to Exclude.
 Choose whether to match or exclude particular categories, tags, and author and start typing the name for the selected option. A drop-down for the related option will appear. Select the exact option from it.
For Example, if you wish to display posts for the 『Food』 category written by 『Tom』 only. Then choose 『Match Categories』 option. Start typing Food and choose it from the drop-down list. Choose 『Match Author』 and start typing 『Tom』 and choose it from the drop-down list. This will display 『Food』 posts written by 『Tom』.

3. Post Filter Rule – Allows selecting posts manually.

You can display particular post with Match Posts filter rule. Select this option and start typing the name for the post that you wish to display.
Or you can Exclude particular post. By default, all posts will display. Choose this option and start typing the name for the post that you wish to exclude.

4. Ignore Sticky Posts – 

What is the sticky post  – Sticky Post option will stick a post to the front page. You can set some posts as Sticky to make them appear above the other posts. This allows highlighting specific posts.
For example – Say you have 10 posts published. Then by default post will publish in reverse chronological order. That means posts will display in order 10,9,8,7 and so on. Consider 5th post is marked as sticky. Then it will display at the top of the page. So the sequence for the posts will be 5,10,9,8 and so on.
Refer a link here to see how to mark post a sticky.
If you select to Ignore Sticky Posts then posts will display normally in reverse chronological order and the sticky post will not be displayed at the top in the timeline.

5. Post Order – Selected posts can be ordered on the basis of date, title, menu order etc or can be displayed randomly.

No Results Message

If the query builder does not found any posts to display it shows No Results Message. And offers Search Box to the user ( only if enabled ). You can edit this message with No Results Message
options.

Posts Widget Carousel Does Not Display Correctly?

Posts Widget Carousel Does Not Display Correctly?

Facing the below-shown issue while setting the Carousel for posts?
Don』t worry! You just need to update some settings and it will work fine 
Why is this happening? 
The above case happens when under the General tab, for carousel layout, the number of Posts Per Page is less than or equal to the number of Columns. For example, if the number of columns is 2 and Posts Per Page is set to 2 then the carousel will not display correctly.
How to fix it?
The carousel will work fine only when the number of Posts Per Page is greater than the number of Columns. That means if the number of columns is 2 then Posts Per Page should be 3.

Layouts for Posts Widget

Layouts for Posts Widget

Posts widget provides all necessary layouts to display posts. These layouts can be used in combination with skins to showcase posts in a stunning way. Below are the layouts available with posts widget –

Grid: Posts will display in a 「row and columns」 structure.
Masonry: Post will display based on available vertical space.
Carousel: Posts will be displayed in a slider.
Featured: The first post in the loop will be set is featured and will be highlighted in the layout.

The setting can be found under Content (tab) > General > Layout. All the above layouts are dependent on the selected Skin.
When you select Carousel or Featured layout, a separate tab for its advanced settings will be added in the Content tab list. Customization options will be available under the Style tab.

Bulk Editing for Video Category Names

Bulk Editing for Video Category Names

Video Gallery widget for Ultimate Addon for Elementor comes with a feature to add Category for every video in the gallery.
These categories help one set filters for the Gallery. You can read more about it here.
But, it so happens that sometimes you want to change the category name. So in that scenario, you might need to edit each video and edit the name, which is quite a tedious task to do.
Do not worry, we have a rescue filter available for this. This filter will help you bulk edit a particular category name. It is used as shown below.
add_filter( 'uael_video_gallery_filters', function( $filters ) {
$filters['vimeo'] = 'My edited Vimeo title';
return $filters;
}, 1, 1 );
This will change the category name with Vimeo to  My Edited Vimeo Title.

Modal Popup JS Triggers

Modal Popup JS Triggers

What is Modal Popup trigger?
One can perform JS actions on the event of these triggers in Modal Popup. Ultimate Addon for Elementor has builtin triggers for such actions. They are as listed below.

Before Opening Modal Popup: This trigger invokes before opening a Modal Popup. Its parameters include Modal Popup ID.
uael_before_modal_popup_open

After Opening Modal Popup: This trigger invokes after opening a Modal Popup. Its parameters include Modal Popup ID.
uael_after_modal_popup_open

 
Example: The below example shows the usage of these triggers

jQuery( window ).on( 'uael_after_modal_popup_open', function( e, id ) {
console.log( 'after: ' + id ); // Do actions here
} );
jQuery( window ).on( 'uael_before_modal_popup_open', function( e, id ) {
console.log( 'before: ' + id ); // Do actions here
} );

Double Click on Mobile for Video

Double Click on Mobile for Video

Video widget allows you to set a custom thumbnail image for the video. When the thumbnail image is set and the video is viewed on mobile, it takes two clicks to play the video. To choose whether to display two clicks or the thumbnail image, we have added an option Enable Double Click on Mobile under video options for both YouTube and Vimeo.
Normally, when the thumbnail image is set and video is displayed in mobile it shows two play buttons – first for thumbnail image and second for the actual video that loads after the user clicks on a thumbnail image.
You can control a number of clicks on mobile with Enable Double Click on Mobile option. Set the option to NO to allow video to play with a single click. In this case, the thumbnail image will not be displayed. When the user clicks on video play button, iframe will be loaded runtime and video will play in a single click.
Below is the behavior of Enable Double Click on Mobile option –
Enable Double Click on Mobile: Yes

Shows thumbnail image on mobile.
The user needs to first click on the play button on the thumbnail image.
After that iframe will be loaded dynamically and will display video that will not play automatically.
 The user needs to click on the play button the second time to play the video.

Enable Double Click on Mobile: No

Do not show thumbnail image on mobile. It will display the default thumbnail image for the video.
When the user clicks on the play button, iframe will be loaded dynamically and the video will play.

How to Style Particular Item / Icon?

How to Style Particular Item / Icon?

Each Timeline item inherits the global style options by default. Various global style options for typography and color allows complete customization for timeline items. These global settings can be overwritten by individual style settings for each Timeline Items.
Global, as well as Individual style settings, are described below –

1. Global Settings

You can style all timeline item in a uniform way with global settings. All options are listed under Style (tab) >  Timeline Items/ Dates/  Connector. 

Timeline Items tab contains color and typography options for item content like heading, text, background.
Dates tab provides color and typography options for a date.
Connector tab contains options for Icon and Connector line. You can choose the icon and set a color. Various options for separator line are available here.

2. Override Global Settings

Sometimes you may wish to highlight a particular item in the timeline. You can override the global settings and set a different color/a different icon for the item.
To find setting navigate to Content (tab) > Timeline Items > Edit the required item > Choose Style tab > Turn Override Global Settings ON. From global settings following settings can be overridden.

Heading and Text Color for item content
Background Color for the item.
You can select different Icon for the item and set Icon Color and Icon Background Color.
Date Color