Cookie Consent Banner

The Cookie Consent Banner is a small, customizable notification that appears at the bottom of your site. It informs users that cookies are being used, and allows them to either accept or decline.

1. Consent Duration & Display Behavior

Consent Validity Period: 20 Days

Defines how long the user's cookie preference is remembered. After 20 days, the banner will appear again unless they accept or decline it once more.

2. Banner Content & Messaging

🍪 Cookie Settings The heading shown at the top of the banner.

  • Title Alignment: Left Aligned

  • Title Color: #222222 – dark grey for readability.

Message Text:

“We use cookies to optimize your browsing experience. Click 'Allow' to consent to our cookie policy.” You can format this message with HTML for links, bolding, etc.

  • Body Text Color: #787878

  • Message Font Size: 16px

You should keep the message clear and polite, without overwhelming the visitor.

3. Banner Appearance – Desktop & Mobile

Maximum Width

  • Desktop: 620px

  • Mobile: 360px

Gradient Background

  • Enable Gradient Background: ✅ Enables a soft, multi-tone background instead of a solid color.

  • Primary Gradient Color: #FAFAFA

  • Secondary Gradient Color: #F7F7F7

  • Tertiary Gradient Color (optional): #FBFBFB

  • Gradient Angle: 270° – background fades vertically from top to bottom.

Solid Background Fallback: #FCFCFC

Corner Rounding: 10

Creates subtle rounded corners for the whole banner.

4. Desktop Banner Padding & Positioning

  • Top Padding: 33px

  • Bottom Padding: 13px

  • Horizontal Padding: 40px

  • Vertical Offset: 30px – distance from the bottom edge of the screen.

  • Placement: Bottom Left Appears in the bottom left corner on desktop.

  • Activate Desktop Banner Slider: ✅ Enables horizontal repositioning using the setting below.

  • Horizontal Offset: -300px Pushes the banner left or right (negative values move left, positive = right).

5. Mobile Banner Padding & Positioning

  • Vertical Offset: 100px

  • Banner Placement: Bottom Center

  • Activate Mobile Banner Slider: ✅

  • Horizontal Offset: 0 (centered by default)

Padding Inside the Banner (Mobile):

  • Top: 20px

  • Bottom: 20px

  • Left / Right: 51px each Keeps the text visually balanced and easy to read on mobile screens.

6. Shadow Effect

Shadow Intensity: Medium Shadow

Adds depth and separation between the banner and the rest of the site content.

7. Alternative Layout Options (Desktop Only)

Activate Alternative Desktop Layout: ✅

Moves the accept/decline buttons to the right of the message instead of stacking them below. This creates a sleeker, inline look — ideal for desktop spacing.

8. Accept Button Styling

  • Label: "Allow"

  • Background Color: #3A3A3A

  • Text Color: #FFFFFF

  • Border Color: #C5C5C5

  • Border Thickness: 1px

  • Corner Radius: 9px Rounded button with a sleek, minimal design.

9. Decline Button Styling (Optional)

  • Label: "Decline"

  • URL for Decline Action: Paste your link (optional – useful for redirecting to a "Learn more" page or custom policy)

  • Background Color: #FFFFFF

  • Text Color: #000000

  • Border Color: #000000

  • Border Thickness: 1px

  • Corner Radius: 7px Creates a secondary-style, outlined decline button for balance.

Summary

This Cookie Consent Banner system gives you full visual control while ensuring compliance, clarity, and a clean user experience across devices. With:

  • Gradient or solid backgrounds

  • Glassy shadows and rounded edges

  • Adjustable button styling

  • Separate mobile + desktop positioning …it’s ideal for modern brands who want to stay compliant without disrupting the design.

PreviousBack To Top ProNextMobile Navigation Bar

Last updated