8000 [IMP] website: add header and footer, improve menu page · odoo/documentation@ab394e7 · GitHub
[go: up one dir, main page]
Skip to content

Commit ab394e7

Browse files
chiarapratticoauva-odoo
chiaraprattico
authored and
auva-odoo
committed
[IMP] website: add header and footer, improve menu page
taskid-4644988 closes #13400 X-original-commit: 2340ae5 Signed-off-by: Audrey Vandromme (auva) <auva@odoo.com> Signed-off-by: Chiara Prattico (chpr) <chpr@odoo.com>
1 parent 7abbe7a commit ab394e7

File tree

11 files changed

+179
-99
lines changed

11 files changed

+179
-99
lines changed

‎content/applications/websites/website/configuration/multi_website.rst

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ target audience.
1010

1111
Each website can be designed and configured independently with its own :doc:`domain name
1212
<domain_names>`, :doc:`theme <../web_design/themes>`, :doc:`pages <../pages>`, :doc:`menus
13-
<../pages/menus>`, :doc:`languages <translate>`, :doc:`products
13+
<../pages/header_footer>`, :doc:`languages <translate>`, :doc:`products
1414
<../../ecommerce/products>`, assigned sales team, etc. They can also
1515
:ref:`share content and pages <multi-website/website_content>`.
1616

‎content/applications/websites/website/pages.rst

+2-2
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ Duplicating pages
115115
To duplicate a page, access the page, then go to :menuselection:`Site --> Properties` and click
116116
:guilabel:`Duplicate Page`. Enter a :guilabel:`Page Name`, then click :guilabel:`OK`. By default,
117117
the new page is added after the duplicated page in the menu, but you can remove it from the menu or
118-
change its position using the :doc:`menu editor <pages/menus>`.
118+
change its position using the :doc:`menu editor <pages/header_footer>`.
119119

120120
.. _website/delete-page:
121121

@@ -195,5 +195,5 @@ Toggle the :guilabel:`Activate` switch to deactivate the redirection.
195195
.. toctree::
196196
:titlesonly:
197197

198-
pages/menus
198+
pages/header_footer
199199
pages/seo

‎content/applications/websites/website/pages/header_footer.rst

