How to Create Overlays for Mobile Devices
To create a mobile template using the Template Editor, follow these instructions:
1. Under the Templates category on the left side of the dashboard, click on the Template Editor. Choose any type of template.
2. Change the html code according to your needs. In addition, in your html text, paste the line in the first line as you can see on the example below. You may change “height” and “width” values according to your needs.
3. Click on CSS next to HTML button at the top of the html code. In your CSS code, paste the following code in the first line:
width : 300px;
height : 400px;
You may change “height” and “width” values according to your needs.
4. The button closing the template must be coded in your template. Please, paste the line
in 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:
color : white;
position : absolute;
top : 6px;
border-bottom : 1px dashed;
font-size : 14px;
display : inline;
font-weight : 100;
font-style : italic;
cursor : pointer;
5. Click the Save Template button to save your template.
6. Under the Templates category on the left side of the dashboard, click on the Template List. Check Disable Close Button next to your created template. Please, see the example below. The close button must be coded in your template code as it was explained in step 4.
8. Go to Campaigns category on the left side of the dashboard. Create a campaign following the instructions here. In the right lower corner of your screen choose Mobile in the Device type field. Click Save.
9. A special meta tag should be added to your website in order to demonstrate mobile templates on mobile devices properly. This tag is needed for mobile version of templates.
Now your campaign has a template for mobile devices, which can look like the example below.