테마 소개

베젤블루 XE 레이아웃 테마입니다. 모던한 디자인의 레이아웃 테마로서 다양한 메인 스타일과 전체 40 페이지 이상의 HTML 미리보기 파일이 코드형식으로 제공됩니다. 다양한 주제의 웹사이트 프리셋을 제공하고 있으므로 쉽고 편하게 웹사이트를 제작할 수 있습니다. 비즈니스라이센스와 일반라이센스 2가지로 제공이 되고 있습니다.

레이아웃 소개

레이아웃 설치

패키지 구성 및 설치경로

다운로드 받으신 테마패키지의 압축파일을 해제하셔서 각각의 폴더를 올바른 설치경로에 업로드 해주십시요. 일반라이센스는 서브페이지, 멤버스킨, 개발코드가 제공되지 않습니다.

layouts 폴더
테마와 예제페이지에 대한 html파일을 포함하고 있습니다. html 파일은 메인페이지/서브페이지/개발코드가 포함됩니다. XE설치경로의 root 디렉토리에 업로드하여 주십시요.
modules 폴더
멤버스킨,커뮤니케이션 스킨을 포함하고 있습니다. XE설치경로의 root 디렉토리에 업로드하여 주십시요.
widgets 폴더
폴더 하위에 베젤블루 레이아웃 테마 전용 위젯을 포함하고 있습니다. ( bezel_conent 위젯 )XE설치경로의 root 디렉토리에 업로드하여 주십시요.

기본세팅 가이드

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

사이트맵 작성하기

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

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

레이아웃 생성

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

  1. 먼저 웹사이트의 첫화면인 메인페이지용 레이아웃을 생성합니다. 아래 가이드를 참고하여 레이아웃을 생성해주세요.
    1. (왼쪽 관리자메뉴) 고급 클릭
    2. 설치된 레이아웃 클릭
    3. (설치된 레이아웃 목록) 해당 레이아웃 테마 클릭
    4. 추가 클릭
    5. 제목에"메인 레이아웃" 입력 후 추가 클릭
    설치된 레이아웃
    설치된 레이아웃 추가버튼
    설치된 레이아웃 추가버튼
  2. 메인 레이아웃을 생성하셨으면 이제 설정값을 만져줄 차례입니다. 생성하신 레이아웃 오른쪽에 "설정" 버튼을 클릭합니다.
    레이아웃 설정버튼
  3. 레이아웃 설정 페이지에서 아래쪽에 "사용자정의" 부분을 찾습니다.
    1. "기본설정"탭 클릭
    2. "레이아웃 형태 및 사이드바"에서 전체너비을 선택합니다.( 이는 레이아웃에 따라 옵션 및 값의 차이가 있으므로 만들기 원하는 형태의 레이아웃을 선택해 주시기 바랍니다 )
    레이아웃 타입선택
  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. 해당 레이아웃 페이지에서 원하시는 레이아웃 오른쪽의 설정버튼을 클릭합니다.
설치된 레이아웃
레이아웃 설정버튼

기본설정

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

기본설정 항목보기

레이아웃설정 기본설정

설정값 세팅 가이드

컨텐츠 너비

원하는 레이아웃의 컨텐츠부 너비를 선택해 주세요. 전체너비는 브라우저 100%크기로 보여지게 되며 컨텐트 너비는 1170px의 너비로 컨텐트부를 보여지게 됩니다. ( 슬라이더는 독립적으로 너비가 세팅이 됩니다 )

  1. 전체너비 : 페이지의 컨텐츠가 전체너비로 표시됩니다.
  2. 컨텐트 너비 : 컨테이너 너비만큼 컨텐츠가 표시됩니다.
박스형태 레이아웃

레이아웃의 형태를 박스형으로 할지 선택해 주세요.

  1. 기본형
  2. 박스형
테마색상

테마의 기본색상을 선택해 주세요.

  1. 스카이블루 : 파란색 컬러셋 입니다.
  2. 벨벳레드 : 빨간색 컬러셋 입니다.
폰트

웹사이트에 사용되는 기본 한글폰트를 선택할 수 있습니다.

