XET 베이직 레이아웃 설정
우선 제품을 구매해주셔서 감사드립니다.
이 메뉴얼은 베이직 레이아웃을 사용하시는데 도움을 주고자 작성되었습니다.
제품 사용시 문의가 있으시면 언제든 고객지원 게시판 또는 고객상담실 070-8283-1029 번으로 연락주시면 문제점을 해결해 드리겠습니다.
메뉴얼은 다음의 섹션으로 나누어져 있습니다.
- 설치환경
- 레이아웃, 위젯스킨 파일 설치
- 레이아웃, 위젯 세팅
- 나눔고딕 웹폰트 설정
- 테마컬러 설정
- 로고 설정
- 메인메뉴 설정
- 슬라이드 위젯 설정
- 메인 위젯1 영역 설정
- 메인 위젯2 영역 설정
- 메인 위젯3 영역 설정
- 사이드영역 설정
- 하단영역 위젯 설정
- 푸터 설정
설치환경
- XE 코어 버전 1.7+
- XET 니보 슬라이드 위젯
- XET Content 위젯
- 꼬리표 목록 출력 위젯
레이아웃, 위젯스킨 파일 설치
압축 파일을 다운로드 받아 XE가 설치된 서버에 다음과 같이 업로드 합니다.
기본적으로 압축파일에는 해당 폴더가 같이 들어있으므로 XE가 설치된 root 디렉토리에 업로드를 하시면 해당 폴더에 자동으로 업로드됩니다.
- layouts/xet_basic
- widgets/xet_content/skins/xet_basic_skin
- widgets/xet_slider_nivo/skins/xet_basic_skin
- widgets/tag_list/skins/xet_basic_skin
설치가 정상적으로 되었다면 관리자페이지 > 설치된 레이아웃에 XET 베이직 레이아웃 항목이 보이실겁니다.
세팅에 들어가기 전 다음의 항목이 선행되어 있어야 합니다.
1. 메인메뉴가 먼저 생성되어 있어야 합니다.
- 관리자페이지 > 사이트제작/편집 > 사이트 메뉴 편집에서 메뉴를 구성하세요.
2. 게시판이 생성되어져 있어야 합니다.
- 슬라이드용 게시판, 메인 위젯용 게시판 등 사이트 메뉴 구성 시 게시판을 같이 생성하시고 게시판에 이미지 및 글을 등록 하세요.
3. 메인 페이지로 사용할 page 생성
- 홈으로 사용할 페이지로 보시면 됩니다.
여기까지 마치셨다면 이제 레이아웃 세팅을 하실 차레입니다.^^
관리자 페이지 > 고급 > 설치된 레이아웃 > XET 베이직 레이아웃 > 설정 클릭
메인 페이지 설정
메인 페이지로 생성한 페이지의 mid 이름을 입력합니다. 예: home으로 하셨다면 home 이라고 입력합니다.
폰트 설정
나눔고딕 웹폰트를 사용 하시려면 ON으로 해주시면 됩니다.
나눔고딕 폰트가 설치 된 환경에서는 웹폰트를 내려 받지 않으며 나눔고딕 폰트가 설치 되어 있지 않은 환경에서는 웹폰트를 다운로드 받아 사용합니다.
장점은 고정된 폰트를 사용함으로 다양한 환경에서도 폰트 디자인은 통일감있게 보일 수 있습니다.
단점은 폰트 크기가 약 1메가 정도 됨으로 트래픽 사용량이 증가할 수 있습니다.
테마컬러 설정
테마 컬러는 7가지의 컬러를(Blue,Brown,Green,Orange,Purple,Red,Teal) 선택적으로 사용하실 수 있습니다.
원하는 컬러를 선택합니다.
로고 설정
웹사이트의 이름이 되는 부분을 설정합니다.
이미지 또는 텍스트를 사용하실 수 있으며 이미지 사용시 높이는 80px이 넘지 않도록 주의하십시오. 투명 png 타입의 이미지를 사용하시길 바랍니다.
텍스트 사용시 로고 텍스트 부분에 입력하시면 됩니다. 단, 이미지가 등록되어 있으면 텍스트는 출력되지 않습니다.
네비게이션(메인메뉴) 설정
메뉴 간격 설정은 메뉴와 메뉴 사이의 간격을 조절합니다. 메뉴 수에 따라 적절하게 선택하여 사용하시면 됩니다.
드롭다운 메뉴 넓이는 1차 메뉴의 하위 메뉴가 있을 시 나타나는 메뉴로서 넓이를 조절합니다. 적절하게 선택하여 사용하시면 됩니다.
슬라이드 위젯 설정
위젯은 XET 니보 슬라이드 위젯을 사용합니다.
1. 관리자 페이지 > 고급 > 설치된 위젯 > XET 니보 슬라이드 위젯 > 코드생성 클릭
2. 스킨 > XET 베이직 레이아웃용 스킨 > 선택
3. 컬러셋 > 기본
4. 모듈 선택 > 추가 > 미리 생성해 놓은 게시판을 선택합니다.
5. 출력 개수를 입력합니다.
5. 이미지 넓이는 980, 높이는 400 으로 입력합니다.
6. 기타 옵션들은 적절하게 선택하신 후 코드생성 버튼을 클릭합니다.
7. 생성된 코드를 복사합니다.
8. 레이아웃 설정으로 돌아와 복사된 코드를 삽입합니다.
예시코드)
<img class="zbxe_widget_output" widget="xet_slider_nivo" skin="xet_basic_skin" colorset="default" order_target="list_order" order_type="desc" list_count="3" module_srls="113893" img_type="crop" img_width="980" img_height="400" thumbnail_type="crop" hyperlink="Y" hyperlink_src="article" hyperlink_extravar="link" slider_type="true" slider_effect="fade" display_control="Y" display_navigator="Y" display_title="Y" display_desc="Y" display_regdate="N" display_author="N" text_align="left" />
메인 위젯1 설정
▶ 타이틀 입력
타이틀을 입력합니다.
예시) Our Work
▶ 위젯 코드 입력
위젯은 XET 콘텐츠 위젯을 사용합니다.
1. 관리자 페이지 > 고급 > 설치된 위젯 > XET 콘텐츠 위젯 > 코드생성 클릭
2. 스킨 > XET 베이직 레이아웃용 스킨 > 선택
3. 컬러셋 > 기본
4. 모듈 선택 > 추가 > 미리 생성해 놓은 게시판을 선택합니다.
5. 내용 표시형태 > 내용형태 > 갤러리를 선택합니다.
6. 표시항목 및 순서는 섬네일,제목,내용,등록일 순으로 표시하도록 선택합니다.
7. 목록수는 3을 입력합니다.
8. 섬네일 이미지 > 섬네일 생성방법은 Crop으로 선택합니다.
9. 섬네일 넓이는 310, 높이는 200 으로 입력합니다.
6. 기타 옵션들은 적절하게 선택하신 후 코드생성 버튼을 클릭합니다.
7. 생성된 코드를 복사합니다.
8. 레이아웃 설정으로 돌아와 복사된 코드를 삽입합니다.
예시코드)
<img class="zbxe_widget_output" widget="xet_content" skin="xet_basic_skin" colorset="white" content_type="document" module_srls="113893" list_type="gallery" tab_type="none" option_view="thumbnail,title,content,regdate" list_count="3" page_count="3" subject_cut_size="24" show_browser_title="N" show_category="N" show_comment_count="Y" show_trackback_count="N" show_icon="N" order_target="list_order" order_type="desc" cols_list_count="3" thumbnail_type="crop" thumbnail_width="310" thumbnail_height="200" />
메인 위젯2 설정
▶ 타이틀 입력
타이틀을 입력합니다.
예시) Customer Center
▶ 내용 입력
예시) AM 10:00 ~ PM 18:00 / TEL : 070-8283-1029
▶ 링크 설정
contac us로 사용할 게시판 또는 contact 모듈 mid 명 입력
예시) contact
메인 위젯3 설정
▶ 타이틀 입력
타이틀을 입력합니다.
예시) Customer Center
▶ 위젯 코드 입력
위젯은 XET 콘텐츠 위젯을 사용합니다.
1. 관리자 페이지 > 고급 > 설치된 위젯 > XET 콘텐츠 위젯 > 코드생성 클릭
2. 스킨 > XET 베이직 레이아웃용 스킨 > 선택
3. 컬러셋 > 기본
4. 모듈 선택 > 추가 > 미리 생성해 놓은 게시판을 선택합니다.
5. 내용 표시형태 > 내용형태 > 갤러리를 선택합니다.
6. 표시항목 및 순서는 섬네일,제목,내용 순으로 표시하도록 선택합니다.
7. 목록수는 6을 입력합니다.
8. 섬네일 이미지 > 섬네일 생성방법은 Crop으로 선택합니다.
9. 섬네일 넓이는 310, 높이는 200 으로 입력합니다.
6. 기타 옵션들은 적절하게 선택하신 후 코드생성 버튼을 클릭합니다.
7. 생성된 코드를 복사합니다.
8. 레이아웃 설정으로 돌아와 복사된 코드를 삽입합니다.
예시코드)
<img class="zbxe_widget_output" widget="xet_content" skin="xet_basic_skin" colorset="white" content_type="document" module_srls="113893" list_type="gallery" tab_type="none" option_view="thumbnail,title,content" list_count="6" page_count="1" subject_cut_size="24" show_browser_title="N" show_category="N" show_comment_count="N" show_trackback_count="N" show_icon="N" order_target="list_order" order_type="asc" cols_list_count="3" thumbnail_type="crop" thumbnail_width="310" thumbnail_height="200" />
사이드 영역 설정
▶ 사이드 영역
사이드 영역은 좌측, 또는 우측에 출력 할 수 있으며 메뉴 구성에 따라 자동으로 출력되며 "사용안함"으로 하시면 출력되지 않습니다.
▶ 사이드 메뉴 사용
사이드 영역에 1차메뉴의 하위 메뉴인 2차,3차 메뉴가 출력됩니다. 자동출력을 선택하시면 하위메뉴가 있을 시 자동으로 출력됩니다.
▶ 검색바 설정
사이드 영역에 검색바를 사용할 수 있습니다.
▶타이틀 입력
추가로 사용하실 수 있는 위젯영역입니다.
예시) RECENT POSTS
- 코드 입력
위젯은 XET 콘텐츠 위젯을 사용합니다.
1. 관리자 페이지 > 고급 > 설치된 위젯 > XET 콘텐츠 위젯 > 코드생성 클릭
2. 스킨 > XET 베이직 레이아웃용 스킨 > 선택
3. 컬러셋 > 기본
4. 모듈 선택 > 추가 > 미리 생성해 놓은 게시판을 선택합니다.
5. 내용 표시형태 > 내용형태 > 제목을 선택합니다.
6. 표시항목 및 순서는 "제목" 순으로 표시하도록 선택합니다.
7. 목록수는 6을 입력합니다.
8. 기타 옵션들은 적절하게 선택하신 후 코드생성 버튼을 클릭합니다.
9. 생성된 코드를 복사합니다.
10. 레이아웃 설정으로 돌아와 복사된 코드를 삽입합니다.
예시코드)
<img class="zbxe_widget_output" widget="xet_content" skin="xet_basic_skin" colorset="white" content_type="document" module_srls="113893" use_limit="N" order_target="list_order" order_type="desc" list_type="normal" list_style="bullet" option_view="title" list_count="6" page_count="1" subject_cut_size="30" markup_type="table" title_target="title" nickname_target="nickname" show_browser_title="N" show_content_title="N" show_comment_count="Y" show_trackback_count="N" show_category="N" show_icon="N" show_point_level="N" show_always_new="N" show_nocomment_document="N" tab_type="none" tab_order="module_order" tab_showtype="module" tab_move_type="mouseover" category_range="all" hyperlink="Y" hyperlink_src="article" view_permission="list" view_secret_document="all_user" comment_document_secret="Y" thumbnail_type="crop" />
하단 영역 위젯 설정
▶ 사용여부 선택
하단 영역 사용여부를 선택합니다. 하단 영역에는 3개 영역으로 분리된 형태로 사용할 수 있습니다.
▶ 1. 타이틀 입력
첫번째 영역의 타이틀을 입력합니다.
예시) COMPANY PROFILE
- 코드 입력
예시)
This is an example of a widget which can be used to describe a product or service.<br /><br />You can also use other widgets such as Email Updates, Latest Tweets, Featured Posts or even display a Custom Menu built with XpressEngine.
▶ 2. 타이틀 입력
두번째 영역의 타이틀을 입력합니다.
예시) RECENT POSTS
- 코드 입력
위젯은 XET 콘텐츠 위젯을 사용합니다.
1. 관리자 페이지 > 고급 > 설치된 위젯 > XET 콘텐츠 위젯 > 코드생성 클릭
2. 스킨 > XET 베이직 레이아웃용 스킨 > 선택
3. 컬러셋 > 기본
4. 모듈 선택 > 추가 > 미리 생성해 놓은 게시판을 선택합니다.
5. 내용 표시형태 > 내용형태 > 제목을 선택합니다.
6. 표시항목 및 순서는 "제목" 순으로 표시하도록 선택합니다.
7. 목록수는 6을 입력합니다.
8. 기타 옵션들은 적절하게 선택하신 후 코드생성 버튼을 클릭합니다.
9. 생성된 코드를 복사합니다.
10. 레이아웃 설정으로 돌아와 복사된 코드를 삽입합니다.
예시코드)
<img class="zbxe_widget_output" widget="xet_content" skin="xet_basic_skin" colorset="white" content_type="document" module_srls="113893" use_limit="N" order_target="list_order" order_type="desc" list_type="normal" list_style="bullet" option_view="title" list_count="6" page_count="1" subject_cut_size="40" markup_type="table" title_target="title" nickname_target="nickname" show_browser_title="N" show_content_title="N" show_comment_count="Y" show_trackback_count="N" show_category="N" show_icon="N" show_point_level="N" show_always_new="N" show_nocomment_document="N" tab_type="none" tab_order="module_order" tab_showtype="module" tab_move_type="mouseover" category_range="all" hyperlink="Y" hyperlink_src="article" view_permission="list" view_secret_document="all_user" comment_document_secret="Y" thumbnail_type="crop" />
▶ 3. 타이틀 입력
세번째 영역의 타이틀을 입력합니다.
예시) TAGS
- 코드 입력
위젯은 꼬리표 출력 위젯을 사용합니다.
1. 관리자 페이지 > 고급 > 설치된 위젯 > 꼬리표 목록 출력 > 코드생성 클릭
2. 스킨 > XET 베이직 레이아웃용 스킨 > 선택
3. 컬러셋 > 검은색 바탕용
4. 목록 수는 10 입력
5. 모듈 선택 > 추가 > Tag가 출력될 게시판을 선택합니다.
6. 코드생성 버튼을 클릭합니다.
9. 생성된 코드를 복사합니다.
10. 레이아웃 설정으로 돌아와 복사된 코드를 삽입합니다.
예시코드)
<img class="zbxe_widget_output" widget="tag_list" skin="xet_basic_skin" colorset="black" list_count="10" />
▶ 검색바 설정
하단 영역에 검색바를 사용할 수 있습니다.
푸터 설정
▶ 카피라이트 입력
주소, 또는 카피라이트를 입력합니다.
예시)
© 2013 xetemplate.com All Rights Reserved.