[IMP] website: update building blocks

taskid-4644908

closes odoo/documentation#13568

Signed-off-by: Audrey Vandromme (auva) <auva@odoo.com>

content/applications/sales/crm/acquire_leads/opportunities_form.rst

@@ -115,4 +115,4 @@ record.
    - :doc:`../pipeline/manage_sales_teams`
    - :doc:`convert`
    - :doc:`../track_leads/lead_scoring`
-   - :ref:`Website forms <website/dynamic_content/form>`
+   - :ref:`Website forms <website/building_blocks/form>`

content/applications/services/project/tasks/task_creation.rst

@@ -109,17 +109,17 @@ Creating tasks from a website form
 If you have the Website app installed in your database, you can configure any form on your
 website to trigger the creation of tasks in a project.
 
-#. Go to the website page where you wish to add the the form and
-   :ref:`add the Form building block <websites/website/web_design/building_blocks>`.
+#. Go to the website page where you wish to add the form and :doc:`add the Form building block
+   </applications/websites/website/web_design/building_blocks>`.
 #. In the website editor, edit the following fields:
 
    - :guilabel:`Action`: select :guilabel:`Create a Task`.
    - :guilabel:`Project`: choose the project that you want the new tasks to be created in.
 
-#. :ref:`Customize the form <website/dynamic_content/form>`.
+#. :ref:`Customize the form <website/building_blocks/form>`.
 
 When the form is submitted, it automatically creates a project task. The task's content is defined
 by the form's corresponding fields.
 
 .. seealso::
-   :doc:`Dynamic website content <../../../websites/website/web_design/building_blocks/dynamic_content>`
+   :ref:`Website forms <website/building_blocks/form>`

content/applications/websites/ecommerce/checkout.rst

@@ -257,7 +257,7 @@ Extra info
 You can add an :guilabel:`Extra Info` step in the checkout process to collect additional customer
 information through an online form, which is then included in the :ref:`sales order
 <handling/sales>`. To do so, :ref:`enable <ecommerce/checkout/customize_steps>` the :guilabel:`Extra
-Step` option in the website editor. The form can be :ref:`customized <website/dynamic_content/form>`
+Step` option in the website editor. The form can be :ref:`customized <website/building_blocks/form>`
 as needed.
 
 .. tip::

content/applications/websites/ecommerce/products.rst

@@ -257,6 +257,27 @@ and select the relevant media. In the :guilabel:`Customize` tab, use the followi
 .. note::
    Images must be in PNG or JPG format and with a minimum size of 1024x1024 to trigger the zoom.
 
+.. _ecommerce/products/products-block:
+
+Products block
+==============
+
+The :guilabel:`Products` :doc:`building block <../website/web_design/building_blocks>` is used to
+display a selection of products sold on your website.
+
+.. image:: products/products-block.png
+   :alt: Example of a products block
+
+By default, the block displays the :guilabel:`Newest Products`. To change which products are shown,
+go to the :guilabel:`Customize` tab's :guilabel:`Products` section and set the :guilabel:`Filter`
+field to :guilabel:`Recently Sold Products` or :guilabel:`Recently Viewed Products`.
+
+In addition, it is possible to display products from a specific category only using the
+:guilabel:`Category` field.
+
+You can also filter products by :guilabel:`Tags`, include :guilabel:`Variants`, and adjust the
+display by selecting a different :guilabel:`Template`.
+
 .. _ecommerce/products/product-variants:
 
 Product variants

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

@@ -4,172 +4,262 @@
 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:
-: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>`.
+You can design your website by :ref:`dragging and dropping building blocks
+<website/building_blocks/add>`, then :ref:`editing them <website/building_blocks/edit>` to fit your
+content and layout needs.
 
 .. seealso::
-   `Odoo Tutorial: Design your first webpage <https://www.odoo.com/slides/slide/design-your-website-images-and-motion-6931?fullscreen=1>`_
+   `Odoo Tutorial: Design your website: text and colors <https://www.odoo.com/slides/slide/design-your-website-text-and-colors-6930?fullscreen=1>`_
 
-.. _websites/website/web_design/building_blocks:
+.. _website/building_blocks/add:
 
