Nelio Popups makes it easy to catch visitor’s attention and increase conversions with styled popups. Draw your visitor’s eye to your popup by setting up styles to fit your needs and match your site.
In this article, you’ll learn how to add styles to any popup.
To set up styles to your popup, follow these steps:
- Go to Nelio Popups » All Popups and edit the one you want.
- In the editor sidebar, go to the Settings panel, and open the Style tab.
There you will find all the following style settings:
- Size
- Location
- Padding
- Margin
- Animation
- Overlay
- Close button
- Border
- Shadow
- Sound
- Z-index
Let’s review each of them.
Size
Nelio Popups allows you to set different sizes to popups. If you would like to explore every size option, check out how to set up popup size with Nelio Popups.
Location
Nelio Popups makes it easy to set the position where you want your popups to appear in your page. In the style settings you will find a size selector with several options.
Use the Location setting to define where in the viewport you want your popup to appear. There are the following options available:
Once you selected the option you want, click on Save to save the popup. Then, you can preview the changes.
Padding / Margin
A margin is the space around an element’s border, while padding is the space between an element’s border and the element’s content. Put another way, the margin property controls the space outside an element, and the padding property controls the space inside an element.
With Nelio Popups you can set the padding and margin of your popups. In the Style settings tab, you will find the Padding and Margin fields. There you can set the value for the margin and padding of the popup. Also, you can set which unit you want to use amongst percentage, pixels, em and rem.
If you want to set a different value and/or unit for each side of the popup, click on the unlink button at the right of the padding / margin section. By doing this, the single field will transform into four fields, each one allowing to define the padding and margin of the top, right, bottom and left sides of the popup.
Once you set the settings you want, click on Save to save the popup. Then, you can preview the changes and adjust them to fit your needs.
Animation
Draw your visitor’s eye to your popup by adding a unique animated effect when it appears on-screen. Nelio Popups includes several animations to show when the popup opens and when it closes.
If you would like to explore the functionality of animations, check out how to set up animations with Nelio Popups.
Overlay
Overlay means to cover the surface of something with a coating. In other words, it is used to set one thing on the top of another. The overlay effect in a popup makes it attractive and highlights it over the background content.
To set up an overlay for your popup activate the toggle ‘Add overlay behind popup’. Then you can select the exact color (including transparency) of the overlay.
As a result, you can see in the following example the same popup without and with an overlay set:
Overlays are a good choice when you want visitors to focus on your popup over the rest of the content in your page.
Close button
Nelio Popups allows to add a close button to your popup and configure its styles. If you would like to explore every option related to closing a popup, check out how to set up closing a popup with Nelio Popups.
Border
The border is the line that limits the space outside and inside an element. With Nelio Popups you can define the border of your popup, including its color, size and radius. To do so, activate the toggle ‘Add popup border’.
Then you can select the color for the border, set a value for the border radius (to establish rounded corners in the popup), and set a value for the border width.
Setting up a border is a good choice when you want visitors to focus on your popup over the rest of the content in your page and the background of the page and the popup are of a similar color.
Shadow
With Nelio Popups you can define the shadow of your popup, including its color, blur effect and offset. To do so, activate the toggle ‘Add popup shadow’.
Then you can select the color for the shadow, set a value for the shadow blur, and set a value for the shadow offset both horizontally and vertically.
Setting up a shadow is a good choice when you want visitors to focus on your popup over the rest of the content in your page and the background of the page and the popup are of a similar color.
Sound
Nelio Popups makes it easy to create attention-grabbing popups using our sound effects feature. Play a sound as your popup appears to visitors on your site. By default, no sound is played when the popup is opened. However, you can change this behavior by selecting one of the sounds included in Nelio Popups.
If you would like to explore the functionality of sounds, check out how to set up popup sounds with Nelio Popups.
Z-index
The z-index property determines the stack level of an HTML element. The “stack level” refers to the element’s position on the Z axis (as opposed to the X axis or Y axis). A higher value means the element will be closer to the top of the stacking order. This stacking order runs perpendicular to the display, or viewport.
By default, all popups build with Nelio Popups have a z-index value of 99999. If any HTML element in your page appears over a popup, you can modify the z-index value of your popup to a higher number changing the value of the Z-Index field in the style settings.
Choosing a higher value greater than the z-index value of your HTML element on top will make the popup to appear on top of that element.