[ADD] Website: Structure blocks

task-3733822

closes odoo/documentation#8271

X-original-commit: 158a1dee79
Signed-off-by: Xavier Platteau (xpl) <xpl@odoo.com>

content/applications/websites/website/web_design/building_blocks.rst

@@ -1,3 +1,5 @@
+:show-content:
+
 ===============
 Building blocks
 ===============
@@ -138,3 +140,8 @@ Click the pen icon to edit their name.
 
 .. image:: building_blocks/custom-blocks.png
    :alt: Custom section with saved building blocks
+
+.. toctree::
+   :titlesonly:
+
+   building_blocks/structure

content/applications/websites/website/web_design/building_blocks/structure.rst

@@ -0,0 +1,60 @@
+================
+Structure blocks
+================
+
+The website configurator provides a range of :guilabel:`Structure` :doc:`building blocks
+<../building_blocks>` to design your website's layout, including headings, images, and text.
+
+To add a block to a web page, click :guilabel:`Edit`, select a block from the :guilabel:`Structure`
+section, and drag and drop it into the page.
+
+.. image:: structure/structure-blocks.png
+   :alt: Dragging and dropping a building block into a page
+
+Below are presented two types of structure blocks: :ref:`Banner <structure/banner>` and
+:ref:`Masonry <structure/masonry>`.
+
+.. _structure/banner:
+
+Banner block
+------------
+
+The :guilabel:`Banner` block combines a title, text, images, and a call to action button, making it
+suitable for placement at the top of a website.
+
+.. image:: structure/default-image-content.png
+   :alt: The default banner block
+
+Call to action
+~~~~~~~~~~~~~~
+
+The call to action button encourages visitors to take a specific action, for example, consulting
+your shop, downloading a file, or making an appointment.
+
+.. image:: structure/call-to-action.png
+   :alt: Selecting the call to action button
+
+To change the button's link, select it and click the :guilabel:`Edit Link` icon. Additional
+customization options are available in the :guilabel:`Inline Text` section.
+
+.. image:: structure/inline-text.png
+   :alt: Configuring the call to action button
+
+.. _structure/masonry:
+
+Masonry block
+-------------
+
+The :guilabel:`Masonry` building block offers a range of templates that associate image and text
+bricks. To change the default template, go to the :guilabel:`Customize` tab, click
+:guilabel:`Template` and select one.
+
+.. image:: structure/masonry-template.png
+   :alt: Selecting a masonry building block template
+
+.. tip::
+   The :guilabel:`Masonry` building block allows you to add text on top of images. To do so, go to
+   the :guilabel:`Customize` tab, scroll to :guilabel:`Add Elements`, and click :guilabel:`Text`.
+
+   .. image:: structure/masonry-text-box.png
+      :alt: Adding text on top of an image