How to Create Overlays for Mobile Devices


Picreel lets you set up overlays for mobile devices using its template editor to get mobile users to interact with your offers.


Benefits of creating overlays for mobile devices:


1. Set up exclusive mobile-friendly overlays to attract mobile users

2. Increase conversion rates by expanding your offers’ reach


Here’s what an overlay for mobile devices would look like:


Preview of a Mobile overlay


To create a mobile template using the template editor:


Step 1: In your Picreel account,

  • Go to ‘Campaigns’>> ‘New Campaign’.

  • Choose any template to edit.


Navigating to New Campaign from the dashboard


Step 2: Click on the ‘HTML/CSS Editor’ tab in the ‘Edit Design’ section.


Opening the HTML/CSS Editor


Step 3: Change the HTML code according to your needs. In addition, paste the line in the first line in your HTML text, as you can see in the example below. You may change “height” and “width” values according to your needs.


Editing the HTML code


Step 4: Switch to CSS by clicking on the button next to HTML.


In your CSS code, paste the following code in the first line:


div.container {

width: 300px;

height: 400px;



You may change “height” and “width” values according to your needs.


Step 5: You must code the closing button into your template. Please, paste the line into the first line of your HTML text.


You can change the style of the button by pasting the following code in the first line of your CSS:


.close-x {

color: white;

position: absolute;

top: 6px;

border-bottom: 1px dashed;

font-size: 14px;

display: inline;

font-weight: 100;

font-style: italic;

cursor: pointer;



Step 6: In the left panel,

  • Click on ‘Options’>> Check the box next to the ‘Hide overlay close button.

  • Click ‘Save’ to move to the targeting settings.


Step 7: Scroll down to ‘Device type’ under the ‘Other Options’ section, and choose ‘Mobile.


Choosing Mobile as the device type


Step 8: Click ‘Save’ to finalize changes.


Note: You must add a unique meta tag to your website to demonstrate mobile templates on mobile devices adequately. This tag is needed for the mobile version of templates.


Your campaign has a template for mobile devices, which can look like the example below.


Preview of an overlay for Mobile Devices


That is all about creating mobile overlays using the template editor in Picreel.


Was this information helpful?
© 2005 - 2024 ProProfs