How to Guide: Design Tutorial - Santa Claus Advent Calendar

Our step by step guide to design your very own Santa Claus Advent Calendar promotion.

Requirements

Before getting started you will need to have a BeeLiked Account and have upgraded to the Premium Plan. Only with this plan will you be able to complete all the customizations needed. See our pricing page.

---

 

Step 1.

Click the Create Promotion button to create an Advent Calendar promotion   (not sure how? Then follow this guide to create your first promotion). 

Step 2

a) Select this Ready Made design from the available designs (if you don't see it immediately you will find it under the Christmas selection or can search Santa or Snow).

Follow the steps to create this promotion by giving it a name and then proceeding to the Builder where you will be able to customize it. 

Now you have the base promotion for the Santa Advent Calendar, we can set about customizing further. 

 

Step 3

We're now going to make a change to the design of the Advent Calendar Windows.

First, let's take a look at the images we've added to the Media Library so you can see the selection available.

(If you would like to use your own images, that's easy to do. Learn about adding your own imagery.)

 

We've got lots of options here.  

A - Let's change the shape of the Window to a Circle

Window Settings > Window Shape

B - Now lets change the default image from a Shape to a Shape + Image, this will allow you to upload an image to be used as the closed Window.  We'll use the image below in the Ready Made folder to demonstrate. 

First change the Window Visual setting to Shape + Image. 

Now add one of the image in the Media Library (size 400 x 400) to the section just above this called Window Default Image. 

Your Advent Calendar Windows should all now look like this: 

 

Step 4

You will need to customize the content that is shown when a Advent Window is open. To this go to the Window > expand each of the Windows and edit as required. 

 

Also, don't forget to set when each Window should be available to be opened and when it should be locked.  You can set an Available From and Available Until date and time for each of your Windows.

 

Step 5 - optional

Whilst the Ready Made design works, it can be improved with a bit of CSS to reposition and optimize for different size screens.

You'll need to follow these instructions carefully as one small mistake will mean the code will not work as intended.

This code is added to Theme > Advanced.  

A) This first code adjusts the position of the Santa Image

/* TO POSITION TOP HEADER CONTENT OVER SANTA CLAUS */
.blkd-block-top-content, #blkd-section-header{
  z-index: 1000 !important;
}


/* TO POSITION  SANTA CLAUS  BELOW TOP HEADER CONTENT */
#blkd-section-start-block-advent-calendar-30 .calendar, #blkd-section-execute-block-advent-calendar-30 .calendar {
  max-width: 1200px;
  transform: scale(0.9);
  margin-top: -210px;  
}

/* TO FIT MIDDLE CONTENT WITH TOP AND BOTTOM CONTENT */
#blkd-section-start-block-advent-calendar-30 .content, #blkd-section-execute-block-advent-calendar-30 .content {
  margin-top: -24%;
  margin-bottom: -2%;
  margin-left: 10.3%;
  margin-right: 10.8%;
}

/* TO RESIZE WINDOWS */
#blkd-section-start-block-advent-calendar-30 .content .window, #blkd-section-execute-block-advent-calendar-30 .content .window  {
  max-width: 280px;
  max-height: 280px;
  width: 31vw;
  height: 31vw;
}

#blkd-section-start-block-advent-calendar-30 .content .list-window, #blkd-section-execute-block-advent-calendar-30 .content .list-window {
  gap: 0;
  transform: scale(0.9);
}
.blkd-block-advent-calendar-30{
  transform: scale(0.9);
  margin-top:-15% !important;
  margin-bottom:-15% !important;
}

 

Now we need to improve the mobile responsiveness of the page to reduce the size of Santa's head and feet when viewed on small screens . We're going to paste a little extra CSS code to do this. Copy this code below and paste it again to the Theme > Advanced. 

/* MOBILE ADJUSTMENTS */
@media screen and (max-width: 600px) {
  #blkd-section-start-block-advent-calendar-30 .content .list-window,   #blkd-section-excute-block-advent-calendar-30 .content .list-window {
    gap: 0;
  }
  #blkd-section-start-block-advent-calendar-30 .content .window,   #blkd-section-execute-block-advent-calendar-30 .content .window  {
    max-width: 250px;
    max-height: 250px;
    width: 31vw;
    height: 31vw;
  }
  #blkd-section-start-block-advent-calendar-30 .calendar {
    max-width: 1120px;
    transform: scale(1);
    margin-top: -50px;
    margin: -50px -20px 0 -20px;
  } 
  #blkd-section-start-block-advent-calendar-30 .content, #blkd-section-excute-block-advent-calendar-30 .content {
    margin-top: -24%;
    margin-bottom: -2%;
    margin-left: 0%;
    margin-right: -6%;
    padding: 0 11px;
  }  

  #blkd-section-start-block-advent-calendar-30 .footer, #blkd-section-execute-block-advent-calendar-30 .footer{
    transform: scale(1.4);
    padding-left: 10px;
    margin-left: 10px;
    margin-top: 35px;
  }  
}

 

 

Step 6 (optional)

Experiment with different designs for the Advent Calendar. The easiest way to do this is to swap out the images under Advent Calendar > Background.

 

 

Step 7 (optional)

If you would now like to add a snow effect, it's easy to do, but again you'll need to copy some code.

To find your snow effect, go to: 

You will see both HTML and CSS.

 

• A) CSS 

Let's start with the CSS in the right column, so copy that. (all of it!)

Now you have to paste all the CSS code for the snow effect into the Theme > Advanced and remember to SAVE. It is long, so be sure to scroll and be sure to get it all.

• A) HTML

Now come back to your BeeLiked Builder and click in the top section of the page 'Template Header'.  This will open the edit window.

 

With the Template Header edit section open, find the Source button (if you don't see it, either extend the size of your screen or hit the vertical dots to show the remaining menu items). 

With the Source now open, paste in the HTML code and click SAVE.

And that's it. You should have a nice Snowman Design. 

Remember:

Whilst you now have the design ready, you still have to update all the rest of the copy, set your Window content and map each Window to its own corresponding Result Message. 

If you've never created a promotion with BeeLiked before, get yourself familiar by following this guide to create your first promotion

As always, if there are images that you want to change, then feel free to customize to your own requirements. Not sure how? Here is a guide for how to upload images to your Media Library.