-Adding a building block
-=======================
+Add a building block
+====================
 
-To add a building block to your website page, click :guilabel:`Edit`, select the desired building
-block, and drag and drop it to your page. You can add as many blocks as needed.
+To add a block to a :doc:`website page <../pages>`, access the page, click :guilabel:`Edit`, then
+drag and drop the desired building block into the appropriate location. Two types of building blocks
+are available: :guilabel:`Categories` and :guilabel:`Inner Content`. :guilabel:`Inner Content`
+building blocks can only be added into :guilabel:`Categories` building blocks.
 
-To edit the content of a building block, click on it and go to the :guilabel:`Customize` tab, where
-available features depend on the block you selected.
+When clicking on a category block, a popup appears, allowing you to select between multiple
+templates for each category.
 
-Color preset and background
-===========================
+.. tip::
+   You can also search for a specific block in the :guilabel:`Insert a block` popup using the
+   search bar.
 
-You can customize and apply color presets to building blocks. To proceed, select a building block,
-go to the :guilabel:`Customize` tab, click the :guilabel:`Background` button, and select a
-:guilabel:`Preset`.
+  .. image:: building_blocks/insert-a-block.png
+      :alt: Pop-up block selection
 
-When you modify a color preset, all elements using it are automatically updated to match the new
-configuration.
+Once the category block is placed, you can drag and drop :guilabel:`Inner content` blocks
+within it. The :guilabel:`Inner content` blocks allow you to add elements, such as videos, images,
+social media buttons, etc., into pre-existing category blocks.
 
-.. seealso::
-   :doc:`Website themes <themes>`
+.. note::
+   Access to certain blocks requires the installation of their respective application or module
+   (e.g., eCommerce for the :guilabel:`Products` block).
 
-Layout: grid and columns
-========================
+.. example::
+   Add all your social media accounts in one place with the inner content :guilabel:`Social Media`
+   block. Toggle the switch on or off next to the desired platform and copy/paste your account URL.
 
