Last Updated : 2016-04-10
XE Layout 디블로그 레이아웃 테마
사용자 가이드
테마 소개
디블로그 XE 레이아웃 테마입니다. 본 테마는 반응형 디자인을 기본으로 블로그/겔러리/스튜디오 형태의 웹사이트 제작에 적합하게 설계되어 있습니다.
레이아웃 설치
패키지 구성 및 설치경로
다운로드 받으신 테마패키지의 압축파일을 해제하셔서 각각의 폴더를 올바른 설치경로에 업로드 해주십시요. 일반라이센스는 멤버스킨, 개발코드, 서브페이지가 제공되지 않습니다.
- layouts 폴더
- 테마와 예제페이지에 대한 html파일을 포함하고 있습니다. html 파일은 메인페이지/서브페이지/개발코드가 포함됩니다. XE설치경로의 root 디렉토리에 업로드하여 주십시요.
- modules 폴더
- 게시판스킨을 포함하고 있습니다. XE설치경로의 root 디렉토리에 업로드하여 주십시요. 게시판스킨은 비즈니스 라이센스에 제공되고 있습니다.
- widgets 폴더
- 폴더 하위에 2종의 디블로그 레이아웃 테마 전용 위젯을 포함하고 있습니다. XE설치경로의 root 디렉토리에 업로드하여 주십시요.
- widgetstyle 폴더
- 폴더 하위에 디블로그 레이아웃 테마 전용 위젯스타일 스킨을 포함하고 있습니다. XE설치경로의 root 디렉토리에 업로드하여 주십시요.
업로드 할 경우 root 디렉토리에 각 폴더를 덮어씌우기 하게 됩니다. 기존의 파일들은 삭제되지 않고 추가되는 자료만 생성이 되기 때문에 걱정하지 않으셔도 됩니다.
기본세팅 가이드
여기서는 XE 레이아웃을 올바르게 적용하기 위한 기본적인 세팅 가이드를 제시해 드립니다. 반드시 레이아웃 패키지를 올바른 경로에 설치하신 후 진행하시기 바랍니다. 기본세팅 가이드 편은 모든 XE기반 레이아웃에서 거의 공통적으로 적용되는 사항이니 꼭 숙지해 주시기 바랍니다. XE 사용이 아직 익숙하지 않으신 분들은 아래 순서대로 따라해 주시기 바랍니다. *본 섹션은 테마별로 화면이 다를 수 있습니다. 기본적인 세팅에 대한 가이드로 이해해 주시기 바랍니다.
사이트맵 작성하기
여기서는 사이트맵을 작성하는 방법을 알아봅니다. XE 테마 세팅은 사이트맵을 작성하는 것에서 부터 시작합니다.
- 레이아웃 패키지의 구성품들을 모두 올바른 경로에 설치하셨다면, XE 관리자 페이지로 접속합니다.
- 화면 왼쪽의 "사이트제작 / 편집" 을 클릭합니다.
- 사이트 메뉴 편집창 하단의 "사이트맵 추가"를 클릭하고 "사이트맵이름"을 입력한 뒤, "확인"버튼을 눌러줍니다.
- 사이트맵을 만드셨다면, 이제 사이트맵에 메뉴를 만들어줍니다. 아래와 같이 차례로 클릭하여 웹사이트 메뉴를 만들어줍니다.
- 방금 만든 사이트맵 클릭
- 메뉴추가 클릭
- 외부페이지 (위젯페이지, 외부페이지, 바로가기, 게시판 등 원하는 형태대로 만들어 줍니다.)
- 메뉴이름, 메뉴ID 입력
- 확인 클릭
- 메뉴에 하위메뉴를 만들 때에는 해당 메뉴를 클릭한 다음 우측 메뉴판에서 "메뉴추가"를 클릭하여 진행합니다. 메뉴를 잘못 만드셨다면 해당 메뉴를 클릭하고 우측 메뉴판에서 "삭제"를 클릭하여 진행하시면 됩니다.
- 위의 방식대로 메뉴추가를 반복하여 1차메뉴, 2차메뉴, 3차메뉴로 구성된 사이트맵을 완성하여 주십시요. 대부분의 레이아웃 테마에서는 상단 네비게이션 메뉴에서 2차 혹은 3차메뉴까지 출력하도록 되어있습니다. 1차메뉴는 레이아웃에 따라 다르지만 보통 5~6개 정도가 적당합니다.
- 테마에 따라 필요한 사이트맵의 갯수가 다릅니다. 이를테면, 상단메뉴, 글로벌 네비게이션메뉴, 하단 메뉴 등입니다. 레이아웃에 따라 글로벌 네비게이션 사이트맵 이외의 상단 메뉴, 하단메뉴 등에 연결할 사이트맵이 필요한 경우 위의 과정을 반복하여 사이트맵을 추가하여 줍니다.
레이아웃 생성
여기서는 설치된 레이아웃 모듈을 사용하여 레이아웃을 생성하는 방법을 알아봅니다. 레이아웃 테마에 필요한 사이트맵 작성을 완료하셨다면, 이제 레이아웃을 생성해 줄 차례입니다.
- 먼저 웹사이트의 첫화면인 메인페이지용 레이아웃을 생성합니다. 아래 가이드를 참고하여 레이아웃을 생성해주세요.
- (왼쪽 관리자메뉴) 고급 클릭
- 설치된 레이아웃 클릭
- (설치된 레이아웃 목록) 해당 레이아웃 테마 클릭
- 추가 클릭
- 제목에"메인 레이아웃" 입력 후 추가 클릭
- 메인 레이아웃을 생성하셨으면 이제 설정값을 만져줄 차례입니다. 생성하신 레이아웃 오른쪽에 "설정" 버튼을 클릭합니다.
- 레이아웃 설정 페이지에서 아래쪽에 "사용자정의" 부분을 찾습니다.
- "기본설정"탭 클릭
- "컨텐츠 너비"에서 전체너비을 선택합니다.
-
계속해서 레이아웃 설정 페이지 가장 아래에 위치한 '메뉴'에서 전에 만든 사이트맵을 레이아웃에 연결시켜주어야 합니다. 글로벌 네비게이션 메뉴와 하단메뉴에 각각 위에서 만든 사이트맵을 선택하고 '저장' 버튼을 눌러 변경사항을 저장합니다.
- 메인 레이아웃의 생성이 완료되었으면 서브페이지용 레이아웃을 생성할 차례입니다. 위의 과정을 아래와 같이 반복하여 주십시요.
- (왼쪽 관리자메뉴) 고급 클릭
- 설치된 레이아웃 클릭
- (설치된 레이아웃 목록) 해당 레이아웃 테마 클릭
- 추가 클릭
- 제목에"서브 레이아웃" 입력 후 추가 클릭
- 생성된 '서브 레이아웃' 옆의 '설정'버튼을 클릭하여 레이아웃 설정 페이지로 이동합니다.
- 레이아웃 설정 페이지에서 페이지 아래에 있는 '메뉴'에서 각각 해당하는 사이트맵을 연결시킨 다음 '저장'버튼을 눌러 변경사항을 저장합니다.
레이아웃 생성하실 때 짧은 팁
대부분의 메인페이지 레이아웃에 적용된 설정값들은 서브페이지 레이아웃에서 공유되는 설정값들입니다. 따라서 먼저 메인페이지 레이아웃을 생성하여 설정을 완료하신 후, 이 레이아웃을 '복사'하여 서브레이아웃을 생성하시면 좋습니다. 설정값을 다시 입력해야 하는 번거로움을 줄이고 시간과 노력을 절약할 수 있습니다.
세부적인 레이아웃 설정값에 대해서는 각각 해당하는 가이드를 참고하시기 바랍니다.
레이아웃 적용하기
여기서는 생성된 레이아웃을 각각의 페이지 / 게시판 등의 메뉴에 적용시키는 방법에 대해서 알아봅니다.
- 먼저 메인 레이아웃을 첫 화면이 될 메뉴에 적용시킵니다. 아래의 가이드를 따라서 진행해 주시기 바랍니다.
- 사이트 메뉴 편집 클릭
- 해당 사이트맵의 메뉴 클릭
- 디자인 클릭
- 레이아웃 클릭
- 사이트 디자인 사용에서 OFF로 바꿈
- 생성해 둔 메인 레이아웃 클릭
- 저장버튼 클릭
- 사이트의 홈페이지를 설정해줍니다. 위에서 메인 레이아웃을 적용했던 메뉴를 클릭하고 '홈페이지로 사용하기'를 클릭하여 웹사이트의 홈페이지로 지정합니다.
- 웹상에서 메인 레이아웃이 제대로 적용되었는지 확인합니다. 아직 컨텐츠 부분의 세팅을 하기 전이므로 레이아웃만 적용되어 있고 나머지 부분은 비어 있을 것입니다. 이후 슬라이더 이미지와 위젯 등의 적용법은 해당 가이드를 참고하시기 바랍니다.
- 홈 화면이 정상적으로 출력되었다면 위의 가이드를 참고하여 나머지 페이지나 게시판 메뉴에 이전에 만들어둔 서브 레이아웃을 지정해줍니다.
앞으로도 이와 같은 방식으로 필요에 따라 레이아웃을 생성 & 추가하여 적용해주시면 됩니다. 지금까지 알려드린 작업은 레이아웃 세팅의 가장 기본이 되는 작업을 수행한 것입니다. 이후 이어지는 레이아웃 설정과 관련된 가이드를 참고하여 레이아웃을 세팅하신다면, 멋진 사이트를 제작하실 수 있을 것입니다.
레이아웃 세부설정 가이드
여기서는 레이아웃 테마를 세팅할 때 알아야 하는 모든 레이아웃 설정 항목들에 대해서 알아봅니다. 레이아웃 테마의 설정 페이지로 접근하는 방법은 아래의 가이드를 참고하여 주시기 바랍니다.
레이아웃 테마 설정 페이지로 이동하기
- 좌측 관리자메뉴에서 고급탭을 클릭합니다.
- 고급 탭 하위 메뉴인 설치된 레이아웃탭을 클릭합니다.
- 설치된 레이아웃 모듈 목록에서 원하시는 레이아웃 이름을 클릭합니다.
- 해당 레이아웃 페이지에서 원하시는 레이아웃 오른쪽의 설정버튼을 클릭합니다.
기본설정
여기서는 레이아웃 설정 > 기본설정탭의 설정방법에 대해 알아봅니다.
기본설정 항목보기
설정값 세팅 가이드
컨텐츠 너비
컨텐츠 너비는 웹사이트의 헤더/슬라이더/푸터를 외한 실제 컨텐츠가 표시되는 부분의 너비를 지정합니다. 전체너비는 컨텐츠부를 100% 너비로 지정합니다. 컨텐트 너비는 1170px로 컨텐트부를 보여지게 합니다.
- 전체너비 : 사이트의 너비를 전체너비로 사용합니다. 배경색상을 바꾸거나 전체너비로 사용하기 원할 경우 선택
- 컨텐트 너비 : 사이트의 너비를 컨텐트 너비로 사용합니다.
홈페이지 URL
로고클릭시 이동하게 될 페이지 입니다. ( 반드시 주소앞에 http:// 를 입력해주시기 바랍니다. )
상단로고 이미지
레이아웃의 상단에 표시될 로고이미지를 입력하세요. 기본형은 185px x 72px, 와이드형은 203px x 37px의 너비에 최적화 되어 있습니다. 헤더의 배경색상에 맞는 로고색상을 선택하세요.
상단 로고이미지 너비
로고이미지의 너비값을 px단위로 입력합니다. 입력된 값은 이미지테그의 너비 속성으로 들어가게 됩니다.
상단 로고이미지 높이
로고이미지의 높이값을 px단위로 입력합니다. 입력된 값은 이미지테그의 높이 속성으로 들어가게 됩니다.
사이트 색상
웹사이트에 적용되는 기본 컬러셋을 지정할 수 있습니다.
사이트 배경색상
레이아웃의 헤더,풋터부분을 제외한 컨텐츠 부분에 대한 배경색을 지정합니다. 레이아웃 배경패턴을 반투명으로 사용하시면 다양한 효과를 볼 수 있습니다. 스타일 체인저를 통해서 확인 후 적용해 보세요.
레이아웃 배경패턴
전체 18종류의 배경패턴을 선택 할 수 있습니다. 헤더,푸터부까지 모두 적용이 됩니다.
레이아웃 배경이미지
레이아웃 배경에 이미지를 삽입할 수 있습니다.
헤더설정
여기서는 레이아웃 설정 > 헤더설정 탭의 항목들에 대한 설정방법을 알아봅니다. 아래 설정 예시값들과 세팅 가이드를 참고하여 주시기 바랍니다.
설정값 세팅 가이드
헤더종류
전체 3종의 헤더스타일을 제공하고 있습니다. 각 스타일별 데모는 아래의 링크를 참조하시고 선택하시면 됩니다.
- 스타일1 - 왼쪽정렬 : 헤더의 스타일을 왼쪽정렬 스타일로 세팅합니다.
- 스타일2 - 중앙정렬1 : 헤더의 스타일을 중앙정렬 스타일로 세팅합니다.
- 스타일3 - 중앙정렬2 : 헤더의 스타일을 중앙정렬 스타일로 세팅합니다.
헤더슬로건
헤더의 로고아래에 위치하는 사이트 설명 혹은 슬로건 텍스트를 입력합니다. 미리보기 화면에서 로고아래쪽에 위치하는 텍스트 입니다.
헤더 상단패턴
헤더의 상단에 이미지로 만들어진 줄을 넣을 수 있습니다. 미리보기 화면에서 헤더 상단의 3색 이미지가 반복되고 있는 것을 확인할 수 있습니다.
헤더 검색버튼
헤더의 검색기능 사용여부를 선택합니다.
하단정보
여기서는 레이아웃 설정 > 하단정보 탭의 항목들에 대한 설정방법을 알아봅니다. 아래 설정 예시값들과 세팅 가이드를 참고하여 주시기 바랍니다.
레이아웃의 하단정보에 사용되는 이미지 세팅항목 보기
설정값 세팅 가이드
레이아웃의 가장 하단 푸터 부분에 표시되는 정보입니다. 일반적으로 조직의 주소, 연락처, 대표 등의 정보가 입력됩니다.
푸터 색상
푸터부분의 컬러셋을 지정합니다. 배경색 및 폰트색상이 바뀌게 됩니다.
하단 정보
사이트하단에 표시되는 주소,이름 등 정보를 입력해 주시기 바랍니다.
사이트이름
카피라이트에 표기될 사이트의 이름을 입력해 주시기 바랍니다.
소셜
여기서는 레이아웃 설정 > 소셜 탭의 항목들에 대한 설정방법을 알아봅니다. 아래 설정 예시값들과 세팅 가이드를 참고하여 주시기 바랍니다.
소셜링크에 연결되는 정보를 입력합니다.
설정값 세팅 가이드
소셜버튼에 연결될 링크를 입력합니다. 제작사 혹은 개인의 공식링크를 입력하면 클릭시 해당 링크로 바로 이동을 하게 됩니다.
구글 주소
구글플러스 연결주소를 입력합니다.
페이스북 주소
페이스북 연결주소를 입력합니다.
트위터 주소
트위터 연결주소를 입력합니다.
인스타그램 주소
인스타그램 연결주소를 입력합니다.
메인데모 사용설정
여기서는 레이아웃 설정 > 메인데모 사용설정 탭의 항목들에 대한 설정방법을 알아봅니다. 아래 설정 예시값들과 세팅 가이드를 참고하여 주시기 바랍니다.
데모에서 사용된 메인페이지 3종을 사용하는 방법을 확인합니다.
설정값 세팅 가이드
메인페이지의 데모3종은 스타일은 모두 다르지만 구성은 동일합니다. 슬라이더 + 중앙 메인위젯 + 하단 3단구성의 위젯 입니다. 각 구성별로 연결되는 게시판을 이곳에서 설정이 가능합니다. 게시판의 고유넘버 srl은 바로 아래에 확인하는 방법이 있습니다.
메인데모 사용
메인페이지 데모의 사용여부를 선택합니다.
슬라이더 srl
메인화면의 슬라이더에 연결될 게시판 srl 값을 넣습니다. srl 값을 구하는 방법은 "http://goo.gl/3dPCp1" 에서 확인하시기 바랍니다.
중앙위젯 srl
메인화면의 중앙 메인위젯에 연결될 게시판의 srl 값을 넣습니다. * 제공되는 html 파일을 수정하여 사용할 경우 제대로 작동되지 않을 수 있습니다.
하단위젯 1 srl
메인화면 하단의 3개컬럼 위젯 중 첫번째 위젯에 연결되는 게시판의 srl 값을 넣습니다.
하단위젯 1 제목
메인화면 하단의 3개컬럼 위젯 중 첫번째 위젯에 표시되는 박스의 제목값을 입력합니다.
하단위젯 2 srl
메인화면 하단의 3개컬럼 위젯 중 두번째 위젯에 연결되는 게시판의 srl 값을 넣습니다.
하단위젯 2 제목
메인화면 하단의 3개컬럼 위젯 중 두번째 위젯에 표시되는 박스의 제목값을 입력합니다.
하단위젯 3 srl
메인화면 하단의 3개컬럼 위젯 중 세번째 위젯에 연결되는 게시판의 srl 값을 넣습니다.
하단위젯 3 제목
메인화면 하단의 3개컬럼 위젯 중 세번째 위젯에 표시되는 박스의 제목값을 입력합니다.
게시판 srl 넘버 확인방법
사이트 메뉴 편집 → 해당 게시판을 선택 → 상세설정 → 고급 설정 위에 마우스 커서를 올려두면 화면 왼쪽하단에 표시됩니다. (고급설정 버튼을 클릭하시면 안됩니다.)
블로그위젯 세부설정 가이드
여기서는 디블로그 레이아웃의 겔러리위젯의 설정법에 대해서 알아보겠습니다.
위젯페이지에 위젯 적용하기
- 위젯페이지 하단에서 페이지수정버튼을 클릭합니다.
- 내용 직접 추가 옆의 선택박스에서 코디자인몰 겔러리 전용위젯을 선택합니다.
- 선택박스 옆의추가버튼을 클릭합니다.
겔러리위젯 코드생성하기
- 좌측 관리자메뉴에서 고급탭을 클릭합니다.
- 고급 탭 하위 메뉴인 설치된 위젯탭을 클릭합니다.
- 설치된 위젯의 목록중에서 코디자인몰 겔러리 전용위젯의코드생성을 클릭합니다.
위젯설정
위젯설정 항목보기 - 위젯의 옵션중에서 디블로그 겔러리위젯에 관한 설명만 기제되어 있습니다.
설정값 세팅 가이드
축출 대상
모듈의 게시물,댓글,트랙백 등 다양한 타겟을 선택할 수 있습니다. 일반적으로 게시물에서 위젯의 데이터를 가지고 오게 됩니다.
대상 페이지
위젯의 이미지와 컨텐츠를 불러올 모듈을 선택합니다. 게시판을 선택하는 것이 일반적입니다. 복수의 게시판을 선택할 수도 있으며 선택하지 않을 경우 사이트에 생성되는 전체 컨텐츠를 대상으로 위젯이 보여지게 됩니다.
겔러리 스타일
전체 3종류의 겔러리를 스타일을 제공하고 있습니다.
- 스타일1 - 베이직 : 가장 기본적인 블로그 스타일입니다.
- 스타일2 - 라운드 : 모서리를 둥글게 하여 부드러운 이미지를 연출합니다.
- 스타일3 - 박스형 : 각진 형태로 깔끔한 디자인 연출이 가능합니다.
겔러리 모드
그리드와 슬라이더 두가지 모드를 제공하고 있으며 그리드는 일반적인 컨텐츠 표시방식이며 슬라이더는 메인화면상단에 다수의 이미지 혹은 컨텐츠를 좌우로 슬라이딩 시키는 기능을 가집니다.
겔러리 표시
겔러리위젯이 처음으로 표시될 때 나타나는 방식을 설정합니다.
- 기본 : 나타나는 효과없이 그냥 표시됨.
- FadeIn : 전체 블로그 위젯이 투명도가 변하면 부드럽게 보여집니다.
- FadeInToTop : 전체 블로그 위젯이 부드럽게 보여지며 아래에서 위로 올라옵니다.
- sequentially : 개별 블로그요소가 하나씩 순차적으로 표시됩니다..
- BottomToTop : 개별 블로그요소가 아래에서 위로 표시되게 됩니다.
겔러리 표시 속도
겔러리표시효과가 나타나는 속도를 설정합니다.
- 기본 : 속도없음
- FadeIn : 500 혹은 1000
- FadeInToTop : 500 혹은 1000
- sequentially : 80 혹은 100
- BottomToTop : 80 혹은 100
카테고리 변환효과 - CSS3 기반효과
카테고리 기능을 이용할 경우 카테고리 클릭시 구분효과를 선택합니다.
겔러리 설명(캡션) 효과
겔러리에 마우스를 올릴 때 변화하는 효과를 선택합니다.
겔러리 좌우간격
각 겔러리요소의 좌우 간격을 조절합니다. 숫자만 입력합니다. 단위는 px단위 입니다.
겔러리 상하간격
각 겔러리요소의 상하 간격을 조절합니다. 숫자만 입력합니다. 단위는 px단위 입니다.
섬네일 슬라이더
섬네일 슬라이더를 사용하게 되면 불러오는 게시물의 첨부이미지가 2개 이상인 경우 해당 이미지를 슬라이더로 보여주게 됩니다.
박스여백 - 이미지와 박스사이 여백을 생성함
섬네일 이미지와 요소의 박스 사이에 여백을 생성하여 겔러리에 다른 분위기를 연출 할 수 있습니다.
슬라이더 - 자동움직임
위젯을 슬라이더로 사용할 경우 자동움직임 여부를 선택합니다.
슬라이더 전환속도
슬라이더 전환시 전환속도 (기본 5000)
슬라이더 - 네비게이션
슬라이더의 좌우 버튼 표시여부를 선택합니다.
슬라이더 - 슬라이더 번호
슬라이더 아래의 버튼을 생성하여 현재 페이지를 알려줍니다.
슬라이더 - 무한반복
슬라이더의 반복여부를 선택합니다. 무한반복 할 경우 가장 마지막 슬라이더에서 처음 슬라이더로 돌아갑니다.
게시판 스킨 세부설정 가이드
여기서는 디블로그 레이아웃의 게시판스킨의 설정법에 대해서 알아보겠습니다.
게시판에 디블로그스킨 적용하기
- 좌측 관리자메뉴에서 고급탭을 클릭합니다.
- 고급 탭 하위 메뉴인 설치된 모듈탭을 클릭합니다.
- 설치된 위젯의 목록중에서 게시판을 클릭합니다.
- 생성된 게시판 목록들이 보입니다. 게시판 등록일 옆 톱니바퀴 모양의 설정아이콘을 클릭합니다.
게시판설정
게시판설정 항목보기
설정값 세팅 가이드
게시판 스킨선택
4가지 종류의 게시판 스킨이 제공됩니다. 목록형을 제외하고는 모두 블로그 형 디자인으로 표시됩니다.
- 스킨 - 목록형 : 목록형 스킨입니다.
- 스킨 - 기본 겔러리 : 기본형 겔러리 스킨입니다.
- 스킨 - 라운드 겔러리 : 라운드형 겔러리 스킨입니다.
- 스킨 - 박스 겔러리 : 박스형 겔러리 스킨입니다.
겔러리 모드
향후 다양한 모드로 업데이트 예정입니다.
컬러셋
게시판의 컬러셋을 지정합니다. 버튼 텍스트 등의 색상이 컬러셋에 맞게 표시됩니다.
섬네일 높이/너비
섬네일의 높이를 지정합니다. 높이를 지정하면 해당 높이의 이미지가 겔러리에 표시되지는 않습니다. 겔러리의 너비는 컬럼수에 의해서 결정이 되게 됩니다. 겔러리에서 이미지 확대보기를 하면 본 설정에서 지정한 높이대로 이미지가 표시됩니다.
겔러리 좌우간격
각 겔러리요소의 좌우 간격을 조절합니다. 숫자만 입력합니다. 단위는 px단위 입니다.
겔러리 상하간격
각 겔러리요소의 상하 간격을 조절합니다. 숫자만 입력합니다. 단위는 px단위 입니다.
컬럼의 개수
위젯이 몇개의 컬럼에 생성되는지를 지정합니다. 3개의 컬럼으로 하면 가로 겔러리의 개수가 3개로 보여지게 됩니다. 800px 이상에서 표시되는 겔러리 컬럼의 개수입니다. 800px 미만에서는 자동으로 컬럼개수가 바뀌게 됩니다.
이미지 생성방식
섬네일 이미지의 생성방식을 선택합니다. 크롭은 사용자 너비 * 사용자 높이로 이미지가 생성되며 비율유지로 하게되면 원본의 비율이 유지됩니다.
박스여백 - 이미지와 박스사이 여백을 생성함
섬네일 이미지와 요소의 박스 사이에 여백을 생성하여 겔러리에 다른 분위기를 연출 할 수 있습니다.
섬네일 슬라이더
섬네일 슬라이더를 사용하게 되면 불러오는 게시물의 첨부이미지가 2개 이상인 경우 해당 이미지를 슬라이더로 보여주게 됩니다.
카테고리 메뉴 스타일
4가지 종류의 카테고리 메뉴스타일을 제공합니다.
카테고리 메뉴 정렬
카테고리 메뉴의 정렬값을 지정합니다. flaot 값으로 지정이 됩니다. 오른쪽 정렬로 사용하실 경우 검색버튼을 아래에 위치해놓으시기 바랍니다.
검색박스 표시
검색박스를 표시할 위치를 정합니다. 상단/하단/모두표시/표시안함
검색박스 정렬
검색박스의 정렬값을 지정합니다. flaot 값으로 지정이 됩니다. 카테고리 메뉴의 위치와 반대 위치로 지정하시는 것을 권장합니다.
겔러리 표시 속도
겔러리표시효과가 나타나는 속도를 설정합니다.
- 기본 : 속도없음
- FadeIn : 500 혹은 1000
- FadeInToTop : 500 혹은 1000
- sequentially : 80 혹은 100
- BottomToTop : 80 혹은 100
카테고리 변환효과 - CSS3 기반효과
카테고리 기능을 이용할 경우 카테고리 클릭시 구분효과를 선택합니다.
겔러리 설명(캡션) 효과
겔러리에 마우스를 올릴 때 변화하는 효과를 선택합니다.
외부페이지 세팅
여기서는 디블로그 레이아웃에서 제공되는 추가 자료에 대한 외부페이지 세팅방법을 알려드립니다. 디블로그 레이아웃에서는 메인페이지 3종( 레이아웃 관리자페이지서 세팅 ) , 서브페이지 15종, 게시판 7종의 데모를 제공하고 있습니다. 각 페이지의 경로 및 주요 위젯에 대한 코드를 알려드립니다.
디블로그 겔러리위젯 사용하기
여기서는 디블로그 레이아웃에서 제공하는 디블로그 겔러리위젯에 대해서 설명을 해드립니다. 디블로그 겔러리는 아래와 같은 스타일 세팅을 제공하고 있습니다.
메인스타일 문서
- 메인디자인 - 블로그 스타일1 레이아웃 관리자페이지에서 설정함. 원본소스는 : layouts/layout_dBlog/htmls/db_main_type1.html을 통해 수정가능
- 메인디자인 - 블로그 스타일2 레이아웃 관리자페이지에서 설정함. 원본소스는 : layouts/layout_dBlog/htmls/db_main_type2.html을 통해 수정가능
- 메인디자인 - 블로그 스타일3 레이아웃 관리자페이지에서 설정함. 원본소스는 : layouts/layout_dBlog/htmls/db_main_type3.html을 통해 수정가능
위젯스킨 - 베이직
- 위젯스킨-베이직 - 2컬럼 페이지 html 페이지 : 없음. 위젯페이지로 되어 있음
- 위젯스킨-베이직 - 3컬럼 페이지 html 페이지 : layouts/layout_dBlog/htmls/db_widget_style1_3col.html
- 위젯스킨-베이직 - 4컬럼 페이지 html 페이지 : layouts/layout_dBlog/htmls/db_widget_style1_4col.html
- 위젯스킨-베이직 - 위젯스타일 템플릿컬럼 페이지 html 페이지 : layouts/layout_dBlog/htmls/db_widget_style1_template.html
- 위젯스킨-베이직 - 위젯스타일 여백 html 페이지 : layouts/layout_dBlog/htmls/db_widget_style1_template_with_padding.html
위젯스킨 - 라운드
- 위젯스킨-라운드 - 2컬럼 페이지 html 페이지 : 없음. 위젯페이지로 되어 있음
- 위젯스킨-라운드 - 3컬럼 페이지 html 페이지 : layouts/layout_dBlog/htmls/db_widget_style2_3col.html
- 위젯스킨-라운드 - 4컬럼 페이지 html 페이지 : layouts/layout_dBlog/htmls/db_widget_style2_4col.html
- 위젯스킨-라운드 - 위젯스타일 템플릿컬럼 페이지 html 페이지 : layouts/layout_dBlog/htmls/db_widget_style2_template.html
- 위젯스킨-라운드 - 위젯스타일 여백 html 페이지 : layouts/layout_dBlog/htmls/db_widget_style2_template_with_padding.html
위젯스킨 - 박스
- 위젯스킨-박스 - 2컬럼 페이지 html 페이지 : 없음. 위젯페이지로 되어 있음
- 위젯스킨-박스 - 3컬럼 페이지 html 페이지 : layouts/layout_dBlog/htmls/db_widget_style3_3col.html
- 위젯스킨-박스 - 4컬럼 페이지 html 페이지 : layouts/layout_dBlog/htmls/db_widget_style3_4col.html
- 위젯스킨-박스 - 위젯스타일 템플릿컬럼 페이지 html 페이지 : layouts/layout_dBlog/htmls/db_widget_style3_template.html
- 위젯스킨-박스 - 위젯스타일 여백 html 페이지 : layouts/layout_dBlog/htmls/db_widget_style3_template_with_padding.html
외부페이지 연결하기
먼저 외부페이지를 불러오는 방법에 대해 알아보겠습니다. 반드시 레이아웃의 기본 세팅을 완료하신 이후에 작업을 진행하시기 바랍니다. 아직 레이아웃 테마의 기본 세팅을 완료하지 않으신 분들은 기본 세팅 가이드와 레이아웃 설정항목들에 대한 가이드를 참고하여 기본 레이아웃 세팅을 먼저 완료하시기 바랍니다.( 아래 예시 이미지는 본 레이아웃이 아닌 emily레이아웃의 예시로 공통으로 사용되는 부분임을 알려드립니다. )
- 사이트 제작/편집 → 사이트 메뉴 편집 → 해당 메인페이지 메뉴선택 → 상세설정을 클릭합니다. 이때, 해당 메인페이지의 메뉴타입은 반드시 외부페이지로 되어 있어야만 합니다.
- 페이지 관리 창이 뜨면 하단에 외부 문서 위치 항목이 있습니다. 여기에 다음과 같이 입력해줍니다.
layouts/layout_dBlog/htmls/sp_sub_gallery2.html
- '저장'을 클릭하여 변경사항을 저장합니다.
- 웹사이트 홈페이지에 접속하여 적용되었는지 확인합니다.
데모페이지 사용코드
여기서는 디블로그 데모페이지에 사용된 사용자 코드 중에서 위젯코드로 사용된 값들을 알려드립니다.
데모페이지에 사용된 srl은 데모페이지 사이트 기준의 srl이 적용되어 있습니다. 데모페이지의 코드를 적용 시 구매자의 웹사이트 상황에 맞는 srl을 입력해 주시기 바랍니다. srl 확인하기
메인 - 블로그스타일 1
메인 - 블로그스타일 2
메인 - 블로그스타일 3
위 코드에서 코드의 주요변수들은 다음과 같은 의미를 가지고 있습니다.
- module_srls : 위젯과 연결될 게시판의 srl값 (고유값)
- layout_mode : 위젯의 모드. 일반모드는 grid, 슬라이더는 slider로 설정됩니다.
- gap_horizontal : 위젯간 좌우 간격
- gap_vertical : 위젯간 상하 간격
- cols_list_count : 한줄에 표시되는 위젯의 개수
- option_view : 위젯에 표시되는 내용
- order_type : 정렬타입
- order_target : 정렬기준
- thumbnail_type : 섬네일 생성 기준 / crop or ratio 중에서 선택가능
- thumbnail_width : 섬네일 이미지의 너비
- thumbnail_height : 섬네일 이미지의 높이
- widgetstyle : 위젯스타일 이름 ( 위젯스타일은 위젯을 감싸는 박스입니다. 디블로그 레이아웃은 3종의 스킨이 포함된 디블로그 스타일 스킨을 제공하고 있습니다. )
- ws_title : 위젯스타일의 제목
- ws_more_url : 더 보기 클릭시 이동할 주소
- ws_border : 위젯스타일의 박스에 보더 사용여부
- ws_border_radius : 보더의 스타일을 둥글게 혹은 각지게 선택할 수 있음
- ws_title_roundbg : 위젯스타일의 제복부분을 둥근 스타일로 사용
- ws_title_border : 제목아래 선을 그어주는 스타일 적용여부
- ws_title_align : 제목의 정렬값
위젯코드를 삽입 혹은 수정할 경우 해당 변수값을 사용자가 원하는 형태로 수정하여 적용하시기 바랍니다.