메뉴형태선택

6가지 메뉴스타일을 제공하고 있습니다. 원하는 형태를 선택해 주세요.

  1. 기본메뉴 하얀글씨 : 흰 글씨에 검정배경의 메뉴형태 입니다.
  2. 기본메뉴 검은글씨 : 검정 글씨에 흰 배경의 메뉴형태 입니다.
  3. 전체화면 메뉴 : 메뉴버튼을 클릭하면 전체화면 형태로 표시됩니다.
  4. 좌측 고정 메뉴스타일 : 좌측에 메뉴바가 표시됩니다.
  5. 우측 상단 버튼식메뉴스타일 : 버튼 클릭 시 우측에 메뉴가 표시됩니다.
  6. 좌측 상단 버튼식메뉴스타일 : 버튼 클릭 시 좌측에 메뉴가 표시됩니다.
컨텐츠 상하단 여백

레이아웃의 컨텐츠 섹션 부분에 상단, 하단 여백을 지정합니다. 여백이 없는 경우 상단의 슬라이더/메뉴/페이지 타이틀에 붙어서 표시됩니다. 게시판을 이용하신는 경우 여백을 주시기 바랍니다.

  1. 여백없음
  2. 여백있음
푸터형태 선택

7가지 푸터스타일을 제공하고 있습니다. 원하는 형태를 선택해 주세요. 푸터에는 각 현재 레이아웃의 설정페이지로 바로 갈 수 있는 버튼이 보이게 됩니다.

  1. 사용안함
  2. 기본 푸터스타일
  3. 기본블랙 푸터스타일
  4. 빨강 푸터스타일
  5. 심플기본 푸터스타일
  6. 심플 뒷배경 블랙 푸터스타일
  7. 심플 블루 푸터스타일
  8. 심플 블랙 푸터스타일
홈페이지 URL

로고를 클릭시에 이동할 홈 페이지 URL을 입력해 주세요.('http://' 앞에 포함해주세요.)

레이아웃 배경 사용자 색상값

헤더 설정

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

헤더설정 항목보기

레이아웃설정 기본설정

설정값 세팅 가이드

상단 흰색로고 이미지

레이아웃의 상단에 표시될 로고이미지를 입력하세요. 어두운 계열의 배경색상에 흰색 로고가 표시됩니다. 흰색과 검정색로고 모두 필요합니다. 200*84 사이즈를 사용하고 있습니다.

상단 검은색 로고이미지

레이아웃의 상단에 표시될 로고이미지를 입력하세요. 스크롤시 배경이 흰색으로 바뀌면서 검정로고가 표시됩니다. 200*84 사이즈를 사용하고 있습니다.

상단 로고주소

레이아웃의 상단에 표시되는 로고이미지의 주소를 입력하세요.

상단/네비게이션 멤버메뉴

상단 혹은 좌우측 네이게이션에 표시되는 멤버메뉴 ( 로그인/회원가입/로그아웃 등 )의 메뉴 표시여부를 선택합니다.

헤더 검색기능

헤더우측에 표시되는 검색버튼의 사용여부를 선택합니다.

우측상단 페이스북아이콘 URL

페이스북 모양 아이콘 클릭시에이동할 홈 페이지 URL을 입력해 주세요.('http://' 앞에 포함해주세요.)

우측상단 트위터아이콘 URL

트위터 모양 아이콘 클릭시에이동할 홈 페이지 URL을 입력해 주세요.('http://' 앞에 포함해주세요.)

우측상단 트위터아이콘 URL

인스타그램 모양 아이콘 클릭시에이동할 홈 페이지 URL을 입력해 주세요.('http://' 앞에 포함해주세요.)


푸터 설정

여기서는 레이아웃 설정 > 푸터 설정탭의 설정방법에 대해 알아봅니다. 직접 수정은 _footer.html 파일을 수정해 주시기 바랍니다.

푸터 설정 항목보기

레이아웃설정 기본설정

설정값 세팅 가이드

하단 흰색 로고이미지

