Author 詩語

How to Design Filterable Video Gallery?

Video Gallery widget provides the feature to create a filterable gallery. Here are the steps –
Step 1 – Enable Filterable Video Gallery option.

This option is available only for Grid layout.
The setting can be found under Content (tab) > Filterable Tabs.
Enabling this option will display all categories assigned for videos. See how to create categories in the next step.
「All」 Tab Label is a label to the main category, where all videos in the gallery will be displayed. Edit it if required.

Step 2 – Set categories for videos.

The category names that are set to videos will display as Filterable Tabs title.
In the below screenshot Astra, Elementor are categories.
You can directly assign categories to the video. See how to set categories for videos?
For example – If video A has assigned to category Astra. While video B has assigned to category Elementor. Then Filterable Tabs will automatically display all 2 categories along with main 『All』 category. On clicking on any of the tab will display related video.

Step 3 – Customize Filterable Tabs.

Category names will automatically display as Filterable Tabs.
That means if you assign 5 different categories to videos, then 5 Filterable Tabs for all those categories will be created.
You can completely customize Filterable Tabs with the settings under Style (tab) > Filterable Tabs.

You can add Title for Filterable Tab. That will describe more about the filterable tabs and video gallery.
Enable Title for Filterable Tab option and enter a title. You can customize the title under Style ( tab ) >  Title.

Manage Filterable Tabs on Responsive Devices

Under  Filterable Tabs section, you get an option for Responsive Support. Enabling this option will display all  Filterable Tabs as a dropdown on the responsive devices. If you have a number of filterable tabs, enable this option. It will stack all tabs and display them as a drop-down.

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

Business Hours Widget

Business Hours allow customers to know your service availability time. Day and time can be added with this widget and can be styled nicely. Take a look at the beautiful demo here. Below is the getting started video for the widget.

Key features for Business Hours widget

String support for Day and Time field Highlight Single DayStriped EffectColor and Typography settings for Date and Time

String support for Day and Time field

You can enter any string in the date and time field. This fields are not restricted to use any certain form for date and time.

Highlight Single Day

Single day can be highlighted with different day and time color. Setting can be found in every day setting under Business Days & Timings tab > Day settings > Style This Day.

Striped Effect

This styling option will highlight odd and even rows with different colors to create striped effect. Option is available under Style (tab) > Day and Time > Striped Effect.

Color and Typography settings for Date and Time

Global colors and typography for date and time can be set under Style (tab) > Day and Time.

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.

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 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?

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.

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 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.

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.

How to Change the Vertical Position of Arrow & Icon?

Arrow and icon position can be changed vertically with respect to timeline card. You can set arrow and icon to the top/middle/bottom of the card.
The setting can be found under Style ( tab ) > Layout > Arrow Alignment.