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 size, spacing, and alignment. For example, you can change the size and color of the CTA button, or the placement of the checkbox to the location on your pop-up that might invite visitors to click on it right away. You won't need your developer's help anymore to give your pop-ups a modern look and feel.
In this article, you will learn the various ways you can format and style the elements in your pop-up using the PageSense' template editor.
Background color
Your visitors should never feel confused about what to do or where to click when they see a pop-up. By applying background colors to your textbox, input box, text area, and other objects, you can make your text stand out without getting absorbed on the webpage.
To apply a background style to an element:
1.Click the element (textbox, input box, textarea, or others) you want to apply a background color to on the pop-up.
2. In the BACKGROUND section (on the left pane), choose any of the following:
Solid color: Click the color picker to apply a single color uniformly to the element.
Gradient color: Click the color picker to apply a continuous blend of two or more colors to the element, with one color gradually fading and changing into another.
Image: Choose an image from your computer to apply as the background to your element.
Note: Choose Transparent if you want to remove the background color or image applied to the element.
Margin space
To adjust the margin of an element:
1. Click the element (textbox, input box, textarea or others) you want to adjust the margin space for in your pop-up.
2. Use the margin sliders (on the left pane), including Top, Right, Bottom, and Left, under the MARGIN section to add a white space margin all around or on specific sides of the element that best suits your pop-up design. You can also manually type in the desired value (in pixels) and press Enter.
Border style
To apply a border style to an element:
1. Click the element (textbox, input box, textarea or others) you want to apply a border style to in your pop-up.
2. In the BORDER AND SHADOW section (on the left pane), click the Border Style dropdown to choose the type of border line you want to apply for your element such as 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.
Shadow effect
Style your elements by adding shadow effect that act as a backdrop, and highlight important portions of your pop-up. You can control various aspects of the shadow, including the position, blurriness, and distance from the element.To apply a shadow effect to an element:
1. Click the element (textbox, input box, textarea or others) you want to apply a shadow effect to in your pop-up.
2. In the BORDER AND SHADOW section(on the left pane), select your desired shadow color you want to apply for the element from the color picker, and customize its properties, such as position and blurriness, as shown in the screenshot.
Padding
Padding is used to control the spacing between the element’s border and its main content within. Note that adjusting the padding value does not affect the distance between different elements on your pop-up.
To adjust the padding of an element:
Click the element on the pop-up. In the PADDING section (on the left pane), drag the padding sliders: Top, Right, Bottom, and Left, as required. You can also manually type in the desired value (in pixels) in the text box, then press Enter.
Display settings
To customize the display settings of an element:
Click the element (textbox, input box, textarea and others) on the pop-up. In the DISPLAY section (on the left pane), do any of the following:
- Change the position of the element using Left, Right, Center, or Justified options.
- Change width and height of the element using sliders, as shown in the screenshot.
Button color
Change the color of your action button on your pop-up using the color palette on the left pane. Applying bright colors to your CTA buttons can attract attention, make visitors click immediately, and increase conversions on your website.To apply color to a button:
Click the button on the pop-up. In the BUTTON COLOR section (on the left pane), choose the color you want to apply for the CTA.
Hover action
Hover effect allows you to change the background color and text color of the buttons on your pop-up whenever a user hovers over the button. This helps visitors to clearly see interactions on different elements of the pop-up, and encourages them to click on important CTAs quickly.To apply a hover effect to a button:
Click the button on the pop-up. In the HOVER ACTION section on the left pane, choose the required background color and text color you want to show during mouse-overs or clicks, as shown in the screenshot.
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.
Zoho Sheet Resources
Zoho Forms Resources
Zoho Sign Resources
Sign, Paperless!
Zoho TeamInbox Resources
Zoho DataPrep Resources
Design. Discuss. Deliver.
Related Articles
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 ...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 ...Make advanced changes to the variation using JS/CSS editor
Apart from making changes manually to the design and content on your variation page, you can also directly write your own custom Javascript and CSS code changes using the PageSense visual editor. This option will provide you the freedom to quickly ...