Author 詩語

Display Custom Value in Post』s Date Area

When you select posts to display in the timeline, by default date field shows post』s Published Date. You can change this date filed to any field value that has Meta Key. You just need to get the meta key for your custom field and enter it to the timeline settings.
This can be useful in the following case:
– If your timeline is displaying upcoming events and you want to display future date for a related post.
And many more like this…
The setting can be found under Content (tab) >  Posts > Date. Select Custom from the drop-down. Enter your field meta key with Custom Meta Key option.
Note: This option is available only when you select Content Source as Posts in the timeline.
Below is the example that shows how to display Custom Field value for posts instead of date.
1. Edit the post and enable Custom Field option from Screen options. (?)
2. Add Event Date as new custom field and set the value for it. (?)
3. Get the meta key for the newly created custom field. (?)
4. Enter the key in the Custom Meta Key option.
5. It will display value for custom filed beside the post icon in the timeline.

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.

How to Set Categories for Videos?

Video Gallery Widget provides the feature to create a filterable gallery.
The category names that are set to video will display as Filterable Tabs title. See How to Design Filterable Image Gallery?
Categories can be assigned to videos while adding them to Video Gallery widget. Here are the steps –
Step 1 – Select a video from the list.
Step 2 – Categories option will appear in the individual video settings box. You can add more than one category separated by a comma.
Related Documents –
How to Show Video Category on Hover?

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

How Query Builder Works for Post Timeline?

Timeline widget provides a very powerful query builder to display posts. Query builder appears when one selects Posts as Content Source under the General tab. 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 timeline is displaying.

For Example –

Consider you have designed a template with timeline 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 timeline displaying posts 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.

Custom Query

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

Posts
Pages
Media
My Templates ( Templates saved with Elementor )

2.  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』 in the timeline.

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 or can be displayed randomly.

If Posts Not Found

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

How to Display Specific Video Category Tab as a Default on Page Load?

On page load, you might have observed that the default 「All」 tab is displayed. You can change this tab with a Default Tab on Page Load option.
The setting can be found under the Content > Filterable Tabs > Default Tab on Page Load.
Set toggle to Custom and enter a category name that you want to set as a default tab. That means the category name that you will enter will display as the active tab on the page load.
Note: Make sure you enter the exact same name for the category set for the video. Refer How to Set Categories for videos?
Here is an example of how it works –

Consider some of the videos are assigned a category Design.
And you wish to display Design category tab active on page load.
Set toggle to Custom. Then enter a Default Tab as Design ( make sure the name is exactly the same as the category name set for the videos )
Now on the page load, Design tab will be displayed as an active tab, and videos that are assigned a category Design will display under it.

Note: If you want to display 「All」 tab as a Default Tab, leave the toggle to FIRST.
Related documents –
How to Design Filterable Video Gallery?

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 Set Post as Sticky?

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.
How to mark a post as a sticky?

From the WordPress dashboard navigate to Posts > All Posts.
Edit the post that you wish to set as sticky.
In the right column, in Public box find setting Visibility for and click on Edit.
For the public, tick the option Stick this post to the front page.
Click on ok and update the post.

How to Set a Custom Placeholder Image for the Video?

When you add a video to the galley, the default placeholder image will display before playing a video. You can override this with a nice custom thumbnail that gives a finishing touch to the video gallery.
The setting can be found under Gallery > Choose a Video > Custom Thumbnail
Turn the Custom Thumbnail option ON and set an Image.
You can adjust the Overlay Color. See How to Set Overlay Color on the Video Thumbnail on Mouse Hover?

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
} );