1. Home
  2. Docs
  3. ProductX
  4. All Blocks
  5. Banner Maker Block

Banner Maker Block

Let us explore the Banner Maker block of ProductX.

Video Tutorial

Here is a video tutorial for you to see how to use the banner maker block visually.

Importing Banner Maker Block

Go to a Page and click the “+” icon to see all blocks. Click or drag and drop the “Banner Maker” block on a page.

Importing Banner Maker Block

You can also import the block on ProductX’s WooCommerce Builder. It will work the exact same for both.

Getting Started: ProductX Banner Maker?

When you import the banner maker, you will see 2 options:

  • Pattern
  • Start Blank

Importing Patterns

If you click the Pattern button, it will open the pattern library. You will find some beautiful premade patterns, which you can import in just a single click. Click the Import button to import the pattern directly.

Banner Maker Importing Patterns

After importing a pattern, you can customize it if you want. We will show all the customization settings in a bit.

Starting From Scratch

If you want to start from scratch, click the Start Blank button. And then, you can customize your banner the way you want.

Banner Maker Starting Blank

Customizing ProductX Banner Maker Block

Now, let us show you all the customization options you will have with the banner maker block.

There are 5 different sections in it. Which are:

  • General, 
  • Image, 
  • Content, 
  • Background, and
  • Offer Badge.


The first setting you will get in general is the style. You can choose from 4 different styles. Each has its very own design.

General Style Settings

Then, you can adjust the Width of the banner with a slider. You can also use the text box to define the Width.

Banner Width Setting

After that comes the Banner Alignment, you can select left, center, and right alignment. However, make sure you have enough space when you select left or right alignment.

Banner Alignment Settings

Then comes the Content Alignment. It aligns the contents inside the banner. You will have similar options, left, center, and right alignment, to choose from.

Content Alignment Settings

You can adjust the gap between the image and text with a slider. You can also use the text box to define a gap.

Banner Gap Settings

You can alter the responsiveness of mobile devices with the “Stack On Mobile” setting.


In the banner, you will see an area to upload images. Furthermore, in the image settings, you will have the image uploading option. You can turn off the image with the toggle bar beside the Image section in settings.

You can adjust the image height and Width with a slider and also a text box to define specific dimensions.

Banner Maker Image Settings

You can scale the image with options like none, cover, contain, fill, and scale down.

Also, you can easily adjust the margin of each side: top, bottom, left, and right.

You can also add an image border, select 3 different shaped borders, and adjust the border width, border color, and border radius.


In this setting, you can adjust the content margin and content padding of each side (top, bottom, left, and right).

Banner Maker Content Settings


You can make the whole banner clickable by enabling the “Banner link.” It will open a text box where you can add your URL. Also, you can enable the “open in new tab” option. 

Banner Maker Background Settings

You can also add a banner border, select 3 different shaped borders, and adjust the border width, border color, and border radius.

Banner radius, padding, box shadow, and background fill can also be customized according to preference. You can also enable background overlay with a toggle bar.

Offer Badge

First, you can turn the offer badge on/off with a toggle. You will get 5 different badge styles to choose from. 

Offer Badge Settings

Also, you can customize the text, typography, color, background color, border, badge size, margin, badge position, and badge location according to your preference.

Important Resources

You will need the heading block and button block to create a banner. To learn more about their settings you can visit the following links

And that is all with the banner maker block.

Was this article helpful to you? Yes No