Ask AI
How can we help? 👋

Banners

Updated: 16 September 2024 for Release 201

About Banners

Banners on your website are a great way to draw attention to specific campaigns and offers.

There are a lot of options when it comes to banners. Banners mainly focus on the homepage but can also be added to a number of other pages. You can always contact a Peppered Expert via the service portal to add or change banners on other pages of the website.

 

Banner Types

To display a banner at a certain spot, you will have to select the proper type for your banner in the Banners dashboard module. Go to Dashboard > Website > Banners.

Showcase

This banner is always at the top of your homepage in the full width of the screen. It can contain a video (without sound) instead of an image.

🚧
Take note! Video will not play on most mobile devices, so make sure you also add an image.

Text and button can be added optionally.

Example Showcase Banner
Example Showcase Banner

You can select different layouts here, like a split image/text option.

Banner layout options in Peppered Dashboard
Banner layout options in Peppered Dashboard
Example Showcase Banner with Type set to image-left
Example Showcase Banner with Type set to image-left

As of version 183 the showcase can also be a slideshow of multiple showcase banners.

The setting in the control panel is under Core and is called Showcase slideshow. By default it is set to off.

The parameter to autoplay the slideshow goes into the header sticky part and is called autoSlide. The value for it is the number of seconds each slide is visible before it slides to the next. So a good value is typically for instance "4".

 

Featured on home (flexgrid or slideshow)

This type of banner will be shown in the featured grid or slideshow on the homepage. This is a mixture of banners, news and featured events. If no featured banner is active, the grid or slideshow is usually filled with events. The order of banners in the featured flexgrid is as follows:

  1. Featured banners
  1. Events with property 'Featured on home':
  1. Upcoming events in chronological order
Example Featured (flexgrid) Banner
Example Featured (flexgrid) Banner

Banners on home (flexgrid or slideshow)

This type of banner will be displayed in a dedicated banner grid or slideshow (other spot on the homepage). This grid is usually below the featured grid. If no default banners are active, this grid will be completely hidden.

Example of Flexgrid Banner
Example of Flexgrid Banner
 

Sponsor footer

Sponsor banners usually end up in a small row at the bottom of the website. All logos are added by the sponsor footer. You need to create one sponsor banner per logo you want to add to this row.

Example Sponsor Footer
Example Sponsor Footer

Order Success banner

This banner will be shown after a costumer finished a successful booking on the website.

This banner can be personalised by using Visitor Tags. To get a preview from this banner you use "Preview templates" in your "Special Access" menu on your website, and select the "Order success" template to preview it.

Example Order Success Banner
Example Order Success Banner

Manual assignment Banner (previously named Highlight banner)

The manually assigned banner is a little different. A banner with the type "Manual assignment" will not be shown anywhere right away.

The "Manual assignment" type for banners is very versatile and can be used in many different ways. They can be shown within other parts, like the Coming soon part, or be placed in one or several dedicated “Assigned banner” parts.

There are 3 steps to make show a "Manual assignment" banner on your website.

  1. Make a banner in the Banners module, with the type Manual assignment
  1. Connect the banner to the Part you want it to show up in.
  1. Create new places on the desired page (for instance, homepage) for a Part banner
 

Step 1: First you design your “Manual assignment” banner in the Banner module.

This is what a Manual assignment banner looks like when you have it ready in your "Banner" module.
This is what a Manual assignment banner looks like when you have it ready in your "Banner" module.

Step 2: Then you need to select where you want to use a Manual assignment banner. All places where you can show a Manual assignment banner are shown in the banner itself. If there are no options to place your banner here, see step 3 to add new options.:

Notion image

Step 3: You can add new places to show a Manual assignment banner on the Homepage (or other places) via the Routes and Parts. Go to Dashboard > System > Routes and Parts and click on Add. Make sure you select the right Route and the “Assigned banner” part. You can add the desired padding and bgColor and maybe other parameters. Then click Save.

Notion image
 

Visibility settings for Banners

Banners can have three settings that influence the visibility on the website:

  • Yes: The banner is visible on the website*
  • No: The banner is not visible on the website
  • Advanced: The banner visibility depends on date settings and visitor tags*
💡
If there are multiple banners for the same area on the website, use drag & drop to set the correct order. The top banner will be shown on the website.

Advanced visibility settings

 

Related pages

Did this answer your question?
😞
😐
🤩