This article will explain how to edit or create a pop-up with Ninja Pop-ups.


  • Log In to the CMS
  • On the left side of the admin panel find and click on “Ninja Popups” plugin. Then click the “Popups” Tab.


  • A list with all the created pop-ups shows. Open the pop-up you wish to edit by pressing ‘Edit’ underneath the name. Find the Pop Up in the list and open it by clicking ‘Edit. If you are creating a new pop-up, follow the steps in the next chapter.


1. Create a New Pop-up

  • If you need to create a new popup, do so by clicking Add New Popup on top of the page (see screenshot above).
  • Give the popup a name and switch (from Ready Themes) to Theme Builder.
  • In the blue bar with Step 1: > you can decide on the size of your popup. 500 x 500 px is the basic setting and will do for a regular popup without an image. If you wish to add an image, we recommend going for 700 x 500 px.
  • You can now add text fields, titles, buttons, images, and so on by dragging a widget from the Builder-section and dropping it in the area below representing the popup.

 

2. Setting the Popup Background

  • You can use an image as a background, or just select a colour
  • Click on an empty spot of the background image and then click the “Settings” icon.


  • On the new window that will appear, click on the Background tab:
    • Background image > click on the Change button and select your desired image from the Media Library or upload a new one. The new image should be approximately the same size as the pop up message window.
    • Background colour > select the desired colour


3. Adding and Adjusting Text Fields, Images & Buttons

In general, you can drag ‘n drop all desired items to the pop-up field from the Builder-section above. Recommendation: drag all items you need to the pop-up first, and edit them later. Usually you will need: 2x Image (one for the close-button, one for a general image or logo), a text field and a button.

  • You can move all items within the pop-up by pressing ‘Move’ and dragging it to the desired place.
  • You can change the width and height of the widget (regardless if it is an image, button or text field) by clicking on the small triangle in the right bottom corner and dragging this until the item shows in the desired size. You could also change these setting via Edit > General.

3.1 Text Fields

  • Drag the widget ‘Text’ from Builder-section to the pop-up field
  • Hover over it and press ‘Edit’
  • In the menu that shows, you can change the following items:
    • Font > here you can choose the preffered font and size. Usually font size 13 or 14 works well. If you wish to use the same font as used within the website (if not a Google Font), you can ask a developer to change the font with CSS.
  • Save your changes by pressing Done at the bottom of the list.

3.2 Images / Close-button

  • Drag the widget ‘Image’ from Builder-section to the pop-up field
  • Hover over it and press ‘Edit’
  • Select the desired image (or x-button) from the Media Library by selecting ‘Change’ next to Image. 
  • You can either change the size of the image from the General-section as shown below, or you can change the size by pressing the small triangle in the right-bottom corner of the image.
  • If you are adding a X-button that should close the pop-up when visitors click on it, make sure to select the option ‘Close Popup’ in the Click action section:
  • Save your changes by pressing Done at the bottom of the list.

3.3 Buttons

  • Drag the widget ‘Button’ from Builder-section to the pop-up field
  • Hover over it and press ‘Edit’
  • In the menu that opens, you can change/update the following items:
    • Default Text > add the text here you wish to showcase on the front as the button text
    • Click Action > if you want to open a page when clicking on the button, you click Open Url and add a URL. If you wish to link to Mailchimp, you can select ‘Send Opt-in Form and Close Popup‘. Read this article on how to set up your popup’s connection with Mailchimp: https://academy.orangehotelmarketing.com/knowledge-base/create-a-pop-up-incl-email-sign-up-ninja-pop-ups/
    • Background > here you can change the background colour of your button.
    • Advanced > CSS Class > as a default setting, a padding is inserted here. Make sure to remove this part to display your text in the middle of the button.


Make sure to press the Update button to save your changes!


4. Settings for the Popup

Follow these steps to select the right settings of the specific popup and the cookie settings and finally activate it as welcome/exit popup.

4.1 Welcome or Exit Settings

Now we just need to set the right settings for our popup. Depending on whether you wish the popup to be the welcome or exit popup, follow the steps below.

  • Open the popup you wish to update the settings for. This could be cookie settings, when it should show up, or any other setting.
    • Welcome Settings > navigate to the Welcome Settings. Here you can select when the Welcome Pop-up should show. Recommendations: On page load
    • Exit Settings > navigate to the Exit Settings. Here you can select when the Exit Popup should show. Recommendations: When mouse leaves the browser viewport (Exit Intent)

4.2 Cookie Settings

  • Navigate to the Cookies section (scroll down)
  • Here you see two fields. Depending on how often you wish the pop-up to show, you fill out here the number of days that it should take before the popup shows again. Normally we would set it at 14 days to make sure the popup doesn’t show too often.

4.3 Put live / activate the pop-up

  • Navigate to Ninja Popups in the left side menu > Settings:
  • General Settings > make sure Enable Plugin shows ‘Enabled’. Depending on whether you wish to display the popup also on mobile, you can enable the second option as well. For an Exit Popup we never display this on mobile; Welcome Popup sometimes but you need to double check it shows correctly.
  • Depending on whether you wish to set the popup as a Welcome or Exit Popup, navigate to the desired section:
    • Welcome: Select the popup in the dropdown menus for the specific languages and mobile/desktop popup. For Display in > Choose ‘Home’.
    • Exit: Select the popup in the dropdown menus for the specific languages and Default Popup. For Mobile > select ‘Disabled’. For Display in > Choose ‘Home’ + ‘Pages’.
  • Press Save Changes in the right top corner.