Premium Banner Widget

Intro

Premium Banner widget for Elementor allows you to create interactive Call to Action banners that includes image, heading and description with impressive interactive animations. Elementor Banner widget includes 10 preset styles and 7 hover options. Banner Widget is included in Premium Addons for Elementor Free Plugin.

Click here to check Premium Banner Feed Widget demo.

Key Features

  • Image
  • Content
  • Responsive

1. Image

Upload Image -Select an image from the WordPress media library or upload a new custom image. The image will be used as a background behind the title and content.

Link -Enable or disable the banner link. When the option is enabled, you can select from the following settings:

  • Custom Link -Enable or disable a custom link. When enabled, you can enter a custom link.
  • Existing page -Link to an existing page by selecting it from a list.
  • Link Title -Add a text to the links title attribute.
  • New Tab -Choose if you want the link be opened in a new tab or not.
  • Nofollow Option -Enable or disable Nofollow. If you enable the option, the link will not be counted in search engines.
Image Settings for Elementor Banner
Image Settings for Elementor Banner

Effect -Choose a hover effect for the banner. Select between the following effects:

  • Effect 1 -The image slides slightly to the right, while the content slides in from below the image.
  • Effect 2 -Both the title and content slide in from below the image, and the title has a solid background color.
  • Effect 3 -The title is visible in the top left corner, and has an animated underline. The content slides in from the right-hand side.
    • To change underline Color or Width navigate to Style tab:
    • Hover Border Width: Set the width of the underline.
    • Hover Border Color: Set the color of the underline.
  • Effect 4 -Similar to effect 1. The image does not slide, but the content slides in from below the image, while the title moves slightly upwards.
  • Effect 5 -The image is centered and the content appears in the middle of the image on hover. The title and content are wrapped in a thin border.
  • Effect 6 -Similar to effect 5, but the border has a different style and the title moves upwards.
  • Effect 7 -A top-left and a bottom-right corner will appear and the content appears in the middle of the image on hover. The title will be slide from the left side.
  • Effect 8 -On every side, there will be a point and start to create the border, then the content appears in the middle of the image on hover. The title will be slide from the left side.
  • Effect 9 -The divider will be cross while the image is zooming out. For title and content will move up and down.
  • Effect 10 -The divider and the content will slide up below the title.
  • To change the border colors and width, navigate to Style tab:
    • Hover Border Width: Set the width of the border.
    • Hover Border Color: Set the color of the border.

The best way to see the different styles is to visit the Premium Banner Feed Widget demo.

Always Hovered -Enable this option if you want to use these effects without hovering over the image.

Hover Effects -Combine the effects above with a hover affect that affects the background image itself. Select between:

  • None
  • Zoom In
  • Zoom Out
  • Scale
  • Greyscale
  • Blur
  • Bright
  • Sepia

Height  -Choose if you want to set a custom height for the banner, or keep it as it is. When the option is enabled, you can select:

  • The banner widgets minimum height value in pixels.
  • The vertical align: Top, Middle, Bottom, Full.
  • Enable Mouse Tilt -Enable / Disable mouse tilt effect.
  • Reverse -Reverse the tilt effect.

Extra Class -Add an extra CSS class name that will be applied to the banner. You can use this class for your customizations.

Customize Effect on Banner Widget for Elementor
Customize Effect on Banner Widget for Elementor

2. Content

  • Title -Add a title to the Banner Widget.
  • HTML Tag -Select which HTML tag the title should use. Choose from H1-H6, where H1 is the largest and H6 is the smallest.

Description -You can add the content of your Banner in the Richtext editor. You can edit the text visually or with code, and add images from the media library.

Button -Enable or disable a button below the content. When the option is enabled you can select:

  • Text – The text of the button.
  • Link -Select from a list if existing pages, or enter a custom link.
  • Open in new window -Choose if you want the link be opened in a new tab or not.
  • Nofollow Option -Enable or disable Nofollow. If you enable the option, the link will not be counted in search engines.

Alignment -Align the title and content to the left, center or right.

Content Settings for Banner widget for Elementor
Content Settings for Banner widget for Elementor

3. Responsive

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

Elementor Banner Widget Responsive Controls
Elementor Banner Widget Responsive Controls

Style

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

  • General
  • Title
  • Description
  • Button
  • Container

1. General

  • Background Color -Select a background color. This color will shine through if the opacity option below is used.
  • Image Opacity -Select the image opacity from 0.0-1, where 1 means that the background color will not show.
  • Hover Opacity – Select the image opacity that is used when the users hovers over the image.
  • CSS Filters -You can customize the image further by selecting one of the available filters: Blur, Brightness, Contrast, Saturation and Hue. Same for the Hover CSS Filter but will happen on hover only.
  • Border Type -Select between the following border types, as well as the color and the width of the border on each side of the widget:
    • None
    • Solid
    • Double
    • Dotted
    • Dashed
    • Groove
  • Border Radius – Increasing the border radius will add circular corners to the image. You can adjust the border radius in pixels, % or em.
  • Advanced Border Radius – Apply custom radius values for Elementor Banner widget. Get the radius value from here.
  • Border Radius – Insert border radius values.
  • Blend Mode – Describes how images should appear when elements overlap the background.
Enable Advanced Border for Elementor Banner Widget Image
Enable Advanced Border for Elementor Banner Widget Image

2. Title

Color – Select the text color of the banner title.

In the Typography settings you can:

  • Select from a large number of font families.
  • Select the font size in either pixels, em, rem or vw.
  • Select the font weight: From 100 (thin) to 900 (very thick), default, normal or bold.
  • Transform the text to: Uppercase, lowercase, capitalized, default or normal.
  • Select a font style: Normal, italic or oblique.
  • Select a text decoration: Default, underline, overline, line through, none.
  • Adjust the line height.
  • Adjust the letter spacing.

The shadow option adds a text shadow behind the title. Select the shadow color as well as:

  • Blur
  • Horizontal position
  • Vertical position
Title Style for Elementor Banner Widget
Title Style for Elementor Banner Widget

3. Description

The description settings are the same as for the title: Color, Typography and Shadow.

Description Style for Elementor Banner Widget
Description Style for Elementor Banner Widget

4. Button

This option is only available if the button is activated in the Content settings.

  • Color -Select the text color of the button.
  • Hover Color -Select the text color of the button when the user hovers over it.
  • Typography
  • Background color -Select the button background color and opacity.
  • Hover Background color -Select the button background color that is shown when the user hovers over the button.
  • Border -Select the border type, width, color and radius.
  • Advanced Border Radius – Apply custom radius values for Elementor Banner widget button. Get the radius value from here.
  • Border Radius – Insert border radius values.

Padding -Padding is the space between the button text and the edge of the button. Increasing the padding will make the button larger. You can set the padding in pixels, em or %.

Button Style for Elementor Banner Widget
Button Style for Elementor Banner Widget

5. Container

  • Border -Select the border type, width, color and radius.
  • The shadow option adds a Box shadow behind the container.
Button Style for Elementor Banner Widget
Container Style for Elementor Banner Widget

Related Docs:

Download Now it's free!

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