테마 소개

펜시오 XE 레이아웃 테마입니다. 펜시오 레이아웃 입니다. 겔러리와 이미지 처리를 위한 레이아웃으로 개발되었습니다. 슬라이더를 이용한 전체화면 메인스타일을 제공하고 있으며 3가지 스타일의 레이아웃 디자인을 기본으로 선택할 수 있습니다. 유튜브, 비메오 등의 동영상도 영상 id만 입력하여 메인에 출력될 수 있도록 설계되어 있습니다. 5가지 색상을 제공하고 있으며 다양한 패턴을 활용하여 원하는 스타일을 편하게 연출할 수 있습니다. 많은 세팅보다는 이미지위젯 위주로 세팅이 되어있으므로 위젯세팅만으로 간단하게 웹사이트 디자인을 완료할 수 있습니다.

레이아웃 소개

레이아웃 설치

패키지 구성 및 설치경로

다운로드 받으신 테마패키지의 압축파일을 해제하셔서 각각의 폴더를 올바른 설치경로에 업로드 해주십시요.

layouts 폴더
레이아웃 테마 모듈을 포함하고 있습니다. XE설치경로의 root 디렉토리에 업로드하여 주십시요.
widgets 폴더
폴더 하위에 펜시오 레이아웃 테마 전용 위젯을 포함하고 있습니다. XE설치경로의 root 디렉토리에 업로드하여 주십시요.
htmls 폴더
사용자개발코드 html 페이지가 포함되어 있습니다. XE설치경로의 root 디렉토리에 업로드하여 주십시요.

기본세팅 가이드

여기서는 XE 레이아웃을 올바르게 적용하기 위한 기본적인 세팅 가이드를 제시해 드립니다. 반드시 레이아웃 패키지를 올바른 경로에 설치하신 후 진행하시기 바랍니다. 기본세팅 가이드 편은 모든 XE기반 레이아웃에서 거의 공통적으로 적용되는 사항이니 꼭 숙지해 주시기 바랍니다. XE 사용이 아직 익숙하지 않으신 분들은 아래 순서대로 따라해 주시기 바랍니다.

사이트맵 작성하기

여기서는 사이트맵을 작성하는 방법을 알아봅니다. XE 테마 세팅은 사이트맵을 작성하는 것에서 부터 시작합니다.

  1. 레이아웃 패키지의 구성품들을 모두 올바른 경로에 설치하셨다면, XE 관리자 페이지로 접속합니다.
  2. 화면 왼쪽의 "사이트제작 / 편집" 을 클릭합니다. 사이트맵 제작/편집
  3. 사이트 메뉴 편집창 하단의 "사이트맵 추가"를 클릭하고 "사이트맵이름"을 입력한 뒤, "확인"버튼을 눌러줍니다. 사이트맵 추가
  4. 사이트맵을 만드셨다면, 이제 사이트맵에 메뉴를 만들어줍니다. 아래와 같이 차례로 클릭하여 웹사이트 메뉴를 만들어줍니다.
    1. 방금 만든 사이트맵 클릭
    2. 메뉴추가 클릭
    3. 외부페이지 (위젯페이지, 외부페이지, 바로가기, 게시판 등 원하는 형태대로 만들어 줍니다.)
    4. 메뉴이름, 메뉴ID 입력
    5. 확인 클릭
    메뉴 추가하기
  5. 메뉴에 하위메뉴를 만들 때에는 해당 메뉴를 클릭한 다음 우측 메뉴판에서 "메뉴추가"를 클릭하여 진행합니다. 메뉴를 잘못 만드셨다면 해당 메뉴를 클릭하고 우측 메뉴판에서 "삭제"를 클릭하여 진행하시면 됩니다.
  6. 위의 방식대로 메뉴추가를 반복하여 1차메뉴, 2차메뉴, 3차메뉴로 구성된 사이트맵을 완성하여 주십시요. 대부분의 레이아웃 테마에서는 상단 네비게이션 메뉴에서 2차 혹은 3차메뉴까지 출력하도록 되어있습니다. 1차메뉴는 레이아웃에 따라 다르지만 보통 5~6개 정도가 적당합니다.
  7. 테마에 따라 필요한 사이트맵의 갯수가 다릅니다. 이를테면, 상단메뉴, 글로벌 네비게이션메뉴, 하단 메뉴 등입니다. 레이아웃에 따라 글로벌 네비게이션 사이트맵 이외의 상단 메뉴, 하단메뉴 등에 연결할 사이트맵이 필요한 경우 위의 과정을 반복하여 사이트맵을 추가하여 줍니다.

메인 / 서브 레이아웃 생성

여기서는 설치된 레이아웃 모듈을 사용하여 레이아웃을 생성하는 방법을 알아봅니다. 레이아웃 테마에 필요한 사이트맵 작성을 완료하셨다면, 이제 레이아웃을 생성해 줄 차례입니다.

  1. 먼저 웹사이트의 첫화면인 메인페이지용 레이아웃을 생성합니다. 아래 가이드를 참고하여 레이아웃을 생성해주세요.
    1. (왼쪽 관리자메뉴) 고급 클릭
    2. 설치된 레이아웃 클릭
    3. (설치된 레이아웃 목록) 해당 레이아웃 테마 클릭
    4. 추가 클릭
    5. 제목에"메인 레이아웃" 입력 후 추가 클릭
    설치된 레이아웃 설치된 레이아웃 추가버튼 설치된 레이아웃 추가버튼
  2. 메인 레이아웃을 생성하셨으면 이제 설정값을 만져줄 차례입니다. 생성하신 레이아웃 오른쪽에 "설정" 버튼을 클릭합니다. 레이아웃 설정버튼
  3. 레이아웃 설정 페이지에서 아래쪽에 "사용자정의" 부분을 찾습니다.
    1. "기본설정"탭 클릭
    2. "레이아웃 기본타입 선택"에서 슬라이더형 레이아웃을 선택합니다.
    3. "베너 종류선택"에서 5가지 슬라이더 형태 중에서 원하는 스킨을 택합니다.
    레이아웃 타입선택
  4. 계속해서 레이아웃 설정 페이지 가장 아래에 위치한 '메뉴'에서 전에 만든 사이트맵을 레이아웃에 연결시켜주어야 합니다. 글로벌 네비게이션 메뉴와 하단메뉴에 각각 위에서 만든 사이트맵을 선택하고 '저장' 버튼을 눌러 변경사항을 저장합니다. 하단메뉴가 없는 경우 글로벌 네비게이션 메뉴만 지정해 주시면 됩니다. 레이아웃 메뉴연결
  5. 메인 레이아웃의 생성이 완료되었으면 서브페이지용 레이아웃을 생성할 차례입니다. 위의 과정을 아래와 같이 반복하여 주십시요.
    1. (왼쪽 관리자메뉴) 고급 클릭
    2. 설치된 레이아웃 클릭
    3. (설치된 레이아웃 목록) 해당 레이아웃 테마 클릭
    4. 추가 클릭
    5. 제목에"서브 레이아웃" 입력 후 추가 클릭
    6. 생성된 '서브 레이아웃' 옆의 '설정'버튼을 클릭하여 레이아웃 설정 페이지로 이동합니다.
  6. 이번에는 레이아웃 설정 페이지에서 '기본설정' 탭을 클릭하고 '레이아웃 기본 타입 선택'에서 '서브페이지' 혹은 '서브페이지 + 사이드바'를 선택합니다. 그리고 설정 페이지 아래에 있는 '메뉴'에서 각각 해당하는 사이트맵을 연결시킨 다음 '저장'버튼을 눌러 변경사항을 저장합니다. 레이아웃 메뉴연결
레이아웃 생성하실 때 짧은 팁

대부분의 메인페이지 레이아웃에 적용된 설정값들은 서브페이지 레이아웃에서 공유되는 설정값들입니다. 따라서 먼저 메인페이지 레이아웃을 생성하여 설정을 완료하신 후, 이 레이아웃을 '복사'하여 서브레이아웃을 생성하시면 좋습니다. 설정값을 다시 입력해야 하는 번거로움을 줄이고 시간과 노력을 절약할 수 있습니다.

세부적인 레이아웃 설정값에 대해서는 각각 해당하는 가이드를 참고하시기 바랍니다.

