제품 설치
제품 구성
- 필라테스 레이아웃 1개
- 필라테스 레이아웃 전용 위젯 1개
파일 구성
xet_pilates_v1.0.0.zip 파일
- layouts/xet_pilates 폴더 와 파일들
- widgets/xet_pilates_content 폴더 와 파일들
파일 설치
1. 구매하신 제품을 다운로드 받은 후 압축을 풀어줍니다.
2. FTP프로그램(파일질라추천)으로 라이믹스가 설치된 웹호스팅 서버에 파일을 업로드 합니다.
기본적으로 압축파일에는 해당 폴더가 같이 들어있으므로 라이믹스가 설치된 root 디렉토리에 업로드를(덮어쓰기) 하시면 해당 폴더에 자동으로 업로드됩니다.
3.설치가 정상적으로 되었는지 확인하는 방법
레이아웃은 관리자페이지 > 고급 > 설치된 레이아웃 > XET 필라테스 레이아웃 항목이 보이면 정상.
위젯은 관리자페이지 > 고급 > 설치된 위젯 > XET 필라테스 콘텐츠 위젯 항목이 보이면 정상.
※ 라이믹스가 설치되지 않은경우 먼저 설치가 되어야합니다.
설치 경로
필라테스 레이아웃 파일이 설치되는 경로 :
/layouts/xet_pilates
필라테스 전용 위젯 파일이 설치되는 경로 :
/widgets/xet_pilates_content
레이아웃 설정 전 필수세팅
레이아웃 설정에 들어가기 전 다음의 항목이 선행되어 있어야 합니다.
메뉴가 생성되어 있어야 합니다.
- 관리자페이지 > 사이트제작/편집 > 사이트 메뉴 편집에서 메뉴를 구성하세요.
게시판이 생성되어져 있어야 합니다.
- 메인 페이지의 위젯 출력으로 사용할 게시판이 있어야합니다.
- 사이트 메뉴 구성 시 게시판을 같이 생성하시고 게시판에 이미지 및 글을 등록 하세요.
메인 페이지로 사용할 page(위젯페이지,문서페이지)를가 생성되어져 있어야합니다.
- 메인으로 사용할 페이지이므로 mid 명은 home 또는 index로 주시는게 좋습니다.
◆ 기본 설정
본 제품은 레이아웃 설정을 여러개 만들 필요없이 하나의 레이아웃 설정만으로 메인과 서브를 자동으로 인식하여 사용할 수 있도록 합니다.
특정 페이지를 홈(메인형)으로 사용 시 메뉴ID(mid)명을 입력합니다. 비워두면 메인(홈)페이지를 자동으로 인지하여 메인형으로 설정되고 그외 페이지들은 서브형으로 자동 설정됩니다.
예: https://도메인.com/index 인경우 index가 메뉴ID(mid) 입니다.
웹사이트 제목을 입력하면 사이트 전체에 사용됩니다. 로고이미지가 없을시에도 대신 사용됩니다. (비워두면 라이믹스-시스템 설정의 사이트제목을 사용합니다.)
본 레이아웃은 다양한 폰트를 지원합니다.
수트, 노토산스외 나머지 폰트는 온라인 폰트를 사용합니다.
본 레이아웃은 Light, Dark 컬러 모드를 지원합니다.
라이믹스 시스템설정 모드는 관리자 페이지 > 설정 > 시스템 설정 > 사이트 색상 조합 설정에 따릅니다.
- Light 모드 -
- Dark 모드 -
포인트 컬러는 사이트의 대표 컬러로 선택된 메뉴, 버튼, 마우스 오버시 등 컬러에 사용됩니다. (흰색, 검은색은 제외 하세요)
웹사이트 메인 페이지 접속 시 로딩 애니메이션을 페이지 로딩이 끝날때까지 보여줍니다.
로고이미지를 등록합니다. 로고 이미지는 여백이 없는 투명 png 파일을 권장하며 사이즈는 자동으로 조절됩니다. 로고이미지를 등록하지 않으면 웹사이트 제목이 출력됩니다.
로그인 버튼 사용여부를 선택 할 수 있습니다.
헤더영역 우측에 버튼을 출력합니다. (대표번호로 전화걸기 사용 시 ◆ 기본 설정 > 웹사이트 정보 설정 > 대표전화 번호가 입력되어있어야 합니다.)
별도링크 사용 시 URL 링크를 입력합니다. (ex: https://링크주소)
별도링크 사용 시 MORE 버튼으로 사용 할 텍스트를 입력합니다.(비워두면 MORE 출력)
우측 하단에 고정된 카카오톡 상담버튼을 출력합니다.
카카오채널의 채널정보에서 채팅 URL을 복사하여 입력합니다. (예: https://pf.kakao.com/고유아이디/chat)
대표 전화번호를 입력합니다. 전화번호 클릭 시 전화걸기로 연결됩니다.
추가 전화번호를 입력합니다. 전화번호 클릭 시 전화걸기로 연결됩니다.
팩스번호를 입력합니다.
이메일을 입력합니다. 이메일 주소 클릭시 메일보내기로 연결됩니다.
추가 이메일을 입력합니다. 이메일 주소 클릭시 메일보내기로 연결됩니다.
주소를 입력합니다.
추가정보가 필요한 경우 사용합니다.
추가정보가 필요한 경우 사용합니다.
카피라이트 정보를 설정 할수 있습니다. (비워두면 @년 + 도메인 + All Rights Reserved. 자동 출력됩니다.)
◈ 메인 - 비쥬얼 동영상 섹션
동영상을 백그라운드로 사용하는 섹션입니다.
동영상 플레이 섹션 높이를 선택적으로 사용이 가능합니다.
플레이할 유튜브 영상의 공유 주소를 입력합니다.
플레이할 비메오 영상의 공유 주소를 입력합니다.
플레이할 MP4 파일을 FTP로 업로드후 영상 파일의 URL을 입력합니다.
섹션을 대표하는 카테고리를 입력합니다.(작은 글자)
섹션을 설명하는 제목을 입력합니다.(큰 글자)
섹션을 설명하는 내용을 입력합니다.
MORE 버튼을 사용하려면 URL 링크를 입력합니다. (ex: https://링크주소)
MORE 버튼으로 사용 할 텍스트를 입력합니다.(비워두면 MORE 출력)
◈ 메인 - 비쥬얼 슬라이더 섹션
브라우저 사이즈에 반응하는 슬라이드 이미지를 사용하는 섹션입니다.
자동으로 다음 이미지로 슬라이드 합니다.
오토 플레이 사용시 딜레이 타임을 (초) 단위로 설정 할 수 있습니다. 정해진 시간이 지나면 자동으로 다음 이미지로 넘어갑니다.
슬라이드 전환 효과를 지원하므로 선택적으로 사용 할 수 있습니다.
슬라이드 높이를 선택적으로 사용이 가능하며, 이미지 기준 선택시 등록한 이미지 사이즈에 따라 유동적으로 슬라이더 높이가 변하게 됩니다.
이미지 기준은 이미지 사이즈 그대로 출력이 가능하며 그외 기준은 브라우저 높이 기준이므로 이미지가 잘려 보일 수도 있습니다.
이미지를 등록 합니다.(1920*1280 사이즈 권장)
모바일 브라우저에서 별도로 사용 할 이미지를 등록합니다. (540 * 960 사이즈 권장)
카테고리를 입력합니다.(작은 글자)
제목을 입력합니다.(큰 글자)
내용을 입력합니다.(작은 글자)
링크 버튼을 사용하려면 링크 주소를 입력합니다. (ex: https://링크주소)
링크 버튼으로 사용 할 텍스트를 입력합니다.
이미지를 등록 합니다.(1920*1280 사이즈 권장)
모바일 브라우저에서 별도로 사용 할 이미지를 등록합니다. (540 * 960 사이즈 권장)
카테고리를 입력합니다.(작은 글자)
제목을 입력합니다.(큰 글자)
내용을 입력합니다.(작은 글자)
링크 버튼을 사용하려면 링크 주소를 입력합니다. (ex: https://링크주소)
링크 버튼으로 사용 할 텍스트를 입력합니다.
이미지를 등록 합니다.(1920*1280 사이즈 권장)
모바일 브라우저에서 별도로 사용 할 이미지를 등록합니다. (540 * 960 사이즈 권장)
카테고리를 입력합니다.(작은 글자)
제목을 입력합니다.(큰 글자)
내용을 입력합니다.(작은 글자)
링크 버튼을 사용하려면 링크 주소를 입력합니다. (ex: https://링크주소)
링크 버튼으로 사용 할 텍스트를 입력합니다.
이미지를 등록 합니다.(1920*1280 사이즈 권장)
모바일 브라우저에서 별도로 사용 할 이미지를 등록합니다. (540 * 960 사이즈 권장)
카테고리를 입력합니다.(작은 글자)
제목을 입력합니다.(큰 글자)
내용을 입력합니다.(작은 글자)
링크 버튼을 사용하려면 링크 주소를 입력합니다. (ex: https://링크주소)
링크 버튼으로 사용 할 텍스트를 입력합니다.
이미지를 등록 합니다.(1920*1280 사이즈 권장)
모바일 브라우저에서 별도로 사용 할 이미지를 등록합니다. (540 * 960 사이즈 권장)
카테고리를 입력합니다.(작은 글자)
제목을 입력합니다.(큰 글자)
내용을 입력합니다.(작은 글자)
링크 버튼을 사용하려면 링크 주소를 입력합니다. (ex: https://링크주소)
링크 버튼으로 사용 할 텍스트를 입력합니다.
이미지를 등록 합니다.(1920*1280 사이즈 권장)
모바일 브라우저에서 별도로 사용 할 이미지를 등록합니다. (540 * 960 사이즈 권장)
카테고리를 입력합니다.(작은 글자)
제목을 입력합니다.(큰 글자)
내용을 입력합니다.(작은 글자)
링크 버튼을 사용하려면 링크 주소를 입력합니다. (ex: https://링크주소)
링크 버튼으로 사용 할 텍스트를 입력합니다.
이미지를 등록 합니다.(1920*1280 사이즈 권장)
모바일 브라우저에서 별도로 사용 할 이미지를 등록합니다. (540 * 960 사이즈 권장)
카테고리를 입력합니다.(작은 글자)
제목을 입력합니다.(큰 글자)
내용을 입력합니다.(작은 글자)
링크 버튼을 사용하려면 링크 주소를 입력합니다. (ex: https://링크주소)
링크 버튼으로 사용 할 텍스트를 입력합니다.
이미지를 등록 합니다.(1920*1280 사이즈 권장)
모바일 브라우저에서 별도로 사용 할 이미지를 등록합니다. (540 * 960 사이즈 권장)
카테고리를 입력합니다.(작은 글자)
제목을 입력합니다.(큰 글자)
내용을 입력합니다.(작은 글자)
링크 버튼을 사용하려면 링크 주소를 입력합니다. (ex: https://링크주소)
링크 버튼으로 사용 할 텍스트를 입력합니다.
◈ 메인 - 인사말 섹션
인사말 또는 소개로 사용하는 섹션입니다.
섹션을 대표하는 카테고리를 입력합니다.(작은 글자)
섹션을 설명하는 제목을 입력합니다.(큰 글자)
섹션을 설명하는 내용을 입력합니다.
이미지를 사용하시려면 이미지를 등록합니다.
MORE 버튼을 사용하려면 URL 링크를 입력합니다. (ex: https://링크주소)
MORE 버튼으로 사용 할 텍스트를 입력합니다.(비워두면 MORE 출력)
◈ 메인 - 프로그램안내 섹션
프로그램 소개 및 안내를 사용하는 섹션입니다.
섹션을 대표하는 카테고리를 입력합니다.(작은 글자)
섹션을 설명하는 제목을 입력합니다.(큰 글자)
섹션을 설명하는 내용을 입력합니다.
사용 할 이미지를 등록합니다. (동일 사이즈 권장)
제목을 입력합니다.
내용을 입력합니다.
링크를 사용하시려면 URL 링크를 입력합니다. (ex: https://링크주소)
사용 할 이미지를 등록합니다. (동일 사이즈 권장)
제목을 입력합니다.
내용을 입력합니다.
링크를 사용하시려면 URL 링크를 입력합니다. (ex: https://링크주소)
사용 할 이미지를 등록합니다. (동일 사이즈 권장)
제목을 입력합니다.
내용을 입력합니다.
링크를 사용하시려면 URL 링크를 입력합니다. (ex: https://링크주소)
사용 할 이미지를 등록합니다. (동일 사이즈 권장)
제목을 입력합니다.
내용을 입력합니다.
링크를 사용하시려면 URL 링크를 입력합니다. (ex: https://링크주소)
사용 할 이미지를 등록합니다. (동일 사이즈 권장)
제목을 입력합니다.
내용을 입력합니다.
링크를 사용하시려면 URL 링크를 입력합니다. (ex: https://링크주소)
사용 할 이미지를 등록합니다. (동일 사이즈 권장)
제목을 입력합니다.
내용을 입력합니다.
링크를 사용하시려면 URL 링크를 입력합니다. (ex: https://링크주소)
◈ 메인 - 팝업 동영상 섹션
유튜브, 비메오, MP4등 영상으로 소개하는 섹션입니다. 사용할 영상 타입을 선택 후 아래 영상 공유주소를 입력해주세요.
섹션의 배경이미지를 사용합니다.
플레이할 유튜브 영상의 공유 주소를 입력합니다.
플레이할 비메오 영상의 공유 주소를 입력합니다.
플레이할 MP4 파일을 FTP로 업로드후 영상 파일의 URL을 입력합니다.
섹션을 대표하는 카테고리를 입력합니다.(작은 글자)
섹션을 설명하는 제목을 입력합니다.(큰 글자)
섹션을 설명하는 내용을 입력합니다.
썸네일로 사용 할 이미지를 등록합니다.(이미지가 없으면 동영상 플레이 버튼이 출력되지 않습니다.
MORE 버튼을 사용하려면 URL 링크를 입력합니다. (ex: https://링크주소)
MORE 버튼으로 사용 할 텍스트를 입력합니다.(비워두면 MORE 출력)
◈ 메인 - Gallery 섹션
게시물을 갤러리 형태의 위젯으로 출력하는 섹션입니다.
섹션을 대표하는 카테고리를 입력합니다.(작은 글자)
섹션을 설명하는 제목을 입력합니다.(큰 글자)
섹션을 설명하는 내용을 입력합니다.
위젯으로 출력 될 게시판의 고유 SRL 번호를 입력합니다. (여러개 출력시 콤마로 구분합니다.)
위젯으로 출력 될 게시판의 메뉴 URL을 입력합니다. (여러개 출력시 콤마로 구분합니다.)
예: https://example.com/board 인경우 board 입력.
출력 할 개수를 입력합니다. (비워두시면 기본 6 적용)
썸네일 생성시 가로크기를 정합니다
썸네일 생성시 세로크기를 정합니다
썸네일을 고화질로 출력합니다.
썸네일 클릭 시 원본 이미지를 볼 수 있는 라이트박스를 사용합니다.
기본으로 설정된 위젯을 사용하지 않고 별도의 위젯을 사용하려면 위젯코드를 생성하여 입력합니다.(입력값이 있으면 기본 위젯은 출력되지 않습니다.)
MORE 버튼을 사용하려면 URL 링크를 입력합니다. (ex: https://링크주소)
MORE 버튼으로 사용 할 텍스트를 입력합니다.(비워두면 MORE 출력)
◈ 메인 - FAQ 섹션
게시물을 FAQ형태로 질답 안내를 사용하는 섹션입니다.
섹션을 대표하는 카테고리를 입력합니다.(작은 글자)
섹션을 설명하는 제목을 입력합니다.(큰 글자)
섹션을 설명하는 내용을 입력합니다.
위젯으로 출력 될 게시판의 고유 SRL 번호를 입력합니다. (여러개 출력시 콤마로 구분합니다.)
위젯으로 출력 될 게시판의 메뉴 URL을 입력합니다. (여러개 출력시 콤마로 구분합니다.)
예: https://example.com/board 인경우 board 입력.
출력 할 개수를 입력합니다. (비워두시면 기본 6 적용)
기본으로 설정된 위젯을 사용하지 않고 별도의 위젯을 사용하려면 위젯코드를 생성하여 입력합니다.(입력값이 있으면 기본 위젯은 출력되지 않습니다.)
MORE 버튼을 사용하려면 URL 링크를 입력합니다. (ex: https://링크주소)
MORE 버튼으로 사용 할 텍스트를 입력합니다.(비워두면 MORE 출력)
◈ 메인 - Archive 섹션
갤러리 타입의 위젯을 사용하여 최근 등록 된 글을 출력하는 섹션입니다.
섹션을 대표하는 카테고리를 입력합니다.(작은 글자)
섹션을 설명하는 제목을 입력합니다.(큰 글자)
섹션을 설명하는 내용을 입력합니다.
위젯으로 출력 될 게시판의 고유 SRL 번호를 입력합니다. (여러개 출력시 콤마로 구분합니다.)
위젯으로 출력 될 게시판의 메뉴 URL을 입력합니다. (여러개 출력시 콤마로 구분합니다.)
예: https://example.com/board 인경우 board 입력.
출력 할 개수를 입력합니다. (비워두시면 기본 6 적용)
썸네일 생성시 가로크기를 정합니다
썸네일 생성시 세로크기를 정합니다
썸네일 클릭 시 원본 이미지를 볼 수 있는 라이트박스를 사용합니다.
기본으로 설정된 위젯을 사용하지 않고 별도의 위젯을 사용하려면 위젯코드를 생성하여 입력합니다.(입력값이 있으면 기본 위젯은 출력되지 않습니다.)
MORE 버튼을 사용하려면 URL 링크를 입력합니다. (ex: https://링크주소)
MORE 버튼으로 사용 할 텍스트를 입력합니다.(비워두면 MORE 출력)
◈ 메인 - 추가섹션1
추가섹션은 HTML코드 및 이미지를 사용할 수 있는 섹션입니다.
섹션을 대표하는 카테고리를 입력합니다.(작은 글자)
섹션을 설명하는 제목을 입력합니다.(큰 글자)
섹션을 설명하는 내용을 입력합니다.
내용을 입력합니다. (HTML 사용 가능)
출력 할 이미지를 등록합니다.
MORE 버튼을 사용하려면 URL 링크를 입력합니다. (ex: https://링크주소)
MORE 버튼으로 사용 할 텍스트를 입력합니다.(비워두면 MORE 출력)
◈ 메인 - 추가섹션2
추가섹션은 HTML코드 및 이미지를 사용할 수 있는 섹션입니다.
섹션을 대표하는 카테고리를 입력합니다.(작은 글자)
섹션을 설명하는 제목을 입력합니다.(큰 글자)
섹션을 설명하는 내용을 입력합니다.
내용을 입력합니다. (HTML 사용 가능)
출력 할 이미지를 등록합니다.
MORE 버튼을 사용하려면 URL 링크를 입력합니다. (ex: https://링크주소)
MORE 버튼으로 사용 할 텍스트를 입력합니다.(비워두면 MORE 출력)
◈ 메인 - 추가섹션3
추가섹션은 HTML코드 및 이미지를 사용할 수 있는 섹션입니다.
섹션을 대표하는 카테고리를 입력합니다.(작은 글자)
섹션을 설명하는 제목을 입력합니다.(큰 글자)
섹션을 설명하는 내용을 입력합니다.
내용을 입력합니다. (HTML 사용 가능)
출력 할 이미지를 등록합니다.
MORE 버튼을 사용하려면 URL 링크를 입력합니다. (ex: https://링크주소)
MORE 버튼으로 사용 할 텍스트를 입력합니다.(비워두면 MORE 출력)
◈ 메인 - 상담안내 섹션
상담문의 안내를 사용하는 섹션입니다.
섹션의 배경이미지를 사용합니다.
섹션을 대표하는 카테고리를 입력합니다.(작은 글자)
섹션을 설명하는 제목을 입력합니다.(큰 글자)
섹션을 설명하는 내용을 입력합니다.
MORE 버튼을 사용하려면 URL 링크를 입력합니다. (ex: https://링크주소)
MORE 버튼으로 사용 할 텍스트를 입력합니다.(비워두면 MORE 출력)
◇ 서브 - 공통설정
서브페이지의 상단 영역에 메뉴별로 배경이미지를 사용 할 수 있습니다.
서브페이지의 상단 영역에 메뉴별로 배경이미지를 사용 할 수 있습니다.
서브페이지의 상단 영역에 메뉴별로 배경이미지를 사용 할 수 있습니다.
서브페이지의 상단 영역에 메뉴별로 배경이미지를 사용 할 수 있습니다.
서브페이지의 상단 영역에 메뉴별로 배경이미지를 사용 할 수 있습니다.
서브페이지의 상단 영역에 메뉴별로 배경이미지를 사용 할 수 있습니다.
서브페이지의 상단 영역에 메뉴별로 배경이미지를 사용 할 수 있습니다.
서브페이지의 상단 영역에 메뉴별로 배경이미지를 사용 할 수 있습니다.
서브페이지의 상단 영역에 기본 배경 이미지로 사용합니다.
서브 페이지 상단에 1차 메뉴명, 메뉴설명(있을경우)을 출력합니다.
선택된 2차, 3차 메뉴명을 출력합니다.
1차메뉴에 하위 서브메뉴가 있으면 출력합니다.
◇ 서브 - 인사말 페이지 설정
사용할 페이지의 메뉴 URL을 입력합니다.(https://example.com/about 인경우 about 입력)
첫번째 섹션 좌측 영역에 사용 할 이미지를 등록합니다.
제목을 입력합니다.(큰 글자)
내용을 입력합니다.
두번째 섹션 영역에 사용 할 배경 이미지를 등록합니다.
제목을 입력합니다.(큰 글자)
내용을 입력합니다.
Contact 페이지 설정이 되어있다면 해당 내용을 출력합니다.
◇ 서브 - Contact 페이지 설정
사용할 페이지의 메뉴 URL을 입력합니다.(https://example.com/about 인경우 about 입력)
제목을 입력합니다.(큰 글자)
지도를 출력하는 iframe코드(구글맵)를 입력하면 출력됩니다.(구글맵 적용방법 https://xetemplate.com/xe_faq/214810)
온라인 상담문의 폼을 사용합니다.
버튼 클릭시 온라인 상담문의 폼을 Modal로 출력합니다. 버튼명으로 사용 할 텍스트를 입력합니다.(비워두면 "상담접수" 출력)
폼 상단에 사용 할 타이틀을 입력합니다.
상단에 사용 할 설명을 입력합니다.
접수폼에서 입력받은 내용이 저장될 게시판 메뉴URL을 입력해야 정상적으로 등록이됩니다. (https://example.com/board_contact 인경우 board_contact 입력).
게시판 미리 생성 후 권한설정: 접근권한, 글작성은 모든사용자로 하고 그외에는 관리자로 설정합니다.
입력 받을 항목을 선택적으로 사용할 수 있습니다.
개인정보를 수집하는 내용에 관한 동의는 필수적으로 받아야합니다. (비워두면 기본 내용을 출력합니다.)
등록 완료 후 띄울 메세지를 입력합니다. (텍스트만 입력가능. 비워두면 "브라우저타이틀 + 등록되었습니다. 감사합니다." 출력됩니다.)