머리글 및 바닥글¶
The website header is the top section of a web page and typically includes elements such as the logo, navigation menu, search bar, and sign-in or customer account 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 as needed.
머리글 내용¶
The header includes company information, quick-access buttons, and website menus to help users navigate the website effectively. Well-structured, user-friendly headers and menus also play an important role in improving search engine rankings.
메뉴 편집기¶
The menu editor allows you to edit the website header and add menu items and mega menus.
To open the menu editor, 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 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.
팁
You can also access the menu editor from the website editor. To do so, either:
Select any menu item and click Edit Menu, or
Navigate to the Style tab, and click Edit Menu next to the Header section title.
메뉴 항목 추가¶
기본적으로 페이지는 생성될 때 드롭다운 메뉴 항목으로 메뉴에 추가됩니다. 새 메뉴 항목을 추가하려면 다음 단계를 따르세요:
In the menu editor, click Add Menu Item.
In the pop-up window, enter the Title to be displayed in the menu.
In the URL or Email field, type
/to search for an existing page on the website or#to search for an existing custom anchor.참고
To add a menu item for a page that does not exist yet, enter the new URL or anchor and click Create Page in the Edit Menu pop-up. If you add the menu item without creating the corresponding page, the link leads to a 404 error page.
계속 을 클릭합니다.
Adjust the menu structure if needed.
:guilabel:`저장`을 클릭합니다.
메뉴 아이템 설계¶
To modify the menu items’ design, click Edit in the upper-right corner and select the header. Then, go to the Style tab and navigate to the Navigation section. The following options are available:
Adjust the Desktop Menu alignment for desktop devices.
Adjust the Mobile Menu alignment and position for mobile devices.
Choose whether Sub Menus open On Hover or On Click.
Select a Link Style to highlight the current page in the menu.
참고
The options available in the Navigation section may vary depending on the selected template.
Hide a dynamic menu item for non-logged-in users¶
To hide the Shop menu item for non-logged-in users, restrict e-commerce access to logged-in
users.
To hide other menu items related to dynamic pages (i.e., a menu
item generated automatically by Odoo, for example, when installing an app or module, such as
Events, Courses, etc.) to non-logged-in users, follow these steps:
웹사이트 ‣ 환경설정 ‣ 메뉴 로 이동합니다.
Expand the list of menus for the relevant website if needed.
Select the menu item you wish to hide.
In the Visible Groups section, click Add a line.
Search for the group Name Role / Portal, and Select it.
저장.
팁
You can further customize the menu items on this menu item form. For example:
Enable the New Window checkbox to open the page in a new tab when clicked.
Add a Related Page or Related Model Page.
Assign a Parent Menu, and/or Child Menus to create a hierarchy.
메가 메뉴¶
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 e-commerce websites, as they can help include all of the web pages or e-commerce categories in the menu while keeping all menu items visible at once.
To create a mega menu, follow these steps:
In the menu editor, click Add Mega Menu Item.
In the pop-up window, enter the Title of the mega menu.
계속 을 클릭합니다.
Adjust the menu structure if needed.
:guilabel:`저장`을 클릭합니다.
Mega menus are built using default building blocks, which means each component must be customized individually. To do so, click Edit in the upper-right corner, then select the mega menu. Then:
Edit the text directly within the building block.
Edit a menu item’s URL by selecting the mega menu item and clicking the Edit button.
관련 블록을 메가 메뉴 내 원하는 위치로 끌어다 놓아 메뉴 항목을 이동하세요.
Delete a menu item by clicking the (Remove) icon of the related block.
Mega menu design¶
To customize the general layout of the mega menu and its individual building blocks, open the website editor, go to the Style tab, and navigate to the Mega Menu section. The following options are available:
템플릿 을 선택합니다.
크기 를 전체 너비 또는 좁게 중에서 선택합니다.
Toggle eCommerce Categories if applicable.
Header and footer design¶
To modify the header or footer design, click Edit in the upper-right corner and select the header or footer. Then, go to the Style tab and navigate to the Header or Footer section. The following options are available:
드롭다운 메뉴에서 템플릿 을 선택합니다.
Select a Background color by defining a theme style, a Custom color option, or a Gradient.
Set the Content Width.
Add a Border to the footer and customize its size, style, and color.
디자인에 맞게 둥근 모서리 로 조정합니다.
그림자 를 추가하고 색상, 오프셋, 흐리게, 확대 를 정의합니다.
To further customize the website’s header, use the following header-specific design options in the Header section:
Add a Scroll Effect to determine how the header behaves while scrolling the page. Hover over an effect to preview it.
Choose the Header Position for the selected page: Regular, Hidden, or Over The Content. When Over The Content is selected, you can also customize the Background and Text Color.
팁
To hide the header on all pages, go to the Theme tab of the website editor. Scroll down to the Advanced section and toggle Show Header off.
Hidden elements, including the header when applicable, are available under Invisible Elements.
Change the Default Accent Color to either the Primary or Secondary color to visually distinguish drop-down buttons in the header.
Define a font.
Set the Format size and add a color if needed.
To control the visibility of specific elements, navigate to the Show/Hide Elements section of the Style tab and click the option related to the element you wish to show or hide. You can show or hide:
Visuals, such as the Company logo, Text Elements (e.g., a phone number), and Social Links for linking all social media accounts.
Actions, such as the Search Bar, the Language Selector, the Sign in button, and the Header Button (a Contact us button by default).
eCommerce-specific elements: the Add to cart and Add to wishlist buttons.
You can enable a Background for navigation icons, such as the wishlist or search bar icon.
To further customize the website’s footer, use the following footer-specific design options in the Footer section:
슬라이드아웃 효과`를 선택하세요: :guilabel:`일반`(즉, 효과 없음), :guilabel:`슬라이드 호버 또는 그림자.
Toggle the Scroll Top Button option to add a Scroll to Top button, then choose its position.
Toggle the Copyright switch to hide or show the copyright notice. If enabled, add a color in the Copyright section if needed.
Hide or show the footer for the current page by toggling the Page visibility switch. Hidden elements, including the footer when applicable, are available under Invisible Elements.
팁
You can also add Inner Content blocks to the header or footer for further customization, such as e-commerce-specific footer options.