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-white
class="c-animated-content c-component--light-bg" @olive-oil

Non-GMO
US GROWN HEMP
No Harsh Chemical Pesticides
Gluten Free

        
        
<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 position
class="c-icons c-icons--horizontal" - horizontal position

Non-GMO
US GROWN HEMP
No Harsh Chemical Pesticides
Gluten Free

        
        
<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-white
class="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" has data-popup-trigger="UNIQUEID" attibute and element class="c-modal-video c-modal-video--shadow" has data-popup-modal="UNIQUEID" attribute."UNIQUEID" should be the same for such pair of elements.
Make sure every iframe element has unique ID, for example iframe id="player1"
Use the following html classes to adjust the title color.
- class="c-two-column-content" @brand-white
- class="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-white
class="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-white
class="c-centered-img-text-overlay c-component--light-bg" @olive-oil

Scroll To Swap Your CBD

Ready To Swap for free?

Swap your CBD

        
        
<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-white
class="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>