Intro

The Free version of Premium Addons for Elementor in WordPress comes with Premium Banner widget, which lets you create interesting Call to Action signs. There are pictures, headlines, and details on these banners, and they’re all made more interesting with interactive animations. This Elementor Banner widget gives you a lot of design options for your WordPress site. It has 10 pre-set styles and 7 hover choices that helps you to create the Elementor image banner you want.

Click here to check Premium Banner Widget demo.

To see a sample of Premium Banner Widget, click here.

Key Features

• Image
• Content
• Responsive

Image

• Image: Choose an image from the WordPress media library or add a new one that you’ve made yourself.
• Image Size: Pick the size of the picture that will be shown. “Full” is probably an option for full resolution.
• Link: You can turn on or off a link on the picture.
• Custom Link: If you want to use a custom URL, turn on this option.
• Custom Link: Type in the URL you want for the picture link.
• Effect: Pick a style to change the way the picture looks.
• Hover Effect: Select an effect, such as “Scale,” that appears when the mouse moves over an element.
• Height: Change the element’s height.
  • Default
  • Custom: You can add its minimum height should be.
• Vertical Align: This choices for this are to place the element vertically on the page.
• Enable Mouse Tilt: Turn on Mouse Tilt to make a dynamic effect where the element tilts when you move your mouse.
• Reverse: Turn on or off the hover effect’s ability to move backwards.
• Extra Class: Type in more CSS classes to change the style of the element even more.

Check out Premium Banner Feed Widget demo to see the different styles that are offered.

Content

• Title: Type in the title of the content part.
• HTML Tag: For the title, choose the right HTML tag; “H3” means a level three heading.
• Description: Write a short summary for the text part.
• Alignment: You can change how the text is aligned. You can choose between left, center, and right alignment.

• Button: Turn on or off the button option.
• Text: Choose the text that will be shown on the button.
• Link Type: Pick the type of link that the button will use.
• Link: Type in the URL or address that the button should go to. A “#” will show a placeholder or link to the same page.

Responsive

If the text in the description doesn’t look good on some screen sizes, you can turn this setting on to hide it.

• Responsive Controls: If you turn this on, you can change how visible things are on different screen sizes.
• Minimum Size: Set the smallest width of screen at which the information can still be seen.
• Maximum Size: Set the widest part of the screen that will show the information before it is hidden. “767px” is the widest size that will work on very small screens.

Style

You can change the colors, fonts, and other aspects of your Banner widget in the Style tab. With these choices, you can change how the widget looks to suit your needs.

• General
• Title
• Description
• Button
• Container

General

• Background Color: Pick a background color.
• Image Opacity: Change how transparent the image is.
• Hover Opacity: Choose how transparent the element is when the mouse is over it.
• Hover Border Width: Set how thick the edge is when the mouse is over it.
• Hover Border Color: Pick a color for the edge that shows up when you hover over something.
• CSS Filters: To change how an element looks, use custom CSS filters.
• Hover CSS Filters: Add your own custom CSS filters that will work when the element is moved over.
• Border Type: Pick the style of the border. You can pick from solid, dotted, dashed, and other choices.
• Border Width: Choose how thick the border should be. You can change the thickness of the border on the top, right, bottom, and left.
• Border Color: Pick a border color.
• Advanced Border Radius: Custom numbers can be used for corner rounding with the advanced border radius.
• Border Radius: Set the radius of the curve at the corners of the border.
• Blend Mode: Choose a blend mode for the border. “Normal” is the default choice, and it changes how it blends with the content below it.

Title

• Color: Pick the color of the title’s writing.
• Typography: Change the size, weight, style, line height, and letter space of the font.
• Shadow: Give the title a text shadow effect to give it depth or draw attention to it.
• Margin: Change the space around the title. You can change the top, right, bottom, and left borders separately.

Description

• Color: Choose the color of the words in the description.
• Typography: Change the description text’s font choices, such as size, family, weight, and spacing.
• Shadow: Give the description text a shadow effect to make it stand out or for style reasons.
• Margin: You can change the numbers for the top, right, bottom, and left margins to change how much space is around the description text.

Button

• Color: Change the button’s text color.
• Hover Color: You can change the text color of the button when you move your mouse over it.
• Typography: Change how the button text is written by changing the style.
• Background Color: Pick the color of the button’s background.
• Hover Background Color: Pick the color of the button’s background when you move your mouse over it.
• Border Type: Choose the style of the button’s border, such as solid or wavy. “Default” is the default choice.
• Border Radius: Change how round the corners of the buttons are.
• Advanced Border Radius: Toggle this option to get more exact control over the radius of each corner.
• Shadow: Give the button a shadow effect.
• Margin: Set the button’s outer space by giving each of the top, right, bottom, and left numbers a different value.
• Padding: Set the button’s inner space, this time with different numbers for the left, right, top, and bottom.

Container

• Border Type: Pick the type of the border around the container. “Default” is the default choice.
• Border Radius: Change how the corners of the container are curved. You can make separate changes for the top, right, bottom, and left corners.
• Box Shadow: To give the container depth or shine, add a shadow around it.

Conclusion

To sum up, Premium Addons’ Elementor Banner widget adds dynamic Call to Action banners to WordPress sites, complete with animations, images, and text. Its 10 styles and 7 hover effects give you a lot of creative freedom, which makes it an important tool for keeping website users interested.

If you still need any further assistance, feel free to contact Premium Addons support team. We would be more than glad to help!

Join the Community

You’re most welcome to join our Facebook group and YouTube channel to get updates about new features, improvements, and bug fixes.