← Back
ConsentMagic Pro / Extra options / Templates & Design

Templates & Design

Last updated: February 12, 2026

The plugin supports multi-step or single-step templates. This is determines how the consent pop-up looks. “Just inform” consent type supports only the single-step design. You can use one of the pre-defined templates or create your own.

Open Multi-step design OR Single-step design → Templates to manage your design templates.

Default templates

You’ll always see the built-in templates:

  • Orange
  • Light
  • Dark

Each one has quick Preview links:

  • Small bar
  • Large bar
  • Small popup
  • Large popup

Use preview to quickly confirm the look before assigning a template to a rule.

New template (custom templates)

Click New template to create your own template (recommended if you want to match your brand colors).

Custom templates are meant for things like:

  • Brand-matching styles (your site colors)
  • Seasonal versions (Black Friday, Christmas, etc.)
  • Different styles for different rules/audiences

New Design Template: What each option controls

When you create a template, you’re defining the visual style (colors + branding).

Name your template

Give it a clear name you’ll recognize inside rules, for example:

  • Brand (Blue)
  • Minimal Light
  • Promo – Black Friday

Background

  • Background color (labeled “Backend color” in the UI): the main background of the bar/popup.

Border

  • Border style: how the border is drawn (ex: dotted, solid).
  • Border weight: thickness of the border.
  • Border color: color of the border.

Text

  • Text color: main text color.
  • Link’s color: link color.
  • Title’s text color: headings/titles in the multi-step UI.
  • Subtitle’s text color: secondary text / descriptions.

Buttons

These control the buttons shown across the multi-step flow:

  • Accept all button
    • Background
    • Text color
  • Custom button
    • Background
    • Text color
      (Used for any custom action button you show.)
  • Deny all button
    • Background
    • Text color
  • Options button
    • Background
    • Text color
      (Typically opens/continues to options/settings.)
  • Confirm choices button
    • Background
    • Text color
      (Used when the visitor confirms their selection.)
  • Sticky
    • Sticky background
    • Sticky link color
      (Used for the sticky version of the UI, when applicable.)
  • Tab button
    • Background
    • Text color
      (Used for tab-style navigation in the options UI, when applicable.)

Logo

  • Select logo: upload/choose a logo to display.
  • Logo position: where the logo appears (ex: Top).
  • Logo alignment: where it sits horizontally (ex: Left).
  • Logo size: preset size (ex: thumbnail).

Additional

  • Category color: category label/accent color.
  • Active toggle color: background color for toggles when enabled.
  • Active toggle text color: text/icon color for toggles when enabled.
  • Background color for text: background behind text blocks (helper/description areas).
  • Shortcode text color: color used for shortcode-rendered text areas (if shown).

Adjust sizes

Open Multi-step design → Adjust sizes to control the layout sizing for each format.

At the top, you can preview:

  • Small bar
  • Large bar
  • Small popup
  • Large popup

Below, you can edit each layout type:

  • Small bar
  • Large bar
  • Small popup
  • Large popup
  • Options popup
  • Sticky popup

What you can edit for each layout

Content Block

  • Minimum height: prevents the bar/popup from becoming too short.
  • Padding top / bottom / left / right: spacing inside the bar/popup.

Font

  • Font size: base text size.
  • Font weight: thickness (ex: 400 normal, 500 medium, etc.).

Buttons

  • Button padding (top/bottom/left/right): space inside buttons.
  • Button margin (top/bottom/left/right): space around buttons.
  • Button font size
  • Button font weight

Tip: If the layout feels “tight” or “crowded,” start by increasing Content Block padding. If buttons feel cramped, increase Button padding.

Using templates in rules

Each rule can select a template. This is how you apply a design to specific pages/conditions.

  • Choose a default template (Orange/Light/Dark) for quick setup.
  • Choose a custom template when you need brand colors or a special variation.