diff --git a/content/applications/websites/website/web_design/building_blocks.rst b/content/applications/websites/website/web_design/building_blocks.rst index 800a1c89b..b5bcb4918 100644 --- a/content/applications/websites/website/web_design/building_blocks.rst +++ b/content/applications/websites/website/web_design/building_blocks.rst @@ -1,3 +1,5 @@ +:show-content: + =============== Building blocks =============== @@ -138,3 +140,8 @@ Click the pen icon to edit their name. .. image:: building_blocks/custom-blocks.png :alt: Custom section with saved building blocks + +.. toctree:: + :titlesonly: + + building_blocks/structure diff --git a/content/applications/websites/website/web_design/building_blocks/structure.rst b/content/applications/websites/website/web_design/building_blocks/structure.rst new file mode 100644 index 000000000..4c826d7ad --- /dev/null +++ b/content/applications/websites/website/web_design/building_blocks/structure.rst @@ -0,0 +1,60 @@ +================ +Structure blocks +================ + +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. + +To add a block to a web page, click :guilabel:`Edit`, select a block from the :guilabel:`Structure` +section, and drag and drop it into the page. + +.. image:: structure/structure-blocks.png + :alt: Dragging and dropping a building block into a page + +Below are presented two types of structure blocks: :ref:`Banner ` and +:ref:`Masonry `. + +.. _structure/banner: + +Banner block +------------ + +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 block +------------- + +The :guilabel:`Masonry` building 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` building 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/banner-block.png b/content/applications/websites/website/web_design/building_blocks/structure/banner-block.png new file mode 100644 index 000000000..4d99ce09b Binary files /dev/null and b/content/applications/websites/website/web_design/building_blocks/structure/banner-block.png differ 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 new file mode 100644 index 000000000..9a515d982 Binary files /dev/null and b/content/applications/websites/website/web_design/building_blocks/structure/call-to-action.png 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 new file mode 100644 index 000000000..a50cbc9b8 Binary files /dev/null and b/content/applications/websites/website/web_design/building_blocks/structure/default-image-content.png 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 new file mode 100644 index 000000000..914e1c121 Binary files /dev/null and b/content/applications/websites/website/web_design/building_blocks/structure/inline-text.png 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 new file mode 100644 index 000000000..b9948ee38 Binary files /dev/null and b/content/applications/websites/website/web_design/building_blocks/structure/masonry-template.png 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 new file mode 100644 index 000000000..bdaa7af7b Binary files /dev/null and b/content/applications/websites/website/web_design/building_blocks/structure/masonry-text-box.png differ diff --git a/content/applications/websites/website/web_design/building_blocks/structure/structure-blocks.png b/content/applications/websites/website/web_design/building_blocks/structure/structure-blocks.png new file mode 100644 index 000000000..cc1eea6e5 Binary files /dev/null and b/content/applications/websites/website/web_design/building_blocks/structure/structure-blocks.png differ