[IMP] website: add header and footer, improve menu page

taskid-4644988

closes odoo/documentation#13400

X-original-commit: 2340ae5a0e
Signed-off-by: Audrey Vandromme (auva) <auva@odoo.com>
Signed-off-by: Chiara Prattico (chpr) <chpr@odoo.com>

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

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

content/applications/websites/website/pages.rst

@@ -115,7 +115,7 @@ Duplicating pages
 To duplicate a page, access the page, then go to :menuselection:`Site --> Properties` and click
 :guilabel:`Duplicate Page`. Enter a :guilabel:`Page Name`, then click :guilabel:`OK`. By default,
 the new page is added after the duplicated page in the menu, but you can remove it from the menu or
-change its position using the :doc:`menu editor <pages/menus>`.
+change its position using the :doc:`menu editor <pages/header_footer>`.
 
 .. _website/delete-page:
 
@@ -195,5 +195,5 @@ Toggle the :guilabel:`Activate` switch to deactivate the redirection.
 .. toctree::
    :titlesonly:
 
-   pages/menus
+   pages/header_footer
    pages/seo

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

@@ -0,0 +1,169 @@
+===================
+Headers and footers
+===================
+
+The website header is the top section of a web page and usually contains elements such as the logo,
+the :ref:`menu <website/header_footer/header-content>`, the search bar, the sign-in/customer account
+button, etc. The footer is displayed at the bottom of a web page and usually contains information
+such as contact details, links, legal notices, and other options.
+
+Header design
+=============
+
+To modify the header's design, click on :guilabel:`Edit`, then click on the header. The following
+options are available in the :guilabel:`Header` section of the :guilabel:`Customize` tab in the
+website editor:
+
+- Choose a :guilabel:`Template` from the drop-down menu.
+- Select :guilabel:`Background` settings to change the color palette through different
+  :ref:`Theme styles <website/themes/theme-colors>`, :guilabel:`Custom` color options, and
+  :guilabel:`Gradient` ones.
+- When adding a :guilabel:`Border` to the header, its size, style, and color can be defined.
+- Adapt :guilabel:`Round corners` to fit the design.
+- Add a :guilabel:`Shadow` and define its :guilabel:`Color`, :guilabel:`Offset`, :guilabel:`Blur`,
+  and :guilabel:`Spread`.
+- Add a :guilabel:`Scroll Effect`. Hover on an effect to preview it.
+- Choose the :guilabel:`Header Position` between :guilabel:`Regular`, :guilabel:`Hidden`, and
+  :guilabel:`Over The Content`. When :guilabel:`Over The Content` is selected, you can customize
+  the :guilabel:`Background` and :guilabel:`Text Color`.
+- Show or hide :guilabel:`Elements` such as text, the search bar, :guilabel:`Sign in` button, social
+  media links, :guilabel:`Contact us` button, and logo.
+
+To finalize changes, click on :guilabel:`Save`.
+
+.. tip::
+   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 and
+   toggle the :guilabel:`Show Header` switch to hide/show the header.
+
+.. _website/header_footer/header-content:
+
+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 <seo>`.
+
+.. _website/header_footer/menu-editor:
+
+Menu editor
+-----------
+
+The menu editor allows to edit the website's header and add
+:ref:`menu items <website/header_footer/menu-items>` and
+:ref:`mega menus <website/header_footer/mega-menus>`.
+
+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;
+- **delete** a menu item using the :guilabel:`Delete Menu Item` icon;
+- **move** a menu item by dragging and dropping it to the desired place in the menu;
+- **create a regular drop-down menu** by dragging and dropping the sub-menu items to the right,
+  underneath their parent menu.
+
+.. image:: header_footer/menu-editor.png
+   :alt: Menu editor with sub-menus
+
+.. note::
+   You can also access the menu editor by clicking :guilabel:`Edit`, selecting any menu item, and
+   clicking the :guilabel:`Edit Menu` icon.
+
+  .. image:: header_footer/edit-menu-icon.png
+     :alt: Access the Menu editor while in Edit mode.
+
+.. _website/header_footer/menu-items:
+
+Adding menu items
+-----------------
+
+By default, pages are added to the menu as drop-down menu items when
+:doc:`they are created <../pages>`. To add a new menu item, follow these steps:
+
+#. Go to :menuselection:`Website --> Site --> Menu Editor`.
+#. In the menu editor, click :guilabel:`Add Menu Item`.
+#. In the pop-up window, enter the :guilabel:`Name` to be displayed in the menu.
+#. Type `/` in the :guilabel:`URL or Email` field to search for a page on your website or `#` to
+   search for an existing custom anchor.
+#. Click :guilabel:`OK`.
+#. Edit the :ref:`menu structure <website/header_footer/menu-editor>` if needed, then
+   :guilabel:`Save`.
+
+Menu item design
+~~~~~~~~~~~~~~~~
+
+To modify the menu items, click on :guilabel:`Edit`, click on a menu item, then go to the
+:guilabel:`Navbar` section of the website editor. The following options are available:
+
+- Adapt the :guilabel:`Mobile Alignment`.
+- Choose the :guilabel:`Font` for the menu items.
+- Change the font size, color, and alignment in the :guilabel:`Format` field.
+- Select a :guilabel:`Links Style` to highlight the current page in the menu.
+- Change the :ref:`style of the header buttons <website/themes/button-styles>`.
+- Choose to display the :guilabel:`Sub Menus` :guilabel:`On Hover` or :guilabel:`On Click`.
+
+.. note::
+   The fields available in the :guilabel:`Navbar` section can vary depending on the chosen template.
+
+To finalize changes, click on :guilabel:`Save`.
+
+.. _website/header_footer/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
+amounts of content or :doc:`e-commerce websites <../../ecommerce>`, as they can help include all of
+your web pages or :doc:`e-commerce categories <../../ecommerce/products/catalog>` in the menu while
+still making all menu items visible at once.
+
+.. image:: header_footer/mega-menu.png
+   :alt: Mega menu in the navigation bar.
+
+To create a mega menu, go to :menuselection:`Website --> Site --> Menu Editor` and click
+: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 content 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. For example:
+
+- Edit the text directly in the building block.
+- Edit a menu item's URL by selecting the menu item and clicking the :guilabel:`Edit link` button
+  in the small preview pop-up. Type `/` to search for a page on your website, or `#` to search for
+  an existing custom anchor.
+
+  .. image:: header_footer/mega-menu-option.png
+     :alt: Edit a mega menu option.
+
+- Move a menu item by dragging and dropping the related block to the desired position in the mega
+  menu.
+- Delete a menu item by deleting the related block.
+
+To adapt the general layout of the mega menu, go to the :guilabel:`Customize` tab of the website
+editor, then, in the :guilabel:`Mega Menu` section:
+
+- Choose a :guilabel:`Template`.
+- Pick the :guilabel:`Size`: either :guilabel:`Full-Width` or :guilabel:`Narrow`.
+
+To finalize changes, click on :guilabel:`Save`.
+
+Footer design
+=============
+
+To modify the footer, click on :guilabel:`Edit`, click on the footer, and in the :guilabel:`Footer`
+section of the :guilabel:`Customize` tab in the website editor:
+
+- Select a :guilabel:`Template`.
+- Choose its :guilabel:`Colors`.
+- Choose a :guilabel:`Slideout Effect`: :guilabel:`Regular` (i.e., no effect),
+  :guilabel:`Slide Hover`, or :guilabel:`Shadow`.
+- Toggle the :guilabel:`Copyright` switch to hide or show the copyright.
+- Choose the :guilabel:`Border` size.
+- Add a :guilabel:`Shadow`.
+- Add a :guilabel:`Scroll Top Button` and choose its position.
+- Hide or show the footer by toggling the :guilabel:`Page visibility` switch.
+
+To finalize changes, click on :guilabel:`Save`.

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

