Elementor에서 레스토랑 메가 메뉴를 만드는 방법(무료 단계별 가이드)

레스토랑 메가 메뉴는 전체 음식 메뉴,식이 정보,개장 시간 및 예약 버튼을 여러 번의 클릭으로 묻어 두는 대신 한 곳에 넣는 넓은 드롭 다운 패널입니다. 식사하는 사람들은 음식,가격, 시간 및 예약 방법을보고 싶어합니다. 보통 전화로. 종종 당신과 다른 곳 사이에서 결정하는 동안.

이 가이드는 무료 Elementor와 무료 Elementor로 하나를 구축합니다 마스터 애드온 메가 메뉴. Elementor Pro 가 필요하지 않습니다. 완성된 결과는 다음과 같습니다. “요리”를 마우스를 올리면 카테고리,가격, 식단 태그,오늘 밤의 스페셜,테이블 예약 버튼이 포함된 전체 레스토랑 메뉴가 열립니다:

당신이 레스토랑 메가 메뉴 스타일을 좋아한다면 다음 다운로드하고 마스터 애드온 위젯 빌더에서 가져올 수 있습니다. 그런 다음 쉽게 텍스트 색상,이미지, url 등을 필요에 따라 사용자 정의하고 레스토랑 웹 사이트의 메가 메뉴에서 사용할 수 있습니다.

레스토랑 메가 메뉴를 다운로드하세요

레스토랑 메가 메뉴에는 어떤 내용이 포함되어야 합니까

아무것도 구축하기 전에 패널에서 장소를 적립 무엇을 결정. 우리가이 가이드에서 구축 레이아웃은 네 개의 영역이 있으며, 그들은 거의 모든 레스토랑을 커버:

빼야 할 것: 전체 About 스토리, 언론 언급, 소셜 피드. 그것들은 속해 있습니다 바닥글. 탐색 패널은 사람들을 어딘가로 데려가는 것이지 전체 이야기를 전달하는 것이 아닙니다.

이를 위해 Elementor Pro가 필요합니까?

아니요. Elementor 의 자체 메가 메뉴 위젯은 Elementor Pro 내부에 있지만 아래의 무료 경로는 구독없이 동일한 패널을 구축합니다.

일년에 몇 번 메뉴를 업데이트하는 단일 위치 레스토랑의 경우 무료 확장으로 충분합니다. 여러 편집자를 저글링하는 더 큰 다중 위치 그룹은 여전히 Pro 의 더 넓은 도구 세트에서 가치를 얻을 수 있지만 이는 메가 메뉴에 대한 것이 아니라 전체 사이트에 대한 결정입니다. Elementor 여기에 Pro 메가 메뉴 워크플로우를 문서화합니다 직접 비교를 하고 싶다면.

필요한 것

• Elementor (무료 버전은 괜찮습니다)
• Elementor용 마스터 애드온, 설치 및 활성화되었습니다
• 메뉴 섹션에 대해 이미 생성된 페이지입니다(현재는 위치 지정자가 될 수 있습니다)

1단계: 메가 메뉴 확장을 활성화합니다

마스터 애드온은 모든 위젯과 확장 기능을 토글 뒤에 보관하므로 사용하지 않는 것은 절대 로드되지 않습니다. 로 이동 마스터 애드온 → 설정, 열어보세요 확장 탭하고 찾아보세요 메가 메뉴 디스플레이 그룹에서. 해당 토글을 켜고 클릭합니다 변경 사항 저장. 토글이 보이지 않는다면,아마도 오래된 플러그인 버전일 테니 먼저 업데이트하세요.

2단계: WordPress 메뉴를 구성하고 메가 메뉴를 켜세요

로 이동 외관 → 메뉴 그리고 어떤 디자인을 건드리기 전에 뼈대를 만드세요. 이 빌드에서 메뉴는 다섯 개의 아이템을 가진 메인 메뉴라고 불립니다: 홈, 요리, 회사 소개, 블로그, 계정. “요리”는 메가 패널을 얻는 품목입니다.

