{"id":167591,"date":"2026-05-18T09:57:34","date_gmt":"2026-05-18T06:57:34","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=167591"},"modified":"2026-05-18T11:07:28","modified_gmt":"2026-05-18T08:07:28","slug":"use-elementor-to-design-your-cookie-consent-banner","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/use-elementor-to-design-your-cookie-consent-banner\/","title":{"rendered":"Use Elementor to design your cookie consent banner"},"content":{"rendered":"\n

The Elementor Cookie Consent plugin helps you create a customizable cookie banner for your WordPress website, ensuring compliance with privacy regulations like GDPR and CCPA. With Elementor Pro, you can leverage the full Elementor visual editor to design your banner, preferences dialog, and revisit button with pixel-perfect control.<\/p>\n\n\n\n

Note<\/strong>: You must have an Advanced or Elementor One subscription to have access to the Popup builder.<\/p>\n\n\n\n

How to design the Cookie Consent banner with Elementor Pro<\/h2>\n\n\n\n

Building your Cookie Consent banner lets you build a banner that perfectly aligns with your site design.<\/p>\n\n\n\n

Note: This article concentrates on connecting Cookie Consent with the Elementor Editor. For details about working with Elementor to design a popup, see Create a popup<\/a>.<\/p>\n\n\n\n

Build your banner with Elementor Pro:<\/h3>\n\n\n\n
    \n
  1. From WP Admin, navigate to Elementor>Cookie Consent<\/strong>.
    \"The<\/li>\n\n\n\n
  2. In the panel, click the Design<\/strong> tab.
    \"The<\/li>\n\n\n\n
  3. Click Design with Elementor<\/strong>.
    \"The
    The Cookie Consent banner opens in the Elementor Editor.
    \"The
    The panel displays the controls for the Cookie Consent banner. See below for a detailed list of the controls and their effects, see below.<\/li>\n<\/ol>\n\n\n\n

    After you design your first popup with Elementor, Edit with Elementor<\/strong> will be replaced with Manage with Elementor. <\/strong> <\/p>\n\n\n\n

    Edit the Cookie Consent banner<\/h3>\n\n\n\n

    In the Elementor Editor, you can change the style of the banner to match your website\u2019s style and you can use other Elementor widgets to add your own flair to the banner.<\/p>\n\n\n\n

    In the example below, we\u2019ll change the typography used in the cookie to match the website. <\/p>\n\n\n\n

    [callout type=”note”]The content of the banner\u2019s header, main text and buttons are all determined in the Cookie Consent dashboard. For details, see Dashboard Walkthrough.[\/callout]<\/p>\n\n\n\n

      \n
    1. Click the Cookie Consent Heading to select it.
      \"The
      Notice that the panel changes to show the Heading controls.
      \"The
      [callout type=”tip]To select the Cookie Consent banner, click any blank area on the canvas.<\/li>\n\n\n\n
    2. Click the Style<\/strong> tab.[\/callout]
      \"The\u00a0<\/li>\n\n\n\n
    3. Click the globe icon by the Typography<\/strong> setting. This brings up the list of global fonts.
      \"The
      Learn more about       Global fonts and colors<\/a>.<\/li>\n\n\n\n
    4. Select the Text<\/strong> typography so it matches the other text on the site.
      \"The<\/li>\n\n\n\n
    5. Click the Cookie Consent Content<\/strong> section to select it.
      \"The<\/li>\n\n\n\n
    6. Click the Style<\/strong> tab and change the Typography <\/strong>to the global text typography as described above.<\/li>\n\n\n\n
    7. Click the Cookie Consent Footer<\/strong> section to select it.
      \"The<\/li>\n\n\n\n
    8. In the panel, click the Style<\/strong> tab.<\/li>\n\n\n\n
    9. Open the Customize button<\/strong> field.
      \"The<\/li>\n\n\n\n
    10. Change the Typography <\/strong>to the Global Text typography as described above.<\/li>\n\n\n\n
    11. Do the same to the other two buttons.
      \"The
      Now let\u2019s spice things up by adding a fun image to the banner.<\/li>\n\n\n\n
    12. Click the \u201c+<\/strong>\u201d sign in the top bar.
      \"The
      This opens the widget panel<\/li>\n\n\n\n
    13. Drag an Image widget to the Cookie Consent banner.
      \"Adding<\/li>\n\n\n\n
    14. Add an image and style it so it fits in the banner.
      \"The<\/li>\n\n\n\n
    15. Save your design by clicking Publish<\/strong>.\u00a0
      \"The<\/li>\n\n\n\n
    16. By default, the Cookie Consent banner will appear on all pages, if you want to limit the banner to certain pages, you\u2019ll need to edit the banner\u2019s conditions. For details, see Manage Cookie Consent banners<\/a> below.
      If you want to create multiple Cookie Consent banners:<\/li>\n\n\n\n
    17. When saving the banner, click the arrow next to the Publish<\/strong> button and select Save As Template<\/strong>.
      \"The<\/li>\n\n\n\n
    18. Name the template.<\/li>\n\n\n\n
    19. Choose to save the template to this site or to your cloud library. The difference between site templates and cloud templates<\/a>.<\/li>\n\n\n\n
    20. Click Save page<\/strong>.
      \"Name<\/li>\n\n\n\n
    21. Design a second Cookie Consent banner and save it as a template.<\/li>\n<\/ol>\n\n\n\n

      To select the page or group of pages where the banner will appear:<\/p>\n\n\n\n

        \n
      1. Click the arrow next to the Publish button and select Display Conditions. For details, see Conditions, triggers, and advanced rules<\/a>.\u00a0<\/li>\n<\/ol>\n\n\n\n

        Manage Cookie Consent banners<\/h2>\n\n\n\n

        After you design a banner, it is saved as a template and the Edit with Elementor<\/strong> button in the Cookie Consent dashboard becomes a Manage with Elementor<\/strong> button. <\/p>\n\n\n\n

        To Manage Cookie consent banners:<\/p>\n\n\n\n

          \n
        1. From WP Admin, navigate to Elementor>Cookie Consent<\/strong>.
          \"The<\/li>\n\n\n\n
        2. In the panel, click the Design<\/strong> tab.
          \"The<\/li>\n\n\n\n
        3. Click Manage with Elementor<\/strong>.
          If you have more than one Cookie Consent design, the Popup Library opens to the Cookie Consent banner page.<\/li>\n\n\n\n
        4. Hover over the template name and select:
          \"The\n
            \n
          1. Trash<\/strong>: Delete the banner design.<\/li>\n\n\n\n
          2. View<\/strong>: See how the banner appears to visitors.<\/li>\n\n\n\n
          3. Export Cookie Consent<\/strong>: Create a json file with this banner design.<\/li>\n\n\n\n
          4. Edit with Elementor<\/strong>: Edit the banner with the Elementor Editor.<\/li>\n<\/ol>\n<\/li>\n\n\n\n
          5. Click Edit with Elementor<\/strong> to edit the banner.<\/li>\n\n\n\n
          6. Click Edit conditions<\/strong> to change where this banner will appear on the site.
            You have a choice of where this banner will appear. For this example will choose sitewide so it appears on all pages. For details, see             Conditions, triggers, and advanced rules<\/a>.\u00a0<\/li>\n<\/ol>\n\n\n\n

            You can also access the Cookie Consent templates through WP Admin.<\/p>\n\n\n\n

              \n
            1. From WP Admin, select Elementor>Editor<\/strong>.
              \"Select<\/li>\n\n\n\n
            2. In the panel, click Popups<\/strong>.\u00a0
              \"The<\/li>\n\n\n\n
            3. Click the Cookie Consent tab.
              \"\"<\/li>\n<\/ol>\n\n\n\n

              Cookie Consent banner options<\/h2>\n\n\n\n

              These options are available for the Cookie Consent banner.<\/p>\n\n\n\n

              Settings<\/h3>\n\n\n\n

              Layout
              \"The<\/h4>\n\n\n\n

              Width and Height<\/strong>: Set the size of the banner.<\/p>\n\n\n\n

              Position<\/h5>\n\n\n\n

              Horizontal, Vertical<\/strong>: Set the banner to the left right or center of the screen.<\/p>\n\n\n\n

              Overlay<\/strong>: Toggle to Hide<\/strong> to get rid of the overlay surrounding the banner.<\/p>\n\n\n\n

              Close Button<\/strong>: Toggle to Hide<\/strong> to get rid of the icon closing the banner. <\/p>\n\n\n\n

              Entrance and Exit Animation<\/strong>: Add motion to your banner. For details about the available options, see Add entrance animations to your page<\/a>.<\/p>\n\n\n\n

              Animation Duration: Appears if you add an animation. Determine how long the animation takes to complete.<\/p>\n\n\n\n

              General Settings
              \"The<\/h4>\n\n\n\n

              Title<\/strong>: Give your banner a name.<\/p>\n\n\n\n

              Status: Use the dropdown to see if the banner is:<\/p>\n\n\n\n