/
/
템플릿 기본 사용 안내

템플릿 기본 사용 안내

템플릿 사용에 필수적인 내용을 담고 있습니다. Jetcraft에서 제작한 템플릿을 사용하기 위해서 필요한 것은 오직 짧은 CSS 코드 몇 줄 입니다.

HTML 문서 <head>에 직접 삽입

CSS에서 Import

이 CSS 스타일이 문서에 어떤 작용을 하는지 궁금하다면 템플릿 초기화 코드 문서를 참고해 주세요.

functions.php 혹은 Code Snippets에 직접 추가

이 CSS 스타일이 문서에 어떤 작용을 하는지 궁금하다면 템플릿 초기화 코드 문서를 참고해 주세요.

Code Snippets 플러그인에서 (추천)

스타일 선택

템플릿을 편집화면에서 열면 기본적으로 사용자가 사용중인 테마의 색상을 상속합니다. 다운 받은 템플릿 하나에만 색상을 입히려면 핵심 레이어에 클래스를 추가하고, 다수의 템플릿에 색상을 입히려면 더 상위 단계의 컨테이너 혹은 DOM 요소(예를들면 body 태그)에 스타일을 추가합니다.

편집화면의 색상 선택 GUI 콘트롤러는 템플릿이 가지고 있는 색상을 미리볼 수 있도록 도와주지만 DB에 저장하지는 않습니다. 사용 가능한 컬러 클래스는 다음과 같습니다.

클래스 이름주 색상
jetcraft-color-default
 
jetcraft-color-violet
 
jetcraft-color-blue
 
jetcraft-color-purple
 
jetcraft-color-olive
 
jetcraft-color-orange
 
jetcraft-color-magenta
 
jetcraft-color-dark
 

 

그리고 jetcraft-no-radius 클래스는 템플릿에 사용된 대부분(필수 요소는 제외)의 둥근 모서리 효과를 없애줍니다. 기존 컬러를 수정하거나 새로운 사용자정의 컬러를 추가하려면 아래 링크를 참고하세요.

단일 템플릿에 클래스 지정

GUI 콘트롤러는 미리보기 이외에 템플릿에 어떠한 영향도 주지 않습니다

핵심 템플릿 레이어

핵심 레이어는 하나의 디렉토리를 통째로 복사하거나 아니면 개별로 복사해야 하는 경우도 있습니다.

핵심 레이어는 쉽게 찾을 수 있도록 레이어 이름 앞에 🚀 이모지가 붙어 있습니다. 디렉토리 전체가 핵심 레이어인 경우에는 디렉토리 레이어와 셋팅 레이어에만 이모지가 있습니다.

핵심 레이어가 여러 형태의 바리에이션을 가지고 있는 경우, 너무 많은 이모지가 혼란을 주므로 첫 번째 요소에만 붙어 있습니다.

이외의 다른 레이어는 모두 미리보기를 위한 데코레이션 입니다. 핵심 템플릿 레이어만 복사해서 다른 페이지나 템플릿에 붙여넣어 사용합니다.

핵심 레이어

템플릿의 구성

엘레멘터에서는 템플릿 레이어를 복사/붙이기 할 때 id 필드값이 사라지는 버그가 종종 있어 id 보다는 class 이름을 주로 사용합니다.

템플릿은 HTML Widget을 사용해 템플릿의 추가 CSS 및 자바스크립트 코드를 설정합니다. 보통 Settings  - 템플릿 이름인 레이어가 그것입니다.

Custom CSS 필드는 HTML Widget에서 명시한 기본값을 덮어씌울 때 사용합니다.

재사용이 많은 템플릿의 설정을 페이지 전역에서 사용하려면 Settings 레이어를 네비게이터 최상단으로 옮긴 후, 재사용되고 있는 동일한 템플릿에서는 해당 레이어를 삭제합니다.

쉽게 말해, 한 페이지에 동일한 내용을 담은 Settings 레이어가 없도록 해야합니다. 보통 이러한 작업이 필요한 경우는 해당 템플릿 매뉴얼에서 상세히 다루고 있습니다.

버튼 템플릿의 Settings 레이어를 페이지 최상단으로 이동시킨 형태

템플릿 관리

Jetcraft의 템플릿은 여러 형태의 위젯을 미리 볼 수 있도록 제작되었으므로 그 자체를 호출해서 사용하지 않고 필요한 핵심 레이어만 복사해서 원하는 곳에 붙여 넣습니다. 

템플릿은 플러그인과 달리 별도의 업데이트가 필요하지 않도록 제작하고 있습니다. 이미 사용중인 템플릿에 아주 큰 문제가 있지 않은 이상 업데이트 없이 사용해도 됩니다.

템플릿의 수정이 필요하다면 엘리멘터에서 제공하는 컨트롤 패널, Custom CSS 등 여러분이 알고 있는 방법으로 자연스럽게 수정해도 좋습니다. 하지만 향후 템플릿의 업데이트를 잘 반영하고 싶거나 체계적인 관리를 원하다면 여기를 참고하세요.

클래스 이름 변경 및 삭제

템플릿의 IDCSS Classes 필드에 명시한 클래스 이름은 변경하거나 삭제하면 템플릿이 제대로 표현되지 않습니다. 클래스 이름을 추가하는 것은 좋습니다.

목차