레이아웃의 하단에 표시될 로고이미지를 입력하세요. 어두운 계열의 배경 사용시 보이게 됩니다. 200*84 사이즈를 사용하고 있습니다.

하단 검은색 로고이미지

레이아웃의 하단에 표시될 로고이미지를 입력하세요. 밝은 계열의 배경 사용시 보이게 됩니다. 200*84 사이즈를 사용하고 있습니다.

하단 페이스북아이콘 URL

스냅쳇 모양 아이콘 클릭시에이동할 홈 페이지 URL을 입력해 주세요.('http://' 앞에 포함해주세요.)

하단 드리블아이콘 URL

드리블 모양 아이콘 클릭시에이동할 홈 페이지 URL을 입력해 주세요.('http://' 앞에 포함해주세요.)

하단 비헨스아이콘 URL

비헨스 모양 아이콘 클릭시에이동할 홈 페이지 URL을 입력해 주세요.('http://' 앞에 포함해주세요.)

하단 500px아이콘 URL

500px 모양 아이콘 클릭시에이동할 홈 페이지 URL을 입력해 주세요.('http://' 앞에 포함해주세요.)

하단 플리커아이콘 URL

플리커 모양 아이콘 클릭시에이동할 홈 페이지 URL을 입력해 주세요.('http://' 앞에 포함해주세요.)

하단 유튜브아이콘 URL

유튜브 모양 아이콘 클릭시에이동할 홈 페이지 URL을 입력해 주세요.('http://' 앞에 포함해주세요.)

하단 트위터아이콘 URL

트위터 모양 아이콘 클릭시에이동할 홈 페이지 URL을 입력해 주세요.('http://' 앞에 포함해주세요.)

하단 링크드인아이콘 URL

링크드인 모양 아이콘 클릭시에이동할 홈 페이지 URL을 입력해 주세요.('http://' 앞에 포함해주세요.)

하단 핀터레스트아이콘 URL

핀터레스트 모양 아이콘 클릭시에이동할 홈 페이지 URL을 입력해 주세요.('http://' 앞에 포함해주세요.)

하단 인스타그램아이콘 URL

인스타그램 모양 아이콘 클릭시에이동할 홈 페이지 URL을 입력해 주세요.('http://' 앞에 포함해주세요.)

하단 주소, 연락처 1

주소와 연락처 등을 입력해주세요. 푸터 주소부분 첫번째 줄에 들어가게 되는 내용입니다.

하단 주소, 연락처 2

주소와 연락처 등을 입력해주세요. 푸터 주소부분 두번째 줄에 들어가게 되는 내용입니다.

하단 주소, 연락처 3

주소와 연락처 등을 입력해주세요. 푸터 주소부분 세번째 줄에 들어가게 되는 내용입니다.

하단 주소, 연락처 4

주소와 연락처 등을 입력해주세요. 푸터 주소부분 네번째 줄에 들어가게 되는 내용입니다.

Copyright 사이트이름

Copyright 사이트 이름을 입력해주세요. 최하단 카피라이트 내용입니다. 예. 2017 Bezel. All rights CODESIGN MALL.


슬라이더 설정

여기서는 레이아웃 설정 > 헤더상단부 설정탭의 설정방법에 대해 알아봅니다. 직접 수정은 _header_topbar.html 파일을 수정해 주시기 바랍니다.

헤더상단부 설정 항목보기

레이아웃설정 기본설정

설정값 세팅 가이드

슬라이더 사용여부 선택

페이지 상단에 사용되는 슬라이더를 선택해 주세요. 데모페이지를 확인하여 원하는 형태의 슬라이더를 선택해주시기 바랍니다. 데모페이지

슬라이더부분 유튜브 동영상

유튜브 영상배경을 사용하는 경우 유튜브 영상의 주소를 입력해 주세요. 예) https://www.youtube.com/watch?v=YSBfgT2qpRY

┗유튜브 소리

유튜브 영상의 소리사용여부를 선택할 수 있습니다.

┗ 유튜브 시작

동영상 시작 시간을 입력합니다. (초단위) 예) 3

슬라이더 이미지

