How to Create Custom Overlays


Picreel allows you to create overlays of a custom size based on the target device and audience for better engagement.


Benefits of creating an overlay of custom size:


1. Enjoy more control over the website overlay’s appearance

2. Get a wide range of overlay options for your campaigns


Here’s what a customized overlay would look like:


picreel customize overlay


To create a website overlay of custom size:


Step 1: In your Picreel account,

  • Navigate to ‘Campaigns’ >> ‘Edit’ to go to the 'Edit Section' of an overlay.

  • Click ‘HTML/CSS’ editor.


add custom element using html css editor


Step 2: In the template editor, you can add custom elements to suit your campaign.


custom elements in html css editor


Here is a short description of custom elements in the Picreel HTML/CSS editor.


  • Text field:  creates a field to enter a short piece of content. 

  • Email field: creates a field to collect user email.

  • Name field: creates a field to capture the user name. 

  • Phone field: creates a field to collect user contact numbers. 

  • Submit button: creates a button to collect user input. 

  • URL/Redirect button: creates a button to navigate or redirect to a specific URL. 

  • Close button: creates a button for closing the popup.


Step 3: Click Next to proceed.


next buttton



Note: You can design a custom-sized overlay while creating an overlay from scratch.


That is all about customizing the size of an overlay.



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.