[IMP] website_themes: layout

Add explanation about the `template_header_mobile`

closes odoo/documentation#12632

X-original-commit: 8c6fb203be
Signed-off-by: Brandon Mercier (bram) <bram@odoo.com>
This commit is contained in:
Brandon Mercier
2025-03-21 12:44:44 +00:00
parent 907d9efa4e
commit f33c27cf79

View File

@@ -364,14 +364,24 @@ Image/pattern
Header
======
By default, the header contains a responsive navigation menu and the company's logo. You can easily
add new elements or create your own template.
By default, the header contains two distinct templates (desktop and mobile) which display the main
navigation, the company's logo and other optional elements (call-to-action, language selector, etc).
Depending on the situation, choose between enabling/disabling existing elements with a standard
template or building a brand new custom template.
.. _website_themes/layout/header/standard :
Standard
--------
The Odoo Website Builder distinguishes between desktop templates and the mobile template in order to
facilitate the adaptation of the user experience according to the device.
.. _website_themes/layout/header/standard/desktop :
Desktop template
~~~~~~~~~~~~~~~~
Enable one of the header default templates.
.. important::
@@ -404,6 +414,18 @@ Explicitly set the desired template in the `primary_variables.scss` file.
<field name="active" eval="True"/>
</record>
.. _website_themes/layout/header/standard/mobile :
Mobile template
~~~~~~~~~~~~~~~
Each header template comes with the `template_header_mobile` template ensuring a seamless user
experience accross every devices.
.. seealso::
`Mobile header template on Odoo's Git repository <https://github.com/odoo/odoo/blob/d053ea84d45f2ba50a31c2773f2d3ded9fd1ee6b/addons/website/views/website_templates.xml#L343>`_
.. _website_themes/layout/header/custom :
Custom
@@ -475,6 +497,16 @@ variables.
</field>
</record>
Don't forget to adapt the `template_header_mobile` accordingly to keep consistency between desktop
and mobile:
.. code-block:: xml
:caption: ``website_airproof/views/website_templates.xml``
<template id="template_header_mobile" inherit_id="website.template_header_mobile" name="Airproof - Template Header Mobile">
<!-- Xpaths -->
</template>
.. _website_themes/layout/header/components :
Components