시작하기
엘리멘터 편집 화면에서 키보드의 Control + i 혹은 Command + i 키를 눌러 Structure 패널을 항상 열어두세요.
템플릿 소개
엘리멘터에서 Import 하면 Theme Builder에서 Header 섹션에 표시되는 헤더 템플릿입니다. Display Condition에서 이 헤더를 사용하고자 하는 페이지를 지정하면 활성화 됩니다.
Jetcraft™에서 사용하는 모든 헤더에 기본으로 사용되는 범용적인 템플릿으로, 헤더의 디자인 스타일에는 일체 간섭하지 않고 스크롤 기능만 추가하므로, 내부 디자인을 자유롭게 추가, 변경할 수 있습니다. 특별한 동작이 필요하여 자바스크립트 코드를 추가하려는 경우, 별도의 HTML 위젯에 작성하여 분리시키는 것이 템플릿 유지관리에 용이합니다.
핵심 레이어
최상단의 🚀 jetcraft-section-header-02에는 필수 클래스가 지정되어 있습니다. 그 바로 아래 🚀 Settings - jetcraft-section-header-02 레이어는 스크롤 동작에 관한 스크립트를 제공합니다. 이 두 개의 레이어 이외에는 원하는대로 구성할 수 있습니다.
클래스
특정 레이어에 클래스를 추가하면 사전정의된 효과를 얻을 수 있습니다.
| 레이어 | 클래스 | 효과 |
| jetcraft-section-header-02 | floated | 부유 헤더 |
floated: 헤더가 공간을 차지하지 않고 부유합니다. 배경에 Hero 컨테이너가 있는 경우 주로 사용합니다. floated 클래스가 추가되면 용이한 편집을 위해 편집화면 배경이 어둡게 반전됩니다. 이것은 주로 부유 헤더 아래에는 어두운 디자인 요소가 위치하기 때문입니다. 실제 라이브 서비스에는 반영되지 않습니다.
컬러셋
이 템플릿은 Jetcraft의 컬러셋을 지원합니다.
템플릿 CSS 스타일 수정
- Jetcraft의 템플릿은 공통된 방식으로 CSS 스타일을 수정할 수 있습니다. 자세한 내용은 템플릿의 스타일을 관리하는 방법 게시물을 참고해 주세요.
- 엘리멘터가 CSS를 처리하는 원리에 대해 이해하면 템플릿과 위젯의 CSS를 보다 장기적의고 체계적으로 관리할 수 있습니다. 엘리멘터 사용에 익숙해 졌다면 엘리멘터 위젯과 템플릿을 효과적으로 관리하는 법 블로그 게시물을 통해 보다 효율적으로 스타일을 관리하세요.