Format and style your pop-up using the template editor

Make your pop-up look more interesting and inspiring by adding background color, image, border style, shadow effects and much more with ease. Choose one of the ready-to-use templates or an empty template and start customizing your pop-up using the versatile options that appear contextually on the template editor. Further, the editor also lets you to add new elements and choose different form fields to your pop-up based on your requirement.

Below are the list of options you can use to format and style your pop-up within the template editor:

Background color

Highlight key messages to make them stand out on your web page using an eye-catching background color or image for your template.
To apply a background style, click the pop-up template and choose from the following options:

Solid color: Click the color picker to apply a single color uniformly to the pop-up.
Gradient color: Click the color picker to apply a continuous blend of two or more colors, with one color gradually fading and changing into another.
Image: Choose an image from your computer to apply as the background to your pop-up.

Select Transparent if you want to remove the background color or image from the pop-up.

Padding

Padding is the space between the pop-up border and content body in your template. Each pop-up template has its own layout and built-in padding style in PageSense and you can increase or decrease the pixel padding as required.

To adjust the padding for a template, click on the pop-up and drag the padding sliders: Top, Right, Bottom, and Left on the left pane. You can also manually type in the desired value (in pixels) in the text box and press Enter.

Info:

Check how your padding looks on mobile as padding changes may affect mobile layouts differently.
Check all the pages of your site containing the template and check the banner or footer.
Some templates have padding built-in and it can't be removed or changed.

Margin

Set the right margin size around your pop-up to best suit your specific website. You can also use this option to add a white space margin all around or on specific sides of the pop-up to add visual interest.

To adjust the margin size, click on the pop-up and drag the margin sliders on the left pane. You can also manually type in the desired value (in pixels) in the text box and press Enter.

Border and shadow

Make your pop-up look more realistic and effective by applying border and shadow effects in PageSense. The border effect applies an outline to the pop-up to give it more emphasis on the web page and the shadow effect adds a shadow beneath the pop-up and helps make it look more realistic.

To apply border effects, click the Border Style dropdown and choose the type of border line you want to apply for the pop-up: dotted, dashed, double, etc. You can customize the border's properties using the Border Color, Border Thickness and Border Radius options as shown in the screenshot.
To apply shadow effects, select your desired shadow color for the pop-up from the color picker and customize its properties such as position and blurriness as shown in the screenshot.

Overlay color

Add a filter effect to your web page or banner image background to add more emphasis to your pop-up content. By default, a shade of gray complementing your pop-up color is applied as the overlay color.

To apply an overlay color, go to the left pane and choose your preferred overlay color style: transparent, solid color, gradient color, or an image.

Close icon

When visitors click on the cross icon on your pop-up, the pop-up will close and disappear from the web page. PageSense allows you to control to minor details on your pop-up and you can customize the properties of this close functionality on your pop-up.

To edit the close icon, click the * icon at the top-right corner of your pop-up box and, in the CLOSE BUTTON section of the left pane, choose the button color, icon color, size, and corner radius settings as shown in the screenshot.

2. Use the Preview icon to see how your pop-up will appear on desktop and mobile devices.

3. Click Next to proceed to the audience settings for the pop-up.

Important: Ensure that the Zoho PageSense code snippet is installed on all the URLs you want to show the pop-up on.