
CMS Components Guide
Basic Page Configuration
-
Log in to Admin Panel, go to
Content->Pages
and click button"Add New Page"
-
Fill in
"Page Title"
and open"Content"
tab: -
Hover
"Row"
area and click"Edit"
button: -
Select
"Full Bleed"
in"Appearance"
section and set all Padding and Margin to 0 in"Advanced"
section. Press"Save"
button. -
Drag and drop
"HTML Code"
element to"Row"
element: -
Hover the
"HTML Code"
area and click"Edit"
button: -
Copy HTML code from this Guide and Paste it to the Area. Change images, texts and links. You are allowed insert there blocks as mush as you need. Press
"Save"
button. -
Open
"Design"
tab and set"Page -- Full Width"
layout -
Save the page.
Hero block
IMPORTANT: It is allowed insert only one such block on the Page



Scroll for free CBD
<div class="c-hero" style="background: url({{view url='images/background_pattern.png'}}) left top repeat;">
<div class="c-hero__bg-image-1"></div>
<div class="c-hero__bg-image-2"></div>
<div class="c-hero__content-box">
<div class="c-hero__content lax" id="c-hero-content-1"
data-lax-opacity="0 1, (-elh*0.85) 1, (-elh) 0"
data-lax-anchor="self">
<div class="c-hero__text-image lax" data-aos="fade-right"
data-lax-translate-x_large="0 0, (-elh*0.5) -100"
data-lax-translate-x_small="0 0, (-elh*0.5) -30"
data-lax-anchor="self">
<img src="{{media url=cbd-swap/hero-block/cbd_is_everywhere.svg}}" alt="cbd_is_everywhere">
</div>
<div class="c-hero__image lax" data-aos="fade-left"
data-lax-translate-x_large="0 0, (-elh*0.5) 100"
data-lax-translate-x_small="0 0, (-elh*0.5) 30"
data-lax-anchor="self">
<img src="{{media url=cbd-swap/hero-block/cbd-swap_hero-module-1_state-1-3.jpg}}" alt="cbd-swap_hero-module-1_state-1-3">
</div>
</div>
<div class="c-hero__content c-hero__content--full-width lax" id="c-hero-content-2"
data-lax-opacity="0 0, (-elh) 0, (-elh*1.25) 1, (-elh*1.85) 1, (-elh*2) 0"
data-lax-anchor="#c-hero-content-1">
<div class="c-hero__text-image lax"
data-lax-translate-y_large="(-elh) 50, (-elh*1.5) 0"
data-lax-translate-y_small="(-elh) 20, (-elh*1.5) 0"
data-lax-anchor="#c-hero-content-1">
<img src="{{media url=cbd-swap/hero-block/cbd-swap_hero-module-1-text-state-2-06.svg}}" alt="cbd-swap_hero-module-1-text-state-2-06">
</div>
<div class="c-hero__image">
<img src="{{media url=cbd-swap/hero-block/cbd-swap_hero-module-1_state-2.jpg}}" alt="cbd-swap_hero-module-1_state-2">
</div>
</div>
<div class="c-hero__content lax" id="c-hero-content-3"
data-lax-opacity="0 0, (-elh) 0, (-elh*1.25) 1, (-elh*1.85) 1, (-elh*2) 0"
data-lax-anchor="#c-hero-content-2">
<div class="c-hero__text-image lax"
data-lax-translate-x_large="(-elh) 0, (-elh*1.5) -100"
data-lax-translate-x_small="(-elh) 0, (-elh*1.5) -30"
data-lax-anchor="#c-hero-content-2">
<img src="{{media url=cbd-swap/hero-block/cbd-swap_hero-module-1-text-state-3-03.svg}}" alt="cbd-swap_hero-module-1-text-state-3-03">
</div>
<div class="c-hero__image lax"
data-lax-translate-x_large="(-elh) 0, (-elh*1.5) 100"
data-lax-translate-x_small="(-elh) 0, (-elh*1.5) 30"
data-lax-anchor="#c-hero-content-2">
<img src="{{media url=cbd-swap/hero-block/cbd-swap_hero-module-1_state-1-3.jpg}}" alt="cbd-swap_hero-module-1_state-1-3">
</div>
</div>
<div class="c-hero__subtitle lax" data-aos="fade-top"
data-lax-opacity="0 1, (-elh*1.5) 1, (-elh*1.85) 0"
data-lax-anchor="#c-hero-content-2">
<h3>Scroll for free CBD</h3>
</div>
</div>
</div>
Animated content block
Use the following html classes to adjust the CTA color.
class="c-animated-content"
@brand-whiteclass="c-animated-content c-component--light-bg"
@olive-oil