먼저 구조를 바로 잡으세요. 메가 패널이 메뉴 항목에 붙어있기 때문에 이후에 재배열하는 것은 디자인 작업을 다시 하는 것을 의미합니다.

확장자가 활성화된 상태에서 a 마스터 애드온 메가 메뉴 상자가 메뉴 화면의 왼쪽 열에 나타납니다. Switch its 메가 메뉴 활성화 켜기. 하는 순간 보라색 마스터 메가 모든 메뉴 항목 옆에 배지가 나타납니다. 그 배지는 각 항목의 메가 메뉴 옵션이 살고있는 곳입니다.

3단계: 요리 아이템의 메가 메뉴를 켜세요

를 클릭합니다 마스터 메가 “요리” 항목의 배지. 네 개의 탭으로 설정 팝업이 열립니다: 콘텐츠,설정, 아이콘,배지.

1. 에 콘텐츠 탭, 뒤집기 메가메누 활성화 YES 로 전환합니다. 메가메뉴 콘텐츠 편집 버튼이 켜집니다.
2. 에 설정 탭, 패널 크기와 동작을 설정합니다. 우리는 사용했습니다 사용자 정의 폭 1000px 에,접시 격자 플러스 특색지어진 카드를 위해 충분히 넓게. 가득 차있는 폭은 또한 당신의 디자인이 전체적인 스크린을 필요로 하는 경우에 거기 있습니다.
3. 세트 모바일 메뉴 빌더 콘텐츠에, 트리거 효과 호버에게, 그리고 전환 퇴색하려면. 아이콘 및 배지 탭은 선택적인 추가 기능입니다 (예를 들어 계절 메뉴의 “새” 배지).
4. 클릭 저장.

설정 탭에서 메가 메뉴 너비를 구성합니다: 전체 너비,기본값 또는 1000px 와 같은 사용자 지정 너비. 동일한 탭에는 모바일 메뉴 소스,트리거 효과 (호버 또는 클릭), 전환 애니메이션 및 메뉴 레이블 및 설명의 토글이 있습니다:

4단계: Elementor에서 패널을 디자인합니다

콘텐츠 탭으로 돌아가서 를 클릭합니다 메가메누 콘텐츠 편집. 패널이 일반 Elementor 편집기에서 열리므로 다른 페이지와 마찬가지로 디자인합니다. 위의 표에서 4 개의 영역을 빌드합니다:

• 헤더 스트립: 레스토랑 이름 플러스 짧은 부엌 메모 (“주방은 11:00 pm까지 · 나무 오븐은 4 시 매일 해고”). 메모는 조용히 “그들은 열려?”질문에 대답 아무도 몇 시간 동안 사냥하지 않고.
• 카테고리 사이드바: 스타터, 파스타 & 리조또, 장작 피자, 메인 & 그릴, 디저트, 와인 & 음료, 각각 요리 수가 있습니다.
• 접시 그리드: 이름,한줄 설명,가격, 그리고 Vegetarian,Spicy, 또는 Chef's Pick 과 같은 태그들. 태그들은 별도의 컬럼 없이 식이 필터링을 처리합니다.
• 추천 카드 및 액션 바닥글: 사진과 가격으로 오늘밤 스페셜, a 테이블 버튼을 예약하세요, 영업시간 및 주소, 그리고 “전체 메뉴 (PDF) 다운로드” 링크. 구조화된 영업시간을 차라리 보여주고 싶다면, the 영업 시간 위젯 한 곳에서 편집할 수 있도록 유지합니다.

모든 요리 이름,가격, 태그는 왼쪽의 Elementor 패널에서 편집 가능한 상태로 유지됩니다. 나중에 메뉴를 업데이트하는 것은 디자인 작업이 아니라 콘텐츠 편집입니다. 작업이 끝나면 템플릿을 게시하고 편집기를 닫습니다.

5단계: 헤더에 메뉴를 넣습니다

메가 메뉴는 살아있을 헤더가 필요합니다. 테마의 헤더가 이미 메인 메뉴를 표시하면이 단계를 건너 뛸 수 있지만 마스터 애드온으로 헤더를 빌드하면 모든 것이 하나의 편집기에 보관됩니다. The 테마 빌더는 무료입니다는, 엘리멘터 프로의 것과는 달리.

