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