<section class="c-animated-content" style="background: url({{view url='images/background_pattern.png'}}) left top repeat;">
<div class="c-animated-content__content-box text-align-right">
<div class="c-animated-content__bg-image-1"></div>
<div class="c-animated-content__container">
<div class="c-animated-content__content lax"
data-lax-translate-y_small="(vh) 200, (-elh) -50 | speed=3 offset=-500"
data-lax-translate-y_large="(vh) 400, (-elh) 0 | speed=2 offset=-500"
data-lax-anchor="self">
<img class="desktop-img" src="{{media url=cbd-swap/cbd-quality-block/whats_insideX2.png}}"
alt="What is inside the bottle?">
<img class="mobile-img" src="{{media url=cbd-swap/cbd-quality-block/whats_insideX1.png}}"
alt="What is inside the bottle?">
</div>
<div class="c-animated-content__image lax"
data-lax-translate-x="(vh) -400, (-elh) 0 | speed=2 offset=-500"
data-lax-anchor="self">
<img class="mobile-img" src="{{media url=cbd-swap/cbd-quality-block/[email protected]}}"
alt="Hand with oil">
<img class="desktop-img" src="{{media url=cbd-swap/cbd-quality-block/[email protected]}}"
alt="Hand with oil">
</div>
</div>
</div>
<div class="c-animated-content__content-box text-align-left">
<div class="c-animated-content__bg-image-2"></div>
<div class="c-animated-content__container">
<div class="c-animated-content__content lax"
data-lax-translate-y_small="(vh) 200, (-elh) 0 | speed=2 offset=-500"
data-lax-translate-y_large="(vh) 400, (-elh) 50 | speed=2 offset=-500"
data-lax-anchor="self">
<img class="desktop-img" src="{{media url=cbd-swap/cbd-quality-block/high_qualityX2.svg}}"
alt="High quality?">
<img class="mobile-img" src="{{media url=cbd-swap/cbd-quality-block/high_qualityX1.svg}}"
alt="High quality?">
</div>
<div class="c-animated-content__image lax"
data-lax-translate-x="(vh) 400, (-elh) 0 | speed=2 offset=-500"
data-lax-anchor="self">
<img class="mobile-img" src="{{media url=cbd-swap/cbd-quality-block/hands_swap_bwX1.png}}"
alt="Hands swap">
<img class="desktop-img" src="{{media url=cbd-swap/cbd-quality-block/hands_swap_bwX2.png}}"
alt="Hands swap">
</div>
</div>
</div>
<div class="c-animated-content__content-box text-align-center">
<div class="c-animated-content__bg-image-3"></div>
<div class="c-animated-content__bg-image-4"></div>
<div class="c-animated-content__container">
<div class="c-animated-content__content">
<div class="c-animated-content__action">
<img class="mobile-img" src="{{media url=cbd-swap/cbd-quality-block/cbd-swap-module-4-textX1.png}}"
alt="Swap it for free">
<img class="desktop-img" src="{{media url=cbd-swap/cbd-quality-block/cbd-swap-module-4-textX2.png}}"
alt="Swap it for free">
<div class="mobile-img no-content lax"
data-lax-translate-x="(vh) 400, (-elh/2) 0 | speed=2 offset=-500"
data-lax-anchor="self">
<img src="{{media url=cbd-swap/cbd-quality-block/[email protected]}}"
alt="Hands swap">
</div>
<div class="c-animated-content__button-box" data-aos="fade-up">
<button onclick="window.location='/cbd-swap-funnel'" class="c-animated-content__button">Swap Your CBD
</button>
</div>
</div>
<div class="c-icons" data-aos="fade-up" data-aos-offset="300">
<ul class="c-icons__icons-list">
<li>
<img src="{{media url=cbd-swap/cbd-quality-block/icons/nongmo_icon.svg}}" alt="Non GMO">
<span>Non-GMO</span>
</li>
<li>
<img src="{{media url=cbd-swap/cbd-quality-block/icons/usgrown_icon.svg}}" alt="US grown">
<span>US GROWN HEMP</span>
</li>
<li>
<img src="{{media url=cbd-swap/cbd-quality-block/icons/noharsh_icon.svg}}" alt="No harsh">
<span>No Harsh Chemical Pesticides</span>
</li>
<li>
<img src="{{media url=cbd-swap/cbd-quality-block/icons/glutenfree_icon.svg}}"
alt="Gluten free">
<span>Gluten Free</span>
</li>
</ul>
</div>
</div>
<div class="c-animated-content__image">
<img class="desktop-img lax"
data-lax-translate-x="(vh) -400, (-elh) 0 | speed=2 offset=-500"
data-lax-anchor="self"
src="{{media url=cbd-swap/cbd-quality-block/hands_swap_colorX2.png}}" alt="Hands swap">
</div>
<div class="c-animated-content__common-img-box">
<div class="c-animated-content__common-img-desktop lax"
data-lax-translate-x="(vh) 400, (-elh) 0 | speed=2 offset=-500"
data-lax-anchor="self">
<img class="common-img" src="{{media url=cbd-swap/cbd-quality-block/leaf_backgroundX1.png}}"
alt="Leaf">
</div>
<div class="c-animated-content__common-img-mobile lax"
data-lax-translate-x="(vh) -400, (-elh) 0 | speed=2 offset=-500"
data-lax-anchor="self">
<img class="common-img" src="{{media url=cbd-swap/cbd-quality-block/leaf_backgroundX1.png}}"
alt="Leaf">
</div>
</div>
</div>
</div>
</section>
Icons block
IMPORTANT: Use only inside other blocks
Use the following html classes to adjust the position on desktop.
class="c-icons"
- vertical positionclass="c-icons c-icons--horizontal"
- horizontal position
<div class="c-icons c-icons--horizontal" data-aos="fade-up" data-aos-offset="300">
<ul class="c-icons__icons-list">
<li>
<img src="{{media url=cbd-swap/cbd-quality-block/icons/nongmo_icon.svg}}" alt="Non GMO">
<span>Non-GMO</span>
</li>
<li>
<img src="{{media url=cbd-swap/cbd-quality-block/icons/usgrown_icon.svg}}" alt="US grown">
<span>US GROWN HEMP</span>
</li>
<li>
<img src="{{media url=cbd-swap/cbd-quality-block/icons/noharsh_icon.svg}}" alt="No harsh">
<span>No Harsh Chemical Pesticides</span>
</li>
<li>
<img src="{{media url=cbd-swap/cbd-quality-block/icons/glutenfree_icon.svg}}"
alt="Gluten free">
<span>Gluten Free</span>
</li>
</ul>
</div>
Fullbleed background block
Make sure elements class="c-fullbleed-background"
and class="c-fullbleed-background__image"
have unique IDs.
Use the following html classes to adjust the texts color.
class="c-fullbleed-background"
@brand-whiteclass="c-fullbleed-background c-component--light-bg"
@olive-oil

