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
admin:online-platform-cms:promotions [2021/02/18 16:10] – 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. 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.1613664653.txt.gz
  • Last modified: 2021/02/18 16:10
  • (external edit)