-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`.
+   .. image:: building_blocks/social-media-inner-content.png
+      :alt: Social Media inner content block
 
-.. _building_blocks/grid:
+.. _website/building_blocks/form:
 
-Grid
+Form
 ----
 
+The :guilabel:`Form` block is used to collect information from website visitors and create records
+in your database, if applicable.
+
+.. image:: building_blocks/form-block.png
+   :alt: Example of a form block
+
+Action
+~~~~~~
+
+By default, when the form is submitted, an email containing the information entered by the visitor
+is automatically sent. Depending on the apps installed on your database, additional actions that can
+automatically create records may become available. To choose a different action, click
+:guilabel:`Edit`, click the form, navigate to the :guilabel:`Customize` tab, and select the desired
+:guilabel:`Action`:
+
+- :guilabel:`Apply for a Job` (:doc:`Recruitment </applications/hr/recruitment>`)
+- :guilabel:`Create a Customer` (:doc:`eCommerce <../../ecommerce>`)
+- :guilabel:`Create a Ticket` (:doc:`Helpdesk </applications/services/helpdesk>`)
+- :guilabel:`Create an Opportunity` (:doc:`CRM </applications/sales/crm>`)
+- :guilabel:`Subscribe to Newsletter` (:doc:`Email Marketing </applications/marketing/email_marketing>`)
+- :guilabel:`Create a Task` (:doc:`Project </applications/services/project>`)
+
+.. image:: building_blocks/inner-content-edit-form.png
+   :alt: Editing a form to change its action
+
+By default, submitting the form redirects visitors to a *Thank you* page. Use the :guilabel:`URL`
+field to send them to a different page. Alternatively, you can choose not to redirect and keep
+them on the form's page by selecting :guilabel:`Nothing` or :guilabel:`Show Message` in the
+:guilabel:`On Success` field.
+
+Fields
+~~~~~~
+
+To add a new field to the form, navigate to the :guilabel:`Customize tab` and click the
+:guilabel:`+ Field` button next to the :guilabel:`Form` or :guilabel:`Field` section. To modify the
+new (or any other) field on the form, select the field, then use the options available in the
+:guilabel:`Field` section of the :guilabel:`Customize` tab. For example, you can:
+
+- Change the field :guilabel:`Type`.
+
+  .. tip::
+     It is also possible to select an :guilabel:`Existing Field` from the database and use the data
+     it contains. The fields available depend on the selected action. Property fields added to the
+     database can also be used.
+
+  .. spoiler:: Click here to preview all field types.
+
+     .. image:: building_blocks/all-types-of-field.png
+        :alt: All types of form fields
+
+     Some fields are visually similar, but the data entered must follow a specific format.
+
+- Edit the field's :guilabel:`Label` and adapt its :guilabel:`Position`.
+- Enable a field :guilabel:`Description`. Click the default description on the form to modify it.
+- Add a :guilabel:`Placeholder` or :guilabel:`Default value`.
+- Specify if the field is :guilabel:`Required`.
+- Edit the field's :doc:`visibility <visibility>` settings.
+- Add an :ref:`animation <website/elements/animations>`.
+
+Once you have made the desired changes, click :guilabel:`Save`.
+
+.. _website/building_blocks/embed_code:
+
+Embed code
+----------
+
+Embedding code allows you to integrate content from third-party services into a page, such as videos
+from YouTube, maps from Google Maps, social media posts from Instagram, etc.
+
+After adding the block to a page, click the block, then go to the :guilabel:`Customize` tab and
+click :guilabel:`Edit`. Replace the placeholder code with your custom embed code.
+
+.. image:: building_blocks/embed-code-pop-up.png
+   :alt: Add the link to the embedded code you want to point to
+
+.. warning::
+   Do not copy/paste code you do not understand, as it could put your data at risk.
+
+.. _website/building_blocks/move_switch_delete:
+
+Move, switch, or delete a building block
+========================================
+
+Pull the turquoise borders on the block to reduce or increase the space at the top or bottom of it.
+
+Change the block order by clicking :icon:`fa-chevron-up` (:guilabel:`chevron up`) or
+:icon:`fa-chevron-down` (:guilabel:`chevron down`) and move the block on the page by clicking
+:icon:`fa-arrows` (:guilabel:`arrows`). When you have multiple :ref:`columns
+<website/building_blocks/cols>`, move a column to the left or right by clicking
+:icon:`fa-chevron-left` (:guilabel:`chevron left`) or :icon:`fa-chevron-right`
+(:guilabel:`chevron right`).
+
+To delete a block, click :icon:`fa-trash` (:guilabel:`trash`).
+
+   .. image:: building_blocks/padding-building-block.png
+      :alt: Extend margins on building block
+
+.. tip::
+   Quickly change the block category by clicking :icon:`fa-exchange` (:guilabel:`exchange`).
+
+.. _website/building_blocks/edit:
+
+Edit a building block
+=====================
+
+To edit the content of a building block, click on it and go to the :guilabel:`Customize` tab.
+Available customization options vary depending on the type of block selected.
+
+.. seealso::
+   - :doc:`Web design elements <elements>`
+   - :doc:`Visibility <visibility>`
+
+Background
+----------
+
+To modify the background of a building block, select the block, go to the :guilabel:`Customize` tab,
+and click the color dot or another :guilabel:`Background` option. You can change the
+color and/or add an image, video, and/or shape. Once you've selected a shape, new fields appear to
+allow you to customize the shape.
+
+.. tip::
+   - Position an element (image, text, etc.) behind or in front of another one by using the
+     :guilabel:`Send to back` or :guilabel:`Bring to front` icons.
+
+     .. image:: building_blocks/change-block-position.png
+        :alt: Change block position
+
+   - To resize a block, click and drag the dots around its edges to adjust it as needed.
+
+     .. image:: building_blocks/adapt-block-size.png
+       :alt: Adapt block size
+
+.. seealso::
+   :doc:`General theme <themes>`
+
+Layout: grid and columns
+------------------------
+
+For most building blocks, you can choose between two layout styles: :ref:`grid
+<website/building_blocks/grid>` or :ref:`columns (cols) <website/building_blocks/cols>`. To change
+the default layout style, click the block, go to the :guilabel:`Customize` tab, and set the
+:guilabel:`Layout` field to :guilabel:`Grid` or :guilabel:`Cols`.
+
+.. _website/building_blocks/grid:
+
+Grid
+~~~~
+
 The :guilabel:`Grid` layout allows you to reposition and resize elements, such as images or text, by
-dragging and dropping them.
+dragging and dropping them. When :guilabel:`Grid` is selected, additional options are available to
+:guilabel:`Add Elements` by clicking :guilabel:`Image`, :guilabel:`Text`, or :guilabel:`Button`.
 
 .. image:: building_blocks/grid-layout.png
    :alt: When the grid layout is selected, choose an image and drag and drop it where needed.
 
-.. tip::
-   Position images behind the text by using the above/below icons.
-
-   .. image:: building_blocks/superimpose-images-to-text.png
-      :alt: Positioning an image behind text
-
-.. _building_blocks/cols:
+.. _website/building_blocks/cols:
 
 Cols
-----
+~~~~
 
 Choosing the :guilabel:`Cols` layout allows you to determine the number of elements per line within
-the block. To do so, select the block to modify, click the :guilabel:`Cols` :guilabel:`Layout`, and
-adjust the number.
+the block. To do so, select the block to modify, click the dropdown next to the :guilabel:`Cols`
+field, and adjust the number. You can then modify a specific column's settings using the options in
+the :guilabel:`Column` section of the :guilabel:`Customize` tab.
 
-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::
+   By default, :doc:`on mobile devices <visibility>`, only one element (column) 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. Shapes are hidden by default on mobiles.
 
-.. image:: building_blocks/cols.png
-   :alt: Adjust the number of images per line on mobile view.
+.. _website/building_blocks/duplicate:
 
-Duplicating a building block
+Duplicate a building block
+==========================
+
+To duplicate a building block, click the :icon:`fa-clone` (:guilabel:`duplicate`) icon at the top of
+the :guilabel:`Customize` tab. Once duplicated, the new block appears on the page beneath the
+original one.
+
+.. _website/building_blocks/custom:
+
+Save a custom building block
 ============================
 
-You can duplicate a building block by clicking on the duplicate icon. Once duplicated, the new block
-appears on your website beneath the original one.
+You can save a customized building block to 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.
+Click the :guilabel:`Save and reload` button in the popup to confirm saving your custom block.
 
-.. image:: building_blocks/duplicate-container.png
-   :alt: Duplicating a building block
-
-Reordering a building block
-===========================
-
-To reorder a building block, select it and click the up arrow to move it before the previous block
-or click the down arrow to move it after.
-
-You can also use the drag-and-drop icon to move a block manually.
-
-.. image:: building_blocks/reordering-blocks.png
-   :alt: Reordering building blocks
-
-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
-==========
-
-Visibility on desktop/mobile
-----------------------------
-
-You can hide specific elements depending on the visitor's device. To do so, select the element to
-hide, and in the :guilabel:`Customize` tab, scroll down to :guilabel:`Visibility`, and click the
-:guilabel:`Show/Hide on Mobile` or the :guilabel:`Show/Hide on Desktop` icon.
-
-.. image:: building_blocks/show-hide-on-mobile.png
-   :alt: Click the "show/hide on mobile" icons to show or hide some elements on mobile.
+To add a saved building block to the page, navigate to the :guilabel:`Blocks` tab and drag and drop
+the :guilabel:`Custom` block from the :guilabel:`Categories` section. In the popup that opens, click
+the desired block in the :guilabel:`Custom` category.
 
 .. tip::
-   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.
+   In the :guilabel:`Insert a block` popup, click :icon:`fa-pencil` (:guilabel:`edit`) to rename the
+   custom block or :icon:`fa-trash` (:guilabel:`delete`) to delete it.
 
-   .. image:: building_blocks/phone-icon.png
-      :alt: Mobile phone preview icon
+.. _website/building_blocks/anchor:
 
-Conditional visibility
-----------------------
+Create an anchor link
+=====================
 
-You can also hide or show building blocks using other conditions. To do so, select an element, go to
-:guilabel:`Visibility`, click :guilabel:`No condition`, and select :guilabel:`Conditionally`
-instead. Then, configure the condition(s) to apply by selecting :guilabel:`Visible for` or
-:guilabel:`Hidden for` and which :guilabel:`Records` will be impacted.
+Anchor links are hyperlinks that direct users to a **specific section** of a page. To create an
+anchor link for a block, follow these steps:
 
-.. seealso::
-   :doc:`Link Tracker <../reporting/link_tracker>`
+#. Click :guilabel:`Edit` and select the block you want to link to.
+#. Click :icon:`fa-link` (:guilabel:`link`) at the top of the :guilabel:`Customize` tab.
+#. To edit the default anchor name, click :guilabel:`Edit` in the green popup message that opens.
+#. Replace the anchor name and click :guilabel:`Save & copy`.
 
-Invisible elements
-------------------
-
-Depending on the visibility settings, some elements can become hidden from your current view. To
-make a building block visible again, go to the :guilabel:`Invisible Elements` section at the bottom
-of the configurator and select a building block.
-
-Mobile view customization
-=========================
-
-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:
-
-- 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:
-
-   building_blocks/structure
-   building_blocks/features
-   building_blocks/dynamic_content
-   building_blocks/inner_content
+Once the anchor is saved, you can :ref:`link to it <website/elements/links>` from anywhere on your
+website.

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

@@ -1,104 +0,0 @@
-===============
-Dynamic content
-===============
-
-The :guilabel:`Dynamic Content` :doc:`building blocks <../building_blocks>`, such as
-:ref:`Form <website/dynamic_content/form>`, :ref:`Products <website/dynamic_content/products>`,
-:ref:`Embed Code <website/dynamic_content/embed_code>`, or :doc:`Blog Posts <../../../blog>`, help
-you create interactive and visually appealing layouts for your web :doc:`pages <../../pages>`.
-
-.. 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.
-
-.. _website/dynamic_content/form:
-
-Form
-====
-
-The :guilabel:`Form` block is used to collect information from website visitors and create records
-in your database.
-
-.. image:: dynamic_content/form-block.png
-   :alt: Example of a form block
-
-Action
-------
-
-By default, submitting the form **sends you an email** containing what the visitor entered.
-Depending on the apps installed on your database, new actions that can automatically create records
-become available:
-
-- :guilabel:`Apply for a Job` (Recruitment)
-- :guilabel:`Create a Customer` (eCommerce)
-- :guilabel:`Create a Ticket` (Helpdesk)
-- :guilabel:`Create an Opportunity` (CRM)
-- :guilabel:`Subscribe to Newsletter` (Email Marketing)
-- :guilabel:`Create a Task` (Project)
-
-Select another action with the :guilabel:`Action` field found under the :guilabel:`Customize` tab's
-:guilabel:`Form` section.
-
-.. image:: dynamic_content/form-block-settings.png
-   :alt: Editing a form to change its action
-
-By default, actions redirect visitors to a *thank you* page after submitting the form. Use the
-:guilabel:`URL` field to change where they are redirected. It is also possible to let visitors stay
-on the form's page by selecting :guilabel:`Nothing` or :guilabel:`Show Message` under the
-:guilabel:`On Success` field.
-
-Fields
-------
-
-To add a new field to the form, click the :guilabel:`+ Field` button found next to the Customize
-tab's :guilabel:`Form` or :guilabel:`Field` section. By default, new fields are *text* fields. To
-change the type, use the :guilabel:`Type` field and select an option under the :guilabel:`Custom
-Field` heading.
-
-.. spoiler:: Click here to preview all field types
-
-   .. image:: dynamic_content/form-field-types.png
-      :alt: All types of form fields
-
-   Some fields are visually similar, but the data entered must follow a specific format.
-
-It is also possible to select an :guilabel:`Existing Field` from a database and use the data it
-contains. The fields available depend on the selected action.
-
-.. tip::
-   Property fields added to the database can also be used.
-
-.. _website/dynamic_content/products:
-
-Products
-========
-
-The :guilabel:`Products` block is available after installing the eCommerce app. It is used to
-display a selection of products sold on your website.
-
-.. image:: dynamic_content/products-block.png
-   :alt: Example of a products block
-
-By default, the block displays the :guilabel:`Newest Products`. To change which products are shown,
-go to the :guilabel:`Customize` tab's :guilabel:`Products` section and select as :guilabel:`Filter`
-the :guilabel:`Recently Sold Products` or :guilabel:`Recently Viewed Products` option.
-
-In addition, it is possible to display products from a single category only by selecting one with
-the :guilabel:`Category` field.
-
-.. _website/dynamic_content/embed_code:
-
-Embed code
-==========
-
-Embedding code allows you to integrate content from third-party services into a page, such as videos
-from YouTube, maps from Google Maps, social media posts from Instagram, etc.
-
-.. image:: dynamic_content/embed-code.png
-   :alt: Add the link to the embedded code you want to point to
-
-After adding the block to a page, click the :guilabel:`Edit` button found under the
-:guilabel:`Customize` tab's :guilabel:`Embed Code` section and enter the code, replacing the code
-used to show the block's instructions.

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

@@ -1,40 +0,0 @@
-========
-Features
-========
-
-The :guilabel:`Features` :doc:`building blocks <../building_blocks>` allow you to list multiple
-items next to each other.
-
-The :ref:`Table of Content <features/table_of_content>` and the :ref:`Call to Action
-<features/call_to_action>` blocks are presented below.
-
-.. 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.
-
-.. _features/table_of_content:
-
-Table of content
-================
-
-The :guilabel:`Table of Content` block is used to list many different items grouped under several
-headings. A clickable index is available to navigate quickly between the different categories.
-
-.. image:: features/table-of-content.png
-   :alt: The default Table of Content block
-
-.. _features/call_to_action:
-
-Call to action
-==============
-
-The :guilabel:`Call to Action` block is used to prompt visitors to take a specific action, such
-as signing up for a newsletter or contacting you.
-
-.. image:: features/call-to-action.png
-   :alt: The default Call to Action block
-
-To change the button's link, select it, go to the :guilabel:`Customize` tab's :guilabel:`Inline
-Text` section and replace `/contactus` with another URL.

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

@@ -1,34 +0,0 @@
-=============
-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 your social network's URL.
-By default, the buttons display the icons of seven major social networks. You can click
-:guilabel:`Add New Social Network` to create a new button and switch the buttons next to a URL to
-turn them on or off.
-
-.. image:: inner_content/social-media-block.png
-   :alt: The social media building block and its settings
-
-.. Note::
-
-   You cannot edit the default icons but can edit the ones you added by clicking
-   :guilabel:`Add New Social Network`. To do so, select the icon, then click the
-   :guilabel:`Replace` button found under the :guilabel:`Customize` tab's :guilabel:`Icon` section,
-   and either select one of the available icons or click the :guilabel:`Images` tab and upload an
-   image or add its URL.

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

@@ -1,60 +0,0 @@
-=========
-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.
-
-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
-------
-
-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
--------
-
-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` 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

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