Where Your CBD Comes From Matters
The Charlotte's Web proprietary hemp genetics have been expertly developed to have a rich phytochemical profile.
We Harvest When It's JUST Right
Throughout the flowering cycle we test our plants frequently, so they’re harvested when their phytochemical profile meets our standards.
<div id="c-fullbleed-background-1" class="c-fullbleed-background">
<img id="c-fullbleed-background-1__image" class="c-fullbleed-background__image"
src="{{media url=cbd-swap/fullbleed-background-block/DSC03614.png}}" alt="DSC03614">
<div class="c-fullbleed-background__content-box">
<div class="c-fullbleed-background__content c-fullbleed-background__content--mobile">
<div data-aos="fade-up">
<h3 class="c-fullbleed-background__title">Where Your CBD Comes From Matters</h3>
<p class="c-fullbleed-background__text">
The Charlotte's Web proprietary hemp genetics have been expertly developed to have a rich
phytochemical profile.</p>
</div>
</div>
<div class="c-fullbleed-background__content">
<div data-aos="fade-up">
<h3 class="c-fullbleed-background__title">We Harvest When It's JUST Right</h3>
<p class="c-fullbleed-background__text">
Throughout the flowering cycle we test our plants frequently,
so they’re harvested when their phytochemical profile meets our standards. </p>
</div>
</div>
</div>
</div>
Two column video block
-
Make sure element
class="c-two-column-content-video__init-video"
hasdata-popup-trigger="UNIQUEID"
attibute and elementclass="c-modal-video c-modal-video--shadow"
hasdata-popup-modal="UNIQUEID"
attribute."UNIQUEID"
should be the same for such pair of elements. -
Make sure every
iframe
element has unique ID, for exampleiframe id="player1"
-
Use the following html classes to adjust the title color.
class="c-two-column-content"
@brand-whiteclass="c-two-column-content c-component--light-bg"
@olive-oil
Learn why quality matters

How We Grow 2+ Million Hemp Plants

