From 581a3f300fd74c20618e4e1472a82493640566db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CChiara?= Date: Thu, 17 Apr 2025 15:38:01 +0200 Subject: [PATCH] [IMP] website: add header and footer, improve menu page taskid-4644988 --- .../websites/website/pages/menus.rst | 114 +++++++++++++----- 1 file changed, 84 insertions(+), 30 deletions(-) diff --git a/content/applications/websites/website/pages/menus.rst b/content/applications/websites/website/pages/menus.rst index f2ef6bb42e..7d7383cf6b 100644 --- a/content/applications/websites/website/pages/menus.rst +++ b/content/applications/websites/website/pages/menus.rst @@ -1,20 +1,54 @@ -===== -Menus -===== - -Menus are used to organize your website’s content and help visitors navigate through your web pages -effectively. User-friendly and well-structured website menus also play a crucial role in improving +=================== +Headers and Footers +=================== + +Header design +============= + +Headers are used to display elements such as logos, text, search bars, sign-ins, social media links, +logos, buttons, etc., at the top of every website page. + +To modify a header, click on :guilabel:`Edit` and then click on the header. To customize it the +following options are available in the :guilabel:`Header` section of the website editor: + +- Choose a :guilabel:`Template` from one of the options from the drop-down selection. +- Select :guilabel:`Background` settings to change the color palette through different + :guilabel:`Theme` styles, :guilabel:`Custom` color options, and :guilabel:`Gradient` ones. +- When adding a :guilabel:`Border` to the header, its size, style and color can be defined. +- :guilabel:`Round corners` can be adapted to fit the design. +- :guilabel:`Shadow`, its :guilabel:`Color`, :guilabel:`Offset`, :guilabel:`Blur`, and + :guilabel:`Spread` can be adjusted. +- Add a :guilabel:`Scroll Effect`. To preview the effect, hover on it. +- Choose the :guilabel:`Header Position` between :guilabel:`Regular`, :guilabel:`Hidden` and + :guilabel:`Over The Content` for this last one the :guilabel:`Background` and + :guilabel:`Text Color` can be customized. +- Add and manage additional :guilabel:`Elements` like text, search bar, sign-in, social media links, + buttons and logo. In this field you can choose to show or hide the :guilabel:`Contact Us` button. +- :guilabel:`Show Empty` allows to display the cart and the wishlist when empty. + +To finalize changes, click on :guilabel:`Save`. + +Hide header +----------- + +To hide the header, click on :guilabel:`Edit`, click on the header and go to the :guilabel:`THEME` +tab of the website editor. Scroll down to the :guilabel:`Advanced` section to hide header or to show +it again. + +Header content +============== + +Menus organize the header’s content and help users navigate through web pages effectively. +User-friendly and well-structured menus also play a crucial role in improving :doc:`search engine rankings `. -Odoo allows you to customize the content and appearance of your website's menu to your needs. - Menu editor -=========== +----------- -The menu editor allows you to edit your website's menu and add :ref:`regular menu items -` and :ref:`mega menus `. +The menu editor allows to edit the website's header and add :ref:`menu items ` +and :ref:`mega menus `. -To edit your website's menu, go to :menuselection:`Website --> Site --> Menu Editor`. From there, +To edit the header's content, go to :menuselection:`Website --> Site --> Menu Editor`. From there, you can: - **rename** a menu item or change its URL using the :guilabel:`Edit Menu Item` icon; @@ -34,24 +68,44 @@ you can: .. image:: menus/edit-menu-icon.png :alt: Access the Menu editor while in Edit mode. -.. _website/regular-menus: +.. _website/menus/menu-items: -Adding regular menu items -------------------------- +Menu items +---------- By default, pages are added to the menu as regular menu items when :doc:`they are created -<../pages>`. You can also add regular menu items from the menu editor by clicking :guilabel:`Add -Menu Item`. Enter the :guilabel:`Name` and URL of the related page in the pop-up window that appears -on the screen and click :guilabel:`OK`. +<../pages>`. Menu items can be added from the menu editor by clicking :guilabel:`Add Menu Item`. +Enter the :guilabel:`Name` and URL of the related page in the pop-up window and click +:guilabel:`OK`. .. tip:: In the :guilabel:`URL or Email` field, you can type `/` to search for a page on your website or `#` to search for an existing custom anchor. -.. _website/mega-menus: +Menu items design +~~~~~~~~~~~~~~~~~ + +To modify the menu items, go to the :guilabel:`Navbar` section of the website editor to: + +- Adapt the :guilabel:`Mobile Alignment` +- Choose the :guilabel:`Font` for the menu items. +- Pick the font size, color and alignment in the :guilabel:`Format` field. +- Select a :guilabel:`Links Style` to show which page is currently being viewed. +- To change the sign-in button, language button and the contact-us button colors, select the option + you need in the :guilabel:`Additional colors` field among :guilabel:`Primary`, + :guilabel:`Secondary` or :guilabel:`Default`. +- Choose to display the :guilabel:`Sub Menus` :guilabel:`On Hover` or :guilabel:`On CLick`. + +.. note:: + + The elements in the :guilabel:`Navbar` section can vary depending on the templates chosen. + +To finalize changes, click on :guilabel:`Save`. + +.. _website/menus/mega-menus: -Adding mega menus ------------------ +Mega menus +---------- Mega menus are similar to drop-down menus, but instead of a simple list of sub-menus, they display a panel divided into groups of navigation options. This makes them suitable for websites with large @@ -66,10 +120,10 @@ To create a mega menu, go to :menuselection:`Website --> Site --> Menu Editor` a :guilabel:`Add Mega Menu Item`. Enter the :guilabel:`Name` of the mega menu in the pop-up, click :guilabel:`OK`, then :guilabel:`Save`. -To adapt the options and layout of the mega menu, click it in the navigation bar, then click -:guilabel:`Edit`. Mega menus are composed of building blocks, which means you can customize each -component individually using inline formatting, as well as the options available in the -:guilabel:`Customize` tab in the website builder. For example, you can: +To adapt the options and layout of the mega menu, click on a mega menu item in the header, then +click :guilabel:`Edit`. Mega menus are composed of building blocks, which means you can customize +each component individually using inline formatting, as well as the options available in the +:guilabel:`Customize` tab of the website builder. For example, you can: - edit the text directly in the building block; - edit a menu item's URL by selecting the menu item, then clicking the :guilabel:`Edit link` button @@ -88,9 +142,9 @@ component individually using inline formatting, as well as the options available and :guilabel:`Size` in the :guilabel:`Mega menu` section in the :guilabel:`Customize` tab in the website builder. -Header and navigation bar appearance -==================================== +Footer design +============= -To customize the appearance of your website's menu, click :guilabel:`Edit`, then select the -navigation bar or any menu item. You can then adapt the fields in the :guilabel:`Header` and -:guilabel:`Navbar` sections in the :guilabel:`Customize` tab in the website builder. +Footers are used to display information such as contact details, links, legal notices and other +options at the bottom of the page. To modify a footer click on :guilabel:`Edit`, click on it and in +:guilabel:`Customize` tab og the website editor pick a :guilabel:`Template`