슬라이더에 사용될 이미지를 선택합니다. 데모페이지 기준으로 1920x1080 사이즈의 이미지를 사용권장합니다.

슬라이더 제품이미지

제품소개 슬라이더 형태처럼 배경이미지 위에 제품이미지가 표시될 경우 사용됩니다.

슬라이더 상단 설명글

슬라이더 제목상단에 표시되는 설명글을 입력합니다.

슬라이더 큰 텍스트

슬라이더 이미지를 위한 큰 텍스트를 입력해 주세요.

큰 텍스트 두번째 줄 텍스트

큰 제목에서 줄바꿈이 필요한 경우 이곳의 텍스트가 표시됩니다.

슬라이더 작은 텍스트

슬라이더 이미지를 위한 작은 텍스트를 입력해 주세요.

작은 텍스트 두번째 줄 텍스트

작은제목 줄바꿈 후 표시되는 텍스트를 입력합니다.

전광판 효과 첫번째 문장

제목의 전광판 섹션에서 글씨가 표시되고 사라지는 효과를 이용할 수 있습니다. 전광판 효과에 표시될 첫번째 문장, 혹은 단어를 입력해 주세요.

슬라이더 버튼1 텍스트

슬라이더에 표시되는 버튼의 표시이름을 입력합니다.

┗슬라이더 버튼1 Url

버튼 클릭 시 이동하는 주소를 입력합니다.


서브페이지 설정

여기서는 레이아웃 설정 > 서브페이지 설정탭의 설정방법에 대해 알아봅니다. 직접 수정은 htmls/ 폴더에 sub_header_로 시작하는 파일을 수정해 주시기 바랍니다.

슬라이더 설정 항목보기

서브페이지 기본설정

설정값 세팅 가이드


슬라이더 유튜브 주소

여기서는 레이아웃 설정 > 슬라이더 유튜브 주소탭의 설정방법에 대해 알아봅니다.

슬라이더 유튜브 주소 항목보기

레이아웃설정 기본설정

설정값 세팅 가이드

주소

슬라이더 설정 탭에서 VIDEO CAROUSEL 슬러이더를 사용할 때 연결되는 유튜브 주소입니다. 최대 10개의 유튜브 비디오를 연결합니다.


서브페이지 - 상단

여기서는 레이아웃 설정 > 서브페이지 - 상단탭의 설정방법에 대해 알아봅니다. 직접 수정은 _sub_title.html 파일을 수정해 주시기 바랍니다.

서브페이지 - 상단 항목보기

레이아웃설정 기본설정

설정값 세팅 가이드

서브페이지 헤더스타일

서브페이지에서 페이지 타이틀, 현재위치 출력 기능을 포함한 헤더스타일의 출력여부를 선택해주세요.

상단 부제목

서브레이아웃 페이지 상단 서브타이틀제목에 사용될 내용을 입력하세요.

제목

브레이아웃 페이지 하단 서브타이틀제목에 사용될 내용을 입력하세요.

하단 부제목

서브레이아웃 페이지 하단 서브타이틀 제목에 사용될 내용을 입력하세요.

서브페이지 헤더 배경 이미지

서브페이지 헤더의 배경에 표시되는 이미지를 선택합니다.


게시판 srl 넘버 확인방법

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

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

추가페이지 세팅

여기서는 베젤블루 레이아웃에서 제공되는 추가 페이지들에 대해서 세팅방법을 알려드립니다. 베젤블루 레이아웃에서는 메인페이지 13종,서브페이지 6종,멤버/커뮤니케이션 스킨,개발자코드를 제공하고 있습니다. 각 페이지들을 어떻게 설정하게 되는지 설명해드리겠습니다.


문서스킨 사용하기

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