High-Quality CBD Products
<div class="c-two-column-content c-component--light-bg">
<div class="c-two-column-content__subtitle"></div>
<div class="c-two-column-content__title-box">
<h2 class="c-two-column-content__title" data-aos="fade-up" data-aos-duration="900">Learn why quality matters</h2>
</div>
<div class="c-two-column-content__content-box">
<div class="c-two-column-content__content" data-aos="fade-up" data-aos-duration="900"
data-aos-anchor-placement="center-bottom">
<div class="c-two-column-content-video">
<div class="c-two-column-content-video__init-video" data-popup-trigger="one">
<img src="{{media url=cbd-swap/quality-matters-block/cbd-swap-module-6-Image-1.jpg}}"
alt="cbd-swap-module-6-Image-1">
</div>
<h4 class="c-two-column-content-video__title">How We Grow 2+ Million Hemp Plants</h4>
</div>
</div>
<div class="c-modal-video c-modal-video--shadow" data-popup-modal="one">
<div class="c-modal-video__content-box">
<button class="c-modal-video__close">Close</button>
<div class="c-modal-video__content">
<iframe id="player1" width="100%" height="100%"
src="https://www.youtube.com/embed/xg4p-ckbses?version=3&enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="c-two-column-content__content" data-aos="fade-up" data-aos-duration="900"
data-aos-anchor-placement="center-bottom">
<div class="c-two-column-content-video">
<div class="c-two-column-content-video__init-video" data-popup-trigger="two">
<img src="{{media url=cbd-swap/quality-matters-block/cbd-swap-module-6-Image-2.jpg}}"
alt="cbd-swap-module-6-Image-2">
</div>
<h4 class="c-two-column-content-video__title">High-Quality CBD Products</h4>
</div>
</div>
<div class="c-modal-video c-modal-video--shadow" data-popup-modal="two">
<div class="c-modal-video__content-box">
<button class="c-modal-video__close">Close</button>
<div class="c-modal-video__content">
<iframe id="player2" width="100%" height="100%"
src="https://www.youtube.com/embed/qAW5SoNqJxI?version=3&enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
Two column content block
Use the following html classes to adjust the texts color.
class="c-two-column-content c-two-column-content--dirt"
@brand-whiteclass="c-two-column-content c-two-column-content--dirt c-component--light-bg"
@olive-oil
Scroll To Explore
Trust Earned by Dedication and Diligence to Quality Testing
From seed to shelf, Charlotte’s Web products are fully traceable. We have oversight over each step of the farming, development, and manufacturing processes to produce safe, dependable products.
Each Charlotte's Web product is U.S. Hemp Authority Certified, comes with a batch report and Certificate of Analysis (COA) from 3rd party testing.

Quality Tested 20+ Times
We test our soil, water sources, harvested hemp and extracts more than 20 times from farm to final bottling to ensure our products don’t contain unhealthy levels of anything we don’t like—like heavy metals, pesticides, harmful microbes and mold. Other companies don't test to this extent.

