How to Guide: Design Tutorial - Making the Ultimate Parasol-Themed Wheel of Fortune

Our step by step guide to designing your perfect parasol spin wheel, ideal for spinning away winter blues and turning up the heat on sales.

Requirements

Before getting started you will need to have a BeeLiked Account and have upgraded to the Standard 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 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 (or search for sand or sea)

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, we can set about transforming it into something  Toe-tally Tropical  ;) 

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.)

Let's start by changing all the segments to monetary prizes.

Then let's set up your prize probabilities.

We'll assume 5,000 entries, but with a prize budget of just $2,000, so it's necessary to create a 'losing segment' which we'll treat as a Sweepstakes with a $250 prize.  

The prize matrix below is an example of how to set the quantities to stay within the budget. 95% of people will go to the 'Lucky Dip' segment and one lucky winner will be chose using the Winner Spinner. 

Step 4

Now that we've changed the segments, we also have to change the Result Messages. This is really important to do as it is the final message your entrant receives and tells them what prize they got and how to redeem it. Here is a tutorial video that explains how to map your Segments to Result Messages. 

Result Message also can pull in gift card codes / discount codes if you've added them to the Coupon Collections. Here's an article that explains about adding Coupons to a Collection. 

If you'd like to customize the Result Message to include a highlighted section for a coupon or gift card code or link, here's some html code you can copy and paste into the Result Message Source.

  <div style="background-color:#f1f1f1;border:1px solid transparent;color:#333333;font-size:12px;margin:10px auto;padding:8px;text-align:center;">
    COUPON CODE
</div>

The Text 'COUPON CODE' would be replaced with the placeholder code from your Coupon Collection so when someone enters and receives this result message, BeeLiked will retrieve the next available coupon to show them and then record their details in the database so you know who got what codes.

Step 5

As the final step we're also going to add an auto email so that each entrant receives in their email a copy of the result message they saw on screen. 

 

---

Pimp The Design

Step 1

Let's start by changing the image used for the wheel to an umbrella.

 

 

Step 2

Now let's update the base image of the wheel to add the image of the lady sunbathing. 

Step 3

Let's update the pointer image used to the image of the  cocktail drink with a straw as a pointer

Step 1	Step 2	Step 3
Click on the Wheel (Start Page or Lucky Draw page). In the Settings Window that appears choose Wheel Visual	Scroll down to the 'Enable Wheel Base' section and if not on, switch it to on. Hover over the image block and click on the pencil icon to edit. The Media Library will appear.	In the Media Library go to the Ready Made Folder and find the image of the lady on the towel, click it, and click Insert.  Now SAVE your changes.

Step 4

The final bit of wizardry is to add an animation effect to the background image to have the size swap continuously between two images to give the idea of the sea moving up and down the beach. To do this we again need to use some CSS and we also need to grab the URL of the two background images we'll use. 

A) In your Media Library select these images and copy somewhere handy their URLs.  (yes they look identical, but there is a slight difference in wave position).

Once you have the URLs, then copy this code into the Theme > Advanced, replacing the placeholders for the URL with the URLs you've just copied above. Note that Image 1's URL is used twice.

/** Background Animation - Changing 2 Images **/
body{
  animation: back 3s infinite both;
  background-size: cover !important;

}
@keyframes back {

  0% { background:#ffffff url('PASTE-IMAGE-1-URL-HERE') no-repeat center bottom;
  } 

  50% { background:#ffffff url('PASTE-IMAGE-2-URL-HERE') no-repeat center bottom;
  } 

  100% { background:#ffffff url('PASTE-IMAGE-1-URL-HERE') no-repeat center bottom;
  }   

}

Step 5

Let's now doing a little update to the top text content block to limit its width. To do this we need a bit css to go into the Theme > Advanced. Simply copy the code below.

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

 

Remember:

Whilst you now have the design ready, you still have to update all the rest of the copy, set your own prizes and map each wheel segment 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.