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:
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.Zoho CRM Training Programs
Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.
Zoho DataPrep Personalized Demo
If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.
New to Zoho Survey?
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Zoho DataPrep Resources
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
New to Bigin?
Related Articles
Customize elements in your pop-up using the template editor
Our flexible template editor allows you to select and modify each element individually on your pop-up however you like. You can freely move elements around, and customize the appearance of your pop-up, including background color, button color, image ...Insert new elements to your pop-up
From visitors’ email addresses to their website addresses, you will be able to collect all the information that you need to reach out to your customers and boost conversions in your business using the PageSense' pop-up template editor. The ...Create a multi-screen pop-up in PageSense
In PageSense, apart from creating the traditional single-step pop-ups that ask for information like visitor name and/or email address at the first sight, you can also set up a more effective and engaging multi-screen pop-up campaigns to ...Overview of the PageSense visual editor
Zoho PageSense comes with an attractive, redesigned visual editor interface that lets you create, edit, and format your web page contents to test your business hypothesis. It contains a diverse set of design tools that help you make both basic and ...Create your first pop-up in Zoho PageSense
Choose from predesigned pop-ups in Zoho PageSense to engage customers on your website and use their feedback to improve your business instantly. No coding or design experience needed. All of the pop-up forms can be easily customized and distributed ...
New to Zoho LandingPage?
Zoho LandingPage Resources