diff --git a/content/applications/websites/ecommerce/checkout.rst b/content/applications/websites/ecommerce/checkout.rst index a6c3df86364..4ab27bb2e95 100644 --- a/content/applications/websites/ecommerce/checkout.rst +++ b/content/applications/websites/ecommerce/checkout.rst @@ -75,6 +75,8 @@ Button` section, and configure the following: - The default :guilabel:`Add to cart` button does not offer those options, but its label can be changed. +.. _ecommerce/checkout/cart-button-header: + .. tip:: In the website editor, it is also possible to show or hide the :icon:`fa-shopping-cart` (:guilabel:`cart`) icon in the page's header. To do so, click the header, go to the diff --git a/content/applications/websites/ecommerce/ecommerce_design/catalog.rst b/content/applications/websites/ecommerce/ecommerce_design/catalog.rst index ad321865fec..6a6af0c1115 100644 --- a/content/applications/websites/ecommerce/ecommerce_design/catalog.rst +++ b/content/applications/websites/ecommerce/ecommerce_design/catalog.rst @@ -233,7 +233,7 @@ blocks in the :guilabel:`Style` tab. E-commerce-specific website footer ================================== -The :ref:`website footer ` can also be configured to use +The :ref:`website footer ` can also be configured to use the e-commerce-specific template. Then, add the relevant :ref:`links `, and adapt the footer's text and layout as needed in the website editor. The :doc:`available payment methods ` are also shown in this footer. To adapt their diff --git a/content/applications/websites/website/structure/header_footer.rst b/content/applications/websites/website/structure/header_footer.rst index 5600f700160..2c185bde8b1 100644 --- a/content/applications/websites/website/structure/header_footer.rst +++ b/content/applications/websites/website/structure/header_footer.rst @@ -2,49 +2,20 @@ 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. - -.. _website/header_footer/header-design: - -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. +The website header is the top section of a web page and typically includes elements such as the +logo, navigation :ref:`menu `, search bar, and sign-in or +:doc:`customer account <../../ecommerce/configuration/customer_accounts>` button. The footer is +displayed at the bottom of a web page and usually contains contact details, links, legal notices, +and other useful information. Both can be customized according to your company’s needs. .. _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 +The header includes company information, quick-access buttons, and :ref:`website menus +` to help users navigate the website effectively. +Well-structured, user-friendly headers and menus also play an important role in improving :doc:`search engine rankings `. .. _website/header_footer/menu-editor: @@ -52,142 +23,223 @@ User-friendly and well-structured menus also play a crucial role in improving Menu editor ----------- -The menu editor allows to edit the website's header and add -:ref:`menu items ` and -:ref:`mega menus `. +The menu editor allows you to edit the website header and add :ref:`menu items +` and :ref:`mega menus `. + +.. _website/header_footer/open-menu-editor: -To edit the header's content, go to :menuselection:`Website --> Site --> Menu Editor`. From there, -you can: +To open the menu editor, 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, +- **Rename** a menu item or change its URL using the :icon:`fa-pencil` :guilabel:`Edit Menu Item` + icon. +- **Delete** a menu item using the :icon:`fa-trash` :guilabel:`Delete Menu Item` icon. +- **Move** a menu item by dragging and dropping it to the desired location 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 + :scale: 70% .. note:: - You can also access the menu editor by clicking :guilabel:`Edit`, selecting any menu item, and - clicking the :guilabel:`Edit Menu` icon. + You can also access the menu editor from the website editor. To do so, either: - .. image:: header_footer/edit-menu-icon.png - :alt: Access the Menu editor while in Edit mode. + - Select any menu item and click :guilabel:`Edit Menu`, or + + .. image:: header_footer/edit-menu-icon.png + :alt: Access the menu editor while in Edit mode. + + - Navigate to the :guilabel:`Style` tab, and click :guilabel:`Edit Menu` next to the + :guilabel:`Header` section title. + + .. image:: header_footer/edit-menu-button.png + :alt: Access the menu editor from the Style tab. .. _website/header_footer/menu-items: Add menu items --------------- +~~~~~~~~~~~~~~ -By default, pages are added to the menu as drop-down menu items when -:doc:`they are created <../structure/pages>`. To add a new menu item, follow these steps: +By default, pages are added to the menu as drop-down menu items when :doc:`they are created +<../structure/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`. +#. In the :ref:`menu editor `, click :guilabel:`Add Menu + Item`. +#. In the pop-up window, enter the :guilabel:`Title` to be displayed in the menu. +#. In the :guilabel:`URL or Email` field, type `/` to search for an existing page on the website or + `#` to search for an existing custom anchor. +#. Click :guilabel:`Continue`. +#. Adjust the :ref:`menu structure ` if needed. +#. Click :guilabel:`Save`. + +.. _website/header_footer/menu-item-design: 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: +To modify the menu items' design, click :guilabel:`Edit` in the upper-right corner and select the +header. Then, go to the :guilabel:`Style` tab and navigate to the :guilabel:`Navigation` section. +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`. +- Adjust the :guilabel:`Desktop Menu` alignment for desktop devices. +- Adjust the :guilabel:`Mobile Menu` alignment and position for mobile devices. +- Choose whether :guilabel:`Sub Menus` open :guilabel:`On Hover` or :guilabel:`On Click`. +- Select a :guilabel:`Link Style` to highlight the current page in the menu. .. note:: - The fields available in the :guilabel:`Navbar` section can vary depending on the chosen template. + The options available in the :guilabel:`Navigation` section may vary depending on the selected + template. + +.. _website/header_footer/hide-menu-item: + +Hide a dynamic menu item for non-logged-in users +************************************************ -To finalize changes, click on :guilabel:`Save`. +To hide a :ref:`dynamic ` menu item (i.e., a menu item generated +automatically by Odoo, for example, when installing an app or module, such as `Events`, `Courses`, +etc.) for non-logged-in users, follow these steps: + +#. :ref:`Enable developer mode `. +#. Go to :menuselection:`Website --> Configuration --> Menus`. +#. Expand the list of menus for the relevant website if needed. +#. Select the menu item you wish to hide. +#. In the :guilabel:`Visible Groups` section, click :guilabel:`Add a line`. +#. Search for the group :guilabel:`Name` :guilabel:`Role / Portal`, and :guilabel:`Select` it. +#. Save. + +.. tip:: + - You can further customize the menu items on this menu item form. For example: + + - Enable the :guilabel:`New Window` checkbox to open the page in a new tab when clicked. + - Add a :guilabel:`Related Page` or :guilabel:`Related Model Page`. + - Assign a :guilabel:`Parent Menu`, and/or :guilabel:`Child Menus` to create a hierarchy. + + - To hide the `Shop` menu item, :ref:`restrict e-commerce access to logged-in users + `. .. _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 :ref:`e-commerce categories ` in the -menu while still making all menu items visible at once. +Mega menus are similar to drop-down menus, but instead of displaying a simple list of sub-menus, +they show a panel divided into groups of navigation options. They are especially useful for websites +with large amounts of content or :doc:`e-commerce websites <../../ecommerce>`, as they can help +include all of the web pages or :ref:`e-commerce categories +` in the menu while keeping 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: +To create a mega menu, follow these steps: -- 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. +#. In the :ref:`menu editor `, click :guilabel:`Add Mega + Menu Item`. +#. In the pop-up window, enter the :guilabel:`Title` of the mega menu. +#. Click :guilabel:`Continue`. +#. Adjust the :ref:`menu structure ` if needed. +#. Click :guilabel:`Save`. -- 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. +Mega menu design +**************** -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: +To adapt the general layout of the mega menu, click :guilabel:`Edit` in the upper-right corner and +select the mega menu. Then, go to the :guilabel:`Style` tab and navigate to the :guilabel:`Mega +Menu` section. The following options are available: - Choose a :guilabel:`Template`. - Pick the :guilabel:`Size`: either :guilabel:`Full-Width` or :guilabel:`Narrow`. +- Toggle :ref:`eCommerce Categories ` if applicable. -To finalize changes, click on :guilabel:`Save`. +Mega menus are built using :doc:`building blocks <../web_design/building_blocks>`, which means each +component can be customized individually. For example: -Hide a dynamic menu item for non-logged in users ------------------------------------------------- +- Edit the text directly within the building block. +- Edit a menu item's URL by selecting the mega menu item and clicking the :guilabel:`Edit` button in + the small preview pop-up window. Type `/` to search for a page on a website, or `#` to search for + an existing custom anchor. -To hide a dynamic menu item (i.e., a menu item generated automatically by Odoo, for example, when -you install an app or module, such as `Events`, `Courses`, etc.) for non-logged in users, follow -these steps: + .. image:: header_footer/mega-menu-option.png + :alt: Edit a mega menu option. -#. :ref:`Enable developer mode `. -#. Go to :menuselection:`Website --> Configuration --> Menus`. -#. Expand the list of menus for the relevant website if needed, then click the menu item you wish to - hide. -#. In the :guilabel:`Visible Groups` section, click :guilabel:`Add a line` under - :guilabel:`Group Name`. -#. Search for the group :guilabel:`User types / Portal`, select it, then click :guilabel:`Select`. -#. Save. +- Move a menu item by dragging and dropping the related block to the desired position in the mega + menu. +- Delete a menu item by clicking the :icon:`fa-trash` :guilabel:`Remove` icon of the related block. -.. tip:: - To hide the `Shop` menu item, :doc:`restrict ecommerce access to logged-in users - <../../ecommerce/configuration/customer_accounts>`. +.. _website/header_footer/design: -.. _website/header_footer/footer-design: +Header and footer design +======================== -Footer design -============= +To modify the header or footer design, click :guilabel:`Edit` in the upper-right corner and select +the header or footer. Then, go to the :guilabel:`Style` tab and navigate to the :guilabel:`Header` +or :guilabel:`Footer` section. The following options are available: -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: +- Choose a :guilabel:`Template` from the drop-down menu. +- Select a :guilabel:`Background` color by defining a :ref:`theme ` + style, a :guilabel:`Custom` color option, or a :guilabel:`Gradient`. +- Set the :guilabel:`Content Width`. +- Add a :guilabel:`Border` to the footer and customize its size, style, and color. +- Adapt :guilabel:`Round corners` to fit the design. +- Add a :guilabel:`Shadow` and define its :guilabel:`Color`, :guilabel:`Offset`, :guilabel:`Blur`, + and :guilabel:`Spread`. -- 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. +.. tabs:: + + .. tab:: Header-specific design options + + To further customize the website's header, use the following header-specific design options + in the :guilabel:`Header` section: + + - Add a :guilabel:`Scroll Effect` to determine how the header behaves while scrolling the + page. + Hover over an effect to preview it. + - Choose the :guilabel:`Header Position` for the selected page: :guilabel:`Regular`, + :guilabel:`Hidden`, or :guilabel:`Over The Content`. When :guilabel:`Over The Content` is + selected, you can also customize the :guilabel:`Background` and :guilabel:`Text Color`. + + .. tip:: + - To hide the header on all pages, go to the :guilabel:`Theme` tab of the website editor. + Scroll down to the :guilabel:`Advanced` section and toggle :guilabel:`Show Header` off. + - :guilabel:`Hidden` elements, including the header, are available under :ref:`Invisible + Elements `. + + - Change the :guilabel:`Default` :guilabel:`Accent Color` to either the :guilabel:`Primary` or + :guilabel:`Secondary` :ref:`color ` to add a subtle contrast to + drop-down buttons in the header. + - Define a :ref:`font `. + - Set the :guilabel:`Format` size and add a color if needed. + + To control the visibility of specific elements, navigate to the :guilabel:`Show/Hide Elements` + section of the :guilabel:`Style` tab. You can show or hide: + + - :guilabel:`Visuals`, such as the :guilabel:`Company logo`, :guilabel:`Text Elements` (e.g., + a phone number), and :guilabel:`Social Links` for linking all social media accounts. + - :guilabel:`Actions`, such as the :guilabel:`Search Bar`, the :ref:`Language Selector + `, the :guilabel:`Sign in` button, and the :guilabel:`Header + Button` (a :guilabel:`Contact us` button by default). + - :ref:`Add to cart ` and :ref:`Add to wishlist + ` buttons. You can enable a + :guilabel:`Background` for these navigation icons. + + .. tab:: Footer-specific design options + + To further customize the website's footer, use the following footer-specific design options + in the :guilabel:`Footer` section: + + - Choose a :guilabel:`Slideout Effect`: :guilabel:`Regular` (i.e., no effect), + :guilabel:`Slide Hover`, or :guilabel:`Shadow`. + - Toggle the :guilabel:`Scroll Top Button` option to add a :icon:`fa-caret-up` + :guilabel:`Scroll to Top` button, then choose its position. + - Toggle the :guilabel:`Copyright` switch to hide or show the copyright notice. If enabled, + add a color in the :guilabel:`Copyright` section if needed. + - Hide or show the footer for the current page by toggling the :guilabel:`Page visibility` + switch. Hidden elements, including the footer, are available under + :ref:`Invisible Elements `. -To finalize changes, click on :guilabel:`Save`. +.. tip:: + You can also add :guilabel:`Inner Content` :ref:`blocks ` to the + header or footer for further customization, such as :ref:`e-commerce-specific footer options + `. diff --git a/content/applications/websites/website/structure/header_footer/edit-menu-button.png b/content/applications/websites/website/structure/header_footer/edit-menu-button.png new file mode 100644 index 00000000000..a9a83613a94 Binary files /dev/null and b/content/applications/websites/website/structure/header_footer/edit-menu-button.png differ diff --git a/content/applications/websites/website/structure/header_footer/edit-menu-icon.png b/content/applications/websites/website/structure/header_footer/edit-menu-icon.png index a2b9a388bbe..ed26b901e17 100644 Binary files a/content/applications/websites/website/structure/header_footer/edit-menu-icon.png and b/content/applications/websites/website/structure/header_footer/edit-menu-icon.png differ diff --git a/content/applications/websites/website/structure/header_footer/mega-menu-option.png b/content/applications/websites/website/structure/header_footer/mega-menu-option.png index 841bc6c92c1..8a58da44671 100644 Binary files a/content/applications/websites/website/structure/header_footer/mega-menu-option.png and b/content/applications/websites/website/structure/header_footer/mega-menu-option.png differ diff --git a/content/applications/websites/website/web_design/building_blocks.rst b/content/applications/websites/website/web_design/building_blocks.rst index 48588761c65..13e57959a57 100644 --- a/content/applications/websites/website/web_design/building_blocks.rst +++ b/content/applications/websites/website/web_design/building_blocks.rst @@ -123,8 +123,8 @@ You can display an Odoo contact form on another website using an iframe. To do s steps: #. **Prepare the Odoo form:** Create a contact form on a page in Odoo Website and remove the - :ref:`header design ` and the :ref:`footer design - `. Make sure only the contact form remains on the page. + :ref:`header and footer design `. Make sure only the contact form + remains on the page. #. **Generate an embeddable code:** Copy the URL of the Odoo form page and paste it into an iframe generator, such as `La Digitale.dev `_ or `iFrame Generator `_ . Adjust the width and height for proper