How to Guide: Design Tutorial - Santa's Slot Machine

Our step by step guide to design your very own Santa Slot Machine 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 a Slot Machine 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 ).

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 Slot Machine, we can set about pimping it :) 

Step 3

First we're going to make a few updates to the prize options just to get familiar with how to set prizes and quantities.

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.  

Let's change the images shown in the slot machine windows:

Click on the Slot Machine itself and in the Settings Window, choose Segment > Gift Box 1 (and then each subsequent one).

Opening each of the Gift Boxes, hover with your mouse over the image and click on the pencil icon. The Media Library will open and in the Ready Made folder you can select one of the alternative images (or follow along these instructions to add your own images instead:  Learn about adding your own imagery.)

I'll swap the images to the $ signs and change the label text to $5 prize.

 

 

---

Pimp the Design

If you want to add some animation and cool effects to your sleigh, follow along these steps. Whilst you won't need to be able to code, you will need a basic understanding of design concepts and html  and css.

Here's what we'll do:

• Add a background video of clouds to give the impression of motion
• Add a white block for the Template Header with a logo
• Add a reindeer to the sleigh
• Tilt the angle of the sleigh slightly upwards

Step 1

Let's start by grabbing the URL's of the images and videos you will need.

Each of the code blocks below contain a placeholder for the URLs [ADD-URL-HERE].  These URLs are all contained in the Ready Made folder of your Media Library. 

 

You will need to copy the URL's for the following  image and video: 

Find the two URLs and copy them somewhere handy as you'll need them in a minute.

Step 2.

Let's start by adding a video as the background:

A) Copy the following CSS code to the Theme > Advanced

/** Add video background **/
.video-bg {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: -2 !important;
  object-fit: cover;
}

 

B) Now open the Template Header section and click the 'Source' button in the editor and paste the following code. Replace the ADD-URL-HERE with the MP4 url you copied earlier.

<video class="video-bg" src="https://ADD-URL-HERE" loop="" muted="" autoplay=""></video>
</p>

Step 3

Adding a white block at the top of the promotion page could be useful if you wanted to create a clear separation from the promotion imagery and a header section that could contain your logo.

It's simple to do this, but requires a little bit of css code.

/** Add header background **/
.blkd-block-template-header{
  background: #ffffff;
  height: 90px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
} 

/** Add top content background **/
.blkd-block-top-content{
  background: linear-gradient(180deg, rgba(33, 33, 33, 0.70) 29%, rgba(25, 28, 38, 0.00) 100%);
}

/** Limits the width of the top content **/
.blkd-block-top-content .content{
  max-width: 800px;
  margin: 16px auto;
}

 

Step 4

Adding some animation to the sleigh so it bobs up and down in the winds . You need to add this code to the Theme > Advanced (put it in a new line below existing code).

/** Add Sleigh animation **/
#blkd-section-start-block-slot-machine {
  animation: machine 2s ease infinite !important;
}
@keyframes machine {
  0% {
    top: 0px;
  }
  50% {
    top: 10px;
  }
  100% {
    top: 0px;
  }
}

 

Step 5

Add a reindeer to pull the sleigh . You need to add this code to the Theme > Advanced (put it in a new line below existing code). You will need to replace the [ADD-URL-HERE] with the URL you copied earlier from your Media Library.

/** Add reindeer **/
#blkd-section-start-block-slot-machine .machine-mask:after{
  background: url(https://ADD-URL-HERE) left center no-repeat;
  background-size: cover;
  width: 310px;
  height: 312px;
  right: -117px;
  bottom: 150px;
  content: '';
  position: absolute;
  overflow-x: hidden;
  transition: all 0.1s;
  pointer-events: none;
}  

 

Step 6

Let's tilt the sleigh upwards a bit so it's a bit more realistic. As before, you'll copy this code to the Theme > Advanced. 

/** Add Sleigh rotate  **/
#blkd-section-start-block-slot-machine{
  transform: rotate(-5deg);
}

 

Step 7

Adding a sound effect to the slot machine is entirely optional, but can add a bit of fun to the experience.  We have added both a spin and winner default sound file to the Media Library. You can add these to the Slot Machine Settings. 

See the Media Library for the MP3 files. You can click Open, to be able to play and listen.

and insert them as shown below.