메인스타일 문서
  1. 건축업체 html 페이지 경로 : layouts/layout_bezel/htmls/bezel_home-architecture.html
  2. 기본스타일 html 페이지 경로 : layouts/layout_bezel/htmls/bezel_home-default.html
  3. 디자인 에이전시 html 페이지 경로 : layouts/layout_bezel/htmls/bezel_home-creative-agency.html
  4. 피트니스 html 페이지 경로 : layouts/layout_bezel/htmls/bezel_home-fitness.html
  5. 제품소개 html 페이지 경로 : layouts/layout_bezel/htmls/bezel_home-landing.html
  6. 포트폴리오 html 페이지 경로 : layouts/layout_bezel/htmls/bezel_home-portfolio.html
  7. 레스토랑 html 페이지 경로 : layouts/layout_bezel/htmls/bezel_home-restaurant.html
  8. 벤처기업 html 페이지 경로 : layouts/layout_bezel/htmls/bezel_home-startup.html
  9. 제조업체 html 페이지 경로 : layouts/layout_bezel/htmls/bezel_home-trefectamobility.html
  10. 가전제품 html 페이지 경로 : layouts/layout_bezel/htmls/bezel_home-lg_Refrigerator.html
  11. 음향기기 html 페이지 경로 : layouts/layout_bezel/htmls/bezel_home-iphone.html
  12. 헤어샵 html 페이지 경로 : layouts/layout_bezel/htmls/bezel_home-barbershop.html
  13. 카카오 html 페이지 경로 : layouts/layout_bezel/htmls/bezel_home-kakao.html
서브스타일 문서
  1. 오류페이지 html 페이지 : layouts/layout_bezel/htmls/bezel_page-404.html
  2. 회사소개 html 페이지 : layouts/layout_bezel/htmls/bezel_page-about.html
  3. 회사소개 Type2 html 페이지 : layouts/layout_bezel/htmls/bezel_page-about-creative.html
  4. 전문분야 html 페이지 : layouts/layout_bezel/htmls/bezel_page-careers.html
  5. 오시는길 html 페이지 : layouts/layout_bezel/htmls/bezel_page-contact.html
  6. 서비스소개 html 페이지 : layouts/layout_bezel/htmls/bezel_page-services.html
개발자 문서
  1. 아코디언 html 페이지 : layouts/layout_bezel/htmls/bezel_elements_accordions.html
  2. 버튼 html 페이지 : layouts/layout_bezel/htmls/bezel_elements_buttons.html
  3. Carousel html 페이지 : layouts/layout_bezel/htmls/bezel_elements_carousels.html
  4. 폼요소 html 페이지 : layouts/layout_bezel/htmls/bezel_elements_forms.html
  5. 갤러리 html 페이지 : layouts/layout_bezel/htmls/bezel_elements_galleries.html
  6. 아이콘박스 html 페이지 : layouts/layout_bezel/htmls/bezel_elements_icon-boxes.html
  7. 아이콘 html 페이지 : layouts/layout_bezel/htmls/bezel_elements_icons.html
  8. 메시지박스 html 페이지 : layouts/layout_bezel/htmls/bezel_elements_message-boxes.html
  9. 가격 테이블 html 페이지 : layouts/layout_bezel/htmls/bezel_elements_pricing-tables.html
  10. 프로그래스바 html 페이지 : layouts/layout_bezel/htmls/bezel_elements_progress-bars.html
  11. html 페이지 : layouts/layout_bezel/htmls/bezel_elements_tabs.html
  12. 타이포그라피 html 페이지 : layouts/layout_bezel/htmls/bezel_elements_typography.html
  13. 위젯코드 html 페이지 : layouts/layout_bezel/htmls/bezel_elements_widget_code.html
포트폴리오 문서
  1. 그리드 - 2 Column html 페이지 : layouts/layout_bezel/htmls/bezel_portfolio_grid.html
  2. 그리드 - 3 Column html 페이지 : layouts/layout_bezel/htmls/bezel_portfolio_grid-2col.html
  3. 그리드 - 4 Column html 페이지 : layouts/layout_bezel/htmls/bezel_portfolio_grid-4col.html
  4. Masonry - 2 Column html 페이지 : layouts/layout_bezel/htmls/bezel_portfolio_masonry.html
  5. Masonry - 3 Column html 페이지 : layouts/layout_bezel/htmls/bezel_portfolio_masonry-2col.html
  6. Masonry - 4 Column html 페이지 : layouts/layout_bezel/htmls/bezel_portfolio_masonry-4col.html
  7. 상세페이지 - 1 html 페이지 : layouts/layout_bezel/htmls/bezel_portfolio_single-1.html
  8. 상세페이지 - 2 html 페이지 : layouts/layout_bezel/htmls/bezel_portfolio_single-2.html
  9. 상세페이지 - 3 html 페이지 : layouts/layout_bezel/htmls/bezel_portfolio_single-3.html
  10. 클래식 - 2 Columns html 페이지 : layouts/layout_bezel/htmls/bezel_portfolio_titles.html
  11. 클래식 - 3 Columns html 페이지 : layouts/layout_bezel/htmls/bezel_portfolio_titles-2col.html
  12. 클래식 - 4 Columns html 페이지 : layouts/layout_bezel/htmls/bezel_portfolio_titles-3col.html

외부페이지 연결하기 ( 공통 )

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

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

게시판 스킨 세팅하기

본 테마의 데모페이지에는 3가지 종류의 스킨이 적용되어 있습니다. 게시판 스킨은 무료스킨인 스케치북 스킨을 사용하고 있습니다.

게시판 공식 홈페이지
게시판스킨 경로
  1. 게시판 - 갤러리 스타일
  2. 게시판 - 웹진 스타일
  3. 게시판 - 목록 스타일
게시판 스킨값 세팅
  1. 관리자페이지고급설치된 모듈게시판 → 원하는 게시판의 설정버튼 클릭 → 기본 텝의 스킨선택박스에서 sketchbook5 게시판
    메뉴 상세 설정
    메뉴 상세 설정
  2. '저장'을 클릭하여 변경사항을 저장합니다.
  3. 웹사이트 홈페이지에 접속하여 적용되었는지 확인합니다.

멤버스킨 사용하기 .Biz

여기서는 레이아웃을 구매하신 사용자를 위해 회원관리 메뉴를 제공하고 있습니다. 회원관리를 위해서 멤버모듈 스킨과 커뮤니케이션 스킨을 함께 제공하고 있습니다. 자세한 설치방법은 아래설명을 참조해주시기 바랍니다.

멤버모듈 스킨
멤버모듈을 설치하면 modules/member/skins/bezel_member 에서 파일을 확인할 수 있습니다.
  1. 관리자페이지회원회원설정상단 4번째 '디자인'탭 → 스킨을 bezel Layout - 회원스킨 으로 선택합니다. 저장 클릭
    프리셋 외부페이지 경로입력
    프리셋 외부페이지 경로입력
커뮤니케이션 모듈 스킨
멤버모듈을 설치하면 modules/communication/skins/bezel_member 에서 파일을 확인할 수 있습니다.
  1. 관리자페이지고급설치된 모듈커뮤니케이션 → 스킨을 bezel Layout - 회원스킨 으로 선택합니다. 저장 클릭
    프리셋 외부페이지 경로입력
    프리셋 외부페이지 경로입력


데모페이지 사용코드 - CM_bezel 위젯 bezel 스킨

여기서는 베젤블루 데모페이지에 사용된 사용자 코드 중에서 위젯코드로 사용된 값들을 알려드립니다. 23개의 위젯스킨를 제공하고 있으며 전체 코드의 미리보기는 여기에서 확인하시기 바랍니다.

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

  1. 웹진형 TYPE1

     
                            
                                  
    						

  2. 웹진형 TYPE2

     
                            
                                  
    						

  3. 웹진형 TYPE3

     
                                  
                            
    						

  4. 웹진형 TYPE4

     
                                  
                            
    						

  5. 웹진형 TYPE5

     
                            
                                  
    						

  6. 웹진형 TYPE6

     
                            
                                  
    						

  7. 웹진형 TYPE7

     
                            
                                  
    						

  8. 리뷰형 TYPE1

     
                                                               
                            
    						

  9. 리뷰형 TYPE2

     
                                                               
                            
    						

  10. 리뷰형 TYPE3

     
                            
                                                               
    						

  11. 겔러리형 TYPE1

     
                            
                            
    						

  12. 겔러리형 TYPE2

     
                            
                            
    						

  13. 목록형 위젯