Ask AI
How can we help? 👋

Banners

Updated: 16 September 2024 for Release v201


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 particular part of the website you need to select the proper type for your Banner in the Banners Dashboard module. Go to Dashboard > Website > Banners.

Showcase (Homepage)

This banner is always at the top of your Homepage with the width set to full to fill 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. For accessibility, videos also include a Pause button.

Text and button can be added optionally.

Example Showcase Banner
Example Showcase Banner

You can select different layouts here, for example 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 Release v183 the Showcase can also be a slideshow of multiple showcase banners.

The setting is in the Control Panel > 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 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 preview this Banner use "Preview templates" in the Special Access menu on your website, and select the "Order success" template:

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

How to create a Manual assignment Banner

Step 1: 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: 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 select 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

Notion image

Setting a start date and end date can only be done in the Advanced visibility setting. These are optional.

You can also show a banner to (or hide a banner from) visitors with specific Visitor tags. 

Example Advance Setting scenarios with Visitor tags
  • Create a fundraising funnel: show banner A to the general audience with an invitation to become a member or to donate; show banner B to members or donors with an invitation to become an ambassador; and show banner C to ambassadors to invite them to a special event.
  • Do AB-tests (or ABCD….-tests if you like!): divide you audience randomly in groups A, B, etc. and try out a different banner (text/image/video) per group. Sit back and check live behaviour on Google Analytics (with e-commerce tracking) to see which one works best.
  • Show content based on segment, profile or persona: are you working with segments, profiles or personas? Maybe young people respond well to a nice image but experience seekers prefer an exciting video. Maybe persona A should see a banner for the brochure, whereas persona B should not be bothered with it.
  • Show content based on order history: perhaps you have a festival that you want to show as a fullscreen image to visitors that bought tickets last year, but smaller to others. Or a large banner for an event with classical music only to visitors who have bought tickets to similar events earlier.
  • Hide banners from visitors that do not need to see the banner. If you are already a "Friend", you don't need to see banners that advertise becoming a "friend".
  • Or surprise us with some other campaign! :)
⚠️
Take note! Make sure the Visitor tag you select is activated in the Marketing > Visitor tags module!
 

Related articles

Did this answer your question?
😞
😐
🤩