Design Tutorial - Wheel of Fortune - Snowman

Our step by step guide to design your very own Snowman with BeeLiked's Wheel of Fortune promotion.

 

Requirements

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

---

Step 1.

Click the Create Promotion button to create a Wheel of Fortune 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 Winter 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 Snowman design, we can set about customizing to turn it into a Snowman. 

Step 3

Go to the Media Library and view the Ready Made Folder. In here you will see a range of images, including the Snowman.

Click on the Snowman image as shown above and copy and paste it's 'File URL'  (you will need this in a minute, so paste it anywhere you can find it again quickly).

 

Step 4

We're now going to give you CSS code to position the Snowman image. You'll need to follow these instructions carefully as one small mistake will mean it will not work.

This code is added to Theme > Advanced.  (see screenshots below)

A) You'll see below the CSS code you need to copy, however note that there is a missing url. You need to replace the text snowman-body-image-url  with the URL of the Snowman that you just copied. (Be careful to keep the ' ' either side and not alter any of the rest of the code!

/** SNOWMAN BODY **/

.spin-widget{

  background: url('snowman-body-image-url') no-repeat center top !important;

  background-size: cover !important;

  padding-top: 224px !important;

  z-index: 1 !important;

  position: relative !important;

}

/** END SNOWMAN BODY **/

With the URL of the snowman included, paste into the Theme > Advanced below (note the URL shown in the image below is not the correct url).

Pro Tip: If you're wondering what this does, it adds an additional  background image to your promotion, so now the picture of the Snowman will appear over the top of the background you set on Theme > Background. And if you're wondering why we didn't just add this to the original background, it's because it needs to be able to float over the background and be able to resize for different screen sizes. 

Step 5

Now we need to slightly reposition the wheel to make sure that it aligns perfectly with all screen sizes. 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. 

/** WHEEL POSITION  **/

.main-bottle-container{

  transform: scale(.62) !important;

  margin: 24% auto -16% auto !important;

}

/** ENDWHEEL POSITION  **/

 

You should now have a Snowman with a wheel as it's belly. 

Step 6 (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: https://codepen.io/beeliked/pen/dyxgjvG

You will see both HTML and CSS.

• A) HTML

Let's start with the HTML in the left column, so copy that.

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.

• B) CSS 

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.

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 wheel segments and map each segment to its own 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.