booster addons
creative elementor bundle
Purchase Now
Purchase Now
Purchase Now

Home - Widgets - Image Banner

Image Banner

Preview Widget
Preview Widget
Getting Started
Image Banner
Content Styling

More Widgets

• Layered Images
• Modern Image
• Image Swap
• Interactive Carousel

# Getting started

The Image Banner widget allow you to create fancy banners in just a few clicks.This widget uses a combination of a background image, text, and a button.From the layout to the button styling, you can customize everything.

Lets go over the options provided by this great widget.


In the content section you can define the text elements of the widget and align the content


  • Heading :  A title text that gives a global insight about the information or service you are showcasing.
  • Short text : A description text that gives more information about the topic of the banner.
  • Alignement: Horizontally and vertically align your content inside the widget.

Image Banner

Under the image banner section, you can upload your image and manage everything about its settings.This and the overlay option will give you full control over the image position and appearance.

  • Banner Hover Style : Choose one of the multiple hover styles available.These hover effects will be applied on your image to give extra design.
  • Background Type : You can upload image to use it as a background or simply use a color if you prefer a simple approach.After uploading an image, you will full access to the image settings. 
  • Overlay : Enable this if you want to use an overlay on your image banner.You can either use a solid color for the overlay or a gradient color with the option to control the gradient direction.
  • Padding : Control the space inside the widget by changing the padding values.


Under the styling tab section, you will have the full control over the styling & design of all your image banner widget elements.You can change the sizes, colors, backgrounds...

  • Text Content Styling

Customize the text properties for the heading and short text description text.Change the font size, letter spacing... choose from hundreds of Google font families.

-Colors : Customize the color of your text elements, with the possible use gradient color for the heading.

-Distances : Control the margins & distances between each element.

  • Button Styling

Customize the properties for your button.From the typography to the colors and borders, everything is available.

-Width & Height : Define your button height and width if you want to change the default values.

-Typography & Padding : Choose a font family and change all the text properties to adjust it to your needs.

-Colors : Change the color for both the text and the background.Its possible to gradient colors for the text to give extra style.

-Borders & Shadows : Control the border for your button & apply both text and box shadows.

-Enable Button Hover : Enable this if you want to define a hover style.You can choose one of the many hover effects available and fully customize the colors and shape.You can for example make a square shape for the normal state and a rounded shape for the hover effect.

Get Help From Professionals

Can't find what you are looking for?

If you can't find what you are looking for any our documentation website, please feel free to open a support ticket  & get help from our support team.

Open a Ticket
Open a Ticket


We are a group of talented WordPress developers & designers from Earth our main goal is to create great products & provide the best services to our customers.




Email :

WebSite : Certain Dev

Made with love from Earth!

Certain Dev | all rights reserved © 2020