{"id":792,"date":"2026-01-23T16:21:47","date_gmt":"2026-01-23T16:21:47","guid":{"rendered":"https:\/\/docs.treethemes.com\/brandberry\/docs\/site-setup\/theme-builder\/popup-builder\/"},"modified":"2026-01-24T15:19:25","modified_gmt":"2026-01-24T15:19:25","slug":"popup-builder","status":"publish","type":"docs","link":"https:\/\/docs.treethemes.com\/brandberry\/docs\/site-setup\/theme-builder\/popup-builder\/","title":{"rendered":"PopUp Builder"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The Popup Theme Builder<\/strong> in Brandberry<\/strong> allows you to create reusable popup templates using Elementor. Popups can be used for announcements, promotions, contact forms, navigation panels, or any content you want to display on top of the current page.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Creating a Popup Template<\/h3>
  1. Open the Theme Builder (Animation Addons \u2192 Theme Builder<\/strong>)<\/li>
  2. Click Add New<\/strong> and choose PopUp<\/strong> as the template type.<\/li>
  3. Configure the template settings (trigger, display rules, effects, etc.).<\/li>
  4. Click Edit With Elementor<\/strong> to design the popup layout.<\/li>
  5. Click Save Settings<\/strong> to apply your configuration.<\/li><\/ol>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t
    <\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t
    \n\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    Popup Template Settings<\/h3>

    When creating or editing a popup, you will see a Template Settings<\/strong> panel. These settings control how and when your popup is displayed.<\/p>

    • Name<\/strong>
      Enter a clear name to identify the popup template in your dashboard
      (for example: Newsletter Popup, Promo Popup, Contact Popup).<\/li>
    • Type<\/strong>
      Select the template type. For popup templates, choose PopUp<\/strong>.<\/li>
    • Display<\/strong>
      Controls where the popup is allowed to appear. If set to None<\/strong>,
      the popup will not display automatically and can be used only with manual triggers.<\/li>
    • Trigger<\/strong>
      Defines how the popup opens (for example: Click<\/strong>).
      Choose the trigger method that fits your use case.<\/li>
    • Delay<\/strong>
      If supported by the selected trigger, this option delays the popup appearance
      by the specified time (useful for showing popups a few seconds after page load).<\/li>
    • Selector<\/strong>
      Used for click-based triggers. Add the CSS selector of the element that should open the popup.
      By default, .body<\/code> targets the page body, but in most cases you will set this to
      a specific button or link selector.<\/li>
    • Scroll Position<\/strong>
      Used for scroll-based triggers. The popup will appear after the visitor scrolls
      to the specified position (for example: 1500<\/code> pixels).<\/li>
    • Effects<\/strong>
      Choose the popup animation effect (for example: Flip<\/strong>) to control
      how the popup appears on screen.<\/li><\/ul>

      \u00a0<\/p>

      Designing the Popup in Elementor<\/h3>

      After saving the template settings, click Edit With Elementor<\/strong> to build the popup layout. You can use any Elementor, Brandberry, or Animation Addons widgets inside the popup template. Because popups are template-based, edits made to the popup layout are applied everywhere the popup is used.<\/p>

      \u00a0<\/p>

      Best Practices<\/h3>
      • Keep popup content focused and easy to close<\/li>
      • Avoid showing too many popups on the same page<\/li>
      • Use lightweight layouts and limit heavy animations for better performance<\/li>
      • Test popup behavior on mobile devices<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

        The Popup Theme Builder in Brandberry allows you to create reusable popup templates using Elementor. Popups can be used for announcements, promotions, contact forms, navigation panels, or any content you want to display on top of the current page. Creating a Popup Template Open the Theme Builder (Animation Addons \u2192 Theme Builder) Click Add New […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":144,"menu_order":6,"comment_status":"closed","ping_status":"closed","template":"","doc_tag":[],"class_list":["post-792","docs","type-docs","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/docs.treethemes.com\/brandberry\/wp-json\/wp\/v2\/docs\/792","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.treethemes.com\/brandberry\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/docs.treethemes.com\/brandberry\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/docs.treethemes.com\/brandberry\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.treethemes.com\/brandberry\/wp-json\/wp\/v2\/comments?post=792"}],"version-history":[{"count":13,"href":"https:\/\/docs.treethemes.com\/brandberry\/wp-json\/wp\/v2\/docs\/792\/revisions"}],"predecessor-version":[{"id":961,"href":"https:\/\/docs.treethemes.com\/brandberry\/wp-json\/wp\/v2\/docs\/792\/revisions\/961"}],"up":[{"embeddable":true,"href":"https:\/\/docs.treethemes.com\/brandberry\/wp-json\/wp\/v2\/docs\/144"}],"wp:attachment":[{"href":"https:\/\/docs.treethemes.com\/brandberry\/wp-json\/wp\/v2\/media?parent=792"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.treethemes.com\/brandberry\/wp-json\/wp\/v2\/doc_tag?post=792"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}