Getting Started with Popups

Neuron Themes proudly promotes custom-made popups that don’t scare away customers and gives them nice warming hospitality leaving them with the desire to visit your site again and again. Popups are a call to action modal that take over the page at specific moments to grab the user’s attention. 

You choose through the collection of pre-made popups of designer-made templates where you have a wide variety of choices, all beautifully executed. Or create your own popup from the ground up, while being offered all tools necessary to make the most out of this creation.  

To start creating your popup you just need to go to Templates > Popup > Add New. Name your template and choose a pre-made popup from the plethora of options available in Neuron Library, or start designing from scratch. 

How to Design your Popup 

Note: To start configuring the popups settings you need to click on the [ wrench icon ] on the bottom toolbar.

Settings Tab 

Layout 

  1. Width - Set the exact width of the popup either using PX or VW.
  2. Height - Set the height of your popup using either px or VW. If you set the value of 100 VW, you will be able to create a full-width popup.
  3. Horizontal - Set the horizontal position of your popup either Left, Center, or Right.
  4. Vertical - Set the vertical position of your popup either Left, Center, or Right.
  5. Overlay - Choose to either show or hide the background overlay.
  6. Close Button - Choose to either show or hide the close button. 
  7. Entrance Animation - Select from the multiple options of entrance animation for your popup to make an unforgettable entry. 
  8. Exit Animation - Select from the multiple options of exit animation for your popup to make a noble departure. 

General Settings

  1. Title - Name your popup. Remember that this name will only be visible on the backend, meaning users will not b able to see it 
  2. Status - Set the popup's status either Draft, Pending, Private, or Publish. 
  3. HTML tag - Set the HTML tag for your popup. 

Preview Settings

  1. Preview Dynamic Content as - Select how you want to preview the design of your popup. Choose from Archive, Single, or 404 Page. 

Style Tab

Popup

  1. Background Type - Select the type of your popup background to either be Classic or Gradient. If you choose the Classic type you can add an image as your background or select a color. 
  2. Border Type - Choose the border type of your popup from the dropdown menu to either be Solid, Double, Dotted, Dashed, Groove. 
  3. Border Radius - Set the border-radius for your popup.
  4. Box Shadow - Choose to add shade to your popup to elevate your design. 

Overlay

  1. Background Type - Choose the background type to either be Classic or Gradient. If you choose the Classic type you can add an image as your background or select a color. 

Close Button

  1. Position - Determine the position of your close button. You can choose to leave it inside or outside the popup. 
  2. Vertical Position - Set the vertical position for the close button. 
  3. Horizontal Position - Set the horizontal position for the close button. 
  4. Choose either Normal or Hover 
  5. Color - Set the color of the close button for both Normal and Hover. 
  6. Background Color - Set the background color of the close button for both Normal and Hover.
  7. Size - Choose the size you want your close button to be. 

Advanced Tab

Advanced 

  1. Show Close Button After (sec) - Enter the value in seconds for the close button to appear on your popup. The button will appear after the seconds have passed. 
  2. Automatically Close After - Set the timing when you want your popup to automatically close. Leave it blank to disable the automatic close. 
  3. Prevent Closing on Overlay - Select Yes to prevent users from closing the popup on overlay
  4. Prevent Closing on ESC - Select Yes to prevent users from closing the popup by pressing the ESC key. 
  5. Disable Page Scrolling - Switch the handle on to prevent users from scrolling the page behind the popup.
  6. Avoid Multiple Popups - Switch the handle on to hide this popup if the user has seen another popup on the page. 
  7. Open By Selector - Here you can enter the number of selections that can manually trigger the popup appearance. 
  8. Margin - Configure the margins 
  9. Padding - Add padding values to your popup 
  10. CSS Class - Add a custom class for your popup. Note that you should not use dots, e.g. this-class. 

Custom CSS

  1. Custom CSS - Add your own custom CSS to your popup 

How to Manually Trigger Popups 

Popups have their own rules and conditions that you can use to trigger them, but for more flexibility, you can also generate popups manually. You can use either dynamic links, forms, or any element by using a unique selector. 

  1. Choose any link element, click on the dynamic icon, and from the dropdown menu choose Actions > Popup. Open the settings, and you can that the elements either Open the Popup, Close the Popup or Toggle the Popup. When choosing the Close Popup, the 'Do not show again' options will become available.

  2. You can also manually trigger a popup from the Form Elements. From the ' Action After Submit' section choose Popup as an option. That will generate the popup and you can either choose Open Popup or Close Popup. 

  3. And lastly, any element can be assigned a selector that will manually trigger the popup. To do that go to the element's Advanced Tab > CSS Class or CSS ID and give it its class name or ID name. Now go to the Popups Condition window and from there choose the page that includes the elements which you assigned its selector. The popup will be triggered once the users reach the page and click on the element. 

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.