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
- Width - Set the exact width of the popup either using PX or VW.
- 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.
- Horizontal - Set the horizontal position of your popup either Left, Center, or Right.
- Vertical - Set the vertical position of your popup either Left, Center, or Right.
- Overlay - Choose to either show or hide the background overlay.
- Close Button - Choose to either show or hide the close button.
- Entrance Animation - Select from the multiple options of entrance animation for your popup to make an unforgettable entry.
- Exit Animation - Select from the multiple options of exit animation for your popup to make a noble departure.
General Settings
- Title - Name your popup. Remember that this name will only be visible on the backend, meaning users will not b able to see it
- Status - Set the popup's status either Draft, Pending, Private, or Publish.
- HTML tag - Set the HTML tag for your popup.
Preview Settings
- 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
- 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.
- Border Type - Choose the border type of your popup from the dropdown menu to either be Solid, Double, Dotted, Dashed, Groove.
- Border Radius - Set the border-radius for your popup.
- Box Shadow - Choose to add shade to your popup to elevate your design.
Overlay
- 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
- Position - Determine the position of your close button. You can choose to leave it inside or outside the popup.
- Vertical Position - Set the vertical position for the close button.
- Horizontal Position - Set the horizontal position for the close button.
- Choose either Normal or Hover
- Color - Set the color of the close button for both Normal and Hover.
- Background Color - Set the background color of the close button for both Normal and Hover.
- Size - Choose the size you want your close button to be.
Advanced Tab
Advanced
- 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.
- Automatically Close After - Set the timing when you want your popup to automatically close. Leave it blank to disable the automatic close.
- Prevent Closing on Overlay - Select Yes to prevent users from closing the popup on overlay
- Prevent Closing on ESC - Select Yes to prevent users from closing the popup by pressing the ESC key.
- Disable Page Scrolling - Switch the handle on to prevent users from scrolling the page behind the popup.
- Avoid Multiple Popups - Switch the handle on to hide this popup if the user has seen another popup on the page.
- Open By Selector - Here you can enter the number of selections that can manually trigger the popup appearance.
- Margin - Configure the margins
- Padding - Add padding values to your popup
- CSS Class - Add a custom class for your popup. Note that you should not use dots, e.g. this-class.
Custom CSS
- 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.
- 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.
-
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.
-
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.