1. 로 이동 마스터 애드온 → 테마 빌더 그리고 클릭하세요 새 템플릿 추가.
2. 템플릿 유형을 다음으로 설정합니다 헤더, 스위치 활성화 온 및 조건 하에서 선택합니다 포함 → 전체 사이트.
3. 클릭 Elementor 로 편집.

헤더 템플릿 내부를 드래그하세요 탐색 메뉴 위젯과 픽 메인 메뉴 메뉴 선택 아래에서. 레이아웃을 수평으로 설정하고 헤더 디자인이 요구하는 대로 정렬합니다. “요리” 항목은 메가 패널을 자동으로 전달합니다.

6단계: 마우스를 가져가서 결과를 확인하세요

헤더를 게시하고 사이트를 엽니 다. “요리”를 마우스를 올리면 전체 레스토랑 메뉴가 페이지 위로 내려갑니다: 왼쪽 카테고리,가운데에 가격이있는 요리,오늘 밤의 특별 행사 및 오른쪽의 테이블 예약 버튼.

각 카테고리를 클릭하여 접시 개수와 링크가 동작하는지 확인한 다음 패널을 뒤에 있는 페이지에 대해 확인합니다. 어두운 영웅 위에 있는 어두운 패널에는 테두리나 그림자가 필요하므로 가장자리가 계속 표시됩니다.

7 단계: 빨리 유지하십시오

메뉴 이미지가 사이트의 모든 페이지에로드되므로 부주의 한 메가 메뉴로 인해 전체 레스토랑 웹 사이트 속도가 느려집니다. 느린 레스토랑 사이트는 모바일 데이터의 옵션을 비교하는 식사를 잃어 버립니다.

• 갤러리가 아닌 패널 (특집 특집) 에 사진 한 장을 사용합니다.
• 압축하고 WebP; 실제로 차지하는 공간으로 크기를 조정합니다.
• 실제 대체 텍스트 (“나무로 태운 마르게리타 피자”) 를 작성하십시오. 접근성과 이미지 검색에 도움이됩니다.
• 당신의 전체적인 체크 Elementor 페이지 속도 메뉴 추가 후, 이전이 아니라.

8단계: 휴대폰에서 작동하도록 하세요

대부분의 레스토랑 트래픽은 이동성이 있으며,외부에 서서 들어올지 여부를 결정하는 사람들이 자주 발생합니다. 이것이 우리가 설정한 이유입니다 모바일 메뉴 3 단계에서 다시 빌더 콘텐츠로. 설계 한 동일한 패널 베어 링크 목록 대신 전화 레이아웃을 제공합니다. 넓은 패널은 여전히 우아하게 붕괴해야합니다:

• 스페셜의 사진을 모바일로 숨기고 테이블 예약 버튼을 유지하세요. Elementor 의 반응형 가시성 컨트롤은 요소별로 이를 처리합니다.
• 누적 순서에서 카테고리 링크를 먼저 입력하세요; 그것이 바로 전화 방문자들이 찾아온 이유입니다.
• 긴 스크롤 없이 “테이블 예약” 버튼을 연결할 수 있도록 유지하세요.
• 실제 전화에서 테스트합니다. 편집기 미리보기는 터치 동작을 근사화합니다; 재생산하지 않습니다.

기본 태블릿 중단점이 패널을 어색하게 자르면 무료로 직접 설정하세요 사용자 지정 중단점 확장.

선택 사항: 계절별 항목을 자동으로 표시합니다

레스토랑은 시간 제한 제안을 지속적으로 실행: 점심 스페셜, 축제 메뉴, 해피 아워. 무료와 함께 표시 조건 확장 패널 요소에 날짜 범위 또는 요일 규칙을 설정하여 크리스마스 메뉴 링크가 12월에 나타나고 1월에 자체적으로 제거되며 자정에 사이트를 편집하는 사람은 아무도 없습니다.

자주 묻는 질문

관련 읽기

• 무료 Elementor 테마 빌더
• Elementor에서 무료로 팝업을 추가하는 방법
• 영업 시간 위젯