In this documentation, we will discuss the customization of the Berlin Slider widget, brought to you by the Ultimate Post Kit addon for Elementor.

Inserting Widget

Open your page in Elementor Editor and search by the widget name. Then drag it and drop it on the page.

Default View of the Berlin Slider

On the top is the full-width image with the post and below the post thumb bar which contains the heading of posts. It has an active item and other deactivated items whose images are not visible.

Let’s Work with Content Tab

Layout Customization

Go to Content > Layout

First, we have set the Image size Full for the main Slider, then the thumbnail size full for the post bar. We have enabled the Title switcher with the H3 tag and the Category.

There is another switcher which we have enabled. This switcher will show the Author, Meta, Separator, and Date of the post. That’s all the work for the switcher. Let’s go to the next section.

Make Query of Posts

Go to Content > Query

You can select the source from here. Whether it can be the Posts, Pages, Current Query, or relevant option. We have selected the Posts here and Set Item Limit. Now it will show all types of posts.

Include by category

You can select specific categories by using the Include option and only show them inside the slider. Just click on the plus icon of the Include By box.

Then you will see and Terms box appear, here you can search by Category, Tags, Formats, or Custom Taxonomies.

The Exclude filter option hides selected posts.

You can represent the items in your way. For this, you can set Offset. It will show first the item which you will select. Date, Order by, and Order options will represent the items in various ways.

Slider Settings Customization

Go to Content > Slider Settings

To make the slider play automatically, enable the Autoplay Switcher and set Autoplay Speed. To make the slider repeat, enable the Loop switcher and Set Animation Speed.

Let’s Do Style Tab Customization

Image Customization

Go to Style > Image

Here, you can add the Background of the image and Set the Border. We have added only Border Radius and left the other options default.

Set Title Style

Go to Style > Title

In Normal mode, we have set only the Color and Default Typography. That’s the option for the Title.

In hover mode, change the title Color.

Category Customization

Go to Style > Category

We have made the category a little bit different, In the Normal mode, we have set Color, Background Color, Border Radius, Padding, and Typography.

Here we have set the Color and Background Color. It will change the background color when you will hover over the Category.

Meta Customization

Go to Style > Meta

We have made the meta stylish. Here we have set Color, Hover Color, and Typography. Follow the screenshot above.

Thumbnail Customization

Go to Style > Thumbnail

Item Customization of the thumbnail

We have selected the item Background Color and Set the Border radius for the normal mode.

For the active item, we have made the Background Color Transparent.

Title customization of thumbnail

For the thumbnail, we have set the Color and Hover Color for the Items and set the Active Item Color.

Topbar Customization

For the thumbnail top bar here we have set the Active Color only.

That’s all the options for the Berlin Slider.

Video Assist

You can watch the Video tutorial to learn about the Berlin Slider widget. Please visit the demo page for examples.

Thanks for staying with us.