레이아웃 적용하기

여기서는 생성된 레이아웃을 각각의 페이지 / 게시판 등의 메뉴에 적용시키는 방법에 대해서 알아봅니다.

  1. 먼저 메인 레이아웃을 첫 화면이 될 메뉴에 적용시킵니다. 아래의 가이드를 따라서 진행해 주시기 바랍니다.
    1. 사이트 메뉴 편집 클릭
    2. 해당 사이트맵의 메뉴 클릭
    3. 디자인 클릭
    4. 레이아웃 클릭
    5. 사이트 디자인 사용에서 OFF로 바꿈
    6. 생성해 둔 메인 레이아웃 클릭
    7. 저장버튼 클릭
    레이아웃 메뉴연결
  2. 사이트의 홈페이지를 설정해줍니다. 위에서 메인 레이아웃을 적용했던 메뉴를 클릭하고 '홈페이지로 사용하기'를 클릭하여 웹사이트의 홈페이지로 지정합니다. 홈페이지 지정
  3. 웹상에서 메인 레이아웃이 제대로 적용되었는지 확인합니다. 아직 컨텐츠 부분의 세팅을 하기 전이므로 레이아웃만 적용되어 있고 나머지 부분은 비어 있을 것입니다. 이후 슬라이더 이미지와 위젯 등의 적용법은 해당 가이드를 참고하시기 바랍니다.
  4. 홈 화면이 정상적으로 출력되었다면 위의 가이드를 참고하여 나머지 페이지나 게시판 메뉴에 이전에 만들어둔 서브 레이아웃을 지정해줍니다.

앞으로도 이와 같은 방식으로 필요에 따라 레이아웃을 생성 & 추가하여 적용해주시면 됩니다. 지금까지 알려드린 작업은 레이아웃 세팅의 가장 기본이 되는 작업을 수행한 것입니다. 이후 이어지는 레이아웃 설정과 관련된 가이드를 참고하여 레이아웃을 세팅하신다면, 멋진 사이트를 제작하실 수 있을 것입니다.


레이아웃 세부설정 가이드

여기서는 레이아웃 테마를 세팅할 때 알아야 하는 모든 레이아웃 설정 항목들에 대해서 알아봅니다. 레이아웃 테마의 설정 페이지로 접근하는 방법은 아래의 가이드를 참고하여 주시기 바랍니다.

레이아웃 테마 설정 페이지로 이동하기

  1. 좌측 관리자메뉴에서 고급탭을 클릭합니다.
  2. 고급 탭 하위 메뉴인 설치된 레이아웃탭을 클릭합니다.
  3. 설치된 레이아웃 모듈 목록에서 원하시는 레이아웃 이름을 클릭합니다.
  4. 해당 레이아웃 페이지에서 원하시는 레이아웃 오른쪽의 설정버튼을 클릭합니다.
설치된 레이아웃 레이아웃 설정버튼

기본설정

여기서는 레이아웃 설정 > 기본설정탭의 설정방법에 대해 알아봅니다.

기본설정 설정항목 보기

레이아웃설정 기본설정

설정값 세팅 가이드

레이아웃 기본 타입 선택

슬라이더를 이용한 페이지와 위젯, 게시판, 사용자 입력 컨텐츠를 위한 컨텐츠형 종류를 선택할 수 있습니다. 전체너비 컨텐츠는 포토위젯, 블로그위젯, 겔러리위젯 등 컨텐츠 화면 전체에 위젯을 넣을 경우 사용합니다. 중앙정렬 컨텐츠 레이아웃 타입은 일반 페이지, 게시판 등 페이지에 사용하며 PC기준 840px의 너비를 가지고 있습니다.

