[ADD] wesbite: responsiveness

taskid-3725615

closes odoo/documentation#9929

X-original-commit: 1bad5cebaf
Signed-off-by: Audrey Vandromme (auva) <auva@odoo.com>
Signed-off-by: Donatienne Pirlot (dopi) <dopi@odoo.com>

content/applications/websites/website/reporting/link_tracker.rst

@@ -49,9 +49,9 @@ click :guilabel:`Conditionally`.
 .. image:: link_tracker/conditional-visibility.png
    :alt: Use the conditional visibility to display site elements to specific audiences.
 
-For each parameter available in the :ref:`Visibility <blocks/visibility>` section, you can choose
-:guilabel:`Visible for` or :guilabel:`Hidden for` and select the record you want from the dropdown
-list.
+For each parameter available in the :ref:`Visibility <building_blocks/visibility>` section, you can
+choose :guilabel:`Visible for` or :guilabel:`Hidden for` and select the record you want from the
+dropdown list.
 
 Tracked links overview
 ======================

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

@@ -5,8 +5,10 @@ Building blocks
 ===============
 
 Building blocks let you design your website quickly by dragging and dropping them onto your web
-pages. Four types of building blocks are available depending on their use: :guilabel:`Structure`,
-:guilabel:`Features`, :guilabel:`Dynamic Content`, and :guilabel:`Inner Content`.
+pages. Four types of building blocks are available depending on their use:
+:doc:`Structure <building_blocks/structure>`, :doc:`Features <building_blocks/features>`,
+:doc:`Dynamic Content <building_blocks/dynamic_content>`, and
+:doc:`Inner Content <building_blocks/inner_content>`.
 
 .. seealso::
    `Odoo Tutorial: Design your first webpage <https://www.odoo.com/slides/slide/design-your-first-web-page-1667?fullscreen=1>`_
@@ -36,9 +38,12 @@ configuration.
 Layout: grid and columns
 ========================
 
-You can choose between two layout styles for most building blocks: grid or columns (cols). To
-change the default layout, go to the :guilabel:`Customize` tab. Under the :guilabel:`Banner`
-section, select :guilabel:`Grid` or :guilabel:`Cols` as the :guilabel:`Layout`.
+You can choose between two layout styles for most building blocks: :ref:`grid
+<building_blocks/grid>` or :ref:`columns (cols) <building_blocks/cols>`. To change the default
+layout, go to the :guilabel:`Customize` tab. Under the :guilabel:`Banner` section, select
+:guilabel:`Grid` or :guilabel:`Cols` as the :guilabel:`Layout`.
+
+.. _building_blocks/grid:
 
 Grid
 ----
@@ -55,18 +60,21 @@ dragging and dropping them.
    .. image:: building_blocks/superimpose-images-to-text.png
       :alt: Positioning an image behind text
 
+.. _building_blocks/cols:
+
 Cols
 ----
 
 Choosing the :guilabel:`Cols` layout allows you to determine the number of elements per line within
-the block.
+the block. To do so, select the block to modify, click the :guilabel:`Cols` :guilabel:`Layout`, and
+adjust the number.
 
-.. image:: building_blocks/elements-per-line.png
-   :alt: Setting the number columns
+By default, **on mobile devices**, one element is visible per line to ensure that content remains
+easily readable and accessible on smaller screens. To adjust the value, click the :icon:`fa-mobile`
+(:guilabel:`mobile icon`) at the top of the website editor and adapt the number of columns.
 
-.. note::
-   On mobile devices, only one element per column is used by default for better visibility. You can
-   adjust this value by using the :guilabel:`Mobile Preview` mode.
+.. image:: building_blocks/cols.png
+   :alt: Adjust the number of images per line on mobile view.
 
 Duplicating a building block
 ============================
@@ -88,7 +96,23 @@ You can also use the drag-and-drop icon to move a block manually.
 .. image:: building_blocks/reordering-blocks.png
    :alt: Reordering building blocks
 
-.. _blocks/visibility:
+Saving a custom building block
+==============================
+
+You can save a customized building block and reuse it elsewhere. To do so, select it, navigate to
+the :guilabel:`Customize` tab, and click the :icon:`fa-floppy-o` (:guilabel:`floppy disk`) icon to
+save it.
+
+.. image:: building_blocks/saving-custom-block.png
+   :alt: Saving a building block
+
+Saved building blocks are available in the :guilabel:`Custom` section of the :guilabel:`Blocks` tab.
+Click the :icon:`fa-pencil` (:guilabel:`pen`) icon to edit their name.
+
+.. image:: building_blocks/custom-blocks.png
+   :alt: Custom section with saved building blocks
+
+.. _building_blocks/visibility:
 
 Visibility
 ==========
@@ -104,8 +128,8 @@ hide, and in the :guilabel:`Customize` tab, scroll down to :guilabel:`Visibility
    :alt: Click the "show/hide on mobile" icons to show or hide some elements on mobile.
 
 .. tip::
-   Click the phone icon at the top of the configurator to preview how your website would look on a
-   mobile device.
+   Click the :icon:`fa-mobile` (:guilabel:`mobile`) icon at the top of the configurator to preview
+   how your website would look on a mobile device.
 
    .. image:: building_blocks/phone-icon.png
       :alt: Mobile phone preview icon
@@ -128,20 +152,17 @@ Depending on the visibility settings, some elements can become hidden from your
 make a building block visible again, go to the :guilabel:`Invisible Elements` section at the bottom
 of the configurator and select a building block.
 
-Saving a custom building block
-==============================
+Mobile view customization
+=========================
 
-You can save a customized building block and reuse it elsewhere. To do so, select it, navigate to
-the :guilabel:`Customize` tab, and click the floppy disk icon to save it.
+You can customize building block elements for the mobile view without impacting the desktop view.
+To do so, open the website editor, click the :icon:`fa-mobile` (:guilabel:`mobile`) icon at the top,
+and select the building block element. Then, you can:
 
-.. image:: building_blocks/saving-custom-block.png
-   :alt: Saving a building block
-
-Saved building blocks are available in the :guilabel:`Custom` section of the :guilabel:`Blocks` tab.
-Click the pen icon to edit their name.
-
-.. image:: building_blocks/custom-blocks.png
-   :alt: Custom section with saved building blocks
+- reorder the elements by clicking the :icon:`fa-angle-left` :icon:`fa-angle-right`
+  (:guilabel:`left/right arrow`) icons;
+- edit the :ref:`Cols <building_blocks/cols>` and :ref:`Visibility <building_blocks/visibility>`
+  features in the :guilabel:`Customize` tab of the website editor.
 
 .. toctree::
    :titlesonly: