admin:online-platform-cms:promotions

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
Last revisionBoth sides next revision
admin:online-platform-cms:promotions [2021/02/18 16:10] – justas-dambrauskasadmin:online-platform-cms:promotions [2022/02/21 14:28] – justas-dambrauskas
Line 1: Line 1:
 ====== Creating "Promotions" page in CMS ====== ====== Creating "Promotions" page in CMS ======
  
-=== 1. First step - 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: ===+=== 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> <code>
Line 35: Line 36:
 .cms-holder .img_area { .cms-holder .img_area {
   height: 50%;   height: 50%;
 +  overflow: hidden;
 } }
  
Line 40: Line 42:
   object-fit: cover;   object-fit: cover;
   width: 100%;   width: 100%;
-  height: 215px; 
   border-top-left-radius: 4px;   border-top-left-radius: 4px;
   border-top-right-radius: 4px;   border-top-right-radius: 4px;
Line 77: Line 78:
   color: var(--main-primary-text);   color: var(--main-primary-text);
   border: 0px none;   border: 0px none;
 +  display: inline-flex;
 +  align-items: center;
 } }
  
 .cms-holder .button:hover { .cms-holder .button:hover {
   background: var(--main-primary);   background: var(--main-primary);
 +  color: var(--main-primary-text);
   cursor: pointer;   cursor: pointer;
   filter: brightness(85%);   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> </style>
 </code> </code>
 ---- ----
-=== 2. Add a page title. Paste the following code below (note: In this example a page title is "Promotions".): ===+=== 2. Add a page title === 
 +Paste the following code below (note: In this example a page title is "Promotions".):
 ---- ----
 <code> <code>
Line 95: Line 114:
 </code> </code>
 ---- ----
-=== 3.Add a promotions group title. Paste the following code below (note: In this example a promotions group title is "New Customer Offer".): ===+=== 3.Add a promotions group title === 
 +Paste the following code below (note: In this example a promotions group title is "New Customer Offer".):
 ---- ----
 <code> <code>
Line 103: Line 123:
 </code> </code>
 ---- ----
-=== 4. Add a grid container, where to place all promotions cards (note: Next step code you need to write inside this code.). Paste the following code below: ===+=== 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> <code>
Line 111: Line 132:
 </code> </code>
 ---- ----
-=== 5. Add a single promotion card. Paste the following code inside step four (4) code block: ===+=== 5. Add a single promotion card == 
 +Paste the following code inside step four (4) code block:
 ---- ----
 <code> <code>
Line 126: Line 148:
       </div><br>       </div><br>
       <div class="button_area">       <div class="button_area">
-        <a href="single-promotion"> +        <a href="single-promotion" class="button"> 
-          <button type="button" class="button"> +          More Info
-            More Info +
-          </button>+
         </a>         </a>
        </div>        </div>
Line 142: Line 162:
 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 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">**+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. Repeat step five (5) as many times as you want to create promotion cards in the created promotions group. ===+=== 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. Follow steps four (4), five(5) and six(6) to create a different group of promotions. ===+=== 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 ====== ====== Full demo code for a promotions page ======
 +
 <code> <code>
 <style> <style>
Line 182: Line 205:
 .cms-holder .img_area { .cms-holder .img_area {
   height: 50%;   height: 50%;
 +  overflow: hidden;
 } }
  
Line 187: Line 211:
   object-fit: cover;   object-fit: cover;
   width: 100%;   width: 100%;
-  height: 215px; 
   border-top-left-radius: 4px;   border-top-left-radius: 4px;
   border-top-right-radius: 4px;   border-top-right-radius: 4px;
Line 224: Line 247:
   color: var(--main-primary-text);   color: var(--main-primary-text);
   border: 0px none;   border: 0px none;
 +  display: inline-flex;
 +  align-items: center;
 } }
  
Line 230: Line 255:
   cursor: pointer;   cursor: pointer;
   filter: brightness(85%);   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> </style>
Line 254: Line 294:
       </div><br>       </div><br>
       <div class="button_area">       <div class="button_area">
-        <a href="single-promotion"> +        <a href="single-promotion" class="button">More Info</a>
-          <button type="button" class="button"> +
-            More Info +
-          </button> +
-        </a>+
        </div>        </div>
     </div>     </div>
Line 274: Line 310:
       </div><br>       </div><br>
       <div class="button_area">       <div class="button_area">
-        <a href="/app/en/single-promotion"> +        <a href="single-promotion" class="button">More Info</a> 
-          <button type="button" class="button"> +      </div>
-            More Info +
-          </button> +
-        </a> +
-       </div>+
     </div>     </div>
   </div>   </div>
Line 294: Line 326:
       </div><br>       </div><br>
       <div class="button_area">       <div class="button_area">
-        <a href="single-promotion"> +        <a href="single-promotion" class="button">More Info</a> 
-          <button type="button" class="button"> +      </div>
-            More Info +
-          </button> +
-        </a> +
-       </div>+
     </div>     </div>
   </div>   </div>
Line 321: Line 349:
       </div><br>       </div><br>
       <div class="button_area">       <div class="button_area">
-        <a href="single-promotion"> +        <a href="single-promotion" class="button">More Info</a> 
-          <button type="button" class="button"> +      </div>
-            More Info +
-          </button> +
-        </a> +
-       </div>+
     </div>     </div>
   </div>   </div>
Line 341: Line 365:
       </div><br>       </div><br>
       <div class="button_area">       <div class="button_area">
-        <a href="single-promotion"> +        <a href="single-promotion" class="button">More Info</a> 
-          <button type="button" class="button"> +      </div>
-            More Info +
-          </button> +
-        </a> +
-       </div>+
     </div>     </div>
   </div>   </div>
Line 361: Line 381:
       </div><br>       </div><br>
       <div class="button_area">       <div class="button_area">
-        <a href="single-promotion"> +        <a href="single-promotion" class="button">More Info</a> 
-          <button type="button" class="button"> +      </div>
-            More Info +
-          </button> +
-        </a> +
-       </div>+
     </div>     </div>
   </div>   </div>
Line 381: Line 397:
       </div><br>       </div><br>
       <div class="button_area">       <div class="button_area">
-        <a href="single-promotion"> +        <a href="single-promotion" class="button">More Info</a> 
-          <button type="button" class="button"> +      </div>
-            More Info +
-          </button> +
-        </a> +
-       </div>+
     </div>     </div>
   </div>   </div>
Line 401: Line 413:
       </div><br>       </div><br>
       <div class="button_area">       <div class="button_area">
-        <a href="single-promotion"> +        <a href="single-promotion" class="button">More Info</a> 
-          <button type="button" class="button"> +      </div>
-            More Info +
-          </button> +
-        </a> +
-       </div>+
     </div>     </div>
   </div>   </div>
Line 412: Line 420:
 </code> </code>
  
-===== Result =====+=== Result === 
 +----
 {{ :admin:online-platform-cms:promotions.png |{{:admin:online-platform-cms:promotions.png?nolink&600|}} {{ :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.txt
  • Last modified: 2022/02/21 14:28
  • (external edit)