admin:online-platform-cms:promotions

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision		 Previous revision
admin:online-platform-cms:promotions [2021/02/18 15:31] – created justas-dambrauskasadmin:online-platform-cms:promotions [Unknown date] (current) – external edit (Unknown date) 127.0.0.1
Line 1: Line 1:
 ====== Creating "Promotions" page in CMS ====== ====== 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:
 +----
 +<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>
 +</code>
 +----
 +=== 2. Add a page title ===
 +Paste the following code below (note: In this example a page title is "Promotions".):
 +----
 +<code>
 +<div class="row">
 +  <h2>Promotions</h2>
 +</div>
 +</code>
 +----
 +=== 3.Add a promotions group title ===
 +Paste the following code below (note: In this example a promotions group title is "New Customer Offer".):
 +----
 +<code>
 +<div class="row">
 +  <h3>New Customer Offer</h3>
 +</div>
 +</code>
 +----
 +=== 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:
 +----
 +<code>
 +<div class="row">
 +    The next step code goes here.
 +</div>
 +</code>
 +----
 +=== 5. Add a single promotion card ==
 +Paste the following code inside step four (4) code block:
 +----
 +<code>
 +  <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>
 +</code>
 +----
 +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 ======
 +
 +<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);
 +  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>
 +</code>
 +
 +=== Result ===
 +----
 +{{ :admin:online-platform-cms:promotions.png |{{: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.1613662288.txt.gz
  • Last modified: 2021/02/18 15:31
  • (external edit)