+169
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
===================
2+
Headers and footers
3+
===================
4+
5+
The website header is the top section of a web page and usually contains elements such as the logo,
6+
the :ref:`menu <website/header_footer/header-content>`, the search bar, the sign-in/customer account
7+
button, etc. The footer is displayed at the bottom of a web page and usually contains information
8+
such as contact details, links, legal notices, and other options.
9+
10+
Header design
11+
=============
12+
13+
To modify the header's design, click on :guilabel:`Edit`, then click on the header. The following
14+
options are available in the :guilabel:`Header` section of the :guilabel:`Customize` tab in the
15+
website editor:
16+
17+
- Choose a :guilabel:`Template` from the drop-down menu.
18+
- Select :guilabel:`Background` settings to change the color palette through different
19+
:ref:`Theme styles <website/themes/theme-colors>`, :guilabel:`Custom` color options, and
20+
:guilabel:`Gradient` ones.
21+
- When adding a :guilabel:`Border` to the header, its size, style, and color can be defined.
22+
- Adapt :guilabel:`Round corners` to fit the design.
23+
- Add a :guilabel:`Shadow` and define its :guilabel:`Color`, :guilabel:`Offset`, :guilabel:`Blur`,
24+
and :guilabel:`Spread`.
25+
- Add a :guilabel:`Scroll Effect`. Hover on an effect to preview it.
26+
- Choose the :guilabel:`Header Position` between :guilabel:`Regular`, :guilabel:`Hidden`, and
27+
:guilabel:`Over The Content`. When :guilabel:`Over The Content` is selected, you can customize
28+
the :guilabel:`Background` and :guilabel:`Text Color`.
29+
- Show or hide :guilabel:`Elements` such as text, the search bar, :guilabel:`Sign in` button, social
30+
media links, :guilabel:`Contact us` button, and logo.
31+
32+
To finalize changes, click on :guilabel:`Save`.
33+
34+
.. tip::
35+
To hide the header, click on :guilabel:`Edit`, click on the header, and go to the
36+
:guilabel:`Theme` tab of the website editor. Scroll down to the :guilabel:`Advanced` section and
37+
toggle the :guilabel:`Show Header` switch to hide/show the header.
38+
39+
.. _website/header_footer/header-content:
40+
41+
Header content
42+
==============
43+
44+
Menus organize the header’s content and help users navigate through web pages effectively.
45+
User-friendly and well-structured menus also play a crucial role in improving
46+
:doc:`search engine rankings <seo>`.
47+
48+
.. _website/header_footer/menu-editor:
49+
50+
Menu editor
51+
-----------
52+
53+
The menu editor allows to edit the website's header and add
54+
:ref:`menu items <website/header_footer/menu-items>` and
55+
:ref:`mega menus <website/header_footer/mega-menus>`.
56+
57+
To edit the header's content, go to :menuselection:`Website --> Site --> Menu Editor`. From there,
58+
you can:
59+
60+
- **rename** a menu item or change its URL using the :guilabel:`Edit Menu Item` icon;
61+
- **delete** a menu item using the :guilabel:`Delete Menu Item` icon;
62+
- **move** a menu item by dragging and dropping it to the desired place in the menu;
63+
- **create a regular drop-down menu** by dragging and dropping the sub-menu items to the right,
64+
underneath their parent menu.
65+
66+
.. image:: header_footer/menu-editor.png
67+
:alt: Menu editor with sub-menus
68+
69+
.. note::
70+
You can also access the menu editor by clicking :guilabel:`Edit`, selecting any menu item, and
71+
clicking the :guilabel:`Edit Menu` icon.
72+
73+
.. image:: header_footer/edit-menu-icon.png
74+
:alt: Access the Menu editor while in Edit mode.
75+
76+
.. _website/header_footer/menu-items:
77+
78+
Adding menu items
79+
-----------------
80+
81+
By default, pages are added to the menu as drop-down menu items when
82+
:doc:`they are created <../pages>`. To add a new menu item, follow these steps:
83+
84+
#. Go to :menuselection:`Website --> Site --> Menu Editor`.
85+
#. In the menu editor, click :guilabel:`Add Menu Item`.
86+
#. In the pop-up window, enter the :guilabel:`Name` to be displayed in the menu.
87+
#. Type `/` in the :guilabel:`URL or Email` field to search for a page on your website or `#` to
88+
search for an existing custom anchor.
89+
#. Click :guilabel:`OK`.
90+
#. Edit the :ref:`menu structure <website/header_footer/menu-editor>` if needed, then
91+
:guilabel:`Save`.
92+
93+
Menu item design
94+
~~~~~~~~~~~~~~~~
95+
96+
To modify the menu items, click on :guilabel:`Edit`, click on a menu item, then go to the
97+
:guilabel:`Navbar` section of the website editor. The following options are available:
98+
99+
- Adapt the :guilabel:`Mobile Alignment`.
100+
- Choose the :guilabel:`Font` for the menu items.
101+
- Change the font size, color, and alignment in the :guilabel:`Format` field.
102+
- Select a :guilabel:`Links Style` to highlight the current page in the menu.
103+
- Change the :ref:`style of the header buttons <website/themes/button-styles>`.
104+
- Choose to display the :guilabel:`Sub Menus` :guilabel:`On Hover` or :guilabel:`On Click`.
105+
106+
.. note::
107+
The fields available in the :guilabel:`Navbar` section can vary depending on the chosen template.
108+
109+
To finalize changes, click on :guilabel:`Save`.
110+
111+
.. _website/header_footer/mega-menus:
112+
113+
Mega menus
114+
----------
115+
116+
Mega menus are similar to drop-down menus, but instead of a simple list of sub-menus, they display a
117+
panel divided into groups of navigation options. This makes them suitable for websites with large
118+
amounts of content or :doc:`e-commerce websites <../../ecommerce>`, as they can help include all of
119+
your web pages or :doc:`e-commerce categories <../../ecommerce/products/catalog>` in the menu while
120+
still making all menu items visible at once.
121+
122+
.. image:: header_footer/mega-menu.png
123+
:alt: Mega menu in the navigation bar.
124+
125+
To create a mega menu, go to :menuselection:`Website --> Site --> Menu Editor` and click
126+
:guilabel:`Add Mega Menu Item`. Enter the :guilabel:`Name` of the mega menu in the pop-up, click
127+
:guilabel:`OK`, then :guilabel:`Save`.
128+
129+
To adapt the options and content of the mega menu, click on a mega menu item in the header, then
130+
click :guilabel:`Edit`. Mega menus are composed of building blocks, which means you can customize
131+
each component individually. For example:
132+
133+
- Edit the text directly in the building block.
134+
- Edit a menu item's URL by selecting the menu item and clicking the :guilabel:`Edit link` button
135+
in the small preview pop-up. Type `/` to search for a page on your website, or `#` to search for
136+
an existing custom anchor.
137+
138+
.. image:: header_footer/mega-menu-option.png
139+
:alt: Edit a mega menu option.
140+
141+
- Move a menu item by dragging and dropping the related block to the desired position in the mega
142+
menu.
143+
- Delete a menu item by deleting the related block.
144+
145+
To adapt the general layout of the mega menu, go to the :guilabel:`Customize` tab of the website
146+
editor, then, in the :guilabel:`Mega Menu` section:
147+
148+
- Choose a :guilabel:`Template`.
149+
- Pick the :guilabel:`Size`: either :guilabel:`Full-Width` or :guilabel:`Narrow`.
150+
151+
To finalize changes, click on :guilabel:`Save`.
152+
153+
Footer design
154+
=============
155+
156+
To modify the footer, click on :guilabel:`Edit`, click on the footer, and in the :guilabel:`Footer`
157+
section of the :guilabel:`Customize` tab in the website editor:
158+
159+
- Select a :guilabel:`Template`.
160+
- Choose its :guilabel:`Colors`.
161+
- Choose a :guilabel:`Slideout Effect`: :guilabel:`Regular` (i.e., no effect),
162+
:guilabel:`Slide Hover`, or :guilabel:`Shadow`.
163+
- Toggle the :guilabel:`Copyright` switch to hide or show the copyright.
164+
- Choose the :guilabel:`Border` size.
165+
- Add a :guilabel:`Shadow`.
166+
- Add a :guilabel:`Scroll Top Button` and choose its position.
167+
- Hide or show the footer by toggling the :guilabel:`Page visibility` switch.
168+
169+
To finalize changes, click on :guilabel:`Save`.

