캔버스에 메뉴 적용과 헤더 템플릿 연동

메뉴 항목을 만들었다면 이제 그 항목이 페이지의 헤더와 푸터에 어떻게 나타나는지 연결할 차례입니다. 에디터에서는 헤더 템플릿을 넣으면 사이트 메뉴가 자동으로 연결되고, 메뉴 패널의 캔버스에 메뉴 적용 버튼으로 화면의 메뉴를 최신 항목으로 맞출 수 있습니다. 이 글에서는 헤더 템플릿 연동, 캔버스 적용, 그리고 메뉴 요소가 헤더 메뉴와 푸터 메뉴 중 무엇을 보여 줄지 고르는 방법을 차례로 살펴봅니다. 메뉴 항목을 만들고 순서를 바꾸는 방법은 별도 글에서 다룹니다.

1. 헤더 템플릿을 넣으면 메뉴가 연결됩니다

빈 페이지에서는 섹션 추가하기, 이미 섹션이 있는 페이지에서는 왼쪽 템플릿 패널의 섹션 추가를 눌러 템플릿 창을 엽니다. 왼쪽 분류에서 헤더를 고르면 심플 헤더, 다크 헤더, 중앙 정렬 헤더 등 8종이 나옵니다. 하나를 누르면 견본 글자가 아니라 지금 사이트에 등록된 메뉴 항목으로 채워진 헤더가 들어오고, 이 헤더의 메뉴는 사이트 메뉴를 따르는 메뉴 요소가 됩니다.

같은 화면에서 메뉴 항목을 고치면 열려 있는 캔버스의 헤더도 곧바로 바뀝니다. 헤더 오른쪽의 무료 시작 같은 버튼은 메뉴 항목이 아니라 그 헤더에 속한 요소라서 패널에서 바뀌지 않고, 캔버스에서 직접 고칩니다.

2. 캔버스에 메뉴 적용으로 최신 항목 맞추기

다른 페이지에서 메뉴 이름을 바꾼 뒤 이미 저장해 둔 페이지를 열면, 그 페이지의 헤더에는 저장했을 때의 항목이 남아 있습니다. 아래 화면은 패널 목록에는 오늘의 빵이 있는데 캔버스에는 이전 이름 빵 메뉴 안내가 보이는 상태입니다.

메뉴 편집 패널의 헤더 메뉴 탭에서 캔버스에 메뉴 적용을 누르면 헤더 메뉴를 따르는 모든 메뉴 요소가 현재 항목으로 바뀌고, 버튼 아래에 캔버스에 적용됨 (2개 섹션)처럼 몇 개 섹션이 바뀌었는지 나옵니다. 적용한 뒤에는 상단 저장을 눌러 페이지에 남겨 두세요. 패널 위쪽 안내문대로 배포할 때도 사이트 메뉴의 항목으로 다시 채워집니다.

3. 메뉴 요소를 직접 넣기

헤더 밖에도 메뉴를 두고 싶다면 요소를 넣을 섹션을 선택한 뒤 왼쪽 요소 추가 패널의 콘텐츠 분류에서 메뉴를 누릅니다. 처음에는 메뉴1, 메뉴2, 메뉴3 자리표시 항목으로 들어오며, 메뉴 패널에서 캔버스에 메뉴 적용을 누르면 헤더 메뉴의 실제 항목으로 바뀝니다.

4. 어떤 메뉴를 보여 줄지 고르기

캔버스의 메뉴 요소는 기본적으로 헤더 메뉴를 보여 줍니다. 메뉴 항목 글자를 두 번 누르면 왼쪽에 메뉴 편집 패널이 열리고, 맨 위의 선택한 메뉴 요소 상자에 지금 연결 상태가 나옵니다.

이 요소에 푸터 메뉴를 보여 주려면 패널의 푸터 메뉴 탭으로 옮겨 이 요소에 '푸터 메뉴' 표시 버튼을 누릅니다. 푸터 메뉴 탭에는 캔버스 적용 버튼이 없고, 이 연결 버튼이 같은 역할을 합니다.

누르면 상자 문구가 이 요소는 지금 '푸터 메뉴'를 표시합니다.로 바뀌고, 캔버스의 요소도 푸터 메뉴 항목으로 채워집니다. 이후 헤더 메뉴 탭에서 캔버스에 메뉴 적용을 눌러도 푸터 메뉴를 고른 요소는 그대로입니다. 연결 정보는 요소에 저장되어, 저장 후 다시 열어도 유지됩니다. 헤더 메뉴로 되돌릴 때는 헤더 메뉴 탭의 이 요소에 '헤더 메뉴' 표시를 누릅니다.

5. 메뉴 요소가 없는 페이지에서는

페이지에 메뉴 요소가 하나도 없을 때 캔버스에 메뉴 적용을 누르면 캔버스에 메뉴 nav가 없습니다. 헤더 템플릿을 먼저 삽입하세요.라는 안내가 나옵니다. 헤더 템플릿이나 메뉴 요소를 먼저 넣어 주세요.

6. 이렇게 활용해 보세요

• 사이트의 모든 페이지에 같은 헤더 템플릿을 넣고, 메뉴 이름을 바꾼 날에는 각 페이지에서 캔버스에 메뉴 적용 후 저장해 두세요.
• 새 페이지를 만들 때는 헤더 템플릿 하나만 고르면 메뉴 이름과 링크를 다시 입력하지 않아도 같은 메뉴가 들어옵니다.
• 푸터에도 메뉴 요소를 두고 푸터 메뉴에 개인정보처리방침처럼 모든 페이지 아래에 필요한 링크를 모아 관리해 보세요.

7. 알아 두실 점

• 메뉴 패널은 웹사이트에 속한 페이지에서만 쓸 수 있습니다.
• 메뉴 글꼴, 색상, 열림 방식은 메뉴 요소를 선택했을 때 패널 아래쪽에 나오며, 별도 글에서 다룹니다.

헤더는 템플릿으로 한 번 넣어 두고, 푸터는 연결 버튼으로 메뉴를 고르는 두 가지만 기억해 두시면 사이트 메뉴를 한 곳에서 관리하기 쉬워집니다.