How to format and style your pop-up using the template editor in Zoho PageSense | Help guide?

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: 
  1. Check how your padding looks on mobile as padding changes may affect mobile layouts differently.
  2. Check all the pages of your site containing the template and check the banner or footer. 
  3. 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.

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

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

    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





                          Quick Links Workflow Automation Data Collection
                          Web Forms Enterprise Begin Data Collection
                          Interactive Forms Workplace Data Collection App
                          CRM Forms Customer Service Accessible Forms
                          Digital Forms Marketing Forms for Small Business
                          HTML Forms Education Forms for Enterprise
                          Contact Forms E-commerce Forms for any business
                          Lead Generation Forms Healthcare Forms for Startups
                          Wordpress Forms Customer onboarding Order Forms for Small Business
                          No Code Forms Construction RSVP tool for holidays
                          Free Forms Travel
                          Prefill Forms Non-Profit

                          Intake Forms Legal
                          Mobile App
                          Form Designer HR
                          Mobile Forms
                          Card Forms Food Offline Forms
                          Assign Forms Photography
                          Mobile Forms Features
                          Translate Forms Real Estate Kiosk in Mobile Forms
                          Electronic Forms

                          Notification Emails for Forms Alternatives Security & Compliance
                          Holiday Forms Google Forms alternative  GDPR
                          Form to PDF Jotform alternative HIPAA Forms
                          Email Forms
                          Encrypted Forms
                          Embeddable Forms
                          Secure Forms
                          Drag and Drop form builder
                          WCAG


                                            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

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