‎content/applications/websites/website/pages/menus/edit-menu-icon.png renamed to ‎content/applications/websites/website/pages/header_footer/edit-menu-icon.png

File renamed without changes.

‎content/applications/websites/website/pages/menus/mega-menu-option.png renamed to ‎content/applications/websites/website/pages/header_footer/mega-menu-option.png

File renamed without changes.

‎content/applications/websites/website/pages/header_footer/mega-menu.png

14.3 KB
Loading

‎content/applications/websites/website/pages/menus/menu-editor.png renamed to ‎content/applications/websites/website/pages/header_footer/menu-editor.png

File renamed without changes.

‎content/applications/websites/website/pages/menus.rst

-96
This file was deleted.

‎content/applications/websites/website/pages/menus/mega-menu.png

-23.1 KB
Binary file not shown.

‎content/applications/websites/website/web_design/themes.rst

+3
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,8 @@ a Custom Font` at the bottom of the dropdown menu. In the pop-up window:
134134

135135
Once done, click on :guilabel:`Save and Reload`.
136136

137+
.. _website/themes/button-styles:
138+
137139
Button styles
138140
=============
139141

@@ -143,6 +145,7 @@ To customize the style of your website's primary and secondary buttons, navigate
143145
- Click the arrow next to the :guilabel:`Primary Style` or :guilabel:`Secondary Style` fields and
144146
select one of the available styles for each type of button: :guilabel:`Fill`, :guilabel:`Outline`,
145147
or :guilabel:`Flat`. When selecting :guilabel:`Outline`, the :guilabel:`Border Width` option
148+
appears below, allowing you to adjust the width of the button's outline.
146149
- :ref:`Modify the fonts <website/themes/fonts>`.
147150
- Adjust the :guilabel:`Padding` to change the size of the spacing (in pixels) around the buttons'
148151
labels.

‎redirects/18.0.txt

+4
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,7 @@ applications/sales/sales/send_quotations/quote_template.rst applications/sales/s
2929
# applications/voip
3030

3131
applications/productivity/voip/transfer_forward.rst applications/productivity/voip/voip_widget.rst # voip/transfer_forward --> voip/voip_widget
32+
33+
# applications/websites
34+
35+
applications/websites/website/pages/menus.rst applications/websites/website/pages/header_footer.rst

0 commit comments

Comments
 (0)
0