diff --git a/content/applications/websites/website/web_design/building_blocks.rst b/content/applications/websites/website/web_design/building_blocks.rst index 622d072e3..26498b8b0 100644 --- a/content/applications/websites/website/web_design/building_blocks.rst +++ b/content/applications/websites/website/web_design/building_blocks.rst @@ -147,3 +147,4 @@ Click the pen icon to edit their name. :titlesonly: building_blocks/structure + building_blocks/inner_content 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 new file mode 100644 index 000000000..ba5673029 --- /dev/null +++ b/content/applications/websites/website/web_design/building_blocks/inner_content.rst @@ -0,0 +1,30 @@ +============= +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 any URL. The button +automatically displays the icon of several major social networking services. + +.. image:: inner_content/social-media-block.png + :alt: The social media building block and its settings + +.. tip:: + If an icon is not available, it is possible to edit the default icon by selecting it, clicking + the :guilabel:`Replace` button found under the :guilabel:`Customize` tab's :guilabel:`Icon` + section, and either selecting one of the available :guilabel:`Icons` or clicking the + :guilabel:`Images` tab and uploading an image or adding 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 new file mode 100644 index 000000000..fc4208802 Binary files /dev/null and b/content/applications/websites/website/web_design/building_blocks/inner_content/social-media-block.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 index 4c826d7ad..551adb2a9 100644 --- a/content/applications/websites/website/web_design/building_blocks/structure.rst +++ b/content/applications/websites/website/web_design/building_blocks/structure.rst @@ -1,23 +1,23 @@ -================ -Structure blocks -================ +========= +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. -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 `. +.. 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 block ------------- +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. @@ -42,19 +42,19 @@ customization options are available in the :guilabel:`Inline Text` section. .. _structure/masonry: -Masonry block -------------- +Masonry +------- -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. +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` 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`. + 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/structure-blocks.png b/content/applications/websites/website/web_design/building_blocks/structure/structure-blocks.png deleted file mode 100644 index cc1eea6e5..000000000 Binary files a/content/applications/websites/website/web_design/building_blocks/structure/structure-blocks.png and /dev/null differ