--- title: Introduction to the Popup Theme Editor description: "## Overview Popup Maker version 1.8.0 introduces \"tabbed\" theme options to the Popup Theme Editor. The new interface provides easier access to find and customize popup theme settings. The *Theme Preview*box is now in clear view to the right of…" url: "https://wppopupmaker.com/docs/theming-popups/popup-theme-editor-introduction/" updated: "2026-05-20" category: Using Popup Maker / Theming Popups --- # Introduction to the Popup Theme Editor ## Overview Popup Maker version 1.8.0 introduces "tabbed" theme options to the Popup Theme Editor. The new interface provides easier access to find and customize popup theme settings. The *Theme Preview*box is now in clear view to the right of the *Theme Settings* box. Areas clicked inside the *Theme Preview* box will display their corresponding theme option settings for editing. Each theme setting is documented by option tab and category (when it exists) within the *Theme Settings* box. See the related links at the end of this article to find the documentation for each theme setting category.  --- ## The Popup Themes Editor ### Select 'Popup Themes' in the Admin From the WordPress Admin, navigate to  **Popup Maker >> Popup Themes**. Or select the *Popup Themes* option tab within the plugin Admin.  ![file FCLbXVlu1k](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5c2fd7b82c7d3a31944fb2f7/file-FCLbXVlu1k.png) ### Edit a Pre-Installed or Add a New Popup Theme When you activate Popup Maker, it installs six pre-set popup themes. We show each theme preview below so you can see how it's styled with its default settings. #### 1)  Default Theme ![file F6awjOMS00](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5c46462f2c7d3a66e32d75c4/file-F6awjOMS00.png) #### 2)  Light Box Theme ![file Pj7oQUif8D](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5c4643de042863543ccc0f9e/file-Pj7oQUif8D.png) #### 3)  Enterprise Blue Theme ![file KcNsgQAEZL](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5c4644682c7d3a66e32d75b9/file-KcNsgQAEZL.png) #### 4)  Hello Box Theme ![file oQXT6fdNI0](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5c4644ab042863543ccc0fa3/file-oQXT6fdNI0.png) #### 5)  Cutting Edge Theme ![file Y3jzqrVQve](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5c4643582c7d3a66e32d75af/file-Y3jzqrVQve.png) #### 6)  Framed Border Theme ![file FyKIwZ9hqC](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5c4644f02c7d3a66e32d75ba/file-FyKIwZ9hqC.png) From the *Popup Themes* admin, choose an existing theme to edit, or click the *'Add New Popup Theme'*  button to edit a new theme. Either selection will open the **Popup Theme Editor.** ### Assign a New Popup Theme Name ![file LISfoZbT1D](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5c2fdae304286304a71de8de/file-LISfoZbT1D.png) When editing a new theme, assign the theme a name. Enter the name into the field marked *Popup Theme Name*.  Select the *Publish* button to save the newly added theme.  ### Use 'Theme Preview' To Find Theme Settings Options ![file](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5c2fdceb2c7d3a31944fb32f/file-c9irIDRexG.png) *View of the Popup Theme Editor (above) with each numbered section of the Theme Preview box (right) mapped to an option tab in the Theme Settings box (left). * The Popup Theme Editor includes a *Theme Preview  *box in the right hand column. Each change to the popup theme settings is reflected in this preview. > **Pro Tip #1**: *By default, the 'Theme Preview' box is positioned **above the 'Publish' box. Scroll down the page to view the 'Publish' box. Reposition the 'Theme Preview' and 'Publish' boxes with the cursor to suit your needs. * > > > > **Pro Tip #2**:  *Click on any section within the Theme Preview box, and the option settings for that section will open in the Theme Settings box. Each section of the Theme Preview box is linked to the option settings in the Popup Theme Editor. * Now that you've been introduced to the Popup Maker Theme Editor, customize each section of your popup to suit your needs. Reveal all of the settings for each section by expanding the following option setting boxes:  - [Overlay Settings;](https://wppopupmaker.com/docs/theming-popups/popup-theme-settings-overlay-tab/), - [Container Settings;](https://wppopupmaker.com/docs/theming-popups/popup-theme-settings-container-tab-container-category/) - [Title Settings;](https://wppopupmaker.com/docs/theming-popups/popup-theme-settings-title-tab-font-category/) - [Content Settings;](https://wppopupmaker.com/docs/theming-popups/popup-theme-settings-content-tab/) and  - [Close Settings](https://wppopupmaker.com/docs/theming-popups/popup-theme-settings-close-tab-general-category/). Once the theme edits are complete, select *Publish*to save the changes.  If a new theme is added, and you intend to use it with a specific popup, assign it in the Popup Editor.  See the following related article. **Related article:**  ['Display - Appearance' option settings]('Display - Appearance' option settings) ## Add a Background Image to a Popup By default, each popup theme sets a background color for the overlay layer and popup container. The overlay layer is the screen area that surrounds each popup.  Background images can be added to either the overlay layer or popup with the  [Advanced Theme Builder plugin extension to Popup Maker.](https://wppopupmaker.com/extensions/advanced-theme-builder/) ## Set Default Popup Theme For New Popups ![file CG5Z7V1HL9](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5c463fb92c7d3a66e32d759c/file-CG5Z7V1HL9.png) Set the default popup theme for each new popup on the Popup Maker Settings option page. From the WordPress Admin, go to **Popup Maker >> Settings >> General**, and select a saved popup theme from the drop-down menu.  When Popup Maker is first activated on a site, the default popup theme is set to *Default Theme*. Each of the popup themes preinstalled with Popup Maker will be listed as menu options. Any new popup theme added to the plugin will appear in the default popup theme menu.   Select the *Save* button after updating the default theme option to save your changes.  ## Popup Themes Options -- Related Articles Each of the following articles documents a popup theme setting option, it's application, properties, and range of available settings. The articles are named according to their option tab and category (when it exists).  - [Theme Settings -- Overlay tab](https://wppopupmaker.com/docs/theming-popups/popup-theme-settings-overlay-tab/) - [Theme Settings — Container tab / Container category](https://wppopupmaker.com/docs/theming-popups/popup-theme-settings-container-tab-container-category/) - [Theme Settings — Container tab / Background category](https://wppopupmaker.com/docs/theming-popups/popup-theme-settings-container-tab-background-category/) - [Theme Settings — Container tab / Border category](https://wppopupmaker.com/docs/theming-popups/popup-theme-settings-container-tab-border-category/) - [Theme Settings — Container tab / Drop Shadow category](https://wppopupmaker.com/docs/theming-popups/theme-settings-container-tab-drop-shadow-category/) - [Theme Settings — Title tab / Font category](https://wppopupmaker.com/docs/theming-popups/popup-theme-settings-title-tab-font-category/) - [Theme Settings — Title tab / Text Shadow category](https://wppopupmaker.com/docs/theming-popups/popup-theme-settings-title-tab-text-shadow-category/) - [Theme Settings — Content tab](https://wppopupmaker.com/docs/theming-popups/popup-theme-settings-content-tab/) - [Theme Settings — Close tab / General category](https://wppopupmaker.com/docs/theming-popups/popup-theme-settings-close-tab-general-category/) - [Theme Settings — Close tab / Size category](https://wppopupmaker.com/docs/theming-popups/popup-theme-settings-close-tab-size-category/) - [Theme Settings — Close tab / Background category](https://wppopupmaker.com/docs/theming-popups/theme-settings-close-tab-background-category/) - [Theme Settings — Close tab / Font category](https://wppopupmaker.com/docs/theming-popups/popup-theme-settings-close-tab-font-category/) - [Theme Settings — Close tab / Border category](https://wppopupmaker.com/docs/theming-popups/popup-theme-settings-close-tab-border-category/) - [Theme Settings — Close tab / Drop Shadow category](https://wppopupmaker.com/docs/theming-popups/popup-theme-settings-close-tab-drop-shadow-category/) - [Theme Settings — Close tab / Text category](https://wppopupmaker.com/docs/theming-popups/popup-theme-settings-close-tab-text-shadow-category/)