頁首及頁尾

The website header is the top section of a web page and usually contains elements such as the logo, the 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 Edit, then click on the header. The following options are available in the Header section of the Customize tab in the website editor:

• 从下拉菜单中选择一个 模板。

• 选择:guilabel:背景`设置，通过不同的:ref:`主题样式 <website/themes/theme-colors>、:guilabel:`自定义`颜色选项和:guilabel:`渐变`选项来更改调色板。

• 在为页眉添加:guilabel:`边框`时，可以定义其大小、样式和颜色。

• 调整 :guilabel:`圆角`以适应设计。

• 添加:guilabel:阴影`并定义其:guilabel:`颜色、偏移、模糊`和:guilabel:`扩散。

• Add a Scroll Effect. Hover on an effect to preview it.

• Choose the Header Position between Regular, Hidden, and Over The Content. When Over The Content is selected, you can customize the Background and Text Color.

• Show or hide Elements such as text, the search bar, Sign in button, social media links, Contact us button, and logo.

To finalize changes, click on Save.

小訣竅

To hide the header, click on Edit, click on the header, and go to the Theme tab of the website editor. Scroll down to the Advanced section and toggle the Show Header switch to hide/show the header.

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 search engine rankings.

選單編輯器

The menu editor allows to edit the website’s header and add menu items and mega menus.

To edit the header’s content, go to Website ‣ Site ‣ Menu Editor. From there, you can:

• rename a menu item or change its URL using the Edit Menu Item icon;

• delete a menu item using the 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.

備註

You can also access the menu editor by clicking Edit, selecting any menu item, and clicking the Edit Menu icon.

Add menu items

By default, pages are added to the menu as drop-down menu items when they are created. To add a new menu item, follow these steps:

1. Go to Website ‣ Site ‣ Menu Editor.

2. In the menu editor, click Add Menu Item.

3. In the pop-up window, enter the Name to be displayed in the menu.

4. Type / in the URL or Email field to search for a page on your website or # to search for an existing custom anchor.

5. Click OK.

6. Edit the menu structure if needed, then Save.

Menu item design

To modify the menu items, click on Edit, click on a menu item, then go to the Navbar section of the website editor. The following options are available:

• Adapt the Mobile Alignment.

• Choose the Font for the menu items.

• Change the font size, color, and alignment in the Format field.

• Select a Links Style to highlight the current page in the menu.

• Change the style of the header buttons.

• Choose to display the Sub Menus On Hover or On Click.

備註

The fields available in the Navbar section can vary depending on the chosen template.

To finalize changes, click on Save.

大型選單

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 e-commerce websites, as they can help include all of your web pages or e-commerce categories in the menu while still making all menu items visible at once.

要创建超级菜单，请进入 网站 ‣ 站点 ‣ 菜单编辑器 并点击 添加超级菜单项目。在弹出窗口中输入超级菜单的 名称，点击 确定，然后点击 保存。

To adapt the options and content of the mega menu, click on a mega menu item in the header, then click 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 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.

  

• 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 Customize tab of the website editor, then, in the Mega Menu section:

• Choose a Template.

• Pick the Size: either Full-Width or Narrow.

To finalize changes, click on Save.

Hide a dynamic menu item for non-logged in users

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:

1. Enable developer mode.

2. Go to Website ‣ Configuration ‣ Menus.

3. Expand the list of menus for the relevant website if needed, then click the menu item you wish to hide.

4. In the Visible Groups section, click Add a line under Group Name.

5. Search for the group User types / Portal, select it, then click Select.

6. 儲存。

小訣竅

To hide the Shop menu item, restrict ecommerce access to logged-in users.

Footer design

To modify the footer, click on Edit, click on the footer, and in the Footer section of the Customize tab in the website editor:

• Select a Template.

• Choose its Colors.

• Choose a Slideout Effect: Regular (i.e., no effect), Slide Hover, or Shadow.

• Toggle the Copyright switch to hide or show the copyright.

• Choose the Border size.

• Add a Shadow.

• Add a Scroll Top Button and choose its position.

• Hide or show the footer by toggling the Page visibility switch.

To finalize changes, click on Save.