WPdealer hero banner example

How to create a “HERO BANNER”

What is a hero banner

The hero banner on a website is a prominent and visually striking section, typically positioned at the top of the homepage. It often features compelling visuals, concise text, and a call-to-action, serving as a focal point to capture visitors’ attention and communicate key messages about the brand or content.
It can be effectively utilized to showcase car, motorcycle or location ads.
It serves as an engaging entry point for visitors interested in exploring and navigating through the available inventory.

WPdealer hero banner
Example of WPdealer hero banner to show car listings

With WPdealer you can create the Hero Banner of your website by displaying adverts for cars, motorbikes or location maps.

Let’s see how to do it!!

How to display it

To display the hero banner or any other WPdealer banner in your website, you need to utilize a WPdealer shortcode, a simplified code enclosed in square brackets, such as [shortcode]. Simply insert this shortcode into the desired page or post, enabling effortless integration and dynamic presentation of the banner without extensive coding.

[wpdealer_banner_swiper nlistings=5 random=true featured=true format=0 align=0 valign=0]

This shortcode works with WPdealer CARS, WPdealer MOTO and WPdealer LOCATION MAP.


The shortcode has the following parameters (any parameter is optional), these parameters override those assigned on the WPdealer banner setting page:

  • nlistings (numeric)
    the max number of record to display
  • random (boolean)
    true: random order, false: order by “modified”
  • featured (boolean)
    true: it will show only the featured record (if you choose to show only featured listings and no listing is featured the banner won’t be displayed)
    • how to set a featured listing
      from the wordpress admin go to the list of listings based on the ones you want to select (cars, motorcycles or locations) and click on the gray flag that will turn green:

      WPdealer how to set featured listing
  • format (numeric)
    from 0 to 3: the width and height proportion: 0 = 21:9, 1 = 16:9, 2 = 4:3, 3 = square
  • align (numeric)
    from 0 to 2: horizontal alignment: 0 = left, 1 = center, 2 = right
  • valign (numeric)
    from 0 to 2: vertical alignment: 0 = bottom, 1 = middle, 2 = top

The example

These are the steps to follow to create a hero banner on the home page like this one. For this example we use Gutenberg, but you can achieve the same result with any other editor (Elementor, Oxygen, WPBakery and others)

WPdealer hero banner example

In this example we show you how to display a hero banner in 21:9 format, that shows only featured listings up to 8:

Open the your page editor (in this case we use Gutenberg)

  1. Add a new columns block:
    wpdealer hero banner how to
  2. Select one column layout:
    wpdealer hero banner how to
  3. Add a shortcode block from the blocks list:
    wpdealer hero banner how to
  4. Insert this shortcode in the input field:
    [wpdealer_banner_swiper nlistings=8 random=true format=0 featured=true]
    wpdealer hero banner how to
  5. Set the column to full wide:
    wpdealer hero banner how to

Advanced settings

WPdealer banner has a multitude of settings to set parameters such as scrolling speed, colors, element visibility and more from WPdealer settings > Listings banner.

Final thoughts

WPdealer Banner Swiper shortcode is a valuable tool for seamlessly displaying your listings.
Simplify your showcasing process and enhance user experience with this versatile shortcode, ensuring a visually appealing presentation of your inventory on your website.

If you have any question feel free to contact us.