diff --git a/content/applications/websites/website/web_design/building_blocks.rst b/content/applications/websites/website/web_design/building_blocks.rst index f98f612301..d751228635 100644 --- a/content/applications/websites/website/web_design/building_blocks.rst +++ b/content/applications/websites/website/web_design/building_blocks.rst @@ -4,26 +4,52 @@ 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 quickly and easily by dragging and dropping Building blocks. Depending +on their use, two types of building blocks are available: :guilabel:`Categories` +and :guilabel:`Inner Content.` First, you need to add a category, and within this category, you +can add :ref:`inner content `. + + .. image:: building_blocks/2-types-of-blocks.png + :alt: Two types of blocks .. seealso:: - `Odoo Tutorial: Design your first webpage `_ + `Odoo Tutorial: Design your website: text and colours `_ + +Add a building block +==================== + +To add a block, click :guilabel:`Edit`, then select the category or inner content you want to add. +When clicking on a category block, a pop-up appears, allowing you to select between multiple +templates for each category. Save when you’re finished. + +You can add as many :guilabel:`category` blocks as you want on a page but keep in mind that a short +and efficient page works best. Once your category block is placed, you can drag and drop +:guilabel:`inner content` within it. -.. _websites/website/web_design/building_blocks: -Adding a building block -======================= + .. image:: building_blocks/insert-a-block.png + :alt: Pop-up block selection -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. + .. note:: + Access to certain blocks requires the installation of their respective application. + +Edit a building block +===================== 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. +Pull the turquoise borders on your block to reduce or increase the space at the top or bottom of it. +Change the block order by clicking :icon:`fa-chevron-up` or :icon:`fa-chevron-down` and move the +block on your page by clicking the :icon:`fa-arrows`. Simply delete it by clicking :icon:`fa-trash`. + + .. image:: building_blocks/padding-building-block.png + :alt: Extend margins on building block + +.. tip:: + Change quickly the block category by clicking the arrows :icon:`fa-exchange`. + + Color preset and background =========================== @@ -35,15 +61,42 @@ When you modify a color preset, all elements using it are automatically updated configuration. .. seealso:: - :doc:`Website themes ` + :doc:`General theme ` + Layout: grid and columns ======================== -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`. +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` row. + +.. image:: building_blocks/customize-grid-and-cols.png + :alt: Grid & Cols + +You can modify the background color and/or add an image, video as well as a shape to add some style +to your block. Once you’ve selected a shape, new rows appear allowing you to: + + - select the shape you like, + - flip its sense (horizontally or vertically), + - add a colour inside and/or on the shape contour, + - remove a shape, a video or an image, by simply clicking on its icon. + +.. tip:: + Position an element (image, text, etc.) behind or before another by using the above/below icons. + + .. image:: building_blocks/change-block-position.png + :alt: Change block position + +To make it bigger or smaller, click the dots around the block and adapt it to your liking. +Click save when you’re done. + +.. image:: building_blocks/adapt-block-size.png + :alt: Adapt block size + +.. seealso:: + :doc:`Visibility ` .. _building_blocks/grid: @@ -51,16 +104,8 @@ Grid ---- The :guilabel:`Grid` layout allows you to reposition and resize elements, such as images or text, by -dragging and dropping them. - -.. 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 +dragging and dropping them. Once you select :guilabel:`Grid`, a new row appears: +:guilabel:`Add Elements`, which allows you to add an Image, some Text, or a Button. .. _building_blocks/cols: @@ -69,107 +114,170 @@ 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. +adjust the number. You can edit the space around the column block by clicking on :guilabel:`Padding`. 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. +(:guilabel:`mobile icon`) at the top of the website editor and adapt the number of columns. Also, +if you selected a shape, this one will be hidden by default on mobiles too. -.. image:: building_blocks/cols.png +.. image:: building_blocks/mobile-cols.png :alt: Adjust the number of images per line on mobile view. -Duplicating a building block -============================ +Duplicate a 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 duplicate a building block by clicking on the :icon:`fa-clone` duplicate icon. Once +duplicated, the new block appears on your website beneath the original one. -.. image:: building_blocks/duplicate-container.png +.. image:: building_blocks/duplicate-block.png :alt: Duplicating a building block -Reordering a building block -=========================== +Save 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. -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. +.. image:: building_blocks/custom-block.png + :alt: New custom block -You can also use the drag-and-drop icon to move a block manually. +.. image:: building_blocks/save-custom-block.png + :alt: Saving a custom building block -.. image:: building_blocks/reordering-blocks.png - :alt: Reordering building blocks +Click the :guilabel:`Save and reload` button on the pop-up to confirm saving your custom block. -Saving a custom building block -============================== +.. image:: building_blocks/pop-up-save-custom-block.png + :alt: Click to save your custom 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. +A new Custom category is now available, with your custom block on it. You can rename it +:icon:`fa-pencil` or delete it :icon:`fa-trash`. -.. image:: building_blocks/saving-custom-block.png - :alt: Saving a building block +.. image:: building_blocks/pop-up-custom-block-created.png + :alt: Custom block created 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 +.. image:: building_blocks/custom-category-block.png + :alt: Custom category with saved building blocks + +.. seealso:: + :doc:`Visibility ` -.. _building_blocks/visibility: +.. _building_blocks/inner_content: -Visibility -========== +Add Inner content +================= -Visibility on desktop/mobile ----------------------------- +The :guilabel:`Inner content` blocks allow you to add elements such as videos, images, social +media buttons, and so on, into pre-existing category blocks. + +.. example:: + Add all your social media accounts in one place with the Inner content Social Media block. + Simply :icon:`fa-toggle-on` or :icon:`fa-toggle-off` the desired platform and copy/paste your + account URL. + + .. image:: building_blocks/social-media-inner-content.png + :alt: Social Media inner content block + +Add Dynamic content +=================== + +The :guilabel:`Dynamic Content`, 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>`. + +.. _website/building_blocks/form: + +Form +---- -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. +The :guilabel:`Form` block is used to collect information from website visitors and create records +in your database. -.. image:: building_blocks/show-hide-on-mobile.png - :alt: Click the "show/hide on mobile" icons to show or hide some elements on mobile. +.. image:: building_blocks/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:: building_blocks/inner-content-edit-form.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. + +.. image:: building_blocks/inner-content-edit-field.png + :alt: Edit field type + +.. 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. + +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:: - 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. + Property fields added to the database can also be used. - .. image:: building_blocks/phone-icon.png - :alt: Mobile phone preview icon +.. _website/building_blocks/products: -Conditional visibility ----------------------- +Products +-------- -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. +The :guilabel:`Products` block is available after installing the eCommerce app. It is used to +display a selection of products sold on your website. -.. seealso:: - :doc:`Link Tracker <../reporting/link_tracker>` +.. image:: building_blocks/products-block.png + :alt: Example of a products block -Invisible elements ------------------- +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. -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. +In addition, it is possible to display products from a single category only by selecting one with +the :guilabel:`Category` field. -Mobile view customization -========================= +.. _website/building_blocks/embed_code: -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: +Embed code +---------- -- 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. +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. -.. toctree:: - :titlesonly: +.. image:: building_blocks/embed-code.png + :alt: Add the link to the embedded code you want to point to - building_blocks/structure - building_blocks/features - building_blocks/dynamic_content - building_blocks/inner_content +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/2-types-of-blocks.png b/content/applications/websites/website/web_design/building_blocks/2-types-of-blocks.png new file mode 100644 index 0000000000..ad9fd377c7 Binary files /dev/null and b/content/applications/websites/website/web_design/building_blocks/2-types-of-blocks.png differ 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 index 0a25f85e9a..4b8de12f5f 100644 Binary files a/content/applications/websites/website/web_design/building_blocks/cols.png and b/content/applications/websites/website/web_design/building_blocks/cols.png differ diff --git a/content/applications/websites/website/web_design/building_blocks/custom-block.png b/content/applications/websites/website/web_design/building_blocks/custom-block.png new file mode 100644 index 0000000000..85197b6885 Binary files /dev/null and b/content/applications/websites/website/web_design/building_blocks/custom-block.png 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/custom-category-block.png b/content/applications/websites/website/web_design/building_blocks/custom-category-block.png new file mode 100644 index 0000000000..300de1701e Binary files /dev/null and b/content/applications/websites/website/web_design/building_blocks/custom-category-block.png differ diff --git a/content/applications/websites/website/web_design/building_blocks/customize-grid-and-cols.png b/content/applications/websites/website/web_design/building_blocks/customize-grid-and-cols.png new file mode 100644 index 0000000000..3d646a2cc0 Binary files /dev/null and b/content/applications/websites/website/web_design/building_blocks/customize-grid-and-cols.png differ diff --git a/content/applications/websites/website/web_design/building_blocks/duplicate-block.png b/content/applications/websites/website/web_design/building_blocks/duplicate-block.png new file mode 100644 index 0000000000..23859092ab Binary files /dev/null and b/content/applications/websites/website/web_design/building_blocks/duplicate-block.png 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/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-field.png b/content/applications/websites/website/web_design/building_blocks/inner-content-edit-field.png new file mode 100644 index 0000000000..7843833be8 Binary files /dev/null and b/content/applications/websites/website/web_design/building_blocks/inner-content-edit-field.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/mobile-cols.png b/content/applications/websites/website/web_design/building_blocks/mobile-cols.png new file mode 100644 index 0000000000..bdf4900599 Binary files /dev/null and b/content/applications/websites/website/web_design/building_blocks/mobile-cols.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 index 424b8741ee..c40ef9eb40 100644 Binary files a/content/applications/websites/website/web_design/building_blocks/phone-icon.png and b/content/applications/websites/website/web_design/building_blocks/phone-icon.png differ diff --git a/content/applications/websites/website/web_design/building_blocks/pop-up-custom-block-created.png b/content/applications/websites/website/web_design/building_blocks/pop-up-custom-block-created.png new file mode 100644 index 0000000000..cabdacdfd8 Binary files /dev/null and b/content/applications/websites/website/web_design/building_blocks/pop-up-custom-block-created.png differ diff --git a/content/applications/websites/website/web_design/building_blocks/pop-up-save-custom-block.png b/content/applications/websites/website/web_design/building_blocks/pop-up-save-custom-block.png new file mode 100644 index 0000000000..82e931c3e9 Binary files /dev/null and b/content/applications/websites/website/web_design/building_blocks/pop-up-save-custom-block.png 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/save-custom-block.png b/content/applications/websites/website/web_design/building_blocks/save-custom-block.png new file mode 100644 index 0000000000..edddd6bde5 Binary files /dev/null and b/content/applications/websites/website/web_design/building_blocks/save-custom-block.png 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/redirects/18.0.txt b/redirects/18.0.txt index a9af92d20b..9a2ad78bea 100644 --- a/redirects/18.0.txt +++ b/redirects/18.0.txt @@ -32,4 +32,8 @@ applications/productivity/voip/transfer_forward.rst applications/productivity/vo # applications/websites -applications/websites/website/pages/menus.rst applications/websites/website/pages/header_footer.rst \ No newline at end of file +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 \ No newline at end of file