How to customize various elements in your pop-up using the template editor in Zoho PageSense | Help guide?

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:

  1. Solid color: Click the color picker to apply a single color uniformly to the element. 

  2. 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. 

  3. 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

Increase or decrease the amount of space between elements using margin settings. The editor lets you set the margin on each side (right, top, bottom, and left) of the box containing your element.

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

Add a decorative border or stroke effect to your textbox, image, video, or other item to define and add emphasis to different sections of your pop-up. You can further customize the border style, including the border color, weight, and line style of each element, as explained below.

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 ColorBorder 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: TopRightBottom, and Left, as required. You can also manually type in the desired value (in pixels) in the text box, then press Enter.

Display settings

Decide how you want to position your elements within the pop-up, such as left, right, or center, and the width and height that you want to set for each element to match the size of your browser window. 

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:
  1. Change the position of the element using Left, Right, Center, or Justified options.
  2. 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.



    Access your files securely from anywhere

      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 CRM Training
        Redefine the way you work
        with Zoho Workplace

          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 CRM Training

            Create, share, and deliver

            beautiful slides from anywhere.

            Get Started Now


              Zoho Sign now offers specialized one-on-one training for both administrators and developers.

              BOOK A SESSION









                                            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.




                                                Manage your brands on social media

                                                  Zoho Desk Resources

                                                  • Desk Community Learning Series


                                                  • Digest


                                                  • Functions


                                                  • Meetups


                                                  • Kbase


                                                  • Resources


                                                  • Glossary


                                                  • Desk Marketplace


                                                  • MVP Corner


                                                  • Word of the Day


                                                    Zoho Marketing Automation

                                                      Zoho Sheet Resources

                                                       

                                                          Zoho Forms Resources


                                                            Secure your business
                                                            communication with Zoho Mail


                                                            Mail on the move with
                                                            Zoho Mail mobile application

                                                              Stay on top of your schedule
                                                              at all times


                                                              Carry your calendar with you
                                                              Anytime, anywhere




                                                                    Zoho Sign Resources

                                                                      Sign, Paperless!

                                                                      Sign and send business documents on the go!

                                                                      Get Started Now




                                                                              Zoho TeamInbox Resources



                                                                                      Zoho DataPrep Resources



                                                                                        Zoho DataPrep Demo

                                                                                        Get a personalized demo or POC

                                                                                        REGISTER NOW


                                                                                          Design. Discuss. Deliver.

                                                                                          Create visually engaging stories with Zoho Show.

                                                                                          Get Started Now









                                                                                                              • 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 ...
                                                                                                                Wherever you are is as good as
                                                                                                                your workplace

                                                                                                                  Resources

                                                                                                                  Videos

                                                                                                                  Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                                                                                                  eBooks

                                                                                                                  Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                                                                                                  Webinars

                                                                                                                  Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                                                                                                  CRM Tips

                                                                                                                  Make the most of Zoho CRM with these useful tips.



                                                                                                                    Zoho Show Resources