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:

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.

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

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.

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:

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:

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.’

Step 8: Click ‘Save’ to finalize changes.

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

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