@@ -1,96 +0,0 @@
-=====
-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
-:doc:`search engine rankings <seo>`.
-
-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
-<website/regular-menus>` and :ref:`mega menus <website/mega-menus>`.
-
-To edit your website's menu, 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;
-- **delete** a menu item using the :guilabel:`Delete Menu Item` icon;
-- **move** a menu item by dragging and dropping it to the desired place in the menu;
-- **create a regular drop-down menu** by dragging and dropping the sub-menu items to the right,
-  underneath their parent menu.
-
-.. image:: menus/menu-editor.png
-   :alt: Menu editor with sub-menus
-
-.. note::
-
-  You can also access the menu editor by clicking :guilabel:`Edit`, selecting any menu item and
-  clicking the :guilabel:`Edit Menu` icon.
-
-  .. image:: menus/edit-menu-icon.png
-     :alt: Access the Menu editor while in Edit mode.
-
-.. _website/regular-menus:
-
-Adding regular 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`.
-
-.. 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:
-
-Adding 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
-amounts of content, as they can help include all of your web pages in the menu while still making
-all menu items visible at once. Mega menus can also be structured more visually than regular
-drop-down menus, for example, through layout, typography, and icons.
-
-.. image:: menus/mega-menu.png
-   :alt: Mega menu in the navigation bar.
-
-To create a mega menu, go to :menuselection:`Website --> Site --> Menu Editor` and click
-: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:
-
-- 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
-  in the small preview pop-up. Type `/` to search for a page on your website, or `#` to search for
-  an existing custom anchor.
-
-  .. image:: menus/mega-menu-option.png
-     :alt: Edit a mega menu option.
-
-- move a menu item by dragging and dropping the related block to the desired position in the mega
-  menu;
-- delete a menu item by deleting the related block.
-
-.. tip::
-   You can adapt the general layout of the mega menu by selecting the desired :guilabel:`Template`
-   and :guilabel:`Size` in the :guilabel:`Mega menu` section in the :guilabel:`Customize` tab in the
-   website builder.
-
-Header and navigation bar appearance
-====================================
-
-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.

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

@@ -134,6 +134,8 @@ a Custom Font` at the bottom of the dropdown menu. In the pop-up window:
 
 Once done, click on :guilabel:`Save and Reload`.
 
+.. _website/themes/button-styles:
+
 Button styles
 =============
 
@@ -143,6 +145,7 @@ To customize the style of your website's primary and secondary buttons, navigate
 - Click the arrow next to the :guilabel:`Primary Style` or :guilabel:`Secondary Style` fields and
   select one of the available styles for each type of button: :guilabel:`Fill`, :guilabel:`Outline`,
   or :guilabel:`Flat`. When selecting :guilabel:`Outline`, the :guilabel:`Border Width` option
+  appears below, allowing you to adjust the width of the button's outline.
 - :ref:`Modify the fonts <website/themes/fonts>`.
 - Adjust the :guilabel:`Padding` to change the size of the spacing (in pixels) around the buttons'
   labels.

redirects/18.0.txt

@@ -29,3 +29,7 @@ applications/sales/sales/send_quotations/quote_template.rst applications/sales/s
 # applications/voip
 
 applications/productivity/voip/transfer_forward.rst applications/productivity/voip/voip_widget.rst # voip/transfer_forward --> voip/voip_widget
+
+# applications/websites
+
+applications/websites/website/pages/menus.rst applications/websites/website/pages/header_footer.rst