Home / Docs / Banner design

Banner design: layouts, styles and text

Everything about how the banner looks is on the Banner screen. The preview next to the settings is the real banner, so what you see there is what visitors see.

Layout

Layout Good for
Bottom bar Most sites. A thin bar across the bottom that keeps the page readable.
Box left Sites with a chat widget or a back-to-top button on the right.
Box right Sites that keep the left corner free.
Center modal Sites that want an answer before the visitor goes on. The page behind is dimmed, keyboard focus stays in the banner, and Reject is as easy as Accept.

ClearCrumb Pro adds eight more layouts (top bar, pill, corner, split, full screen, drawer, compact and inline). They are a separate plugin: the four free layouts are complete and never locked.

Style and colours

  • Style: six ready-made styles (ClearCrumb, Paper, Minimal, Ocean, Sunset, Lavender). Each one sets the font, corners, shadow and colours together.
  • Button colour: pick your brand colour. ClearCrumb checks the contrast and keeps the button text readable (WCAG AA).
  • Dark banner: a dark version of the chosen style.
  • Button position: where Accept, Reject and Preferences sit. Accept and Reject always have the same size and weight.

Text

Leave the Title and Text fields empty and the banner uses the built-in text in the visitor’s language (16 languages). Type your own text and it replaces the default in every language, so only do that on a one-language site or with a translation plugin (see Translations).

Cookie policy link

The banner links to your cookie policy. Put the page address in Cookie policy page (URL), or let ClearCrumb create the page for you with one click. That page uses the Cookie policy block and updates itself when your services change.

The floating button

After the first answer the banner closes and a small round button stays in the corner, so visitors can change their mind at any time. You can also put a Cookie settings link in your footer instead (block or shortcode).

Your own CSS

ClearCrumb has no CSS box of its own. For small tweaks use WordPress’s own Additional CSS (Appearance → Customize → Additional CSS, or Appearance → Editor → Styles → Additional CSS on block themes). It checks your CSS and keeps it when ClearCrumb updates.