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.

    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

                                                                                                        • 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