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:





You can change 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



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 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, 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, please, click on 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?

The page cannot be found

The page you are looking for might have been removed, had its name changed, or is temporarily unavailable. Please make sure you spelled the page name correctly or use the search box.