diff --git a/content/applications/websites/website/configuration/multi_website.rst b/content/applications/websites/website/configuration/multi_website.rst index 7ca9065cfe..15ab5034dc 100644 --- a/content/applications/websites/website/configuration/multi_website.rst +++ b/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 `, :doc:`theme <../web_design/themes>`, :doc:`pages <../pages>`, :doc:`menus -<../pages/menus>`, :doc:`languages `, :doc:`products +<../pages/header_footer>`, :doc:`languages `, :doc:`products <../../ecommerce/products>`, assigned sales team, etc. They can also :ref:`share content and pages `. diff --git a/content/applications/websites/website/pages.rst b/content/applications/websites/website/pages.rst index 87348f548f..3a61a5d15c 100644 --- a/content/applications/websites/website/pages.rst +++ b/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 `. +change its position using the :doc:`menu editor `. .. _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 diff --git a/content/applications/websites/website/pages/header_footer.rst b/content/applications/websites/website/pages/header_footer.rst new file mode 100644 index 0000000000..2a132521f1 --- /dev/null +++ b/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 `, 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 `, :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 `. + +.. _website/header_footer/menu-editor: + +Menu editor +----------- + +The menu editor allows to edit the website's header and add +:ref:`menu items ` and +:ref:`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 ` 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 `. +- 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`. diff --git a/content/applications/websites/website/pages/menus/edit-menu-icon.png b/content/applications/websites/website/pages/header_footer/edit-menu-icon.png similarity index 100% rename from content/applications/websites/website/pages/menus/edit-menu-icon.png rename to content/applications/websites/website/pages/header_footer/edit-menu-icon.png diff --git a/content/applications/websites/website/pages/menus/mega-menu-option.png b/content/applications/websites/website/pages/header_footer/mega-menu-option.png similarity index 100% rename from content/applications/websites/website/pages/menus/mega-menu-option.png rename to content/applications/websites/website/pages/header_footer/mega-menu-option.png diff --git a/content/applications/websites/website/pages/header_footer/mega-menu.png b/content/applications/websites/website/pages/header_footer/mega-menu.png new file mode 100644 index 0000000000..6ba0e2b292 Binary files /dev/null and b/content/applications/websites/website/pages/header_footer/mega-menu.png differ diff --git a/content/applications/websites/website/pages/menus/menu-editor.png b/content/applications/websites/website/pages/header_footer/menu-editor.png similarity index 100% rename from content/applications/websites/website/pages/menus/menu-editor.png rename to content/applications/websites/website/pages/header_footer/menu-editor.png diff --git a/content/applications/websites/website/pages/menus.rst b/content/applications/websites/website/pages/menus.rst deleted file mode 100644 index f2ef6bb42e..0000000000 --- a/content/applications/websites/website/pages/menus.rst +++ /dev/null @@ -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 `. - -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 `. - -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. diff --git a/content/applications/websites/website/pages/menus/mega-menu.png b/content/applications/websites/website/pages/menus/mega-menu.png deleted file mode 100644 index 5d93674c53..0000000000 Binary files a/content/applications/websites/website/pages/menus/mega-menu.png and /dev/null differ diff --git a/content/applications/websites/website/web_design/themes.rst b/content/applications/websites/website/web_design/themes.rst index 2d6bf10b74..65cee5998c 100644 --- a/content/applications/websites/website/web_design/themes.rst +++ b/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 `. - Adjust the :guilabel:`Padding` to change the size of the spacing (in pixels) around the buttons' labels. diff --git a/redirects/18.0.txt b/redirects/18.0.txt index dc8b795bb3..a9af92d20b 100644 --- a/redirects/18.0.txt +++ b/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 \ No newline at end of file