design-themes/theme_common/views/s_animated_boxes.xml

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <!-- Snippet Body -->
    <template name="Animated Boxes" id="s_animated_boxes">
        <div class="s_animated_boxes row">
            <div class="col-md-4 col-lg-4 item bg-alpha" data-name="Box item">
                <div class="v-align">
                    <h3>Box title</h3>
                    <p>Box Description</p>
                    <div class="oe_structure"/>
                </div>
                <div class="slide bg-delta" data-name="Inner Slide">
                    <div class="v-align">
                        <h3>Slide title</h3>
                        <p>Slide Description</p>
                        <a class="btn btn-primary"><strong>My great button</strong></a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-lg-4 item bg-beta" data-name="Box item">
                <div class="v-align">
                    <h3>Box title</h3>
                    <p>Box Description</p>
                    <div class="oe_structure"/>
                </div>
                <div class="slide bg-delta" data-name="Inner Slide">
                    <div class="v-align">
                        <h3>Slide title</h3>
                        <p>Slide Description</p>
                        <a class="btn btn-primary"><strong>My great button</strong></a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-lg-4 item bg-gamma" data-name="Box item">
                <div class="v-align">
                    <h3>Box title</h3>
                    <p>Box Description</p>
                    <div class="oe_structure"/>
                </div>
                <div class="slide bg-delta" data-name="Inner Slide">
                    <div class="v-align">
                        <h3>Slide title</h3>
                        <p>Slide Description</p>
                        <a class="btn btn-primary"><strong>My great button</strong></a>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <!-- Snippet options -->
    <template id="s_animated_boxes_options" inherit_id="website.snippet_options">
        <xpath expr="//div[@data-js='background']" position="before">
            <div data-js="s_animated_boxes" data-selector=".s_animated_boxes .item">
                <a href="#" class="dropdown-item createSlide" data-create_slide="" data-no-preview="true">
                    <i class="fa fa-plus-circle"/>Add Slide
                </a>
                <a href="#" class="dropdown-item deleteSlide" data-delete_slide="" data-no-preview="true">
                    <i class="fa fa-trash-o"/>Delete Slide
                </a>
            </div>
        </xpath>
        <xpath expr="//*[@id='so_snippet_addition']" position="attributes">
            <attribute name="data-selector" add=".s_animated_boxes" separator=","/>
        </xpath>
        <xpath expr="//div[@data-js='background']" position="attributes">
            <attribute name="data-selector" add=".s_animated_boxes .item, .s_animated_boxes .slide"/>
        </xpath>
        <xpath expr="//div[@data-js='background_position']" position="attributes">
            <attribute name="data-selector" add=".s_animated_boxes .item, .s_animated_boxes .slide"/>
        </xpath>
        <xpath expr="//div[@id='so_main_colorpicker']" position="attributes">
            <attribute name="data-selector" add=".s_animated_boxes .item, .s_animated_boxes .slide"/>
        </xpath>
    </template>
</odoo>