Preparation of the winning calendar (Advent calendar)
Mailocator contains pre-prepared templates for action calendars, which reveal to users the winnings for a specific day in exchange for an email address. You can easily prepare an Advent calendar with a discount or an event for each day.
Select the Calendar campaign.
Choose the template that suits you.
Set the base color.
Set campaign delivery rules.
Set the default animation for the window display.
You can assign coupons or discount codes.
Setting the appearance of the Advent calendar
et the number of days to 24 (the first 24 days in December, the campaign is expected to run on December 1). After 24 days, the calendar will automatically stop appearing.
Set the first day of the campaign to 1 (December 1).
Choose the number of opening boxes with individual days on each line so that the grid corresponds to your ideas (you can see the preview in the right part).
Set the desired space between the fields.
If you don't want to create your own styles for the calendar (see below), check "Adjust automatically the size" and the boxes will be drawn at the optimal size.
Have the daily date automatically entered in the individual fields; if you have your own graphic fields composed of numbered images, you can turn off date listing.
Fields of days with your own pictures
If you want to cover the prizes with boxes with your own graphics, prepare 24 separate images (1 image for one day) and transfer them to the field for importing images.
Transfer pictures one at a time from day one to last.
Images can be PNG, JPG or SVG.
The maximum size of one image is 50 KB.
Images can be deleted but not moved.
See a preview
Launch a campaign and review the proposal.
Please note that if the date (calendar day number) is outside the proposed calendar range, the calendar campaign will not be displayed! For testing purposes, simply set the range of days to include today.
You can edit texts and colors in the Designer or via the Text tool.
.cal-calendaris the required area in which the calendar is drawn. If you want to set a picture background, add a background to this class.
.cal-calendar .cal-daydescribes the appearance of a field with a specific bottom. If you turn off automatic field sizing (see above), you can set dimensions and margins here.
.cal-calendar .cal-day .cal-day-box-numberuse to set the background or custom location of the day number.
.cal-winadjust if you want to affect the appearance of the win window.
Non-traditional calendars with their own positioning and individual field dimensions
In the HTML Editor, find the class
.cal-calendarand manually paste the following code for each day:
<div class="cal-day day-1">
Write calendar day numbers in class
.day-Xand use this class for absolute positioning, z-index and other properties.