Show pageOld revisionsBacklinksExport to PDFBack to top This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong. ====== Creating "Landing" 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> :root { --landing-bg-img: url(https://i.ibb.co/3FxJT21/bg.png); --landing-regLine-img: url(https://i.ibb.co/3FxJT21/bg.png); } .cms-holder .row { width:100%; } .cms-holder .bg { background-color: var(--main-first-background); background: var(--landing-bg-img); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; background-size: cover; height: auto; text-align: center; padding: 100px 0px; } .cms-holder .text { width: 100%; height:100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .cms-holder h1 { margin: 0; } .cms-holder .title { font-size: 4.375rem; font-weight: 700; color: var(--main-primary-text); line-height: initial; } .cms-holder .subtitle { font-size: 4.375rem; font-weight: 700; color: var(--main-primary); line-height: initial; } .cms-holder .buttonArea { padding-top: 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; border-radius: 30px; font-weight: 700; } .cms-holder .button:hover { background: var(--main-primary); color: var(--main-primary-text); cursor: pointer; filter: brightness(85%); } .cms-holder .line { background: var(--main-first-background); height: 75px; display: flex; flex-direction: column; justify-content: center; padding-left: 1.5em; } .cms-holder .sports { font-size: 1.5rem; font-weight: 700; color: var(--main-primary); line-height: initial; } .cms-holder .productsHolder { background: var(--main-first-background); padding: 0 20px; width: 100%; display: grid; /* Define Auto Row size */ grid-auto-rows: 200px; /*Define our columns */ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-gap: 1.5em; padding-bottom: 50px; } .cms-holder .product { border-radius: 10px; background: var(--main-first-background); color: var(--main-first-background-text); height: 200px; overflow: hidden; position: relative; } .cms-holder .procuct img { object-fit: cover; } .cms-holder .info { width: 100%; position: absolute; bottom: 0; left: 0; background: var(--main-third-background); color: var(--main-third-background-text); padding: 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } .cms-holder .productName { font-size: 1.2rem; font-weight: 700; line-height: 2rem; display: block; } .cms-holder .info:hover { background: var(--main-primary); color: var(--main-primary-text); } .cms-holder .infotext { font-size: 1rem; font-weight: 400; line-height: 1.2rem; display: block; } .cms-holder .regLine { background-color: var(--main-first-background); background: var(--landing-regLine-img); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; background-size: cover; padding: 20px 20px; } .cms-holder .regText { font-size: 1.25rem; font-weight: 700; color: var(--main-primary-text); line-height: initial; height: 100%; display: flex; justify-content: center; align-items: center; } .cms-holder .joinButton { background: var(--main-primary); padding: 0px 20px; color: var(--main-primary-text); font-size: 1.125rem; border: 0px none; display: inline-flex; align-items: center; border-radius: 30px; font-weight: 700; margin-left: 1.875rem; padding: 5px 20px; text-align: center; } .cms-holder .joinButton:hover { background: var(--main-primary); color: var(--main-primary-text); cursor: pointer; filter: brightness(85%); } #cms-page .contents { padding: 0!important; } @media screen and (max-width: 768px){ .cms-holder .bg { height: 33vh; } .cms-holder .title, .cms-holder .subtitle { font-size: 2rem; } .cms-holder .button { height: 40px; } ::-webkit-scrollbar-track { margin-left: 20px; margin-right: 20px; } ::-webkit-scrollbar{ height: 4px; width: 4px; background: var(--main-first-background); } ::-webkit-scrollbar-thumb:horizontal{ background: var(--main-primary); border-radius: 10px; } .cms-holder .row { width: calc(100%); overflow-x: auto; overflow-y: hidden; clear: both; margin-bottom: 30px; } .cms-holder .productsHolder { background: var(--main-first-background); display: flex; flex-wrap: nowrap; clear: both; box-sizing: border-box; overflow: auto; /* Fixing */ padding: unset; width: unset; grid-auto-rows: unset; grid-template-columns: unset; grid-gap: unset; padding-bottom: unset; } .cms-holder .product { border-radius: 10px; background: var(--main-first-background); color: var(--main-first-background-text); height: 200px; position: relative; flex: 0 0 300px; overflow: hidden; margin-right: 1.5em; margin-bottom: 20px; } .cms-holder .product:first-child { margin-left: 1.5em; } .cms-holder .product:last-child { margin-right: 20px; } .row { padding-bottom: 0px !important; } .grid { padding-bottom: 0px !important; } } </style> </code> ---- === 2. Add background image row === Paste the following code below: ---- <code> <div class="bg"> <div class="text"> <div class="title"> Bet on Sports Online - </div><be> <div class="subtitle"> WIN BIG! </div> <div class="buttonArea"> <a href="/app/en/prematch/9500" class="button">Explore sport events</a> </div> </be></div> </div> </code> ---- Edit text and button link (`href="/app/en/prematch/9500"` to customize as needed. If there is a need to change background image, edit url in `<style>` block, under `:root{` section: `--landing-bg-img: url(https://i.ibb.co/3FxJT21/bg.png);` {{:admin:online-platform-cms:screenshot_2022-02-01_19-09-35.png?400|}} === 3. Add links to promotions === Paste the following code below: ---- <code> <div class="line"> <div class="sports"> Promotions & Offers </div> </div> <div class="row"> <div class="productsHolder"> <a class="product" href="/app/en/page/single-promotion"> <img src="https://i.ibb.co/FWZm3bz/cashback.png" alt="Cashback"> <span class="info"> <span class="productName">BONUS CASHBACK</span> <span class="infotext"> Live Sports online betting weekly 10% cash back bonus. The minimum amount... </span> </span> </a> <a class="product" href="/app/en/page/single-promotion"> <img src="https://i.ibb.co/Mh164ct/fast-bet.png" alt="Fast Bet"> <span class="info"> <span class="productName">FAST BET</span> <span class="infotext"> Become a winner with Fastbet. Collect your bet options and don’t wait on the queue. </span> </span> </a> <a class="product" href="/app/en/page/single-promotion"> <img src="https://i.ibb.co/0KPdZ0p/online-account.png" alt="Online Account"> <span class="info"> <span class="productName">ONLINE ACCOUNT</span> <span class="infotext"> Place bets with a reliable betting company! In order for a player to bet online, it is... </span> </span> </a> </div> </div> </code> ---- Add needed amount of sections of promotions, and customize as needed: ---- <code> <a class="product" href="/app/en/page/single-promotion"> <img src="https://i.ibb.co/FWZm3bz/cashback.png" alt="Cashback"> <span class="info"> <span class="productName">BONUS CASHBACK</span> <span class="infotext"> Live Sports online betting weekly 10% cash back bonus. The minimum amount... </span> </span> </a> </code> {{:admin:online-platform-cms:screenshot_at_feb_21_17-15-04.png?400|}} ---- === 4. Add link to registration === Paste the following code below: ---- <code> <div class="regLine"> <div class="regText"> DISCOVER THE BEST BET OFFERS <a href="/app/en/sign-up" class="joinButton">Create an account!</a> </div> </div> </code> ---- Edit text as needed. If background image needs to be changed, edit url in `<style>` block, under `:root{` section: `--landing-regLine-img: url(https://i.ibb.co/3FxJT21/bg.png);` {{:admin:online-platform-cms:screenshot_2022-02-01_19-16-20.png?400|}} === 5. Add links to games === Paste the following code: ---- <code> <div class="line"> <div class="sports"> Sports Betting & Games </div> </div> <div class="row"> <div class="productsHolder"> <a class="product" href="/app/en/prematch/9500"> <img src="https://i.ibb.co/Nt02fRF/pre-match.png" alt="Pre-Match"> <span class="info"> <span class="productName">PRE-MATCH</span> <span class="infotext"> You will find only the best sports betting odds and super tips for all favourite sports. </span> </span> </a> <a class="product" href="/app/en/live/1303"> <img src="https://i.ibb.co/ftjMrHg/live-sports.png" alt="Live Betting"> <span class="info"> <span class="productName">LIVE BETTING</span> <span class="infotext"> Get live sports betting odds at the leading sportsbook to bet live on your favorite sports. </span> </span> </a> <a class="product" href="/app/en/betgames-external/4000"> <img src="https://i.ibb.co/0fr3Z3M/betgames.png" alt="Betgames"> <span class="info"> <span class="productName">BETGAMES</span> <span class="infotext"> Immersive, live-dealer games. Welcome to high-engagement, low-risk betting. </span> </span> </a> <a class="product" href="/app/en/roulettes/roulette/4"> <img src="https://i.ibb.co/wy6wvJc/roulette.png" alt="Roulette"> <span class="info"> <span class="productName">ROULETTE</span> <span class="infotext"> Play Free Online Roulette games. Choose from American, European, French roulette, and more! </span> </span> </a> <a class="product" href="/app/en/slots/5000"> <img src="https://i.ibb.co/NxwJ3SW/slots.png" alt="Slots"> <span class="info"> <span class="productName">SLOTS</span> <span class="infotext"> Spin amazing slots games, compete in leagues, join clubs and hit Jackpot. </span> </span> </a> <a class="product" href="/app/en/betgames/betgames-rng-wheel/1227"> <img src="https://i.ibb.co/gRDXQwc/wheel.png" alt="Winners Wheel"> <span class="info"> <span class="productName">WINNERS WHEEL</span> <span class="infotext"> Train your brain and spin the wheel in the official Winners Wheel game! </span> </span> </a> </div> </div> </code> ---- {{:admin:online-platform-cms:screenshot_2022-02-01_19-14-12.png?400|}} Each element can be customized same as in step #3 with promotions. More elements can be added if needed. === 6. Assign this page as landing page == {{:admin:online-platform-cms:screenshot_2022-02-01_19-33-35.png?400|}} ====== Full demo code for a landing page ====== <code> <style> :root { --landing-bg-img: url(https://i.ibb.co/3FxJT21/bg.png); --landing-regLine-img: url(https://i.ibb.co/3FxJT21/bg.png); } .cms-holder .row { width:100%; } .cms-holder .bg { background-color: var(--main-first-background); background: var(--landing-bg-img); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; background-size: cover; height: auto; text-align: center; padding: 100px 0px; } .cms-holder .text { width: 100%; height:100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .cms-holder h1 { margin: 0; } .cms-holder .title { font-size: 4.375rem; font-weight: 700; color: var(--main-primary-text); line-height: initial; } .cms-holder .subtitle { font-size: 4.375rem; font-weight: 700; color: var(--main-primary); line-height: initial; } .cms-holder .buttonArea { padding-top: 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; border-radius: 30px; font-weight: 700; } .cms-holder .button:hover { background: var(--main-primary); color: var(--main-primary-text); cursor: pointer; filter: brightness(85%); } .cms-holder .line { background: var(--main-first-background); height: 75px; display: flex; flex-direction: column; justify-content: center; padding-left: 1.5em; } .cms-holder .sports { font-size: 1.5rem; font-weight: 700; color: var(--main-primary); line-height: initial; } .cms-holder .productsHolder { background: var(--main-first-background); padding: 0 20px; width: 100%; display: grid; /* Define Auto Row size */ grid-auto-rows: 200px; /*Define our columns */ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-gap: 1.5em; padding-bottom: 50px; } .cms-holder .product { border-radius: 10px; background: var(--main-first-background); color: var(--main-first-background-text); height: 200px; overflow: hidden; position: relative; } .cms-holder .procuct img { object-fit: cover; } .cms-holder .info { width: 100%; position: absolute; bottom: 0; left: 0; background: var(--main-third-background); color: var(--main-third-background-text); padding: 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } .cms-holder .productName { font-size: 1.2rem; font-weight: 700; line-height: 2rem; display: block; } .cms-holder .info:hover { background: var(--main-primary); color: var(--main-primary-text); } .cms-holder .infotext { font-size: 1rem; font-weight: 400; line-height: 1.2rem; display: block; } .cms-holder .regLine { background-color: var(--main-first-background); background: var(--landing-regLine-img); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; background-size: cover; padding: 20px 20px; } .cms-holder .regText { font-size: 1.25rem; font-weight: 700; color: var(--main-primary-text); line-height: initial; height: 100%; display: flex; justify-content: center; align-items: center; } .cms-holder .joinButton { background: var(--main-primary); padding: 0px 20px; color: var(--main-primary-text); font-size: 1.125rem; border: 0px none; display: inline-flex; align-items: center; border-radius: 30px; font-weight: 700; margin-left: 1.875rem; padding: 5px 20px; text-align: center; } .cms-holder .joinButton:hover { background: var(--main-primary); color: var(--main-primary-text); cursor: pointer; filter: brightness(85%); } #cms-page .contents { padding: 0!important; } @media screen and (max-width: 768px){ .cms-holder .bg { height: 33vh; } .cms-holder .title, .cms-holder .subtitle { font-size: 2rem; } .cms-holder .button { height: 40px; } ::-webkit-scrollbar-track { margin-left: 20px; margin-right: 20px; } ::-webkit-scrollbar{ height: 4px; width: 4px; background: var(--main-first-background); } ::-webkit-scrollbar-thumb:horizontal{ background: var(--main-primary); border-radius: 10px; } .cms-holder .row { width: calc(100%); overflow-x: auto; overflow-y: hidden; clear: both; margin-bottom: 30px; } .cms-holder .productsHolder { background: var(--main-first-background); display: flex; flex-wrap: nowrap; clear: both; box-sizing: border-box; overflow: auto; /* Fixing */ padding: unset; width: unset; grid-auto-rows: unset; grid-template-columns: unset; grid-gap: unset; padding-bottom: unset; } .cms-holder .product { border-radius: 10px; background: var(--main-first-background); color: var(--main-first-background-text); height: 200px; position: relative; flex: 0 0 300px; overflow: hidden; margin-right: 1.5em; margin-bottom: 20px; } .cms-holder .product:first-child { margin-left: 1.5em; } .cms-holder .product:last-child { margin-right: 20px; } .row { padding-bottom: 0px !important; } .grid { padding-bottom: 0px !important; } } </style> <div class="bg"> <div class="text"> <div class="title"> Bet on Sports Online - </div><be> <div class="subtitle"> WIN BIG! </div> <div class="buttonArea"> <a href="/app/en/prematch/9500" class="button">Explore sport events</a> </div> </be></div> </div> <div class="line"> <div class="sports"> Promotions & Offers </div> </div> <div class="row"> <div class="productsHolder"> <a class="product" href="/app/en/page/single-promotion"> <img src="https://i.ibb.co/FWZm3bz/cashback.png" alt="Cashback"> <span class="info"> <span class="productName">BONUS CASHBACK</span> <span class="infotext"> Live Sports online betting weekly 10% cash back bonus. The minimum amount... </span> </span> </a> <a class="product" href="/app/en/page/single-promotion"> <img src="https://i.ibb.co/Mh164ct/fast-bet.png" alt="Fast Bet"> <span class="info"> <span class="productName">FAST BET</span> <span class="infotext"> Become a winner with Fastbet. Collect your bet options and don’t wait on the queue. </span> </span> </a> <a class="product" href="/app/en/page/single-promotion"> <img src="https://i.ibb.co/0KPdZ0p/online-account.png" alt="Online Account"> <span class="info"> <span class="productName">ONLINE ACCOUNT</span> <span class="infotext"> Place bets with a reliable betting company! In order for a player to bet online, it is... </span> </span> </a> </div> </div> <div class="regLine"> <div class="regText"> DISCOVER THE BEST BET OFFERS <a href="/app/en/sign-up" class="joinButton">Create an account!</a> </div> </div> <div class="line"> <div class="sports"> Sports Betting & Games </div> </div> <div class="row"> <div class="productsHolder"> <a class="product" href="/app/en/prematch/9500"> <img src="https://i.ibb.co/Nt02fRF/pre-match.png" alt="Pre-Match"> <span class="info"> <span class="productName">PRE-MATCH</span> <span class="infotext"> You will find only the best sports betting odds and super tips for all favourite sports. </span> </span> </a> <a class="product" href="/app/en/live/1303"> <img src="https://i.ibb.co/ftjMrHg/live-sports.png" alt="Live Betting"> <span class="info"> <span class="productName">LIVE BETTING</span> <span class="infotext"> Get live sports betting odds at the leading sportsbook to bet live on your favorite sports. </span> </span> </a> <a class="product" href="/app/en/betgames-external/4000"> <img src="https://i.ibb.co/0fr3Z3M/betgames.png" alt="Betgames"> <span class="info"> <span class="productName">BETGAMES</span> <span class="infotext"> Immersive, live-dealer games. Welcome to high-engagement, low-risk betting. </span> </span> </a> <a class="product" href="/app/en/roulettes/roulette/4"> <img src="https://i.ibb.co/wy6wvJc/roulette.png" alt="Roulette"> <span class="info"> <span class="productName">ROULETTE</span> <span class="infotext"> Play Free Online Roulette games. Choose from American, European, French roulette, and more! </span> </span> </a> <a class="product" href="/app/en/slots/5000"> <img src="https://i.ibb.co/NxwJ3SW/slots.png" alt="Slots"> <span class="info"> <span class="productName">SLOTS</span> <span class="infotext"> Spin amazing slots games, compete in leagues, join clubs and hit Jackpot. </span> </span> </a> <a class="product" href="/app/en/betgames/betgames-rng-wheel/1227"> <img src="https://i.ibb.co/gRDXQwc/wheel.png" alt="Winners Wheel"> <span class="info"> <span class="productName">WINNERS WHEEL</span> <span class="infotext"> Train your brain and spin the wheel in the official Winners Wheel game! </span> </span> </a> </div> </div> </code> === Result === ---- {{:admin:online-platform-cms:screenshot_at_feb_21_17-18-59.png?400|}} ---- **Links for product images** <code> https://aardvark.ams3.digitaloceanspaces.com/slides/winners_wheel.jpg https://aardvark.ams3.digitaloceanspaces.com/slides/live_roulette.jpg https://aardvark.ams3.digitaloceanspaces.com/slides/lotto.jpg https://aardvark.ams3.digitaloceanspaces.com/slides/horses.jpg https://aardvark.ams3.digitaloceanspaces.com/slides/roulette.jpg https://aardvark.ams3.digitaloceanspaces.com/slides/live_betting.jpg https://aardvark.ams3.digitaloceanspaces.com/slides/greyhounds.jpg https://aardvark.ams3.digitaloceanspaces.com/slides/prematch.jpg https://aardvark.ams3.digitaloceanspaces.com/slides/keno.jpg https://aardvark.ams3.digitaloceanspaces.com/slides/betgames.jpg https://aardvark.ams3.digitaloceanspaces.com/slides/slots.jpg https://aardvark.ams3.digitaloceanspaces.com/slides/dogs.jpg </code> ---- **✔ Always use HTML view option in the page editor window while doing all steps.** ---- admin/online-platform-cms/landing-page.txt Last modified: 2022/02/21 15:20(external edit)