레브 레이아웃 설정 메뉴얼 VER 1.0.0

레브 레이아웃 소개

레브 레이아웃

본 레이아웃은 2컬럼 그리드형 스타일로 심플하면서 세련되게 디자인 되었습니다.
반응형 디자인으로 PC, Tablet, Note, Phone 등 다양한 디바이스를 지원합니다.

XE Core : 1.7 버전 이상, 1.8 최신버전 권장
모바일웹 호환성 :
웹호한성 : (IE9이상 권장), 웹표준 준수 브라우저

구매하기 DEMO 보기

제품 설치

제품 구성

레브 레이아웃 + 레브 레이아웃 전용 위젯

파일구성

다운받는 파일 xet_reve_v1.0.0.zip 파일
zip파일 안 구성
- layouts/xet_reve 폴더 와 파일들
- widgets/xet_reve_gallery 폴더 와 파일들

파일 설치

1. 구매하신 제품을 다운로드 받은 후 압축을 풀어줍니다.
2. FTP프로그램(파일질라추천)으로 XE가 설치된 웹호스팅 서버에 파일을 업로드 합니다.
기본적으로 압축파일에는 해당 폴더가 같이 들어있으므로 XE가 설치된 root 디렉토리에 업로드를(덮어쓰기) 하시면 해당 폴더에 자동으로 업로드됩니다.
3. 설치가 정상적으로 되었는지 확인하는 방법
레이아웃은 관리자페이지 > 고급 > 설치된 레이아웃 > XET 레브 레이아웃 항목이 보이면 정상.
위젯은 관리자페이지 > 고급 > 설치된 위젯 > XET 레브 레이아웃 전용 위젯 항목이 보이면 정상.

설치 경로

레브 레이아웃 설치 경로 :
/layouts/xet_reve

레브 레이아웃 전용 위젯이 설치 경로 :
/widgets/xet_reve_gallery

레이아웃 설정 전 필수세팅

레이아웃 설정에 들어가기 전 다음의 항목이 선행되어 있어야 합니다.

메뉴가 생성되어 있어야 합니다.

- 관리자페이지 > 사이트제작/편집 > 사이트 메뉴 편집에서 메뉴를 구성하세요.

게시판이 생성되어져 있어야 합니다.

- 메인 페이지의 위젯 출력으로 사용할 게시판이 있어야합니다.
- 사이트 메뉴 구성 시 게시판을 같이 생성하시고 게시판에 이미지 및 글을 등록 하세요.

메인 페이지로 사용할 page(위젯페이지,문서페이지)를가 생성되어져 있어야합니다.

- 메인으로 사용할 페이지이므로 mid 명은 home 또는 index로 주시는게 좋습니다.

1. 기본 설정

▶ 시작페이지 수동 설정

본 제품은 레이아웃 설정을 여러개 만들 필요없이 하나의 레이아웃 설정만으로 메인과 서브를 자동으로 인식하여 사용할 수 있도록 합니다.
비워두시면 시작페이지를 자동으로 인지하여 메인형으로 설정되고 그외 페이지들은 서브형으로 자동 설정됩니다.
특정 페이지의 레이아웃을 메인형으로 사용시 위젯페이지 메뉴 ID 명을 입력합니다. 입력된 페이지는 메인형으로 설정되고 그외 페이지들은 서브형으로 자동 설정됩니다.

▶ 프리로드

페이지 로딩 애니메이션을 2~3초동안 보여줍니다.

Select Option : ON, OFF

▶ 테마 컬러

