머리글 및 바닥글

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.

• 하위 메뉴 항목을 상위 메뉴 아래 오른쪽으로 끌어다 놓아 **일반 드롭다운 메뉴**를 만듭니다.

팁

웹사이트 편집기에서도 메뉴 편집기에 액세스할 수 있습니다. 방법은 다음과 같습니다:

• 아무 메뉴 항목이나 선택하고메뉴 편집을 클릭하거나,

  

• 스타일탭으로 이동하여메뉴 편집을 클릭합니다. 해당 버튼은헤더섹션 제목 옆에 있습니다.

메뉴 항목 추가

기본적으로 페이지는 생성될 때 드롭다운 메뉴 항목으로 메뉴에 추가됩니다. 새 메뉴 항목을 추가하려면 다음 단계를 따르세요:

1. 메뉴 편집기에서메뉴 항목 추가를 클릭합니다.

2. 팝업 창에서 메뉴에 표시할제목을 입력합니다.

3. URL 또는 이메일필드에 `/`를 입력하여 웹사이트의 기존 페이지를 검색하거나 `#`를 입력하여 기존 맞춤 앵커를 검색합니다.

   참고

   아직 존재하지 않는 페이지의 메뉴 항목을 추가하려면 새 URL 또는 앵커를 입력하고페이지 생성을메뉴 편집팝업 창에서 클릭합니다. 해당 페이지를 생성하지 않고 메뉴 항목을 추가하면 링크가404 오류 페이지로 연결됩니다.

4. 계속 을 클릭합니다.

5. 필요한 경우메뉴 구조를 조정합니다.

6. :guilabel:`저장`을 클릭합니다.

메뉴 아이템 설계

메뉴 항목의 디자인을 수정하려면 오른쪽 상단의편집을 클릭하고 헤더를 선택합니다. 그런 다음스타일탭으로 이동하여탐색섹션으로 이동합니다. 사용할 수 있는 옵션은 다음과 같습니다:

• 데스크톱 기기에 맞게데스크톱 메뉴정렬을 조정합니다.

• 모바일 기기에 맞게모바일 메뉴의 정렬과 위치를 조정합니다.

• 하위 메뉴가마우스오버 시열릴지클릭 시열릴지 선택합니다.

• 메뉴에서 현재 페이지를 강조 표시할링크 스타일을 선택합니다.

참고

탐색섹션에서 사용할 수 있는 옵션은 선택한 템플릿에 따라 다를 수 있습니다.

로그인하지 않은 사용자에게는 동적 메뉴 항목이 숨겨집니다

로그인하지 않은 사용자에게 Shop 메뉴 항목을 숨기려면전자상거래 액세스를 로그인한 사용자로 제한하십시오.

로그인하지 않은 사용자에게동적페이지와 관련된 기타 메뉴 항목(예: Events, Courses 등과 같이 앱이나 모듈 설치 시 Odoo에서 자동으로 생성되는 메뉴 항목)을 숨기려면 다음 단계를 따르십시오:

1. 개발자 모드 활성화.

2. 웹사이트 ‣ 환경설정 ‣ 메뉴 로 이동합니다.

3. 필요한 경우 해당 웹사이트의 메뉴 목록을 확장합니다.

4. 숨기려는 메뉴 항목을 선택합니다.

5. 표시 그룹 섹션에서 항목 추가를 클릭합니다.

6. 그룹 이름 역할 / 포털을 검색한 후 선택합니다.

7. 저장.

팁

이 메뉴 항목 양식에서 메뉴 항목을 추가로 사용자 지정할 수 있습니다. 예를 들면 다음과 같습니다.

• 클릭할 때 페이지가 새 탭에서 열리도록 새 창 확인란을 선택합니다.

• 관련 페이지나 관련 모델 페이지를 추가합니다.

• 계층 구조를 생성하려면 상위 메뉴 및/또는 하위 메뉴를 지정합니다.

더 보기:

정적 페이지 표시 관리

메가 메뉴

메가 메뉴는 드롭다운 메뉴와 유사하지만, 단순한 하위 메뉴 목록 대신 탐색 옵션 그룹으로 나뉜 패널을 표시합니다. 콘텐츠 양이 많은 웹사이트나 이커머스 웹사이트에 특히 유용하며, 모든 메뉴 항목을 한눈에 볼 수 있도록 유지하면서 모든 웹 페이지나 이커머스 카테고리를 메뉴에 포함하는 데 도움이 됩니다.

메가 메뉴를 생성하려면 다음 단계를 따르세요.

1. 메뉴 편집기에서 메가 메뉴 항목 추가를 클릭합니다.

2. 팝업 창에서 메가 메뉴의 제목을 입력합니다.

3. 계속 을 클릭합니다.

4. 필요한 경우메뉴 구조를 조정합니다.

5. :guilabel:`저장`을 클릭합니다.

메가 메뉴는 기본 빌딩 블록을 사용하여 구성되므로 각 구성 요소를 개별적으로 사용자 지정해야 합니다. 이를 위해 오른쪽 상단의 편집을 클릭한 다음 메가 메뉴를 선택합니다. 그런 다음:

• 빌딩 블록 내에서 텍스트를 직접 편집합니다.

• 메뉴 항목의 URL을 편집하려면 메가 메뉴 항목을 선택한 후 편집 버튼을 클릭합니다.

  

• 관련 블록을 메가 메뉴 내 원하는 위치로 끌어다 놓아 메뉴 항목을 이동하세요.

• 관련 블록의 (삭제) 아이콘을 클릭하여 메뉴 항목을 삭제합니다.

메가 메뉴 디자인

메가 메뉴의 전체 레이아웃과 개별 빌딩 블록을 사용자 지정하려면 웹사이트 편집기를 열고 스타일 탭으로 이동한 후 메가 메뉴 섹션으로 이동합니다. 다음과 같은 옵션을 사용할 수 있습니다:

• 템플릿 을 선택합니다.

• 크기 를 전체 너비 또는 좁게 중에서 선택합니다.

• 해당하는 경우 이커머스 카테고리를 토글합니다.

헤더 및 바닥글 디자인

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.

• 디자인에 맞게 둥근 모서리 로 조정합니다.

• 그림자 를 추가하고 색상, 오프셋, 흐리게, 확대 를 정의합니다.

Header-specific design optionsFooter-specific design options

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.

팁

You can also add Inner Content blocks to the header or footer for further customization, such as e-commerce-specific footer options.