In this documentation, we will discuss about the customizations of the Banner widget brought to you by Ultimate Post Kit addon for Elementor.
Inserting Banner Widget
First Go to the Elementor editor search bar, type in the widget name, and drag-drop it on the page.
Introduce with the Default view
You can see a Banner placeholder Image, Title, Sub Title, Description text, Button, and two Badges.
Content Section Customization
Layout customization
Go to Content > layout
Find the Title and Sub Title fields for the banner.
Then there are Primary Badge Text and Secondary Badge Text fields. We just removed text from the secondary field to hide that badge.
Next, you can set the banner Image. Find the image Position, Attachment, Repeat, and Size options to customize the image.
Additional Section Customization
Go to Content > Additional Settings
In the additional settings section, you can select the style of the Banner. Let’s select Style 3 and change the content Alignment to the right side. You can also adjust the Item Height aka the banner height.
Below are several switchers such as the Title and Heading Tag, Sub Title, and the Read More Button which are enabled already. You can keep the corresponding element on the banner interface by toggling these switchers.
You can see the Primary Badge switcher enabled. Then you may change the Badge Position from the options.
Read More Button Customization
Go to Content > Read More
Here you can customize the button. You can set the Read More Text, set Link, and select Icon.
Customization with Style Tab
Item Customization
Go to Style > Items
Item has several options to customize it. We have set the Border Radius. If you want you can set the Overlay color, select Border, and add Padding and Box Shadow.
Title Customization
Go to Style > Title
You can make the Title stylish. Just add the Color and Set Typography for the text. There are Margin, Text Shadow, and Text Stroke options available.
Read More Button Customization
Go to Style > Read More
To make the read More button more stylish, In normal mode, we have set the text Color and Background Color, For the border we have selected Border Type, Width, and Color.
Here we have set Border Radius, Added Padding and Margin for the Read More button. Now it looks good. Let’s customize in Hover mode.
For the hover mode of the Button, we have set Color, Background Color, and Border color.
Badge Customization
Go to Style > Badge
For the badge, we have set the Color and Background.
To make the badge stylish we set the Border Radius, Padding, and Typography.
This way you can make the banner more stylish and good to look at.
Video Assist
Watch this video to learn about the Banner widget. Please visit the demo page for examples.
Thanks for being with us.
