diff --git a/content/applications/websites/website/reporting/link_tracker.rst b/content/applications/websites/website/reporting/link_tracker.rst index 4ca725933..cd4316c60 100644 --- a/content/applications/websites/website/reporting/link_tracker.rst +++ b/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 ` 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 ` section, you can +choose :guilabel:`Visible for` or :guilabel:`Hidden for` and select the record you want from the +dropdown list. Tracked links overview ====================== diff --git a/content/applications/websites/website/web_design/building_blocks.rst b/content/applications/websites/website/web_design/building_blocks.rst index d0d86c7d9..ae433c609 100644 --- a/content/applications/websites/website/web_design/building_blocks.rst +++ b/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 `, :doc:`Features `, +:doc:`Dynamic Content `, and +:doc:`Inner Content `. .. seealso:: `Odoo Tutorial: Design your first webpage `_ @@ -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 +` or :ref:`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`. + +.. _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 ` and :ref:`Visibility ` + features in the :guilabel:`Customize` tab of the website editor. .. toctree:: :titlesonly: diff --git a/content/applications/websites/website/web_design/building_blocks/cols.png b/content/applications/websites/website/web_design/building_blocks/cols.png new file mode 100644 index 000000000..0a25f85e9 Binary files /dev/null and b/content/applications/websites/website/web_design/building_blocks/cols.png differ diff --git a/content/applications/websites/website/web_design/building_blocks/reorder-elements.png b/content/applications/websites/website/web_design/building_blocks/reorder-elements.png new file mode 100644 index 000000000..8c6f73432 Binary files /dev/null and b/content/applications/websites/website/web_design/building_blocks/reorder-elements.png differ