데모페이지에서는 다음과 같은 레이아웃 세팅을 사용하고 있습니다.

  1. 메인
    1. 레이아웃 기본타입 : 슬라이더형 레이아웃으로 선택해 주시기 바랍니다.
    2. 슬라이더 1 : 배너종류 - PENCIO 슬라이더1
    3. 슬라이더 2 : 배너종류 - PENCIO 슬라이더1
    4. 슬라이더 3 : 배너종류 - PENCIO 슬라이더1
    5. 유튜브 동영상 : 배너종류 - 유튜브 동영상
    6. Vimoe 동영상 : 배너종류 - 유튜브 동영상
  2. 포토위젯 / 블로그 위젯
    1. 레이아웃 기본타입 : 컨텐츠형 레이아웃 - 전체너비 컨텐츠 으로 선택해 주시기 바랍니다.
    2. 포토그라피 스타일 (공통 )
    3. 블로그 스타일 (공통 )
  3. 게시판 및 문서페이지
    1. 레이아웃 기본타입 : 컨텐츠형 레이아웃 - 중앙정렬 컨텐츠 으로 선택해 주시기 바랍니다.
    2. 게시판 목록형 ( 게시판 공통 )
    3. 문서페이지 ( 문서페이지 공통 )
    4. 개발코드
베너 종류선택

슬라이더형 레이아웃으로 선택할 경우 베너의 종류에 따라서 5가지 스킨이 제공됩니다. 슬라이더 스킨을 사용할 경우 이미지 슬라이더 탭의 이미지를 세팅해 주어야 합니다. 유튜브와 비메오 스킨을 이용할 경우 아래의 동영상 ID/URL을 꼭 입력해 주셔야 정상적으로 출력이 됩니다. 슬라이더 디자인은 이곳을 참조해 주세요.

동영상 ID/URL

베너종류 선택에서 유튜브 동영상 혹은 Vimeo 동영상을 선택하신 경우 이곳에 주소 혹은 ID를 입력해 주세요.ex) 유튜브 id -> "6vsEYCZO4Z0" , 비메오 주소 -> "//vimeo.com/11927571"

컬러셋

펜시오 레이아웃은 5가지의 레이아웃 색상을 제공하고 있습니다. 전체 레이아웃에 적용되는 정확한 코드값은 소개페이지를 참조해 주시기 바랍니다.

사이드배경패턴

사이드메뉴부의 배경이미지에 적용되는 패턴을 선택합니다. 전체 11종류의 패턴이 제공됩니다.

홈페이지 URL

웹사이트의 홈페이지 URL을 입력합니다. 로고를 클릭할 시에 여기에 입력한 주소로 이동하게 됩니다. 입력하실 때에는 반드시 'http://' 를 주소 앞에 포함시켜 주시기 바랍니다.

상단 로고이미지

레이아웃 상단에 표시될 로고 이미지 입니다. 데모사이트를 참고하여 적당한 사이즈의 로고 이미지를 등록합니다. '찾아보기'를 클릭하여 이미지를 선택하신 후에 '등록'버튼을 꼭 눌러주시기 바랍니다.


이미지 슬라이더

여기서는 레이아웃 설정 > 하단 사이트정보 탭의 항목들에 대한 설정방법을 알아봅니다. 아래 설정 예시값들과 세팅 가이드를 참고하여 주시기 바랍니다.

레이아웃의 슬라이더에 사용되는 이미지 세팅항목 보기

레이아웃 이미지 슬라이더 세팅

설정값 세팅 가이드

슬라이더 이미지

메인페이지 슬라이더에 사용될 이미지를 입력하세요.

슬라이더 제목

메인페이지 슬라이더에 이미지와 함께 표시될 제목을 입력하세요.

슬라이더 설명

메인페이지 슬라이더에 이미지, 제목과 함께 표시될 설명텍스트 입니다.


사이드바 위젯 설정

여기서는 레이아웃 설정 > 사이드바 위젯설정 탭의 항목들에 대한 설정방법을 알아봅니다. 아래 설정 예시값들과 세팅 가이드를 참고하여 주시기 바랍니다.

상단 네비게이션 메뉴 설정항목 보기

레이아웃설정 사이드 위젯세팅

설정값 세팅 가이드

사이드바 위젯1 제목

왼쪽 사이드바 위젯표시를 위한 제목을 입력합니다.

사이드바 위젯1 srl 번호

사이드바 위젯 제목 클릭시 표시되는 위젯의 srl(게시판 번호)를 입력합니다.

레이아웃설정 상단 네비게이션 메뉴설정

사이드바 정보 및 SNS설정