@@ -114,7 +114,8 @@ Links
 
 Links are used to connect different pages and resources, guiding visitors and improving navigation.
 To add a link, type `/link`, then, in the pop-up that opens, enter the link's :guilabel:`Label` and
-add the :guilabel:`URL or Email`. Type `/` to search for a page and `#` to link to an anchor.
+add the :guilabel:`URL or Email`. Type `/` to search for a page and `#` to link to an :ref:`anchor
+<website/building_blocks/anchor>`.
 
 .. tip::
    By default, the :guilabel:`Style` field is set to :guilabel:`Link`. Select a different style to

redirects/18.0.txt

@@ -35,3 +35,8 @@ applications/productivity/voip/transfer_forward.rst applications/productivity/vo
 
 applications/websites/ecommerce/cart.rst applications/websites/ecommerce/checkout.rst
 applications/websites/website/pages/menus.rst applications/websites/website/pages/header_footer.rst
+applications/websites/website/building_blocks/dynamic_content.rst applications/websites/website/building_blocks.rst
+applications/websites/website/building_blocks/features.rst applications/websites/website/building_blocks.rst
+applications/websites/website/building_blocks/inner_content.rst applications/websites/website/building_blocks.rst
+applications/websites/website/building_blocks/structure.rst applications/websites/website/building_blocks.rst
+applications/websites/website/pages/menus.rst applications/websites/website/pages/header_footer.rst