[ADD] Website: Structure blocks
task-3733822
closes odoo/documentation#8273
X-original-commit: 158a1dee79
Signed-off-by: Xavier Platteau (xpl) <xpl@odoo.com>
@ -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
|
||||
|
@ -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 <structure/banner>` and
|
||||
:ref:`Masonry <structure/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
|
After Width: | Height: | Size: 23 KiB |
After Width: | Height: | Size: 8.7 KiB |
After Width: | Height: | Size: 182 KiB |
After Width: | Height: | Size: 21 KiB |
After Width: | Height: | Size: 6.2 KiB |
After Width: | Height: | Size: 149 KiB |
After Width: | Height: | Size: 23 KiB |