여기서는 레이아웃 설정 > 사이드바 정보 및 SNS설정 탭의 항목들에 대한 설정방법을 알아봅니다. 아래 설정 예시값들과 세팅 가이드를 참고하여 주시기 바랍니다.

사이드바 정보 및 SNS설정 설정항목 보기

레이아웃설정 사이드바 정보 및 SNS 설정

설정값 세팅 가이드

하단 주소, 연락처

웹사이트에 표시될 주소와 연락처 등을 입력해주세요.

Copyright 사이트이름

Copyright 사이트 이름을 입력해주세요.

SNS 링크 출력

SNS 링크출력여부를 선택합니다. 출력시 레이아웃 사이드바 아래 위치한 SNS 링크 아이콘을 출력합니다.

페이스북 링크주소

푸터 페이스북 아이콘을 클릭시 이동할 주소를 입력합니다. (반드시 http:// 를 앞에 포함시켜주세요.)

트위터 링크주소

푸터 트위터 아이콘을 클릭시 이동할 주소를 입력합니다. (반드시 http:// 를 앞에 포함시켜주세요.)

구글플러스 링크주소

푸터 구글플러스 아이콘을 클릭시 이동할 주소를 입력합니다. (반드시 http:// 를 앞에 포함시켜주세요.)

이메일 링크주소

푸터 이메일 아이콘을 클릭시 이동할 주소를 입력합니다. (반드시 http:// 를 앞에 포함시켜주세요.)

사용자지정 링크주소

푸터 사용자지정 아이콘을 클릭시 이동할 주소를 입력합니다. (반드시 http:// 를 앞에 포함시켜주세요.)


게시판 srl 넘버 확인방법

사이트 메뉴 편집 → 해당 게시판을 선택 → 상세설정고급 설정 위에 마우스 커서를 올려두면 화면 왼쪽하단에 표시됩니다. (고급설정 버튼을 클릭하시면 안됩니다.)

게시판 모듈 srl 넘버  확인방법

추가페이지 세팅

여기서는 펜시오 레이아웃에서 제공되는 추가 페이지들에 대해서 세팅방법을 알려드립니다. 펜시오 레이아웃에서는 스케치북 게시판 스킨, html 문서스킨, 개발자코드를 제공하고 있습니다. 각 페이지들을 어떻게 설정하게 되는지 설명해드리겠습니다.

게시판 스킨 세팅하기

게시판 스킨은 스케치북 게시판 스킨을 사용하고 있습니다. 정확한 버전은 1.7.0-rc.13 입니다. 최신 버전은 아닙니다만 목록 css 일부를 다르게 적용하는 것이므로 다른 버전에서도 무리 없이 적용이 될 것입니다.

  1. 관리자페이지고급설치된 모듈게시판 → 원하는 게시판의 설정버튼 클릭 → 기본 텝의 스킨선택박스에서 스케치북 스킨 선택 ( sketchbook5 )
    메뉴 상세 설정
    메뉴 상세 설정
  2. 상단의 스킨관리 탭을 선택하세요. 목록유형에서 원하는 스타일을 선택하세요. 펜시오 레이아웃에서는 가장 기본적인 목록유형인 목록형웹진형, 겔러리형에 대한 css 를 제공하고 있습니다.
    프리셋 외부페이지 경로입력
  3. 정상적으로 적용을 하였다면 아래와 같이 화면이 표시되게 됩니다. 아래는 기본 목록형이 적용된 화면입니다. 아래 주소를 통해서 해당 사이트를 직접 확인해 보시기 바랍니다.
    프리셋 외부페이지 경로입력
    http://codesignlab.cafe24.com/pencio_bbs_list
  4. '저장'을 클릭하여 변경사항을 저장합니다.
  5. 웹사이트 홈페이지에 접속하여 적용되었는지 확인합니다.

문서스킨 사용하기

여기서는 펜시오 레이아웃에서 제공하는 펜시오 전용 html 디자인 페이지에 대해서 설명을 해드립니다. 펜시오에서는 아래와 같이 문서파일을 제공하고 있습니다. 향후 추가페이지가 제공예정입니다.

  1. 회사소개 html 페이지 : layouts/layout_pencio/html/pencio_example1.html
  2. 서비스소개 html 페이지 : layouts/layout_pencio/html/pencio_example1.html
  3. 제품소개 html 페이지 : layouts/layout_pencio/html/pencio_example1.html

외부페이지 연결하기

먼저 외부페이지를 불러오는 방법에 대해 알아보겠습니다. 반드시 레이아웃의 기본 세팅을 완료하신 이후에 작업을 진행하시기 바랍니다. 아직 레이아웃 테마의 기본 세팅을 완료하지 않으신 분들은 기본 세팅 가이드와 레이아웃 설정항목들에 대한 가이드를 참고하여 기본 레이아웃 세팅을 먼저 완료하시기 바랍니다.( 아래 예시 이미지는 본 레이아웃이 아닌 emily레이아웃의 예시로 공통으로 사용되는 부분임을 알려드립니다. )

  1. 사이트 제작/편집사이트 메뉴 편집해당 메인페이지 메뉴선택 → 상세설정을 클릭합니다. 이때, 해당 메인페이지의 메뉴타입은 반드시 외부페이지로 되어 있어야만 합니다.
    메뉴 상세 설정
  2. 페이지 관리 창이 뜨면 하단에 외부 문서 위치 항목이 있습니다. 여기에 다음과 같이 입력해줍니다.
    layouts/layout_pencio/html/pencio_example1.html
    프리셋 외부페이지 경로입력
  3. '저장'을 클릭하여 변경사항을 저장합니다.
  4. 웹사이트 홈페이지에 접속하여 적용되었는지 확인합니다.

개발코드 사용하기

여기서는 레이아웃을 구매하신 사용자가 웹사이트를 개발할때 필요한 코드를 제공하고 있습니다. 웹사이트 개발시 본 코드를 활용하여 개발하시면 펜시오 레이아웃에 최적화 된 페이지 디자인을 제작할 수 있습니다. 파일은 html/pencio_elements.html 파일로 제공이 됩니다. 개발코드 페이지에는 다음과 같은 코드를 제공하고 있습니다.

  1. 헤드라인 디자인
  2. 타이틀 텍스트 스타일
  3. 글목록 스타일
  4. 색상별 버튼 스타일
  5. 위치별 탭 스타일
  6. ACCORDINON 스타일
  7. ACCORDINON 탭 스타일
  8. 유튜브 및 비메오 스타일

개발코드는 다음의 주소에서 확인 할 수 있습니다.

http://codesignlab.cafe24.com/pencio_elements


데모페이지 사용코드

여기서는 펜시오 데모페이지에 사용된 사용자 세팅을 알려드리도록 하겠습니다. 아래의 코드를 외부페이지로 적용시키면 지정된 데모페이지 형태로 표시가 되게 됩니다. 펜시오 레이아웃 데모페이지에 사용된 html 파일은 pages/ 폴더에 포함되어 함께 제공됩니다.

데모페이지에 사용된 srl은 데모페이지 사이트 기준의 srl이 적용되어 있습니다. 데모페이지의 코드를 적용 시 구매자의 웹사이트 상황에 맞는 srl을 입력해 주시기 바랍니다. srl 확인하기

  1. 포토그래피 스타일1 html 페이지 : pages/pencio_photo1.html

                                
                                
                                
                                					
    							

  2. 포토그래피 스타일2 html 페이지 : pages/pencio_photo2.html

                                
                                
                                
                                							
    							

  3. 포토그래피 스타일3 html 페이지 : pages/pencio_photo3.html

                                
                                
                                
                                				
    							

  4. 포토그래피 스타일4 html 페이지 : pages/pencio_photo3.html

                                
                                
                                
                                				
    							

  5. 블로그 스타일1 html 페이지 : pages/pencio_blog1.html

                               
                                
                                
                                						
    							

  6. 블로그 스타일2 html 페이지 : pages/pencio_blog2.html

                                
                                
                                
                                				
    							

  7. 블로그 스타일3 html 페이지 : pages/pencio_blog3.html

                               
                                
                                
                                					
    							

  8. 블로그 스타일4 html 페이지 : pages/pencio_blog3.html