The Cookiez plugin provides extensive design options to ensure your cookie banner, preference dialog, and revisit button seamlessly integrate with your website’s brand identity. You can customize the layout, position, colors, and typography, with deep integration for Elementor users.
Tips for Designing Your Cookie Consent Banner and Revisit Icon
- Match Your Brand: Use your website’s existing color palette, typography, and overall style to ensure the banner feels integrated, not intrusive.
- Prioritize Readability: Choose clear, legible fonts and sufficient contrast between text and background colors.
- Consider Placement: Experiment with banner positions (top or bottom) and offsets to find a placement that is visible without obstructing critical content.
- Mobile Responsiveness: Always check how your banner and revisit icon appear on mobile devices. Use the separate desktop and mobile settings to optimize for smaller screens.
- Revisit Icon Visibility: Ensure the revisit icon is easily noticeable but not distracting. Its size, color, and position should make it accessible for users who wish to change their preferences.
- Clear Call-to-Actions: Make sure your button labels (e.g., “Accept All,” “Deny,” “Customize”) are clear and guide the user effectively.
Elementor Integration for Banner Design
One of the key advantages of this plugin is its focus on Elementor integration. Users can design their consent banner directly within the WordPress admin or by utilizing The Elementor Editor. This allows for a design-first approach, offering full customization capabilities.
Banner Layout Configuration
Control the visual presentation of your cookie banner with the following settings:
- Banner Type: Choose between a full-width banner or a compact box format.
- Position: Set the banner to appear at the top or bottom of the viewport.
- Custom Positioning Offsets: Configure precise offsets for the banner’s position.
- Border Radius: Adjust the curvature of the banner’s corners.
- Device-Specific Settings: Apply separate layout settings for desktop and mobile devices.
Banner & Preference Styling
Customize the visual elements of your banner and preference dialog to match your site’s aesthetic:
- Colors: Customize the background, text, links, and buttons colors.
- Button Appearance: Configure the size, color, and border radius of buttons.
- Branding: Choose to display or hide branding.
Revisit Consent Icon
Design the icon that gives visitors an easy way to manage their consent preferences after their initial choice:
- Icon Style: Select the visual style of the icon.
- Size: Adjust the size of the icon.
- Color: Customize the icon’s color.
- Position: Set the icon’s placement on the screen.
- Device-Specific Positioning: Configure separate positioning for desktop and mobile devices.
- Custom Link: Use the revisit option as a custom link with Elementor.
Live Preview
All design changes you make are reflected in a real-time preview within the WordPress admin, allowing you to visualize the banner’s appearance before publishing it to your live site.