Author 诗语

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 Overlay Color on the Video Thumbnail on Mouse Hover?

Overlay color can be set for normal and hovered video.
The setting can be found under Style ( tab ) >  Content.
Overlay Color will display on normal video. While Overlay Hover Color color will display when you hover over a video.
Related Documents –
How to Set a Custom Placeholder Image for the Video?

How to Set a Custom Link for the Image?

Wish to open a webpage with the click of an image?
If yes, Custom Link option allows navigating an image to external link.
Custom Link can be added to images while adding them to Image Gallery widget. Here are the steps –
Step 1 – Select an image from the media library list.
Step 2 – UAEL – Custom Link option will appear in the media information column on the right side.

Unable to edit Video Widget

Added a Video Widget in the page and not able to edit it again if switched to another widget? If so here is a trick for you.
To edit the Video Widget again, click on the pencil icon in the right upper corner. That will open a setting area for the Video Widget.

Minimum height option in Price List

Content length for each item in the list may vary. In this case, you might need to set some fixed height for all list items so that they will display with similar dimensions irrespective of content length.
Minimum Height option in Price List is very useful and allows to set a fixed height for all items in the list.
The setting can be found under Layout tab.

How to Add a Caption for the Image?

To display images in a more descriptive form, Image Gallery provides an option to display the caption on image/image hover.
A caption can be a trendy text, informative text, navigation text or anything that will give more information about the image.
Enable the option from Content (tab) > Additional Options > Show Caption and follow the steps below to add a caption to each image.
Step 1 – Select an image from the media library list.
Step 2 – Caption option will appear in the media information column on the right side.
You can completely customize the image caption by applying a background color, text color, padding, vertical alignment, and typography. This setting is available under Style (tab) > Caption.

How to Set Icon on Image Hover?

When you set on click action for the image, you might wish to add an icon on images hover. This icon will guide users with the image click actions.
The option allows adding image or icon on image hover.
The setting can be found under Style ( tab ) >  Thumbnail > Hover > Overlay Icon. Choose between image or icon.

How to Display a Modal Popup on Exit Intent?

What is Exit Intent?
Exit Intent is the technology that tracks the mouse movements on screen and triggers a popup right when a user is about to close the tab or move to another one.
With the Modal Popup widget of the Ultimate Addons for Elementor, you can trigger a popup using the exit intent trigger.
Let us see how easy it is to set this up.
1. Go to the Display Settings section under the Content tab of Modal Popup

2. Select Automatic from the dropdown menu and enable the Exit Intent option.

Different Ribbon styles for Price Box

Ribbon tab in Price Box widget allows setting different ribbon styles. Ribbon highlight best deals, discounts, featured packages etc. in Price Box.
More customization options are available under Style tab.

How to Display Specific 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 Grid / Masonry tab.
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 image. Refer How to Set Categories for Images? 
Here is an example of how it works –

Consider some of the images 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 same as the category name set for the images )
Now on the page load, Design tab will be displayed as an active tab, and images 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.