The template has been designed to work on mobile devices. It is responsive and flexible, and no programming knowledge is required for its customization.

The template is used by default in all promotions created with the Basic, Premium and White Label versions of the platform.

Keep reading to find out about all the features of the design template and all the options to customize the template for your promotions:   

1. Video tutorial on how the template works
2. Base structure of the template
3. Main setup screens
4. Which browsers are compatible with the template?

1. Video tutorial

This five-minute video will show you how to customize the template and you'll also learn all the design setup options. We recommend you watch this video tutorial to get a better idea of how the template works.

2. Base structure of the template

The template has the following base structure which is applied to each of the screens of the promotion – in both mobile and desktop versions of the platform:

• Header: This has a fixed height of 36px and is always visible. It’s composed of three elements: on the left, a mobile-style dropdown menu, and on the right, the share button and the brand’s social media buttons. These buttons can be configured from the My Networks module. 

• The page footer: this has a height of 50px. It includes the name of the promotion organizer with an external link, plus links to the legal bases, privacy policy, and cookies policy. In Premium promotions, the Easypromos logo is also displayed here.

In the central area, there are two elements that will define the style of your promotion: the background and the main container:

• The background: This is the same for all pages of the promotion. In the mobile version, this background adapts optimally, instead of disappearing.

• The main container: This is displayed on top of the background and is where the contents of each page of the promotion are included: header images, promotion texts, photos, videos, questions, and so on.

2.  Main setup screens

The design template is enabled by default in all types of applications created with the Basic, Premium and White Label versions. In addition, for promotions created with the Premium and White Label versions, you will have the possibility to configure the different elements of the template to customize the design to your liking.

Note: The configuration of the different elements of the template is not included by default in the promotions created with the Basic version. It can be added to the promotion as an extension for $ 19USD / € 19.

We explain you below the main setup screens that you will find in the promotion Editor, where you'll find all the available options and tools to customize the design options: 

1. "Design" screen (Editor > General > Design)

From the Promotion Management Page, click the "Editor" button.

Now locate the section General > Design, where you'll find all the configuration options that will allow you to customize the different elements of the design template:

A. Colors: Choose the color of the texts and call to action buttons such as the main buttons and primary links.

B. Typographies: Customize the primary and secondary promotion fonts.

C. Buttons: Select the button style. By default, these are displayed as outlined, but you can also make them solid.

D. Container: Fully customize the following elements of the container: 

• Style: This can be dark or light. The style will also define the color of the header and the footer of the page.
• Opacity: You can also play with the level of opacity to achieve optimal integration with the background.
• Height: You can vary the height of the container and adapt it to the type of content introduced, or you can choose to have it occupy the entire screen instead.
• Position: You can position the container in the center of the screen, to the sides, up or down or in the corners.

E. Background: From this screen, you’ll be able to set up all the background images of the promotion:

• Color: Select a color for the background.
• Opacity: Set the transparency level of the color of the background.
• Image: Upload a wallpaper image of your choice.
• Position: If you upload your own wallpaper image, you can define the focal point of the image.
• Predefined: Use one of our predefined images and borders.

2. Individual promotion pages

For each of the promotion pages (Welcome page, Entry Form, “Thank You” Page, Entries Gallery, Quiz) you can set up the width and structure of the container individually if you wish.

For each of these pages you will find the "Container" tab. This has the following customizable options:

• You can configure the container width. 
• You can display the container in one or two columns. 

4. Which browsers are compatible with the template?

The template has been designed and programmed with Flex technology. All modern browsers for PC, Mac and mobile devices support this technology. For optimal visualization however, we recommend the following versions:

• Chrome 29
• Safari 9
• Firefox 28
• Microsoft Edge
• Opera 17
• AndroidBrowser 4.4+
• Safari iOS 9