diff --git a/content/applications/sales/crm/acquire_leads/opportunities_form.rst b/content/applications/sales/crm/acquire_leads/opportunities_form.rst index d9b65a48a2..3c2181e8a1 100644 --- a/content/applications/sales/crm/acquire_leads/opportunities_form.rst +++ b/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 ` + - :ref:`Website forms ` diff --git a/content/applications/services/project/tasks/task_creation.rst b/content/applications/services/project/tasks/task_creation.rst index 6ff6e0174d..e67233cfcb 100644 --- a/content/applications/services/project/tasks/task_creation.rst +++ b/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 `. +#. Go to the website page where you wish to add the form and :doc:`add the Form building block + `. #. 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 `. +#. :ref:`Customize the 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 ` diff --git a/content/applications/websites/ecommerce/checkout.rst b/content/applications/websites/ecommerce/checkout.rst index 995d54c77c..5891eceb60 100644 --- a/content/applications/websites/ecommerce/checkout.rst +++ b/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 `. To do so, :ref:`enable ` the :guilabel:`Extra -Step` option in the website editor. The form can be :ref:`customized ` +Step` option in the website editor. The form can be :ref:`customized ` as needed. .. tip:: diff --git a/content/applications/websites/ecommerce/products.rst b/content/applications/websites/ecommerce/products.rst index 9530891891..5ad5569e2b 100644 --- a/content/applications/websites/ecommerce/products.rst +++ b/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 diff --git a/content/applications/websites/ecommerce/products/products-block.png b/content/applications/websites/ecommerce/products/products-block.png new file mode 100644 index 0000000000..e000ec5a1f Binary files /dev/null and b/content/applications/websites/ecommerce/products/products-block.png differ diff --git a/content/applications/websites/website/web_design/building_blocks.rst b/content/applications/websites/website/web_design/building_blocks.rst index f98f612301..0edd51418c 100644 --- a/content/applications/websites/website/web_design/building_blocks.rst +++ b/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 `, :doc:`Features `, -:doc:`Dynamic Content `, and -:doc:`Inner Content `. +You can design your website by :ref:`dragging and dropping building blocks +`, then :ref:`editing them ` to fit your +content and layout needs. .. seealso:: - `Odoo Tutorial: Design your first webpage `_ + `Odoo Tutorial: Design your website: text and colors `_ -.. _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 ` +.. 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 -` 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`. + .. 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:`Grid` layout allows you to reposition and resize elements, such as images or text, by -dragging and dropping them. +The :guilabel:`Form` block is used to collect information from website visitors and create records +in your database, if applicable. -.. image:: building_blocks/grid-layout.png - :alt: When the grid layout is selected, choose an image and drag and drop it where needed. +.. image:: building_blocks/form-block.png + :alt: Example of a form block -.. tip:: - Position images behind the text by using the above/below icons. +Action +~~~~~~ - .. image:: building_blocks/superimpose-images-to-text.png - :alt: Positioning an image behind text +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`: -.. _building_blocks/cols: +- :guilabel:`Apply for a Job` (:doc:`Recruitment `) +- :guilabel:`Create a Customer` (:doc:`eCommerce <../../ecommerce>`) +- :guilabel:`Create a Ticket` (:doc:`Helpdesk `) +- :guilabel:`Create an Opportunity` (:doc:`CRM `) +- :guilabel:`Subscribe to Newsletter` (:doc:`Email Marketing `) +- :guilabel:`Create a Task` (:doc:`Project `) -Cols ----- +.. image:: building_blocks/inner-content-edit-form.png + :alt: Editing a form to change its action -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. +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. -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. +Fields +~~~~~~ -.. image:: building_blocks/cols.png - :alt: Adjust the number of images per line on mobile view. +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: -Duplicating a building block -============================ +- Change the field :guilabel:`Type`. -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. + .. 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. -.. image:: building_blocks/duplicate-container.png - :alt: Duplicating a building block + .. spoiler:: Click here to preview all field types. -Reordering a building block -=========================== + .. image:: building_blocks/all-types-of-field.png + :alt: All types of form fields -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. + Some fields are visually similar, but the data entered must follow a specific format. -You can also use the drag-and-drop icon to move a block manually. +- 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 ` settings. +- Add an :ref:`animation `. -.. image:: building_blocks/reordering-blocks.png - :alt: Reordering building blocks +Once you have made the desired changes, click :guilabel:`Save`. -Saving a custom building block -============================== +.. _website/building_blocks/embed_code: -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. +Embed code +---------- -.. image:: building_blocks/saving-custom-block.png - :alt: Saving a building block +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. -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. +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/custom-blocks.png - :alt: Custom section with saved building blocks +.. image:: building_blocks/embed-code-pop-up.png + :alt: Add the link to the embedded code you want to point to -.. _building_blocks/visibility: +.. warning:: + Do not copy/paste code you do not understand, as it could put your data at risk. -Visibility -========== +.. _website/building_blocks/move_switch_delete: -Visibility on desktop/mobile ----------------------------- +Move, switch, or delete a building block +======================================== -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. +Pull the turquoise borders on the block to reduce or increase the space at the top or bottom of it. -.. image:: building_blocks/show-hide-on-mobile.png - :alt: Click the "show/hide on mobile" icons to show or hide some elements on mobile. +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 +`, 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 ` + - :doc:`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:: - 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. + - 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/phone-icon.png - :alt: Mobile phone preview icon + .. image:: building_blocks/change-block-position.png + :alt: Change block position -Conditional visibility ----------------------- + - To resize a block, click and drag the dots around its edges to adjust it as needed. -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. + .. image:: building_blocks/adapt-block-size.png + :alt: Adapt block size .. seealso:: - :doc:`Link Tracker <../reporting/link_tracker>` + :doc:`General theme ` + +Layout: grid and columns +------------------------ + +For most building blocks, you can choose between two layout styles: :ref:`grid +` or :ref:`columns (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. 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. + +.. _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 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. + +.. note:: + By default, :doc:`on mobile devices `, 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. + +.. _website/building_blocks/duplicate: + +Duplicate a building block +========================== -Invisible elements ------------------- +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. -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. +.. _website/building_blocks/custom: + +Save a custom building block +============================ + +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. + +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:: + 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. -Mobile view customization -========================= +.. _website/building_blocks/anchor: -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: +Create an anchor link +===================== -- 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. +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: -.. toctree:: - :titlesonly: +#. 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`. - 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 ` from anywhere on your +website. diff --git a/content/applications/websites/website/web_design/building_blocks/adapt-block-size.png b/content/applications/websites/website/web_design/building_blocks/adapt-block-size.png new file mode 100644 index 0000000000..740424fbfa Binary files /dev/null and b/content/applications/websites/website/web_design/building_blocks/adapt-block-size.png differ diff --git a/content/applications/websites/website/web_design/building_blocks/all-types-of-field.png b/content/applications/websites/website/web_design/building_blocks/all-types-of-field.png new file mode 100644 index 0000000000..d944c5b3c0 Binary files /dev/null and b/content/applications/websites/website/web_design/building_blocks/all-types-of-field.png differ diff --git a/content/applications/websites/website/web_design/building_blocks/change-block-position.png b/content/applications/websites/website/web_design/building_blocks/change-block-position.png new file mode 100644 index 0000000000..552fa1536a Binary files /dev/null and b/content/applications/websites/website/web_design/building_blocks/change-block-position.png differ diff --git a/content/applications/websites/website/web_design/building_blocks/cols.png b/content/applications/websites/website/web_design/building_blocks/cols.png deleted file mode 100644 index 0a25f85e9a..0000000000 Binary files a/content/applications/websites/website/web_design/building_blocks/cols.png and /dev/null differ diff --git a/content/applications/websites/website/web_design/building_blocks/custom-blocks.png b/content/applications/websites/website/web_design/building_blocks/custom-blocks.png deleted file mode 100644 index a320080dbc..0000000000 Binary files a/content/applications/websites/website/web_design/building_blocks/custom-blocks.png and /dev/null differ diff --git a/content/applications/websites/website/web_design/building_blocks/duplicate-container.png b/content/applications/websites/website/web_design/building_blocks/duplicate-container.png deleted file mode 100644 index 0a5d5a972e..0000000000 Binary files a/content/applications/websites/website/web_design/building_blocks/duplicate-container.png and /dev/null differ diff --git a/content/applications/websites/website/web_design/building_blocks/dynamic_content.rst b/content/applications/websites/website/web_design/building_blocks/dynamic_content.rst deleted file mode 100644 index bfd391a366..0000000000 --- a/content/applications/websites/website/web_design/building_blocks/dynamic_content.rst +++ /dev/null @@ -1,104 +0,0 @@ -=============== -Dynamic content -=============== - -The :guilabel:`Dynamic Content` :doc:`building blocks <../building_blocks>`, such as -:ref:`Form `, :ref:`Products `, -:ref:`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. diff --git a/content/applications/websites/website/web_design/building_blocks/dynamic_content/embed-code.png b/content/applications/websites/website/web_design/building_blocks/dynamic_content/embed-code.png deleted file mode 100644 index fa6b7e69e9..0000000000 Binary files a/content/applications/websites/website/web_design/building_blocks/dynamic_content/embed-code.png and /dev/null differ diff --git a/content/applications/websites/website/web_design/building_blocks/dynamic_content/form-block-settings.png b/content/applications/websites/website/web_design/building_blocks/dynamic_content/form-block-settings.png deleted file mode 100644 index 461e6ecb72..0000000000 Binary files a/content/applications/websites/website/web_design/building_blocks/dynamic_content/form-block-settings.png and /dev/null differ diff --git a/content/applications/websites/website/web_design/building_blocks/dynamic_content/form-block.png b/content/applications/websites/website/web_design/building_blocks/dynamic_content/form-block.png deleted file mode 100644 index a090b8eb86..0000000000 Binary files a/content/applications/websites/website/web_design/building_blocks/dynamic_content/form-block.png and /dev/null differ diff --git a/content/applications/websites/website/web_design/building_blocks/dynamic_content/form-field-types.png b/content/applications/websites/website/web_design/building_blocks/dynamic_content/form-field-types.png deleted file mode 100644 index e5bb7ee685..0000000000 Binary files a/content/applications/websites/website/web_design/building_blocks/dynamic_content/form-field-types.png and /dev/null differ diff --git a/content/applications/websites/website/web_design/building_blocks/dynamic_content/products-block.png b/content/applications/websites/website/web_design/building_blocks/dynamic_content/products-block.png deleted file mode 100644 index 56af96e107..0000000000 Binary files a/content/applications/websites/website/web_design/building_blocks/dynamic_content/products-block.png and /dev/null differ diff --git a/content/applications/websites/website/web_design/building_blocks/embed-code-pop-up.png b/content/applications/websites/website/web_design/building_blocks/embed-code-pop-up.png new file mode 100644 index 0000000000..e85658c9d3 Binary files /dev/null and b/content/applications/websites/website/web_design/building_blocks/embed-code-pop-up.png differ diff --git a/content/applications/websites/website/web_design/building_blocks/features.rst b/content/applications/websites/website/web_design/building_blocks/features.rst deleted file mode 100644 index 09ee2974d6..0000000000 --- a/content/applications/websites/website/web_design/building_blocks/features.rst +++ /dev/null @@ -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 ` and the :ref:`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. diff --git a/content/applications/websites/website/web_design/building_blocks/features/call-to-action.png b/content/applications/websites/website/web_design/building_blocks/features/call-to-action.png deleted file mode 100644 index 0fb1f0400a..0000000000 Binary files a/content/applications/websites/website/web_design/building_blocks/features/call-to-action.png and /dev/null differ diff --git a/content/applications/websites/website/web_design/building_blocks/features/table-of-content.png b/content/applications/websites/website/web_design/building_blocks/features/table-of-content.png deleted file mode 100644 index df2c831841..0000000000 Binary files a/content/applications/websites/website/web_design/building_blocks/features/table-of-content.png and /dev/null differ diff --git a/content/applications/websites/website/web_design/building_blocks/form-block.png b/content/applications/websites/website/web_design/building_blocks/form-block.png new file mode 100644 index 0000000000..9a55b2559a Binary files /dev/null and b/content/applications/websites/website/web_design/building_blocks/form-block.png differ diff --git a/content/applications/websites/website/web_design/building_blocks/grid-layout.png b/content/applications/websites/website/web_design/building_blocks/grid-layout.png index 086c6b1fec..8ab0a3bb09 100644 Binary files a/content/applications/websites/website/web_design/building_blocks/grid-layout.png and b/content/applications/websites/website/web_design/building_blocks/grid-layout.png differ diff --git a/content/applications/websites/website/web_design/building_blocks/inner-content-edit-form.png b/content/applications/websites/website/web_design/building_blocks/inner-content-edit-form.png new file mode 100644 index 0000000000..c4ecd46b53 Binary files /dev/null and b/content/applications/websites/website/web_design/building_blocks/inner-content-edit-form.png differ diff --git a/content/applications/websites/website/web_design/building_blocks/inner_content.rst b/content/applications/websites/website/web_design/building_blocks/inner_content.rst deleted file mode 100644 index a5167de2a8..0000000000 --- a/content/applications/websites/website/web_design/building_blocks/inner_content.rst +++ /dev/null @@ -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 `, 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. diff --git a/content/applications/websites/website/web_design/building_blocks/inner_content/social-media-block.png b/content/applications/websites/website/web_design/building_blocks/inner_content/social-media-block.png deleted file mode 100644 index fc4208802b..0000000000 Binary files a/content/applications/websites/website/web_design/building_blocks/inner_content/social-media-block.png and /dev/null differ diff --git a/content/applications/websites/website/web_design/building_blocks/insert-a-block.png b/content/applications/websites/website/web_design/building_blocks/insert-a-block.png new file mode 100644 index 0000000000..bd0a0d7cf1 Binary files /dev/null and b/content/applications/websites/website/web_design/building_blocks/insert-a-block.png differ diff --git a/content/applications/websites/website/web_design/building_blocks/padding-building-block.png b/content/applications/websites/website/web_design/building_blocks/padding-building-block.png new file mode 100644 index 0000000000..19793c95f2 Binary files /dev/null and b/content/applications/websites/website/web_design/building_blocks/padding-building-block.png differ diff --git a/content/applications/websites/website/web_design/building_blocks/phone-icon.png b/content/applications/websites/website/web_design/building_blocks/phone-icon.png deleted file mode 100644 index 424b8741ee..0000000000 Binary files a/content/applications/websites/website/web_design/building_blocks/phone-icon.png and /dev/null differ diff --git a/content/applications/websites/website/web_design/building_blocks/reordering-blocks.png b/content/applications/websites/website/web_design/building_blocks/reordering-blocks.png deleted file mode 100644 index 4807d0610e..0000000000 Binary files a/content/applications/websites/website/web_design/building_blocks/reordering-blocks.png and /dev/null differ diff --git a/content/applications/websites/website/web_design/building_blocks/saving-custom-block.png b/content/applications/websites/website/web_design/building_blocks/saving-custom-block.png deleted file mode 100644 index b143b40f3b..0000000000 Binary files a/content/applications/websites/website/web_design/building_blocks/saving-custom-block.png and /dev/null differ diff --git a/content/applications/websites/website/web_design/building_blocks/show-hide-on-mobile.png b/content/applications/websites/website/web_design/building_blocks/show-hide-on-mobile.png deleted file mode 100644 index 482350aeee..0000000000 Binary files a/content/applications/websites/website/web_design/building_blocks/show-hide-on-mobile.png and /dev/null differ diff --git a/content/applications/websites/website/web_design/building_blocks/social-media-inner-content.png b/content/applications/websites/website/web_design/building_blocks/social-media-inner-content.png new file mode 100644 index 0000000000..d48e445693 Binary files /dev/null and b/content/applications/websites/website/web_design/building_blocks/social-media-inner-content.png differ diff --git a/content/applications/websites/website/web_design/building_blocks/structure.rst b/content/applications/websites/website/web_design/building_blocks/structure.rst deleted file mode 100644 index 551adb2a9d..0000000000 --- a/content/applications/websites/website/web_design/building_blocks/structure.rst +++ /dev/null @@ -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 ` and -:ref:`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 diff --git a/content/applications/websites/website/web_design/building_blocks/structure/call-to-action.png b/content/applications/websites/website/web_design/building_blocks/structure/call-to-action.png deleted file mode 100644 index 9a515d9826..0000000000 Binary files a/content/applications/websites/website/web_design/building_blocks/structure/call-to-action.png and /dev/null differ diff --git a/content/applications/websites/website/web_design/building_blocks/structure/default-image-content.png b/content/applications/websites/website/web_design/building_blocks/structure/default-image-content.png deleted file mode 100644 index a50cbc9b8c..0000000000 Binary files a/content/applications/websites/website/web_design/building_blocks/structure/default-image-content.png and /dev/null differ diff --git a/content/applications/websites/website/web_design/building_blocks/structure/inline-text.png b/content/applications/websites/website/web_design/building_blocks/structure/inline-text.png deleted file mode 100644 index 914e1c1212..0000000000 Binary files a/content/applications/websites/website/web_design/building_blocks/structure/inline-text.png and /dev/null differ diff --git a/content/applications/websites/website/web_design/building_blocks/structure/masonry-template.png b/content/applications/websites/website/web_design/building_blocks/structure/masonry-template.png deleted file mode 100644 index b9948ee389..0000000000 Binary files a/content/applications/websites/website/web_design/building_blocks/structure/masonry-template.png and /dev/null differ diff --git a/content/applications/websites/website/web_design/building_blocks/structure/masonry-text-box.png b/content/applications/websites/website/web_design/building_blocks/structure/masonry-text-box.png deleted file mode 100644 index bdaa7af7bf..0000000000 Binary files a/content/applications/websites/website/web_design/building_blocks/structure/masonry-text-box.png and /dev/null differ diff --git a/content/applications/websites/website/web_design/building_blocks/superimpose-images-to-text.png b/content/applications/websites/website/web_design/building_blocks/superimpose-images-to-text.png deleted file mode 100644 index 8dee0f1a99..0000000000 Binary files a/content/applications/websites/website/web_design/building_blocks/superimpose-images-to-text.png and /dev/null differ diff --git a/content/applications/websites/website/web_design/elements.rst b/content/applications/websites/website/web_design/elements.rst index 8cab451e38..04a17784dc 100644 --- a/content/applications/websites/website/web_design/elements.rst +++ b/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 +`. .. tip:: By default, the :guilabel:`Style` field is set to :guilabel:`Link`. Select a different style to diff --git a/redirects/18.0.txt b/redirects/18.0.txt index 2f944180f9..bc24afe50d 100644 --- a/redirects/18.0.txt +++ b/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