admin:online-platform-cms:promotions

Creating "Promotions" page in CMS

1. Add styles to a newly created page

Turn on the HTML view by pressing "< >" symbol in the page editor window. Then paste the following code:


<style>
.cms-holder .row {
  display: grid;
  grid-template-columns: repeat(auto-fill,400px);
  grid-gap: 1rem;
  justify-content: space-evenly;
  padding: 1rem;
}

.cms-holder h2 {
  font-size: 38px;
  padding-top: 2rem;
  padding-bottom: 2rem;
  font-weight: 500;
}

.cms-holder h3 {
  font-size: 24px;
  font-weight: 500;
}

.cms-holder .promo-card {
  height: 430px;
  background: var(--main-third-background);
  border-radius: 4px;
  margin-bottom: 50px;
  margin-right: 10px;
}

.cms-holder .img_area {
  height: 50%;
  overflow: hidden;
}

.cms-holder .img {
  object-fit: cover;
  width: 100%;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.cms-holder .text_area {
  height: 215px;
  text-align: center;
  padding: 30px 50px;
  position: relative;
  cursor: default;
}

.cms-holder .title {
  font-size: 18px;
  color: var(--main-third-background-text);
}

.cms-holder .subtitle {
  font-size: 15px;
  color: var(--main-third-background-text);
}

.cms-holder .button_area {
  position: absolute;
  bottom: 0;
  left:0;
  right: 0;
  padding-bottom: 30px;
}

.cms-holder .button {
  height: 50px;
  background: var(--main-primary);
  padding: 0px 40px;
  color: var(--main-primary-text);
  border: 0px none;
  display: inline-flex;
  align-items: center;
}

.cms-holder .button:hover {
  background: var(--main-primary);
  color: var(--main-primary-text);
  cursor: pointer;
  filter: brightness(85%);
}
@media screen and (max-width: 440px) {
 .cms-holder .row {
   grid-template-columns: repeat(auto-fill, 300px);
 }
 .cms-holder .promo-card {
   height: 375px;
 }
 .cms-holder .img_area {
   height: 40%;
 }
 .cms-holder .text_area {
   padding: 30px 20px;
 }
}
</style>

2. Add a page title

Paste the following code below (note: In this example a page title is "Promotions".):


<div class="row">
  <h2>Promotions</h2>
</div>

3.Add a promotions group title

Paste the following code below (note: In this example a promotions group title is "New Customer Offer".):


<div class="row">
  <h3>New Customer Offer</h3>
</div>

4. Add a grid container

The container is the place where you will create all promotions cards (note: Next step code you need to write inside this code.). Paste the following code below:


<div class="row">
    The next step code goes here.
</div>

5. Add a single promotion card

Paste the following code inside step four (4) code block:


  <div class="promo-card">
    <div class="img_area">
      <img src="https://images.theconversation.com/files/136426/original/image-20160902-20217-1vk9cs5.jpg" alt="" class="img">
    </div>
      <div class="text_area">
      <div class="title">
        100% First Deposit Bonus
      </div><br>
      <div class="subtitle">
        We’ll match your first bonus of up to 20,000 TSh! Sign up today.
      </div><br>
      <div class="button_area">
        <a href="single-promotion" class="button">
          More Info
        </a>
       </div>
    </div>
  </div>

To change the image you need to replace the image link in this part of code <img src="link_to_image"…>

Change promotion title (note: In this example, a promotion title is "100% First Deposit Bonus".)

Change promotion sub-title (note: In this example, a promotion sub-title is "We’ll match your first bonus of up to 20,000 TSh! Sign up today.".)

Change link to full promotion description. To change it you need to edit the link in this part of code <a href="link_to_page" class="button">


6. Create more promotion cards

Repeat step five (5) as many times as you want to create promotion cards in the created promotions group.


7. Create other group of promotions

Follow steps four (4), five(5) and six(6) to create a different group of promotions.


Full demo code for a promotions page

<style>
.cms-holder .row {
  display: grid;
  grid-template-columns: repeat(auto-fill,400px);
  grid-gap: 1rem;
  justify-content: space-evenly;
  padding: 1rem;
}

.cms-holder h2 {
  font-size: 38px;
  padding-top: 2rem;
  padding-bottom: 2rem;
  font-weight: 500;
}

.cms-holder h3 {
  font-size: 24px;
  font-weight: 500;
}

.cms-holder .promo-card {
  height: 430px;
  background: var(--main-third-background);
  border-radius: 4px;
  margin-bottom: 50px;
  margin-right: 10px;
}

.cms-holder .img_area {
  height: 50%;
  overflow: hidden;
}

.cms-holder .img {
  object-fit: cover;
  width: 100%;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.cms-holder .text_area {
  height: 215px;
  text-align: center;
  padding: 30px 50px;
  position: relative;
  cursor: default;
}

.cms-holder .title {
  font-size: 18px;
  color: var(--main-third-background-text);
}

.cms-holder .subtitle {
  font-size: 15px;
  color: var(--main-third-background-text);
}

.cms-holder .button_area {
  position: absolute;
  bottom: 0;
  left:0;
  right: 0;
  padding-bottom: 30px;
}

.cms-holder .button {
  height: 50px;
  background: var(--main-primary);
  padding: 0px 40px;
  color: var(--main-primary-text);
  border: 0px none;
  display: inline-flex;
  align-items: center;
}

.cms-holder .button:hover {
  background: var(--main-primary);
  cursor: pointer;
  filter: brightness(85%);
  color: var(--main-primary-text);
}
@media screen and (max-width: 440px) {
 .cms-holder .row {
   grid-template-columns: repeat(auto-fill, 300px);
 }
 .cms-holder .promo-card {
   height: 375px;
 }
 .cms-holder .img_area {
   height: 40%;
 }
 .cms-holder .text_area {
   padding: 30px 20px;
 }
}
</style>

<div class="row">
  <h2>Promotions</h2>
</div>

<div class="row">
  <h3>New Customer Offer</h3>
</div>

<div class="row">
  <div class="promo-card">
    <div class="img_area">
      <img src="https://images.theconversation.com/files/136426/original/image-20160902-20217-1vk9cs5.jpg" alt="" class="img">
    </div>
      <div class="text_area">
      <div class="title">
        100% First Deposit Bonus
      </div><br>
      <div class="subtitle">
        We’ll match your first bonus of up to 20,000 TSh! Sign up today.
      </div><br>
      <div class="button_area">
        <a href="single-promotion" class="button">More Info</a>
       </div>
    </div>
  </div>
  <div class="promo-card">
    <div class="img_area">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTOCHvN20ug7SwUL1vxTTfv3vNf1Lc4-q2jxg&amp;usqp=CAU" alt="" class="img">
    </div>
      <div class="text_area">
      <div class="title">
        Sports Welcome Bonus
      </div><br>
      <div class="subtitle">
        Sign up and claim your Sports Welcome Bonus of up to 3,000 TSh!
      </div><br>
      <div class="button_area">
        <a href="single-promotion" class="button">More Info</a>
      </div>
    </div>
  </div>
  <div class="promo-card">
    <div class="img_area">
      <img src="https://static6.depositphotos.com/1033498/658/i/600/depositphotos_6585395-stock-photo-money-banknotes-of-different-countries.jpg" alt="" class="img">
    </div>
      <div class="text_area">
      <div class="title">
        Casino Welcome Bonus
      </div><br>
      <div class="subtitle">
        Sign up and claim your Casino Welcome Bonus of up to 15,000 TSh!
      </div><br>
      <div class="button_area">
        <a href="single-promotion" class="button">More Info</a>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <h3>Online Betting Offers</h3>
</div>

<div class="row">
  <div class="promo-card">
    <div class="img_area">
      <img src="https://images.unsplash.com/photo-1579621970563-ebec7560ff3e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1951&amp;q=80" alt="" class="img">
    </div>
      <div class="text_area">
      <div class="title">
        One Out Money Back
      </div><br>
      <div class="subtitle">
        Place an accumulator bet of 7+ matches and if you miss out on only 1 match, we’ll refund..
      </div><br>
      <div class="button_area">
        <a href="single-promotion" class="button">More Info</a>
      </div>
    </div>
  </div>
  <div class="promo-card">
    <div class="img_area">
      <img src="https://images.unsplash.com/photo-1561414927-6d86591d0c4f?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1566&amp;q=80" alt="" class="img">
    </div>
      <div class="text_area">
      <div class="title">
        10% Cashback Every Week
      </div><br>
      <div class="subtitle">
        Get 10% Cash Back every week just by betting on your favourite games!
      </div><br>
      <div class="button_area">
        <a href="single-promotion" class="button">More Info</a>
      </div>
    </div>
  </div>
  <div class="promo-card">
    <div class="img_area">
      <img src="https://images.unsplash.com/photo-1579621970795-87facc2f976d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1950&amp;q=80" alt="" class="img">
    </div>
      <div class="text_area">
      <div class="title">
        Accumulator Bonus up to 100%
      </div><br>
      <div class="subtitle">
        Get up to 100% BONUS on every ticket! The more matches you bet on, the bigger your..
      </div><br>
      <div class="button_area">
        <a href="single-promotion" class="button">More Info</a>
      </div>
    </div>
  </div>
  <div class="promo-card">
    <div class="img_area">
      <img src="https://images.unsplash.com/photo-1508098682722-e99c43a406b2?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1950&amp;q=80" alt="" class="img">
    </div>
      <div class="text_area">
      <div class="title">
        First 10 Bets Bonus
      </div><br>
      <div class="subtitle">
        Bet on first 10 single or multiple bets and take back all stakes of lost bets.
      </div><br>
      <div class="button_area">
        <a href="single-promotion" class="button">More Info</a>
      </div>
    </div>
  </div>
  <div class="promo-card">
    <div class="img_area">
      <img src="https://images.unsplash.com/photo-1609846077623-72a9961914d6?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1950&amp;q=80" alt="" class="img">
    </div>
      <div class="text_area">
      <div class="title">
        Roulette Extra Bet Bonus
      </div><br>
      <div class="subtitle">
        Play Roulette game and take back your stake for first bet on product. Limited time offer.
      </div><br>
      <div class="button_area">
        <a href="single-promotion" class="button">More Info</a>
      </div>
    </div>
  </div>
</div>

Result


{{:admin:online-platform-cms:promotions.png?nolink&600|


✔ Always use HTML view option in the page editor window while doing all steps.


  • admin/online-platform-cms/promotions.txt
  • Last modified: 2022/02/21 14:28
  • (external edit)