- 이 템플릿은 최소 엘리멘터 버전 3.25 이상이 필요한 위젯을 포함하고 있습니다.
- 이 템플릿에 사용된 Accordion 위젯은 Nested Elements가 활성화되어 있어야 합니다.
- 이 템플릿은 엘리멘터 버전 3.26.x의 Optimized Markup에 대응합니다.
템플릿 사용 준비사항
- 관리자 메뉴 → Elementor → Settings → Features 탭에서
Nested Elements를Active로 설정합니다. - 다운로드 받은 압축 파일을 풀어 5개의 JSON 파일을 관리자 메뉴 → Templates에서
Import Templates버튼으로 하나씩 모두 Import 합니다.
템플릿이 저장되는 위치
| 템플릿 이름 | 위치 |
| jetcraft-agent-header-01 | Header |
| jetcraft-agent-footer-01 | Footer |
| jetcraft-agent-home-01 | Page |
| jetcraft-loop-liveResults | Loop Item |
| jetcraft-loop-posts-01 | Loop Item |
페이지 구성방법
이제 모든 템플릿 파트가 하나의 페이지로 구성되도록 설정합니다. 엘리멘터의 일반적인 방법으로 진행하며, 각 템플릿은 서로 의존성이 없으므로 여러 페이지에 혼용해서 사용할 수 있습니다.
- 워드프레스에서 새로운 페이지를 하나 만들고
jetcraft-agent-home-01템플릿 내부의 내용을 복사해 붙여 넣습니다. 아니면 편집화면 하단의 폴더 모양 아이콘을 클릭하여 불러오거나, 혹은Template Widget을 사용해 연결해도 좋습니다. jetcraft-agent-header-01템플릿의Display Conditions에서 이 헤더를 사용할 페이지로 1번에서 만든 페이지를 지정합니다. 이제 해당 페이지는 이 헤더 템플릿을 사용해 헤더를 표현합니다.jetcraft-agent-footer-01템플릿의Display Conditions에서 이 푸터를 사용할 페이지로 1번에서 만든 페이지를 지정합니다. 이제 해당 페이지는 이 푸터 템플릿을 사용해 헤더를 표현합니다.- 나머지 2개의
Loop Item템플릿은 아래 템플릿 사용방법에서 연결하게 됩니다.
템플릿 사용방법
페이지 – jetcraft-agent-home-01
이 페이지 템플릿은 대문용으로 제작되었습니다. 일반적인 파트 외에 주요하게 살펴 볼 부분들에 대해서만 설명합니다. 엘리멘터 편집 화면에서 키보드의 Control + i 혹은 Command + i 키를 눌러 Structure 패널을 항상 열어두세요.
최상단 슬라이드 – jetcraft-section-swiper-01
최상단에 사용된 슬라이드는 페이드-인, 슬라이드 일시정지, 슬라이드 재생시간 표시 등의 기능을 사용하기 위해 엘리멘터의 슬라이드 및 캐러셀 위젯을 사용하지 않고 Jetcraft에서 무료 제공하는 템플릿을 응용하여 사용합니다. 이 부분은 SwiperJS의 최신버전 11을 사용합니다.
슬라이드 추가
슬라이드는 Structure 패널에서 .swiper-wrapper 레이어 내부에 위치합니다. 기본적으로 Call to Action 위젯 자체를 하나의 슬라이드로 사용하고 있습니다. 마지막 슬라이드는 사용자가 원하는대로 슬라이드를 꾸밀 수 있도록 준비했습니다.
SwiperJS 사용자 정의
SwiperJS에서 제공하는 모든 API를 사용할 수 있습니다. Swiper Instance 레이어의 코드를 수정합니다.
검색 바 – .jetcraft-searchbar-01
엘리멘터 버전 3.25부터 검색 바에서 실시간 결과 반영이 추가되었습니다. 해당 위젯의 컨트롤 패널에서 Content 탭 – Results – Live Results에서 Loop item을 지정할 수 있는데, 여기에 jetcraft-loop-liveResults 템플릿을 지정합니다. 실제로 검색 결과를 보고 싶다면 샘픔 페이지의 검색 바에 ‘컨텐츠’라고 입력해 보세요.
원하는 Post Type만 검색에 포함시키기
검색 위젯의 Query 설정 부분을 보면 All 혹은 특정 Post Type 1개만 지정할 수 있도록 되어 있습니다. 만일 불필요한 포스트타입은 제외하고 원하는 타입만 검색에 포함시키고 싶다면, Query ID 필드에 사용자 정의 ID를 입력합니다. (템플릿에는 wpquery_search_result이라는 쿼리가 이미 입력되어 있습니다. 그냥 기본 워드프레스 포스트에서만 검색을 할 것이라면 이 입력 필드의 값을 지웁니다.)
그리고 functions.php에서 아래 코드를 추가하고 $query->set( 'post_type', [ 'post', 'docs' ] ); 배열에 검색에 포함하고자 하는 포스트타입의 Slug 이름을 추가합니다.
2개의 탭으로 구성된 멀티 캐러셀 – Container – etc.
이 2개의 캐러셀은 양 쪽에 100px씩의 Offset 여백이 있습니다. 이 여백은 엘리멘터의 편집화면에서는 적용되지 않으므로 결과화면과 시각적으로 다를 수 있습니다. 이 부분은 위젯 컨트롤 패널에서도 엘리멘터 제작사가 직접 공지하고 있습니다.
공지사항이 포함된 컨테이너 – .carousel-container
공지사항이 포함된 파트의 게시물 리스트는 Loop Item을 통해 Posts 게시물을 출력합니다. 엘리멘터에서 제공하는 Posts Widget은 카테고리를 출력할 수 있는 옵션이 없어 Loop Item을 통해 구현하였습니다.
위젯 컨트롤 패널의 Layouts – Choose a template 항목에서 jetcraft-loop-posts-01을 선택합니다. 이로써 다운로드 받은 모든 템플릿 파일이 제 위치를 찾았습니다.
헤더 – jetcraft-agent-header-01
헤더는 Sticky 요소인데, 엘리멘터의 Sticky 기능을 사용하지 않고 CSS 표준 position: sticky 속성을 사용합니다. 엘리멘터의 Sticky 기능은 DOM 요소를 그대로 Clone하여 사용하기 때문에 메가메뉴처럼 DOM이 많은 요소가 포함된 경우 퍼포먼스 및 클래스 중복문제가 발생할 수 있어 사용하지 않습니다.
메가메뉴 역시 엘리멘터의 Menu Widget을 사용하지 않고 기본 컨테이너 위젯과 자바스크립트만으로 구현하였습니다. 엘리멘터의 Menu 위젯은 현재 베타 상태이고 여전히 성능 문제가 개선되고 있지 않아 실제 사용에는 무리가 있습니다.
핵심 레이어
헤더는 많은 레이어로 구성되어 있지만 사용자가 핵심적으로 사용할 레이어는 🚀 jetcraft-section-megamenu-02와 🚀 jetcraft-section-megamenu-m 두 개입니다. 각각 데스크탑과 모바일에서 사용되는 메가메뉴를 담고 있는 레이어입니다.
Menu 1, Menu 2와 같은 버튼 위젯은 최상위 메뉴입니다. 각 버튼 위젯 바로 밑의 그리드 컨테이너 위젯은 해당 메뉴의 하위 메뉴를 표현합니다. 하위 메뉴는 많은 양의 동일한 위젯이 반복되어 사용되므로 편집화면 부하를 줄이기 위해 가장 단순한 형태의 기본 위젯을 사용합니다. 이에 대한 내용은 #푸터 – 드롭다운 메뉴 매뉴얼에서 자세히 다루고 있습니다.
편집모드
메가메뉴의 편집을 용이하게 하기 위해 모든 메뉴를 마우스오버 없이 화면에 모두 나타낼 수 있습니다. 🚀 jetcraft-section-megamenu-02 레이어의 클래스 필드에 edit를 추가하세요. 그러면 모든 하위 메뉴들이 화면에 나타납니다. Menu 1 - Contents 레이어만 편집하는 경우, 나머지 하위 메뉴들의 눈동자 아이콘을 클릭하여 감추고 작업합니다.
아래 영상은 편집모드와 하위메뉴를 1개만 사용하는 경우의 편집을 보여줍니다.
모든 최상위 메뉴에서 1개의 하위메뉴만 사용하기
메뉴 수가 크게 많지 않은 사이트의 경우, 모든 메뉴가 단 하나의 드롭다운 메뉴를 사용하는 사례가 많이 있습니다. 🚀 jetcraft-section-megamenu-02 레이어의 클래스 필드에 gnb를 추가하세요. 그러면 메가메뉴는 가장 마지막에 위치한 하위 메뉴 즉, Menu 4 - Contents 하나만 사용하게 됩니다. 사용하지 않는 하위 메뉴 레이어는 모두 삭제하는게 페이지 렌더링에 도움이 됩니다.
1개만 사용할 하위 메뉴용 그리드 위젯은 last 클래스가 필요합니다. 이 클래스를 삭제하지 마세요.
메뉴 추가 / 삭제
메뉴를 추가하거나 삭제할 때는 항상 1개의 메인메뉴용 버튼 위젯(예: Menu 1)과 그 바로 아래 하위 메뉴용 그리드 컨테이너 위젯(예: Menu 1 - Contents)가 하나의 세트입니다. 기존 위젯을 복제해 Structure 패널에서 순서를 맞춰주면 메뉴가 추가되고, 반대로 삭제할 때는 버튼 위젯과 그 바로 아래 그리드 컨테이너 위젯을 삭제합니다.
검색 바
메가메뉴의 검색 바 역시 이전에 페이지에 사용된 검색 바와 설정 방법이 완전히 동일합니다.
모바일 메가메뉴
엘리멘터 편집화면의 상단 바에서 Mobile Portrait 아이콘을 클릭하여 모바일 화면 보기로 전환하면 메가메뉴가 햄버거 메뉴로 변경됩니다. 해당 아이콘을 클릭하면 모바일 전용 메뉴가 나타나고 내용을 변경할 수 있습니다. 수정에 불편함이 없으므로 별도의 편집모드는 없습니다.
🚀 jetcraft-section-megamenu-m 레이어 내부의 Custom HTML 위젯이 하위 메뉴를 구성하고 있습니다. 이 위젯을 복제하면 자동으로 메인메뉴가 추가됩니다. 메뉴명은 Custom HTML 위젯의 Title 필드를 가져옵니다.
편집환경에서는 모바일 메뉴 내부의 링크 스크롤이나 드롭다운 스크립트가 편집에 방해되므로 작동하지 않습니다. Preview 환경 혹은 라이브 환경에서 확인해 주세요.
그 밖에 레이어 설명
아래 테이블에서 메가메뉴 템플릿을 구성하고 있는 레이어들을 간략히 정리하였습니다. 템플릿 구성에 좀 더 관심이 있다면 살펴보세요.
| 레이어 이름 | 역할 |
| 🚀 Settings – jetcraft-ws-wpmenu-01 | 메가메뉴를 제외한 모든 드롭다운 메뉴가 사용하는 코드 |
| 🚀 Settings – jetcraft-section-header-02 | 헤더의 스크롤 작동과 관련된 코드 |
| 🚀 jetcraft-section-megamenu-02 | 데스크탑용 메가메뉴 관련 레이어 |
| 🚀 Settings – jetcraft-section-megamenu-02 | 데스크탑용 메가메뉴 작동과 관련된 코드 |
| 🚀 jetcraft-section-megamenu-m | 모바일용 메가메뉴 관련 레이어 |
| 🚀 Settings – jetcraft-section-megamenu-m | 모바일용 메가메뉴 작동과 관련된 코드 |
이미지 아이콘
템플릿 여기저기에 사용된 다양한 아이콘은 1개의 이미지 파일에 아이콘을 모아놓고 background-position 속성만 변경해 표현하는 것이 보통입니다. 함께 제공되는 Figma 링크는 일반 이미지 아이콘, SVG 아이콘, 그리고 사용자가 직접 아이콘을 추가하는 세 가지 프레임이 준비되어 있습니다.
동영상에서는 여러 번 재사용되는 위젯들에 대해 일괄적으로 변경하는 모습을 보여줍니다. 반복되는 위젯마다 컨트롤 패널에서 개별적으로 설정하면 위젯 하나를 수정할 때마다 나머지 위젯들도 모두 일일이 변경해야 하는 불편함을 줄이고, 엘리멘터에서 자동으로 생성하는 DOM 및 CSS를 획기적으로 줄이기 위함입니다.
하지만 이것이 복잡하다면 관련 CSS를 삭제하고 직접 위젯의 컨트롤 패널과 Custom CSS를 사용해 수정해도 좋습니다. 템플릿에 설정된 많은 CSS는 기본값일 뿐이므로 템플릿에서 제공하는 구조에 얽메이지 말고 마음껏 수정해도 문제가 없습니다.
템플릿 CSS 스타일 수정
- Jetcraft의 템플릿은 공통된 방식으로 CSS 스타일을 수정할 수 있습니다. 자세한 내용은 템플릿의 스타일을 관리하는 방법 게시물을 참고해 주세요.
- 엘리멘터가 CSS를 처리하는 원리에 대해 이해하면 템플릿과 위젯의 CSS를 보다 장기적의고 체계적으로 관리할 수 있습니다. 엘리멘터 사용에 익숙해 졌다면 엘리멘터 위젯과 템플릿을 효과적으로 관리하는 법 블로그 게시물을 통해 보다 효율적으로 스타일을 관리하세요.