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?