How to Manage Timeline on Responsive View?

How to Manage Timeline on Responsive View?

When you set Orientation for a timeline as a center, items are arranged in the alternate/even-odd pattern. When you view this orientation on mobile, the timeline may appear collapsed. It depends on the content length in the timeline item. Larger the content, the item will look narrow and long on mobile.
To overcome this Timeline Widget provides a Responsive Support for tablet and mobile device.
Note: Responsive Support is available only for Center Orientation.
The setting can be found under Style (tab) > Layout > Orientation (center). Follow the steps in order to set Responsive Support.

Choose a device for Responsive Support- Tablet & Mobile OR Mobile.
Choose Responsive alignment – Left OR Right.
If you wish to set Content Alignment, choose a device from the toggle and set choose the alignment.

This will display timeline in right/left orientation on responsive devices and in center orientation on the desktop.

How to Set the Alternate Alignment for the Card Content?

How to Set the Alternate Alignment for the Card Content?

Alternate Alignment will display timeline cards in an even-odd manner. That means the first card on left, second on right, third on left and so on. This is default alignment for the timeline.
You can set it manually with Orientation option. The setting can be found under Style (tab) >  Layout > Orientation. Select Center orientation.
You can also set Content Alignment to Left /Center /Right.
Related Document –
How to Manage Timeline on Responsive View?

How to Set On-Scroll Color for Connector Line and Icon?

How to Set On-Scroll Color for Connector Line and Icon?

You might have observed that the connector line and icon color changes as you scroll down or up on the timeline. Basically connector and icon change the color as it comes in the viewport.

The setting can be found under Style (tab) >  Connector.
You will observe two tabs named DEFAULT and FOCUSED.
DEFAULT tab offers color settings for line and color that will display when they are not focused or hovered.
FOCUSED tab offers color settings for line and color that will display when you scroll on the timeline. You can set Line Color, Icon Color, and Icon Background Color.

Note: If color for the icon is set from individual timeline item, it will override above color options for the icon. See How to Style Particular Item / Icon?

How to Set Post as Sticky?

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 Query Builder Works for Post Timeline?

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.

Display Custom Value in Post』s Date Area

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 to Show Video Category on Hover?

How to Show Video Category on Hover?

Category set for the video can be displayed on mouse hover.
See How to Set Categories for Videos?
The setting can be found under the Style tab. Navigate to Syle ( tab ) > Content > Category and select Show Category on Hover.
You can set Category Color and Typography.

How to Show Video Caption on Hover?

How to Show Video Caption on Hover?

To display videos in a more descriptive form, Video Gallery provides an option to display the caption on video hover.
A caption can be a trendy text, informative text or anything that will give more information about the video.
The setting can be found under Content (tab) > Gallery > Caption and follow the steps below to add a caption to each video.
Step 1 – Select a video from the media library list. Caption option will appear in the video settings box.
Step 2 – Caption will not appear on video unless you set it to display on hover. Navigate to Syle ( tab ) >  Content > Caption > Show Caption on Hover.
Step 3 – Set Caption Color and Typography.
Related Documents –
How to Set Overlay Color on the Video Thumbnail on Mouse Hover?

How to Set a Custom Placeholder Image for the Video?

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?