<div class="c-two-column-content c-two-column-content--dirt c-component--light-bg">
<div class="c-two-column-content__subtitle" data-aos="fade-up">
<h3>Scroll To Explore</h3>
</div>
<div class="c-two-column-content__content-box c-two-column-content__content-box--reversed">
<div class="c-two-column-content__content c-two-column-content__content--img-first js-orderFix">
<div class="c-two-column-content__copy" data-aos="fade-up">
<h3 class="c-two-column-content__title">Trust Earned by Dedication and Diligence to Quality Testing </h3>
<p class="c-two-column-content__text">From seed to shelf, Charlotte’s Web products are fully traceable. We
have oversight over each step of the farming, development, and manufacturing processes to produce
safe, dependable products.</p>
<p class="c-two-column-content__text">Each Charlotte's Web product is U.S. Hemp Authority Certified, comes
with a batch report and Certificate of Analysis (COA) from 3rd party testing.</p>
</div>
<div class="c-two-column-content__img js-orderFix" data-aos="fade-up">
<img src="{{media url=cbd-swap/quality-matters-block/cbd-swap-module-7-image-2.jpg}}"
alt="cbd-swap-module-7-image-2">
</div>
</div>
<div class="c-two-column-content__content js-orderFix">
<div class="c-two-column-content__copy" data-aos="fade-up">
<h3 class="c-two-column-content__title">Quality Tested 20+ Times</h3>
<p class="c-two-column-content__text">We test our soil, water sources, harvested hemp and extracts more
than 20 times from farm to final bottling to ensure our products don’t contain unhealthy levels of
anything we don’t like—like heavy metals, pesticides, harmful microbes and mold. Other companies
don't test to this extent.</p>
</div>
<div class="c-two-column-content__img c-two-column-content__img--scale-left js-orderFix" data-aos="fade-up">
<img src="{{media url=cbd-swap/quality-matters-block/cbd-swap-module-7-image-1-1.png}}"
alt="cbd-swap-module-7-image-1-1">
</div>
</div>
</div>
</div>
Centered image text overlay block
Use the following html classes to adjust the texts and CTA color.
class="c-centered-img-text-overlay"
@brand-whiteclass="c-centered-img-text-overlay c-component--light-bg"
@olive-oil
<section class="c-centered-img-text-overlay c-component--light-bg">
<div class="c-centered-img-text-overlay__subtitle" data-aos="fade-up">
<h3>Scroll To Swap Your CBD</h3>
</div>
<div class="c-centered-img-text-overlay__image-wrapper">
<img data-aos="fade-right" data-aos-delay="300" data-aos-offset="300" data-aos-duration="500" class="mobile-img"
src="{{media url=cbd-swap/ready-to-swap-for-free-block/cbd-swap-module-8-mobile.jpg}}" alt="ready to swap">
<img data-aos="fade-right" data-aos-delay="300" data-aos-offset="50" data-aos-anchor-placement="center-bottom"
data-aos-duration="500" class="desktop-img"
src="{{media url=cbd-swap/ready-to-swap-for-free-block/cbd-swap-module-8.png}}" alt="ready to swap">
<div class="container c-centered-img-text-overlay__content" data-aos="fade-up" data-aos-delay="350" data-aos-duration="800">
<div class="c-centered-img-text-overlay__title">
<h2>Ready To Swap for free?</h2>
</div>
<a class="btn button btn-primary" href="/cbd-swap-funnel">Swap your CBD</a>
</div>
</div>
</section>
Fullbleed background block 2
Make sure elements class="c-fullbleed-background"
and class="c-fullbleed-background__image"
have unique IDs.
Use the following html classes to adjust the texts color.
class="c-fullbleed-background"
@brand-whiteclass="c-fullbleed-background c-component--light-bg"
@olive-oil

It Started with one girl
Charlotte Figi was diagnosed with a rare form of epilepsy. Her mother, Paige, extensively researched health options that led her to a little known plant compound called cannabidiol, or CBD.
in 2012
Paige contacted the Stanley Brothers looking for a non-psychoactive natural alternative for her then five-year-old daughter Charlotte. After seeing Charlotte’s response to the extract, the Stanley Brothers renamed their proprietary genetics Charlotte’s Web.
<div id="c-fullbleed-background-2" class="c-fullbleed-background">
<img id="c-fullbleed-background-2__image" class="c-fullbleed-background__image" src="{{media url=cbd-swap/fullbleed-background-block/cbd-swap-module-9.jpg}}" alt="cbd-swap-module-9">
<div class="c-fullbleed-background__content-box">
<div class="c-fullbleed-background__content">
<div data-aos="fade-up">
<h3 class="c-fullbleed-background__title">It Started with one girl</h3>
<p class="c-fullbleed-background__text">Charlotte Figi was diagnosed with a rare form of epilepsy. Her mother, Paige, extensively researched health options that led her to a little known plant compound called cannabidiol, or CBD.</p>
</div>
</div>
<div class="c-fullbleed-background__content c-fullbleed-background__content--mobile">
<div data-aos="fade-up">
<h3 class="c-fullbleed-background__title">in 2012</h3>
<p class="c-fullbleed-background__text">
Paige contacted the Stanley Brothers looking for a non-psychoactive natural alternative for her then five-year-old daughter Charlotte.
After seeing Charlotte’s response to the extract, the Stanley Brothers renamed their proprietary genetics Charlotte’s Web. </p>
</div>
</div>
</div>
</div>
Products Grid Block
You have to update products, before using them in the block:
-
Open product that you want to use in
"Products Grid Block"
-
Open
"Images And Videos"
tab and upload new image. -
Click to the image and set it as
"Overlay Background Image"
-
Save Product
<section class="c-products">
<ul class="c-products__grid products list items product-items products-widget-product-grid">
<li class="c-products__item item product product-item col-lg-4 col-md-4 col-xs-12">
{{widget type="CW\CBDSwap\Block\Product\Widget\Link" id_path="product/294"}}
</li>
<li class="c-products__item item product product-item col-lg-4 col-md-4 col-xs-12">
{{widget type="CW\CBDSwap\Block\Product\Widget\Link" id_path="product/291"}}
</li>
<li class="c-products__item item product product-item col-lg-4 col-md-4 col-xs-12">
{{widget type="CW\CBDSwap\Block\Product\Widget\Link" id_path="product/218"}}
</li>
</ul>
</section>