Premium Banner Widget

Intro

Premium Banner widget, included in the Free version of Premium Addons for Elementor in WordPress, enables the creation of engaging Call to Action banners. These banners feature images, headings, and descriptions, all enhanced with captivating interactive animations. With 10 preset styles and 7 hover options, this Elementor Banner widget offers a range of design possibilities for your WordPress site.

Click here to check Premium Banner Widget demo.

Key Features

  • Image
  • Content
  • Responsive

Image

  • Image: Select an image from the WordPress media library or upload a new custom image to the design.
  • Image Size: Choose the display size of the image, with ‘Full’ likely being an option for full resolution.
  • Link: Enable or disable a hyperlink on the image.
  • Custom Link: Turn on the option to specify a custom URL.
  • Custom Link: Set the desired URL for the image link.
  • Effect: Select a visual effect to apply to the image.
  • Hover Effect: Choose an effect like ‘Scale’ that activates when the mouse hovers over the element.
  • Height: Adjust the height of the element.
    • Default
    • Custom: You may set the minimum height for the element.
  • Vertical Align: Position the element vertically on the page, with ‘Top’ being one of the options.
  • Enable Mouse Tilt: Turn on an interactive effect where the element tilts in response to mouse movements.
  • Reverse: Enable or disable the reverse direction for the hover effect.
  • Extra Class: Input additional CSS classes for further customization of the element’s style.

To view the various styles available, We recommend to check out Premium Banner Feed Widget demo.

Elementor Banner Widget – Image Settings

Content

  • Title: Input the title of the content section; “Transportation” is currently set as the title.
  • HTML Tag: Select the appropriate HTML tag for the title, “H3” indicates a level three heading.
  • Description: Add a description for the content section.
  • Alignment: Adjust the alignment of the content, with options including left, center, and right alignment.
Content Settings for Banner widget for Elementor
Elementor Banner Widget – Content Settings
  • Button: Enable or disable the button feature.
  • Text: Specify the text displayed on the button.
  • Link Type: Select the kind of link the button will use.
  • Link: Enter the URL or anchor the button should link to, with “#” indicating a placeholder or same-page link.
button controls settings on Elementor editor's
Elementor Banner Widget – Button Settings

Responsive

If the description text is not suiting well on specific screen sizes, you may enable this option which will hide the description text.

  • Responsive Controls: Activate this to adjust visibility settings for different screen sizes.
  • Minimum Size: Define the smallest screen width at which the content remains visible.
  • Maximum Size: Establish the largest screen width before the content is hidden; “767px” is noted as the maximum for extra small screens.

Enabled responsive to set min and max size on small screens for Elementor Banner widget
Elementor Banner Widget – Responsive Controls

Style

In the Style tab, you will be able to customize your Banner widget’s colors, typography, and more. These flexible options let you style the widget to your needs.

  • General
  • Title
  • Description
  • Button
  • Container

General

  • Background Color: Choose a color for the background.
  • Image Opacity: Adjust the transparency level of the image.
  • Hover Opacity: Set the transparency level when the mouse hovers over the element.
  • Hover Border Width: Define the thickness of the border during hover.
  • Hover Border Color: Select a color for the border that appears on hover.
  • CSS Filters: Apply custom CSS filters to modify the element’s appearance.
  • Hover CSS Filters: Apply custom CSS filters that will take effect when the element is hovered over.
  • Border Type: Choose the style of the border; options may include solid, dotted, dashed, etc.
  • Border Width: Set the thickness of the border, with individual adjustments possible for top, right, bottom, and left sides.
  • Border Color: Select a color for the border.
  • Advanced Border Radius: Enable to use of custom values for corner rounding.
  • Border Radius: Define the radius of the border’s curve at the corners.
  • Blend Mode: Select a blend mode for the border, which affects how it blends with underlying content; ‘Normal’ is the default setting.
Enable Advanced Border for Elementor Banner Widget Image
Elementor Banner Widget – General Style

Title

  • Color: Choose the text color for the title.
  • Typography: Adjust font properties such as size, weight, style, line height, and letter spacing.
  • Shadow: Add a text shadow effect to the title for depth or emphasis.
  • Margin: Modify the spacing around the title, with individual control over the top, right, bottom, and left margins.
Title Styling controls for Elementor Banner Widget
Elementor Banner Widget – Title Style

Description

  • Color: Set the text color for the description text.
  • Typography: Adjust the font settings such as size, family, weight, and spacing for the description text.
  • Shadow: Add a shadow effect to the description text to enhance visibility or for stylistic purposes.
  • Margin: Control the space around the description text, with the ability to set different values for the top, right, bottom, and left margins.
description styling controls of banner widget by premium addons on elementor editor
Elementor Banner Widget – Description Style

Button

  • Color: Set the text color of the button.
  • Hover Color: Choose the text color of the button when hovered over.
  • Typography: Adjust the font characteristics of the button text.
  • Background Color: Select the background color of the button.
  • Hover Background Color: Choose the background color of the button on hover.
  • Border Type: Select the style of the button’s border (e.g., solid, dashed) with ‘Default’ as the selected option.
  • Border Radius: Adjust the roundness of the button corners.
  • Advanced Border Radius: Toggle for more precise control over each corner’s radius.
  • Shadow: Apply a shadow effect to the button.
  • Margin: Set the outer spacing of the button, with individual values for top, right, bottom, and left.
  • Padding: Set the inner spacing of the button, again with individual values for top, right, bottom, and left.

Container

  • Border Type: Choose the style of the container’s border, with ‘Default’ being the current selection.
  • Border Radius: Set the curvature of the container’s corners, with individual adjustments for top, right, bottom, and left.
  • Box Shadow: Add a shadow around the container to create depth or highlight.
banner widget's container styling controls
Elementor Banner Widget – Container Style

Conclusion

In summery, Elementor Banner widget provided by Premium Addons enhances WordPress sites with interactive Call to Action banners, complete with animations, images, and text. Its 10 styles and 7 hover effects offer extensive creative flexibility, making it a vital tool for engaging website visitors.


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 YoutTube channel to get updates about new features, improvements, and bug fixes.

Related Docs:

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 44+ Elementor Widgets Totally Free of charge.

Premium Addons for Elementor plugin logo

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.