design-themes/theme_kiddo/views/snippets/s_three_columns.xml

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

<template id="s_three_columns" inherit_id="website.s_three_columns">
    <!-- Section -->
    <xpath expr="//section" position="attributes">
        <attribute name="class" add="o_cc1 pt112 pb0" remove="o_cc2 pt32 pb32" separator=" "/>
    </xpath>

    <!-- Column n°1 -->
    <xpath expr="//div[hasclass('card')]" position="attributes">
        <attribute name="style">border-width: 0px !important;</attribute>
    </xpath>
    <xpath expr="//img" position="attributes">
        <attribute name="src">/web_editor/image_shape/website.s_three_columns_default_image_1/web_editor/solid/solid_blob_1.svg?c2=o-color-1</attribute>
        <attribute name="data-shape">web_editor/solid/solid_blob_1</attribute>
        <attribute name="data-original-mimetype">image/jpeg</attribute>
        <attribute name="data-file-name">s_three_columns_default_image_1.svg</attribute>
        <attribute name="data-shape-colors">;o-color-1;;;</attribute>
    </xpath>
    <!-- Column n°1 - Title -->
    <xpath expr="//h5" position="attributes">
        <attribute name="style">text-align: center;</attribute>
    </xpath>
    <xpath expr="//h5" position="replace" mode="inner">
        <br/>
        Our mission
    </xpath>
    <!-- Column n°1 - Add separator -->
    <xpath expr="//h5" position="after">
        <div class="s_hr pb32 pt8" data-snippet="s_hr" data-name="Separator">
            <hr class="w-25 mx-auto" style="border-top: 5px dotted var(--o-color-2) !important;"/>
        </div>
    </xpath>
    <!-- Column n°1 - Paragraph -->
    <xpath expr="//p" position="attributes">
        <attribute name="style">text-align: center;</attribute>
    </xpath>
    <xpath expr="//p" position="replace" mode="inner">
        Our aim is to make the early years of your child’s life as enjoyable, rewarding and positive as possible.
    </xpath>
    <!-- Column n°1 - Image -->
    <xpath expr="//figure" position="attributes">
        <attribute name="class" add="ratio-1x1" remove="ratio-16x9" separator=" "/>
    </xpath>

    <!-- Column n°2 -->
    <xpath expr="(//div[hasclass('card')])[2]" position="attributes">
        <attribute name="style">border-width: 0px !important;</attribute>
    </xpath>
    <xpath expr="(//img)[2]" position="attributes">
        <attribute name="src">/web_editor/image_shape/website.s_three_columns_default_image_2/web_editor/composition/composition_organic_line.svg?c2=o-color-3</attribute>
        <attribute name="data-shape">web_editor/composition/composition_organic_line</attribute>
        <attribute name="data-original-mimetype">image/jpeg</attribute>
        <attribute name="data-file-name">s_three_columns_default_image_2.svg</attribute>
        <attribute name="data-shape-colors">;o-color-3;;;</attribute>
    </xpath>
    <!-- Column n°2 - Title -->
    <xpath expr="(//h5)[2]" position="attributes">
        <attribute name="style">text-align: center;</attribute>
    </xpath>
    <xpath expr="(//h5)[2]" position="replace" mode="inner">
        <br/>
        For every kid
    </xpath>
    <!-- Column n°2 - Add separator -->
    <xpath expr="(//h5)[2]" position="after">
        <div class="s_hr pb32 pt8" data-snippet="s_hr" data-name="Separator">
            <hr class="w-25 mx-auto" style="border-top: 5px dotted var(--o-color-1) !important;"/>
        </div>
    </xpath>
    <!-- Column n°2 - Paragraph -->
    <xpath expr="(//p)[2]" position="attributes">
        <attribute name="style">text-align: center;</attribute>
    </xpath>
    <xpath expr="(//p)[2]" position="replace" mode="inner">
        All activities are planned to meet each child’s individual needs. This approach will help your child to develop to the best of their ability.
    </xpath>
    <!-- Column n°2 - Image -->
    <xpath expr="(//figure)[2]" position="attributes">
        <attribute name="class" add="ratio-1x1" remove="ratio-16x9" separator=" "/>
    </xpath>

    <!-- Column n°3 -->
    <xpath expr="(//div[hasclass('card')])[3]" position="attributes">
        <attribute name="style">border-width: 0px !important;</attribute>
    </xpath>
    <xpath expr="(//img)[3]" position="attributes">
        <attribute name="src">/web_editor/image_shape/website.s_three_columns_default_image_3/web_editor/solid/solid_blob_3.svg?c5=o-color-2</attribute>
        <attribute name="data-shape">web_editor/solid/solid_blob_3</attribute>
        <attribute name="data-original-mimetype">image/jpeg</attribute>
        <attribute name="data-file-name">s_three_columns_default_image_3.svg</attribute>
        <attribute name="data-shape-colors">;;;;o-color-2</attribute>
    </xpath>
    <!-- Column n°3 - Title -->
    <xpath expr="(//h5)[3]" position="attributes">
        <attribute name="style">text-align: center;</attribute>
    </xpath>
    <xpath expr="(//h5)[3]" position="replace" mode="inner">
        <br/>
        Open-door policy
    </xpath>
    <!-- Column n°3 - Add separator -->
    <xpath expr="(//h5)[3]" position="after">
        <div class="s_hr pb32 pt8" data-snippet="s_hr" data-name="Separator">
            <hr class="w-25 mx-auto" style="border-top: 5px dotted var(--o-color-2) !important;"/>
        </div>
    </xpath>
    <!-- Column n°3 - Paragraph -->
    <xpath expr="(//p)[3]" position="attributes">
        <attribute name="style">text-align: center;</attribute>
    </xpath>
    <xpath expr="(//p)[3]" position="replace" mode="inner">
        You are welcome to come and see the nursery and meet the team at any time convenient to you.
    </xpath>
    <!-- Column n°3 - Image -->
    <xpath expr="(//figure)[3]" position="attributes">
        <attribute name="class" add="ratio-1x1" remove="ratio-16x9" separator=" "/>
    </xpath>
</template>

<template id="configurator_s_three_columns" inherit_id="website.configurator_s_three_columns">
    <!-- Shape option -->
    <xpath expr="//section" position="attributes">
        <attribute name="data-oe-shape-data">{'shape':'web_editor/Connections/06','colors':{'c5':'o-color-3'},'flip':['y'],'showOnMobile':true,'shapeAnimationSpeed':'0'}</attribute>
    </xpath>

    <!-- Shape -->
    <xpath expr="//div[hasclass('container')]" position="before">
        <div class="o_we_shape o_web_editor_Connections_06 o_shape_show_mobile" style="background-image: url('/web_editor/shape/web_editor/Connections/06.svg?c5=o-color-3&amp;flip=y'); background-position: 50% 0%;"/>
    </xpath>
</template>

</odoo>