How to Customize Website Overlays


Picreel enables you to design your overlay the way you want. You can set everything from colors to logo and positioning of the overlay to match your brand guidelines.


Customizing an overlay helps you to:


1. Resonate your brand’s theme and values

2. Promote offers in unique ways


Here’s an overview of every element you can customize:


Preview of editing an overlay in the Picreel Editor


Here are the elements you can customize in the 'Edit Design' section:




  • Color

You can change the background, text, button, and H1 color as per your requirements. You also get the option to set the pop-up size.


Editing the color theme of website overlay


  • Image / GIF

You can switch to ‘Image’ and upload any image or GIF as a background.


Uploading external image/gif file or selecting a GIF as a background for website overlay


Fields & Text


  • Logo

Choose the position of your logo (i.e., left, center, or right). Click ‘Upload’ to add your logo. You can also choose to hide the logo if you want.


Uploading a logo to your website overlay


  • Overlay Fields & Text

You can select overlay fields based on the data you wish to collect from visitors, such as email, phone, name & email, or all three. If you do not want any information from the visitors, choose ‘None.

In addition, you can customize the overlay text to encourage visitors to fill in the details on seeing the overlay.


Adding/removing fields and editing overlay text




  • Set what happens when the button is clicked

You can set the action after visitors submit the details as required in the ‘Select action after event’ field.


Selecting action after event


To close a pop-up and show some message once the submit button is pressed, please, select Close in the Select action after event field. Enter your message in the field below.


You can modify additional settings, such as the duration of the message or whether to show a 'close' button.


Alternatively, you may choose to redirect a visitor to another page once the submit button is pressed. Please select Redirect in the 'Select action after event' field to do so. And insert the redirect link below.


  • Select pop-up animation and position it on the screen

You can select an animation from the drop-down list and see its live preview on the right side of your screen. After selecting an animation, you can set the positioning of the overlay on the visitor’s screen.


Choosing a pop-up animation


Additional settings

  • You can choose to hide the close button on your overlay by checking the box
  • You can enable/disable the option to hide overlay by clicking on the background
  • You can add a checkbox to ask visitors to accept the data management rules
  • You can adjust the corner roundness of the overlay


Editing additional settings




You can add a tiny banner ( or image ) that will sit in any corner of your screen. Once your visitors click on it, your popup design will appear.


You can choose a style, select its positioning on the screen based on the type, and modify its color and the display text to attract visitors’ eyes. You can preview your modifications live on the right part of your screen.


Adding a banner




  • Font style

You can play around with different font styles by selecting from the drop-down list.


  • Font size and weight

You can adjust the font size and weight of a selected area on the overlay.


In addition to these, you can upload font files or generate font-faces by filling in the details to give a unique touch to the overlay.




You can use customers’ data to personalize your pop-up. Check out different ways of personalization here.


Advanced modifications


To access advanced modifications of the offered designs, click HTML/CSS Editor. Here, you may add additional fields, buttons, change fonts, sizes, etc.


Using HTML/CSS Editor


Don’t forget to click ‘Save’ at the end and proceed to configure campaign settings.


That is all about editing a campaign.



Was this information helpful?
© 2005 - 2023 ProProfs