Widgets

Feature Banner

Step-by-Step Tutorial on Using the Feature Banner Widget of Zyre Addon

Your website’s first impression starts with its Feature Banner. The Feature BannerWidget from Zyre Addon ensures those impressions are impactful, offering sleek styles, unique effects, and complete customization to elevate your Elementor projects.

Learn How To Use Feature Banner Widget:

Exploring the Features of Feature Banner Widget

Step 1: Drag the widget

From the left panel, search or choose the Feature Banner Widget of Zyre Addon and simply drag it into your desired section.

Step 2: Content tab

On the Content section, you’ll find options for Template Style, Main Image, Content and Button.

Template Style:

  • Feature Banner Style – you can choose a predefined style from here

Main Image:

  • Skin : Select the display type of the content (cover for overflow content)
  • Choose Image : Select the image from the media library.
  • Image Resolution : Define the resolution for sharper display.
  • Background Size : Set how the background image is scaled.
  • Background Position : Adjust the position of the background.
  • Background Attachment : Set whether the background stays fixed or scrolls with the page.

Content:

  • Media Element : Add an image or icon.
  • Sub Title : Enter subtitle text.
  • Subtitle HTML Tag : Choose the HTML tag for the subtitle.
  • Title Prefix : Add prefix text before the main title.
  • Title : Enter the main title text.
  • Title HTML Tag : Set the HTML tag for the title.
  • Title Suffix : Add suffix text after the main title.
  • Description : Add description text.
  • Description HTML Tag : Choose the HTML tag for the description.

Button:

  • Show Button : Show the Single, Double button or hide it.
  • Position : Set the button’s position.
  • Text : Enter button text.
  • Link : Add a link URL for the button.
  • Icon : Select an icon (including SVG).
  • Icon Position : Choose the position of the icon relative to text.
  • Icon Spacing : Adjust spacing between icon and text.
  • Button ID : Assign a unique ID to the button.
  • Custom Class : Add a custom CSS class for styling.
  • Onclick Event : Define a custom onclick event action.

Step 3: Style tab

In the Style section, you can customize the Box, Main image, Media, Content, Sub Title, Title, Title Prefix, Title Suffix, Description, Button General, Primary Button, Primary Button Icon — but make sure you have added them first.

Box:

  • Height : Set height of the banner.
  • Vertical Position : Set the content’s vertical position.

Main Image:

  • Hover Scale : Adjust how much the image zooms in/out on hover.
  • Transition Duration : Set smooth animation timing for hover effects.
  • Border Radius : Apply rounded corners to the image frame.
  • Overlay (both for normal and hover states)
    • Overlay Color : Add a color overlay for styling.
    • CSS Filters : Apply filters on image.
    • Blend Mode : Control how the image blends with background/overlay.

Media:

  • Width : Set the overall width of the media container.
  • Icon Size : Define the size of the icon (if an icon is set).
  • Image width : Define the width of the image (if an image is set).
  • Spacing : Control the spacing between the media element and other content.
  • Border : Customize border type, width and color.
  • Border Radius : Control corner roundness.
  • Padding : Add inner spacing around the media element.
  • Alignment : Position the media element.
  • Vertical Position : Align the media vertically (if media position is set to left or right).

Content:

  • Width : Define the overall width of the content area.
  • Alignment : Set the content position.
  • Vertical Position : Adjust vertical alignment within the container.
  • Padding : Control inner spacing around the content.
  • Colors (both for normal and hover states)
    • Background Color : Set the content area background color.
    • Icon Color : Set the icon color.
    • Media Border Color : Style the border color of media elements.
    • Subtitle Color : Define the text color for subtitles.
    • Title Prefix Color : Set the prefix text color.
    • Title Color : Define the main title color.
    • Title Suffix Color : Style the suffix text color.
    • Description Color : Set the color for description text.
    • Button Color : Style the button text/icon color.

Sub Title:

  • Display As : Choose the display type of subtitle.
  • Typography : Adjust font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing. Explore full typography settings here.
  • Spacing : Adjust the bottom space of the subtitle.
  • Text Color : Set the subtitle text color.
  • Background type : Set classic or gradient background (linear or radial). Explore full background settings here.
  • Border : Define border type with width and color.
  • Border Radius : Control corner roundness of subtitle.
  • Box Shadow : Add drop shadow.
  • Padding : Control the inner spacing around the subtitle.

Title:

You’ll find the same design options for the Title Section as in the Sub Title Section— giving you full freedom to style it just the way you imagine.

Title Prefix:

You’ll find the same design options for the Title Prefix Section as in the Sub Title Section— giving you full freedom to style it just the way you imagine.

Title Suffix:

You’ll find the same design options for the Title Suffix Section as in the Sub Title Section— giving you full freedom to style it just the way you imagine.

Description:

You’ll find the same design options for the Description as in the Sub Title section— giving you full freedom to style it just the way you imagine.

Button General:

  • Layout : Choose the overall button layout style.
  • Justify Content : Align buttons horizontally.
  • Spacing : Adjust the space between multiple buttons.
  • Position : Set the button’s position relative to the container.
  • Vertical Position : Control the button’s alignment along the vertically.
  • Padding : Manage the inner spacing inside the button container.

Primary Button:

  • Width & Height : Define the button’s dimensions.
  • Justify Content : Align text and icon inside the button.
  • Typography : Set font family, size, weight, transform, style, decoration, line height, and spacing. Explore full typography settings here.
  • Text Shadow : Add text shadow effect.
  • Background type : Set classic or gradient background (linear or radial). Explore full background settings here.
  • Box Shadow : Control drop shadow effect for Normal and Hover states.
  • Border : Define border type with width and color.
  • Border Radius : Control corner roundness.
  • Padding : Manage inner spacing for text and icons.
  • Margin : Control spacing outside the button.

Primary Button Icon:

  • Icon Size : Adjust the icon’s dimension.
  • Background Width & Height : Set width and height for the icon background area.
  • Icon Color : Set the icon color for both Normal and Hover states.
  • Background type : Set classic or gradient background (linear or radial) for both Normal and Hover states. Explore full background settings here.
  • Border : Define border type with width and color.
  • Border Radius : Control corner roundness.

Step 4: Advance tab

If you want to customize the layout, backgrounds, or make your design more engaging, head over to the Advanced section. The Advanced panel is a default Elementor feature. Check out this document to learn more about its features.

Finally, hit the Publish button and watch your stunning Feature Banner come to life on your webpage!

Everything’s good to go now!

Share: