design-themes/theme_paptic/views/customizations.xml

<?xml version="1.0" encoding="utf-8"?>
<odoo>

<!-- General Components, Layout -->

<!-- ==== Headers ===== -->
<template id="header_shadow" inherit_id="website.template_header_default" name="Paptic Header Shadow">
    <xpath expr="//t[@t-set='_navbar_classes']" position="attributes">
        <attribute name="class" remove="shadow-sm" separator=" "/>
    </xpath>
</template>

<!-- Snippets -->

<!-- ==== Cover ===== -->
<template id="s_cover" inherit_id="website.s_cover" name="Paptic s_cover">
    <xpath expr="//section" position="attributes">
        <attribute name="class" add="pb0 pt192 o_cc5" remove="pt232 pb232 bg-black-50 s_parallax_is_fixed s_parallax o_cc4" separator=" "/>
        <attribute name="data-scroll-background-ratio">0</attribute>
    </xpath>

    <!-- Enable SVG dynamic color functionality -->
    <xpath expr="//span[hasclass('oe_img_bg')]" position="attributes">
        <attribute name="style"
                   add="background-image:url('/web_editor/shape/theme_paptic/s_cover.svg?c1=rgba%28255%2C+255%2C+255%2C+0.17%29');"
                   remove="background-image: url('/web/image/website.s_cover_default_image');"
                   separator=";"/>
    </xpath>

    <!-- Remove color filter -->
    <xpath expr="//div[hasclass('o_we_bg_filter')]" position="replace"/>

    <xpath expr="//h1" position="replace">
        <h1>Grow your Business.<br/>Optimize your time.</h1>
    </xpath>
    <xpath expr="//p" position="replace">
        <p>&#160;</p>
    </xpath>

    <xpath expr="//p[2]" position="replace">
        <p>
            <a href="#" class="btn btn-lg btn-primary mb-2">START NOW</a>&#160;&#160;&#160;&#160;
            <a t-att-href="cta_btn_href" class="btn btn-lg btn-secondary mb-2"><t t-esc="cta_btn_text and cta_btn_text.upper()">SCHEDULE A DEMO</t></a>
        </p>
    </xpath>

    <!-- Create Structure -->
    <xpath expr="//div[hasclass('container')]" position="inside">
        <div class="row">
            <div class="o_colored_level col-lg-6"/>
            <div class="o_colored_level col-lg-6">
                <img src="/web_editor/shape/theme_paptic/s_cover_person.svg?c1=o-color-1" style="width: 100%;" alt="Man waiting at the airport"/>
            </div>
        </div>
    </xpath>
    <xpath expr="//div[hasclass('col-lg-6')]" position="inside">
        <xpath expr="//div[hasclass('container')]/h1" position="move"/>
        <xpath expr="//div[hasclass('container')]/p"  position="move"/>
        <xpath expr="//div[hasclass('container')]/p"  position="move"/>
    </xpath>
</template>

<template id="configurator_s_cover" inherit_id="website.configurator_s_cover" name="Paptic s_cover">
    <xpath expr="//section" position="attributes">
        <attribute name="data-oe-shape-data">{"shape":"web_editor/Blocks/04","flip":["x"]}</attribute>
    </xpath>

    <xpath expr="//section/div" position="before">
        <div class="o_we_shape o_web_editor_Blocks_04" style="background-image: url('/web_editor/shape/web_editor/Blocks/04.svg?c1=o-color-1&amp;c2=o-color-2&amp;c3=o-color-4&amp;c5=o-color-5&amp;flip=x'); background-position: 50% 100%;"/>
    </xpath>
</template>

<!-- ==== Image-Text ===== -->
<template id="s_image_text" inherit_id="website.s_image_text" name="Paptic s_image_text">
    <xpath expr="//section" position="attributes">
        <attribute name="class" add="pt160 pb16 o_cc o_cc3" remove="pt80 pb80" separator=" "/>
    </xpath>

    <xpath expr="//img" position="attributes">
        <attribute name="src">/web_editor/shape/theme_paptic/s_image_text.svg?c1=o-color-1</attribute>
    </xpath>

    <xpath expr="//h2" position="replace" mode="inner">
        <font style="background-image: linear-gradient(135deg, var(--o-color-1) 0%, var(--o-color-3) 100%);" class="text-gradient">Help you grow</font>
    </xpath>
    <xpath expr="//h2" position="after">
        <p>&#160;</p>
    </xpath>

    <xpath expr="//p[2]" position="replace">
        <h5>Always Improving</h5>
        <p>Thanks to our running release system, benefit from all updates (security and new features) in real time.</p>
    </xpath>
    <xpath expr="//p[3]" position="replace">
        <p>&#160;</p>
        <h5>Scalable and Modular</h5>
        <p>Whether you start small or are already a large company, our solution adapts to your needs and grows with you.</p>
        <div class="s_hr pb16 pt8" data-snippet="s_hr" data-name="Separator">
            <hr class="w-100 mx-auto" style="border-top-color: rgb(233, 236, 239) !important; border-top-width: 3px !important;"/>
        </div>
    </xpath>

    <xpath expr="//a[hasclass('btn')]" position="replace">
        <a href="#" class="btn btn-link">DISCOVER MORE &#160;<i class="fa fa-chevron-right"/></a>
    </xpath>

    <xpath expr="//img" position="attributes">
        <attribute name="class" add="pull-right" remove="img-fluid" separator=" "/>
    </xpath>
</template>

<template id="configurator_s_image_text" inherit_id="website.configurator_s_image_text" name="Paptic s_image_text">
    <xpath expr="//section" position="attributes">
        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/02_001","flip":["y"]}</attribute>
    </xpath>

    <xpath expr="//section/div" position="before">
        <div class="o_we_shape o_web_editor_Origins_02_001" style="background-image: url('/web_editor/shape/web_editor/Origins/02_001.svg?c4=o-color-4&amp;c5=o-color-2&amp;flip=y'); background-position: 50% 0%;"></div>
    </xpath>
</template>

<!-- ==== Text-Image ===== -->
<template id="s_text_image" inherit_id="website.s_text_image" name="Paptic s_text_image">
    <xpath expr="//section" position="attributes">
        <attribute name="class" add="pb88 o_cc o_cc3" remove="pb80" separator=" "/>
    </xpath>
    <xpath expr="//img" position="attributes">
        <attribute name="src">/web_editor/shape/theme_paptic/s_text_image.svg?c1=o-color-1</attribute>
    </xpath>
    <xpath expr="//h2" position="replace" mode="inner">
        <font style="background-image: linear-gradient(135deg, var(--o-color-1) 0%, var(--o-color-3) 100%);" class="text-gradient">A Section Subtitle</font>
    </xpath>
</template>

<!-- ==== Showcase ===== -->
<template id="s_showcase" inherit_id="website.s_showcase" name="Paptic s_showcase">
    <xpath expr="//i[hasclass('s_showcase_icon')]" position="attributes">
        <attribute name="class" add="bg-o-color-1" remove="bg-o-color-3" separator=" "/>
    </xpath>
    <xpath expr="(//i[hasclass('s_showcase_icon')])[2]" position="attributes">
        <attribute name="class" add="bg-o-color-1" remove="bg-o-color-3" separator=" "/>
    </xpath>
    <xpath expr="(//i[hasclass('s_showcase_icon')])[3]" position="attributes">
        <attribute name="class" add="bg-o-color-1" remove="bg-o-color-3" separator=" "/>
    </xpath>
</template>

<!-- ==== Title ===== -->
<template id="s_title" inherit_id="website.s_title" name="Paptic s_title">
    <xpath expr="//section" position="attributes">
        <attribute name="class" add="pt96 pb80" remove="pt40 pb40" separator=" "/>
    </xpath>
     <xpath expr="//h2" position="replace" mode="inner">
        Unique experiences.
    </xpath>
</template>

<!-- ======== QUOTES ======== -->
 <template id="s_quotes_carousel" inherit_id="website.s_quotes_carousel" name="Paptic s_quotes_carousel">
    <!-- Remove preset color -->
    <xpath expr="//section/div" position="attributes">
        <attribute name="class" remove="o_cc o_cc2" separator=" "/>
    </xpath>
    <!-- Assign slide3 as 'active' and move it in first position -->
    <xpath expr="//div[hasclass('carousel-inner')]/div" position="attributes">
        <attribute name="class" remove="active" separator=" "/>
    </xpath>
    <xpath expr="//div[hasclass('carousel-inner')]/div[3]" position="attributes">
        <attribute name="class" add="active" separator=" "/>
    </xpath>
    <xpath expr="//div[hasclass('carousel-inner')]/div" position="before">
        <xpath expr="//div[hasclass('carousel-inner')]/div[3]" position="move"/>
    </xpath>

    <!-- Refine slide 3 (ex slide 2) background position -->
    <xpath expr="//div[hasclass('carousel-inner')]/div[3]" position="attributes">
        <attribute name="style" add="background-position: 0% 17.3252%;" remove=" background-position: 50% 50%" separator=";"/>
    </xpath>
</template>

<!-- ======== CAROUSEL ======== -->
 <template id="s_carousel" inherit_id="website.s_carousel" name="Paptic s_carousel">
    <!-- Assign slide2 as 'active' and move it in first position -->
    <xpath expr="//div[hasclass('carousel-inner')]/div" position="attributes">
        <attribute name="class" remove="active" separator=" "/>
    </xpath>
    <xpath expr="//div[hasclass('carousel-inner')]/div[2]" position="attributes">
        <attribute name="class" add="active" separator=" "/>
    </xpath>
    <xpath expr="//div[hasclass('carousel-inner')]/div" position="before">
        <xpath expr="//div[hasclass('carousel-inner')]/div[2]" position="move"/>
    </xpath>
</template>

<!-- ==== References ===== -->
<template id="s_references" inherit_id="website.s_references" name="Paptic s_references">
    <xpath expr="//section" position="attributes">
        <attribute name="class" add="o_cc o_cc1" separator=" "/>
    </xpath>

    <xpath expr="//h2" position="replace"/>
    <xpath expr="//p" position="replace"/>
</template>

<!-- ==== Three Columns ===== -->
<template id="s_three_columns" inherit_id="website.s_three_columns" name="Paptic s_three_columns">
    <xpath expr="//section" position="attributes">
        <attribute name="class" remove="pt32 pb32 o_cc2" add="pt120 pb120 o_cc3" separator=" "/>
    </xpath>
    <xpath expr="//div[hasclass('row')]" position="before">
        <h3 style="text-align: center;"><font style="background-image: linear-gradient(135deg, var(--o-color-1) 0%, var(--o-color-3) 100%);" class="text-gradient">SUCCESS STORIES</font></h3>
        <p>&#160;</p>
    </xpath>

    <!-- Card #1 -->
    <xpath expr="//div[hasclass('card')]" position="attributes">
        <attribute name="style" add="border-width: 0px !important; box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.05) !important;" separator=";"/>
    </xpath>
    <!-- Card #1 - Title & text -->
    <xpath expr="//h3[hasclass('card-title')]" position="replace" mode="inner">
        HeyNosf Inc. Digital Transformation
    </xpath>
    <xpath expr="//p[hasclass('card-text')]" position="replace" mode="inner">
        HeyNosf Inc. is a communication agency that was founded in 2006, by Jean-Louis Dewinter. He always had a strong interest in languages and decided to create a company reflecting his own interests.
    </xpath>
    <!-- Card #1 - Image -->
    <xpath expr="//img[hasclass('card-img-top')]" position="attributes">
        <attribute name="style">padding: 8px !important;</attribute>
    </xpath>

    <!-- Card #2 -->
    <xpath expr="(//div[hasclass('card')])[2]" position="attributes">
        <attribute name="style" add="border-width: 0px !important; box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.05) !important;" separator=";"/>
    </xpath>
    <!-- Card #2 - Title & text -->
    <xpath expr="(//h3[hasclass('card-title')])[2]" position="replace" mode="inner">
        Fallanzy Integration Explained
    </xpath>
    <xpath expr="(//p[hasclass('card-text')])[2]" position="replace" mode="inner">
        Fallanzy has been active in the workspace design and ergonomics consulting business for over 20 years. Discover how we answered to the challenges of this company.
    </xpath>
    <!-- Card #2 - Image -->
    <xpath expr="(//img[hasclass('card-img-top')])[2]" position="attributes">
        <attribute name="style">padding: 8px !important;</attribute>
    </xpath>

    <!-- Card #3 -->
    <xpath expr="(//div[hasclass('card')])[3]" position="attributes">
        <attribute name="style" add="border-width: 0px !important; box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.05) !important;" separator=";"/>
    </xpath>
    <!-- Card #3 - Title & text -->
    <xpath expr="(//h3[hasclass('card-title')])[3]" position="replace" mode="inner">
        Hotels Improvement Study
    </xpath>
    <xpath expr="(//p[hasclass('card-text')])[3]" position="replace" mode="inner">
        Our solution is suitable for Hotels as well. We help management to optimize their time and employee to be more efficient and more productive. Discover our study.
    </xpath>
    <!-- Card #3 - Image -->
    <xpath expr="(//img[hasclass('card-img-top')])[3]" position="attributes">
        <attribute name="style">padding: 8px !important;</attribute>
    </xpath>
</template>

<template id="configurator_s_three_columns" inherit_id="website.configurator_s_three_columns" name="Paptic s_three_columns">
    <xpath expr="//section" position="attributes">
        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/02_001","flip":[]}</attribute>
    </xpath>
    <xpath expr="//section/div" position="before">
        <div class="o_we_shape o_web_editor_Origins_02_001"></div>
    </xpath>
</template>

<!-- ==== Picture ===== -->
<template id="s_picture" inherit_id="website.s_picture" name="Paptic s_picture">
    <xpath expr="//section" position="attributes">
        <attribute name="class" add="pt72 o_cc1" remove="pt64" separator=" "/>
    </xpath>
    <xpath expr="//img" position="attributes">
        <attribute name="src">/web_editor/shape/theme_paptic/s_picture.svg?c1=o-color-1</attribute>
    </xpath>
</template>

<!-- ==== Comparisons ===== -->
<template id="s_comparisons" inherit_id="website.s_comparisons" name="Paptic s_comparisons">
    <xpath expr="//section" position="attributes">
        <attribute name="data-oe-shape-data">{"shape":"web_editor/Floats/03","flip":[]}</attribute>
    </xpath>
    <!-- Shape -->
    <xpath expr="//div[hasclass('container')]" position="before">
        <div class="o_we_shape o_web_editor_Floats_03"/>
    </xpath>
</template>

<!-- ==== Call to action ===== -->
<template id="s_call_to_action" inherit_id="website.s_call_to_action" name="Paptic s_call_to_action">
    <xpath expr="//section" position="attributes">
        <attribute name="class" add="pt120 pb120 o_cc1" remove="pt64 pb64 o_cc5" separator=" "/>
    </xpath>
    <!-- Title -->
    <xpath expr="//h3" position="replace" mode="inner">
        50,000+ companies run Paptic to grow their businesses.
    </xpath>
</template>

<template id="configurator_s_call_to_action" inherit_id="website.configurator_s_call_to_action" name="Paptic s_call_to_action">
    <!-- Shape option -->
    <xpath expr="//section" position="attributes">
        <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/12_001","flip":["y"]}</attribute>
    </xpath>
    <!-- Shape -->
    <xpath expr="//div[hasclass('container')]" position="before">
        <div class="o_we_shape o_web_editor_Airy_12_001" style="background-image: url('/web_editor/shape/web_editor/Airy/12_001.svg?c1=o-color-5&amp;c3=o-color-4&amp;flip=y'); background-position: 50% 100%;"/>
    </xpath>
</template>

<!-- ==== Banner ===== -->
<template id="s_banner" inherit_id="website.s_banner" name="Paptic s_banner">
    <xpath expr="//section" position="attributes">
        <attribute name="class" add="o_cc o_cc5" separator=" "/>
    </xpath>
</template>

<!-- ==== Numbers ===== -->
<template id="s_numbers" inherit_id="website.s_numbers" name="Paptic s_numbers">
    <xpath expr="//section" position="attributes">
        <attribute name="class" add="o_cc4" remove="o_cc1" separator=" "/>
        <attribute name="data-oe-shape-data">{"shape":"web_editor/Blocks/01_001","flip":[]}</attribute>
    </xpath>
    <!-- Shape -->
    <xpath expr="//div[hasclass('container')]" position="before">
        <div class="o_we_shape o_web_editor_Blocks_01_001"/>
    </xpath>
</template>

<!-- ==== Big Boxes ===== -->
<template id="s_color_blocks_2" inherit_id="website.s_color_blocks_2" name="Paptic s_color_blocks_2">
    <!-- Left column -->
    <xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
        <attribute name="class" add="o_cc3 text-center" remove="o_cc4" separator=" "/>
        <attribute name="data-oe-shape-data">{"shape":"web_editor/Blocks/03","flip":["y"]}</attribute>
    </xpath>
    <xpath expr="//div[hasclass('col-lg-6')]/h2" position="before">
        <div class="o_we_shape o_web_editor_Blocks_03" style="background-image: url('/web_editor/shape/web_editor/Blocks/03.svg?c1=o-color-1&amp;c4=o-color-4&amp;flip=y'); background-position: 50% 0%"/>
    </xpath>
    <!-- Right column -->
    <xpath expr="//div[hasclass('col-lg-6')][2]" position="attributes">
        <attribute name="class" add="o_cc3 text-center" remove="o_cc5" separator=" "/>
        <attribute name="data-oe-shape-data">{"shape":"web_editor/Blocks/03","flip":["x","y"]}</attribute>
    </xpath>
    <xpath expr="//div[hasclass('col-lg-6')][2]/h2" position="before">
        <div class="o_we_shape o_web_editor_Blocks_03" style="background-image: url('/web_editor/shape/web_editor/Blocks/03.svg?c1=o-color-1&amp;c4=o-color-4&amp;flip=xy'); background-position: 50% 0%"/>
    </xpath>
</template>

<!-- ==== Features ===== -->
<template id="s_features" inherit_id="website.s_features" name="Paptic s_features">
    <xpath expr="//div[hasclass('container')]" position="attributes">
        <attribute name="class" add="container-fluid" remove="container" separator=" "/>
    </xpath>
    <!-- Column #1 -->
    <xpath expr="//div[hasclass('col-lg-4')]" position="attributes">
        <attribute name="class" add="o_cc o_cc2" separator=" "/>
    </xpath>
    <!-- Column #2 -->
    <xpath expr="//div[hasclass('col-lg-4')][2]" position="attributes">
        <attribute name="class" add="o_cc o_cc2" separator=" "/>
    </xpath>
    <!-- Column #3 -->
    <xpath expr="//div[hasclass('col-lg-4')][3]" position="attributes">
        <attribute name="class" add="o_cc o_cc2" separator=" "/>
    </xpath>
</template>

<!-- ==== Media List ===== -->
<template id="s_media_list" inherit_id="website.s_media_list" name="Paptic s_media_list">
    <xpath expr="//section" position="attributes">
        <attribute name="class" add="o_cc3 pt80 pb80" remove="o_cc2 pt32 pb32" separator=" "/>
    </xpath>
    <!-- Container -->
    <xpath expr="//div[hasclass('container')]" position="attributes">
        <attribute name="class" add="o_container_small" remove="container" separator=" "/>
    </xpath>
    <!-- Item #1 -->
    <xpath expr="//div[hasclass('s_media_list_item')]/div" position="attributes">
        <attribute name="class" remove="o_cc o_cc1" separator=" "/>
    </xpath>
    <!-- Item #2 -->
    <xpath expr="//div[hasclass('s_media_list_item')][2]/div" position="attributes">
        <attribute name="class" remove="o_cc o_cc1" separator=" "/>
    </xpath>
    <!-- Item #3 -->
    <xpath expr="//div[hasclass('s_media_list_item')][3]/div" position="attributes">
        <attribute name="class" remove="o_cc o_cc1" separator=" "/>
    </xpath>
</template>

<!-- ==== Pricelist ===== -->
<template id="s_product_catalog" inherit_id="website.s_product_catalog" name="Paptic s_product_catalog">
    <!-- Section -->
    <xpath expr="//section" position="attributes">
        <attribute name="class" add="o_cc o_cc3" separator=" "/>
    </xpath>
    <!-- Filter -->
    <xpath expr="//div[hasclass('o_we_bg_filter')]" position="attributes">
        <attribute name="class" remove="bg-white-85" separator=" "/>
        <attribute name="style">background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(178, 255, 218, 1) 100%);</attribute>
    </xpath>
</template>

</odoo>