In order to build a website page, you can drag-and-drop different "snippets". Odoo comes with many, many snippets OOTB that can cover 90% of what you want to do (like Odoo usually does). Being able to complete that last 10% is where the development work begins!

The basic building block of a snippet is the template. It typically looks something like this. Let's call our example snippet "Gumbo"

<template id="gumbo_template_id" name="Gumbo">
    <section class="gumbo_selector">
        <div class="container">
            <!-- Snippet content goes here -->
            <div class="row">
               <h3>Gumbo is Tasty</h3>
            </div>
        </div>
    </section>
</template>

Odoo has a template with ID website.snippets. By default, this contains all the existing Odoo Snippets that come OOTB. It appears on the right hand side when you click "Edit" on the web page you are building:

By extending this template, it is possible to add links to snippets, such that when you drag and drop them, your snippet template is rendered onto the screen. This is how these new snippets could be added to this menu item as shown in the orange rectangle.

You do this like extending any Odoo template:

<template id="gumbo_location" inherit_id="website.snippets" priority="8">
    <xpath expr="//div[@id='snippet_effect']//t[@t-snippet][last()]"  position="after">
        <t 
            t-snippet="my_module.gumbo_template_id" 
            t-thumbnail="/my_module/static/img/gumbo.png"
        />
    </xpath>
</template>

You can use the special t-snippet call to pass in your snippet template ID, and Odoo takes care of the rest. There are other options you can pass in such as a thumbnail image (can be png, svg etc).