테마 컬러는 포인트가 되는 컬러를 설정합니다. 설정을 위해 Hex 컬러 값을 입력합니다. (기본: #FFCC00)

HEADER 영역

▶ 로고 이미지 영역 BG컬러

슬라이더 섹션(투명) 외 사용되는 헤더 영역의 배경 컬러를 선택합니다.

Select Option : 하얀색 배경, 검은색 배경

하얀색 배경

검은색 배경

▶ 로고 이미지

로고 이미지를 등록합니다. 로고이미지 영역 BG컬러에 따라 이미지를 등록하세요.
(일반 사이즈 180X20 , 레티나 디스플레이 겸용 사이즈 260X40, 투명 png 이미지를 권장)

-- 로고 텍스트

로고 텍스트를 사용합니다. (단, 로고 이미지가 등록되어있으면 로고이미지가 출력됩니다.)

-- 로고 링크

로고 클릭 시 별도의 링크로 이동하려면 링크주소를 입력합니다. (비워 두시면 도메인주소로 자동 설정됩니다.)

▶ 로그인

로그인을 버튼을 사용합니다.

Select Option : OFF, ON

▶ 검색

통합검색을 사용합니다. (사이드 메뉴 오픈시 나타납니다.)

Select Option : OFF, ON

메인-Slider 섹션

▶ 사용 여부

브라우저 사이즈에 반응하는 슬라이더 이미지 및 유투브 영상을 함께 사용 할 수 있습니다.

Select Option : ON, OFF

▶ 슬라이더 사이즈

슬라이더 이미지 영역의 사이즈를 설정합니다

Select Option : 이미지 비율 기준, 브라우저 비율 기준(풀 이미지)

▶ 슬라이더 플레이

슬라이더 플레이방식을 설정합니다.

Select Option : 자동, 수동

-- 속도

슬라이더 플레이방식이 자동일 경우 슬라이더 속도를 1/1000초 기준으로 설정합니다. 숫자만 입력합니다(기본 5000, 최소 3000 이상권장)

▶ 효과

슬라이더 트랜지션 효과를 설정합니다.

Select Option : Fade, Scroll

▶ Arrow NAV

슬라이더 화면 좌,우측에 네비게이션을 버튼을 표시합니다. (모바일 모드에서는 표시되지 않으며 터치 스크롤로 작동됩니다.)

Select Option : ON, OFF

▶ Paging NAV

슬라이더 하단에 페이징 버튼을 표시합니다.

Select Option : ON, OFF

▶▶ 유투브 ID

유투브 영상을 플레이하려면 유투브 ID를 입력합니다. (예: https://youtu.be/TleZtlqcbD8 인경우 TleZtlqcbD8 만 입력)

▶▶ 1. 이미지 등록

슬라이더로 사용할 이미지를 등록합니다.
이미지 사이즈는 가로 1920px 사이즈 이상 권장합니다.

▶ 모바일용 이미지 등록

모바일용 이미지를 별도로 사용하시려면 등록합니다.(가로 640px 사이즈 권장)

-- 텍스트 컬러

타이틀 및 내용의 컬러를 선택합니다.

Select Option : White, Black

-- 텍스트 배경 컬러

타이틀 및 내용의 투명한 배경 컬러를 사용합니다. 배경컬러 사용시 텍스트 컬러 설정은 무시됩니다.

Select Option : ON, OFF

-- 텍스트 정렬

타이틀 및 내용의 정렬방식을 설정합니다.

Select Option : Center, Left

-- 타이틀

슬라이더 이미지 위에 출력할 타이틀을 입력합니다.

-- 내용

슬라이더 이미지 위에 출력할 내용을 입력합니다.

-- MORE 버튼 링크

MORE 버튼을 사용하시려면 링크주소를 입력합니다.
사이트 내 링크시 mid만 입력해도 되며 외부 링크시 http:// 형식으로 입력 합니다.

-- MORE 버튼 텍스트

MORE 버튼으로 사용 할 텍스트를 입력합니다.

----- 이미지는 최대 5개까지 사용할 수 있습니다. -----

메인-About 섹션

▶ 사용 여부

Select Option : ON, OFF

▶ 이미지

좌측영역 이미지를 사용합니다. (640X960 사이즈 권장)

-- 유투브 ID

이미지 클릭 시 유투브 영상을 플레이하려면 유투브 ID를 입력합니다. (예: https://youtu.be/TleZtlqcbD8 인경우 TleZtlqcbD8 만 입력)

-- 비메오 ID

이미지 클릭 시 비메오 영상을 플레이하려면 비메오 ID를 입력합니다. (예: https://vimeo.com/178747566 인경우 178747566 만 입력)

▶ 섹션 타이틀

섹션을 대표하는 타이틀을 입력합니다.

- 섹션 내용

섹션을 설명하는 내용을 입력합니다.

▶ MORE 버튼 링크

MORE 버튼을 사용하시려면 링크주소를 입력합니다.

-- MORE 버튼 텍스트

MORE 버튼으로 사용 할 텍스트를 입력합니다.

메인-Service 섹션

▶ 사용 여부

이미지를 사용 하거나 위젯을 사용 할 수 있습니다. (이미지 사용시 가로,세로 크기를 동일하게 사용합니다.)

Select Option : 이미지 사용, 위젯 사용, OFF

▶ 1. 이미지

이미지를 사용합니다. (가로 640 X 420 사이즈 권장)

-- 타이틀

타이틀을 입력합니다.

-- 내용

내용을 입력합니다. 이미지에 마우스오버시 보여집니다.

-- 링크

이미지 클릭 시 링크를 사용하시려면 링크주소를 입력합니다.

-- 새창으로 링크 열기

링크를 새창으로 띄웁니다.

Select Option : OFF, ON

----- 이미지는 최대 6개까지 사용할 수 있습니다. -----

▶ 출력할 게시판 SRL 번호

위젯으로 사용 시 출력 될 게시판의 SRL 번호를 입력합니다. (여러개 출력시 콤마로 구분합니다.)

▶ 출력할 이미지 개수

위젯으로 출력 될 이미지 개수를 입력합니다. (비워두시면 기본 6 적용)

메인-Info 섹션

▶ 사용 여부

Select Option : ON, OFF

▶ 이미지

우측영역 이미지를 사용합니다. (640X960 사이즈 권장)

-- 유투브 ID

이미지 클릭 시 유투브 영상을 플레이하려면 유투브 ID를 입력합니다. (예: https://youtu.be/TleZtlqcbD8 인경우 TleZtlqcbD8 만 입력)

-- 비메오 ID

이미지 클릭 시 비메오 영상을 플레이하려면 비메오 ID를 입력합니다. (예: https://vimeo.com/178747566 인경우 178747566 만 입력)

▶ 섹션 타이틀

섹션을 대표하는 타이틀을 입력합니다.

- 섹션 내용

섹션을 설명하는 내용을 입력합니다.

▶ MORE 버튼 링크

MORE 버튼을 사용하시려면 링크주소를 입력합니다.

-- MORE 버튼 텍스트

MORE 버튼으로 사용 할 텍스트를 입력합니다.

메인-Product 섹션

▶ 사용 여부

스크롤 형태의 위젯으로 출력됩니다. (첨부된 원본 이미지를 출력합니다. 첨부된 파일이 없는경우 출력 되지 않습니다.)

Select Option : ON, OFF

▶ 출력할 게시판 SRL 번호

위젯으로 출력 될 게시판의 SRL 번호를 입력합니다. (여러개 출력시 콤마로 구분합니다.)

게시판 SRL 번호 확인하는 방법

-- 출력할 목록 수

위젯으로 출력 될 목록 수를 입력합니다. (비워두시면 기본 6 적용)

▶▶ 코드 입력

기본으로 설정된 갤러리형 위젯 외 별도의 위젯을 사용하시려면 위젯코드를 생성하여 입력합니다.(입력값이 있으면 기본 위젯은 출력되지 않습니다.)

메인-Gallery 섹션

▶ 사용 여부

갤러리 형태의 위젯으로 출력됩니다

Select Option : ON, OFF

▶ 라이트박스

이미지 클릭 시 라이트박스를 사용합니다. OFF 시 게시글로 이동합니다.

Select Option : ON, OFF

▶ 섹션 타이틀

섹션을 대표하는 타이틀을 입력합니다.

-- 섹션 내용

섹션을 설명하는 내용을 입력합니다.

▶ 출력할 게시판 SRL 번호

갤러리형 위젯으로 출력 될 게시판의 SRL 번호를 입력합니다. (여러개 출력시 콤마로 구분합니다.)

게시판 SRL 번호 확인하는 방법

-- 출력할 목록 수

위젯으로 출력 될 목록 수를 입력합니다. (비워두시면 기본 6 적용)

▶ MORE 버튼 링크

MORE 버튼을 사용하시려면 링크주소를 입력합니다.

-- MORE 버튼 텍스트

MORE 버튼으로 사용 할 텍스트를 입력합니다.

▶▶ 코드 입력

기본으로 설정된 갤러리형 위젯 외 별도의 위젯을 사용하시려면 위젯코드를 생성하여 입력합니다.(입력값이 있으면 기본 위젯은 출력되지 않습니다.)

메인-Feature 섹션

▶ 사용 여부

이미지를 사용 하거나 텍스트를 사용 할 수 있습니다.

Select Option : ON, OFF

▶ 배경 컬러

백그라운드 컬러 설정을 위해 Hex 컬러 값을 입력합니다. (예: #F1F1F1)

▶ 섹션 타이틀

섹션을 대표하는 타이틀을 입력합니다.

-- 섹션 내용

섹션을 설명하는 내용을 입력합니다.

-- 텍스트 컬러

섹션 타이틀 및 내용의 컬러를 선택합니다.

Select Option : Black, White

▶ MORE 버튼 링크

MORE 버튼을 사용하시려면 링크주소를 입력합니다.

-- MORE 버튼 텍스트

MORE 버튼으로 사용 할 텍스트를 입력합니다.

▶ 1. 이미지

이미지를 사용합니다. (가로 640 X 420 사이즈 권장)

-- 백그라운드 컬러

이미지가 없을 경우 백그라운드 컬러를 설정합니다. 설정을 위해 Hex 컬러 값을 입력합니다. (예: #FFCC00)

-- 타이틀

타이틀을 입력합니다.

-- 내용

내용을 입력합니다.

▶ MORE 버튼 링크

MORE 버튼을 사용하시려면 링크주소를 입력합니다.

-- MORE 버튼 텍스트

MORE 버튼으로 사용 할 텍스트를 입력합니다.

-- 새창으로 링크 열기

링크를 새창으로 띄웁니다.

Select Option : OFF, ON

----- 최대 6개까지 사용할 수 있습니다. -----

메인-Video 섹션

▶ 사용 여부

유투브 영상을 배경으로 플레이 합니다. (모바일에서는 플레이 버튼 아이콘이 출력됩니다.)

Select Option : ON, OFF

▶ 유투브 ID

영상으로 플레이 될 유투브 ID를 입력합니다. (예: https://youtu.be/TleZtlqcbD8 인경우 TleZtlqcbD8 만 입력)

서브-설정

▶ 선택된 메뉴명 출력

현재 선택된 메뉴의 1차 메뉴명을 출력합니다. (해당메뉴의 메뉴 설명이 있으면 메뉴명 밑에 출력됩니다.)

Select Option : ON, OFF

-- 배경 이미지

선택된 메뉴명 출력시 배경이미지로 사용하실 이미지를 등록합니다. (어두운 이미지 1920*400 사이즈 권장)

-- 배경 컬러

배경이미지 대신 컬러를 사용하시려면 설정을 위해 Hex 컬러 값을 입력합니다. (예: #000000, 기본 어두운 컬러)

-- 텍스트 컬러

텍스트 컬러 설정을 위해 Hex 컬러 값을 입력합니다. (예: #FFFFFF, 기본 화이트 컬러)

-- 높이

높이를 설정합니다. (비워두시면 기본값 240 적용)

▶ 2차 메뉴 출력

선택된 1차메뉴에 하위 2차메뉴가 있으면 가로형으로 출력합니다.

Select Option : ON, OFF

▶ 콘텐츠 영역 사이즈

콘텐츠가 출력되는 영역의 가로 사이즈를 설정합니다.

Select Option : 고정형, FULL 사이즈형

▶ 콘텐츠 영역 배경 컬러

콘텐츠 영역 백그라운드 컬러를 선택적으로 사용하실 수 있습니다.

Select Option : 하얀색 배경, 검은색 배경

하얀색 배경

검은색 배경

FOOTER 영역

▶ ABOUT US 영역 타이틀

타이틀을 입력합니다.

-- 내용

내용을 입력합니다.

▶ BLOG 영역 타이틀

타이틀을 입력합니다.

-- 출력할 게시판 SRL 번호

갤러리형 위젯으로 출력 될 게시판의 SRL 번호를 입력합니다. (여러개 출력시 콤마로 구분합니다.)

게시판 SRL 번호 확인하는 방법

-- 출력할 목록 수

위젯으로 출력 될 목록 수를 입력합니다. (비워두시면 기본 6 적용)

▶ CONTACT US 영역 타이틀

타이틀을 입력합니다.

-- 내용

내용을 입력합니다.

-- 회사명

회사명, 웹사이트명등 이름을 입력합니다.

-- 주소

주소를 입력합니다.

-- 이메일

이메일 주소를 입력합니다.

-- 전화번호

전화번호를 입력합니다.

-- 팩스번호

팩스번호를 입력합니다.

-- 지도 보기 버튼

지도(구글지도, 다음지도, 네이버지도)에서 지도 공유 URL을 입력하면 지도를 볼 수 있는 버튼이 출력됩니다.

구글지도의 공유 코드를 사용하실수 있습니다. (주소 검색 후 공유 클릭 > 링크공유 약식URL 코드를 복사하여 입력)

▶ 카피라이트

카피라이트 정보를 입력합니다. (예: ©Copyright xetemplate.com All Rights Reserved.)

▶ 언어선택

언어선택(다국어설정) 아이콘을 사용합니다.

Select Option : ON, OFF

▶ SNS 링크

SNS링크 사용 여부

Select Option : ON, OFF

-- Facebook 링크 주소

아이콘을 사용하시려면 링크 주소를 입력합니다.

-- Twitter 링크 주소

아이콘을 사용하시려면 링크 주소를 입력합니다.

-- Blog 링크 주소

아이콘을 사용하시려면 링크 주소를 입력합니다.

-- Google + 링크 주소

아이콘을 사용하시려면 링크 주소를 입력합니다.

-- Instagram 링크 주소

아이콘을 사용하시려면 링크 주소를 입력합니다.

-- Kakao Talk 링크 주소

아이콘을 사용하시려면 링크 주소를 입력합니다.

-- Pinterest 링크 주소

아이콘을 사용하시려면 링크 주소를 입력합니다.

Demo View

기본 세팅으로 되어있는 Demo 화면을 봅니다. 설정된 값은 무시됩니다.


▶ Demo View

Demo 화면을 볼 수 있는 옵션입니다.

Select Option : OFF, ON

궁금증이 해결 되지 않으셨나요?