[ADD] Website: inner content building blocks

taskid-3733888

closes odoo/documentation#8196

Signed-off-by: Xavier Platteau (xpl) <xpl@odoo.com>

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

@@ -147,3 +147,4 @@ Click the pen icon to edit their name.
    :titlesonly:
 
    building_blocks/structure
+   building_blocks/inner_content

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

@@ -0,0 +1,30 @@
+=============
+Inner content
+=============
+
+The :guilabel:`Inner content` :doc:`building blocks <../building_blocks>` allow you to add elements
+such as videos, images, and :ref:`social media buttons <inner_content/social_media>`, into
+pre-existing blocks.
+
+.. note::
+   To add a building block, click :guilabel:`Edit`, select the desired building block under the
+   :guilabel:`Blocks` tab, and drag and drop it onto the page. To access its settings, click it and
+   go to the :guilabel:`Customize` tab, where the available options depend on the type of block
+   selected.
+
+.. _inner_content/social_media:
+
+Social media
+============
+
+The :guilabel:`Social Media` block inserts clickable buttons leading to any URL. The button
+automatically displays the icon of several major social networking services.
+
+.. image:: inner_content/social-media-block.png
+   :alt: The social media building block and its settings
+
+.. tip::
+   If an icon is not available, it is possible to edit the default icon by selecting it, clicking
+   the :guilabel:`Replace` button found under the :guilabel:`Customize` tab's :guilabel:`Icon`
+   section, and either selecting one of the available :guilabel:`Icons` or clicking the
+   :guilabel:`Images` tab and uploading an image or adding its URL.

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

@@ -1,23 +1,23 @@
-================
-Structure blocks
-================
+=========
+Structure
+=========
 
 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>`.
 
+.. note::
+   To add a building block, click :guilabel:`Edit`, select the desired building block under the
+   :guilabel:`Blocks` tab, and drag and drop it onto the page. To access its settings, click it and
+   go to the :guilabel:`Customize` tab, where the available options depend on the type of block
+   selected.
+
 .. _structure/banner:
 
-Banner block
-------------
+Banner
+------
 
 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.
@@ -42,19 +42,19 @@ customization options are available in the :guilabel:`Inline Text` section.
 
 .. _structure/masonry:
 
-Masonry block
--------------
+Masonry
+-------
 
-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.
+The :guilabel:`Masonry` 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`.
+   The :guilabel:`Masonry` 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