스프라우트 테마 매뉴얼

Last Updated : 2016-04-10

XE Layout 스프라우트 레이아웃 테마

사용자 가이드

테마 소개

스프라우트 XE 레이아웃 테마입니다. 본 테마는 반응형 디자인을 기본으로 심플하면서 다양한 미디어를 활용할 수 있도록 설계되어 있습니다. 유튜브 동영상 배경을 이용한 메인 디자인과 다양한 서브디자인을 스프라우트와 함께 경험해 보시기 바랍니다..

레이아웃 설치

패키지 구성 및 설치경로

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

layouts 폴더: 테마와 예제페이지에 대한 html파일을 포함하고 있습니다. html 파일은 메인페이지/서브페이지/개발코드가 포함됩니다. XE설치경로의 root 디렉토리에 업로드하여 주십시요.
modules 폴더: 멤버스킨을 포함하고 있습니다. XE설치경로의 root 디렉토리에 업로드하여 주십시요.
widgets 폴더: 폴더 하위에 스프라우트 레이아웃 테마 전용 위젯을 포함하고 있습니다. XE설치경로의 root 디렉토리에 업로드하여 주십시요.
widgetstyle 폴더: 폴더 하위에 스프라우트 레이아웃 테마 전용 위젯스타일 스킨을 포함하고 있습니다. XE설치경로의 root 디렉토리에 업로드하여 주십시요.

업로드 할 경우 root 디렉토리에 각 폴더를 덮어씌우기 하게 됩니다. 기존의 파일들은 삭제되지 않고 추가되는 자료만 생성이 되기 때문에 걱정하지 않으셔도 됩니다.

기본세팅 가이드

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

사이트맵 작성하기

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

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

레이아웃 생성

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

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

레이아웃 생성하실 때 짧은 팁

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

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

레이아웃 적용하기

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

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

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

레이아웃 세부설정 가이드

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

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

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

기본설정

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

기본설정 항목보기

설정값 세팅 가이드

컨텐츠 너비

컨텐츠 너비는 웹사이트의 헤더/슬라이더/푸터를 외한 실제 컨텐츠가 표시되는 부분의 너비를 지정합니다. 전체너비는 컨텐츠부를 100% 너비로 지정합니다. 컨텐트 너비는 1170px로 컨텐트부를 보여지게 합니다.

전체너비 : 사이트의 너비를 전체너비로 사용합니다. 배경색상을 바꾸거나 전체너비로 사용하기 원할 경우 선택
컨텐트 너비 : 사이트의 너비를 컨텐트 너비로 사용합니다.

컨텐트 사이드바

사이드바를 사용할 경우 사용안함 / 왼쪽 / 오른쪽 중에서 한가지로 사용할 수 있습니다. 서브형태로 사용하기 원할때는 왼쪽 / 오른쪽 중에서 선택해 주시면 됩니다.

사용안함 : 사이드바를 표시하지 않습니다.
왼쪽 : 사이드바가 왼쪽에 표시됩니다.
오른쪽 : 사이드바가 오른쪽에 표시됩니다.

사이트 색성

웹사이트에 적용되는 기본 컬러셋을 지정할 수 있습니다.

스카이블루 : 파란색 계열의 컬러셋입니다.
핫핑크 : 붉은색 계열의 컬러셋 입니다.

홈페이지 URL

로고클릭시 이동하게 될 페이지 입니다. ( 반드시 주소앞에 http:// 를 입력해주시기 바랍니다. )

상단로고 이미지

레이아웃의 상단에 표시될 로고이미지를 입력하세요. 기본형은 185px x 72px, 와이드형은 203px x 37px의 너비에 최적화 되어 있습니다. 헤더의 배경색상에 맞는 로고색상을 선택하세요.

하단 로고이미지

레이아웃의 하단에 표시될 로고이미지를 입력하세요. 134px x 52px 너비에 최적화 되어 있습니다.

헤더상단부 설정

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

설정값 세팅 가이드

헤더 상단

헤더부의 상단섹션 사용여부를 선택합니다. 사용하지 않을 경우 로고 + 메뉴 섹션만 표시되게 됩니다. 바로가기 텍스트/ 바로가기 이미지 / 로그인 /회원가입/ 검색창 등의 메뉴를 추가할 수 있습니다.

사용함 : 헤더상단을 사용합니다.
사용안함 : 헤더상단을 사용하지 않습니다.

헤더하단

헤더하단의 색상바 사용여부를 선택합니다. 헤더종류를 기본형으로 사용할 때 표시 됩니다. 중앙정렬은 사용할 수 없습니다. 서브페이지에서 사용하면 공지사항 롤링/회원가입 메뉴 등을 더 편하게 이용할 수 있습니다.

헤더종류

중앙정렬은 메인 스타일1페이지에 적용되어 있으며 로고중앙정렬 후 아래줄에 메뉴바가 위치하게 됩니다. 기본형은 왼쪽로고 오른쪽 메뉴바가 위치하게 됩니다.

중앙정렬 : 로고가 중앙에 위치합니다.
기본형 : 왼쪽에 로고가 위치합니다.

헤더 그림자

메인스타일2에 적용이 되어 있으며 슬라이더 이미지가 밝은색일때 헤더부에 그림가 효과를 넣음으로 더욱 분위기있는 디자인을 연출할 수 있습니다. 기본형 헤더 사용시 상단 헤더박스의 그림자 여부를 선택할 수 있습니다. 그림자효과는 http://codesignlab.cafe24.com/sp_main_type2 에서 확인이 가능합니다

GNB 세로바

메인메뉴 1차메뉴의 메뉴명과 메뉴명 사이의 "/" 세로바의 사용여부를 선택합니다. 사용하지 않을 경우 메뉴사이의 간격이 줄어들며 1차메뉴를 더 많이 추가할 수 있습니다.

사용 : 메뉴사이에 "/" 바 있음
사용안함 : 메뉴사이에 "/"바 없음

전체메뉴보기

전체메뉴보기는 생성된 메뉴를 전체화면으로 보여줍니다. GNB 오른쪽에 3줄 메뉴버튼이 생성됩니다. 6개의 메뉴가 한번에 표시되며 그 이상의 메뉴는 메뉴의 양에 따라서 아래로 쌓이게 됩니다.

전체바로가기

전체메뉴가 표시될 때 가장 오른쪽 영역에 바로가기 버튼을 위치할 수 있습니다.

바로가기 텍스트

바로가기 버튼의 텍스트를 입력합니다.

바로가기 URL

바로가기 버튼의 클릭시 이동할 주소를 입력합니다. 예) http://www.xelayout.com

전체메뉴 배경이미지

전체메뉴를 사용할 경우 우측하단에 들어갈 배경이미지를 선택할 수 있습니다.

전체메뉴 공지사항

전체메뉴를 사용할 경우 좌측하단에 표시되는 공지사항의 게시판을 연결합니다. srl값을 입력해 주시기 바랍니다.

전체메뉴 공지사항

전체메뉴를 사용할 경우 우측 하단에 표시되는 멤버가입/로그인/로그아웃 등의 메뉴를 사용 선택가능합니다.

전체메뉴 공지사항

모바일에서 사용되는 드랍다운 메뉴의 색상을 선택할 수 있습니다. 기본 흰색이 제공되며 검정색상을 선택할 수도 있습니다. 색상은 모바일에서 확인하시기 바랍니다.

흰색 : 흰색 컬러셋을 사용합니다. .
검정색 : 검정색 컬러셋을 사용합니다. .

헤더부 검색버튼

메인 메뉴 상단 오른쪽의 검색버튼의 사용여부를 선택합니다.

헤더부 멤버버튼

메인 메뉴 상단 오른쪽의 멤버버튼( 회원가입/회원로그인/로그아웃 등 ) 사용여부를 선택합니다.

헤더 이미지 바로가기

헤더상단의 바로가기 이미지를 선택하세요.

헤더 이미지 바로가 주소

헤더상단의 바로가기 텍스트를 클릭시 이동하게 될 주소를 입력하세요. 높이 15px로 맞추시기를 권장합니다.

헤더바로가기 - 좌측

헤더상단의 바로가기 텍스트를 입력하세요. ex) 회사소개

헤더바로가기 - 좌측 주소

헤더상단의 바로가기 텍스트를 클릭시 이동하게 될 주소를 입력하세요. (반드시 주소앞에 http:// 를 입력해주시기 바랍니다.)

헤더바로가기 - 우측

헤더상단의 바로가기 텍스트를 입력하세요. ex) 회사소개

헤더바로가기 - 우측 주소

헤더상단의 바로가기 텍스트를 클릭시 이동하게 될 주소를 입력하세요. (반드시 주소앞에 http:// 를 입력해주시기 바랍니다.)

슬라이더 설정

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

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

설정값 세팅 가이드

레볼루션 슬라이더가 적용되어 있습니다. 각 슬라이더의 텍스트와 이미지를 잘 선택하여 전체 슬라이더를 구성하시기 바랍니다.

슬라이더 사용여부 선택

슬라이더 사용여부 및 스킨을 선택합니다. 서브페이지로 사용하실 경우 "사용안함"을 선택하시기 바랍니다.

유튜브 배경 : 유뷰브 동영상을 배경으로 사용합니다. 역동적이며 원하는 분위기를 동영상으로 표현할 수 있습니다.
슬라이더 스타일1 - 왼쪽정렬 : 슬라이더의 제목 / 제목이미지/설명 등이 왼쪽으로 정렬됩니다.
슬라이더 스타일2 - 중앙정렬 : 슬라이더의 제목 / 제목이미지/설명 등이 중앙으로 정렬됩니다.

유튜브 동영상

유튜브 영상의 주소를 입력해 주세요. 예) https://www.youtube.com/watch?v=YSBfgT2qpRY

유튜브 소리

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

유튜브 시작

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

슬라이더 이미지

슬라이더에 사용될 이미지를 선택합니다. 첫번째 이미지는 유튜브동영상을 사용할 경우 동영상 시작 전 표시되는 이미지로 사용 됩니다.

슬라이더 제목

슬라이더 이미지를 위한 제목 텍스트를 입력해 주세요. 가장크게 표시되는 제목입니다.

슬라이더 제목이미지

슬라이더의 제목을 텍스트 대신 이미지로 넣을 경우 선택합니다. 텍스트와 이미지 둘중 하나만 사용사용하시기 권장해드립니다. 두가지 사용할 경우 이미지와 텍스트가 겹쳐서 보이게 됩니다. 이미지와 텍스트가 나타나는 위치는 거의 동일합니다.

슬라이더 소제목

슬라이더 이미지를 위한 소제목 텍스트를 입력해 주세요. 제목위에 표시됩니다.

슬라이더 소제목 이미지

슬라이더의 중앙에 제목아래 소제목을 이미지로 넣을경우 선택합니다.

슬라이더 설명글

슬라이더를 위한 설명텍스트가 입력이 됩니다. 제목아래에 작은글씨로 표시됩니다.

슬라이더 버튼 1 텍스트

바로가기 버튼텍스트를 입력해 주세요. (ex. 더보기, more, 바로가기 등 )

슬라이더 버튼 1 Url

버튼 클릭 시 이동할 주소를 입력해 주세요.

슬라이더 퀵메뉴

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

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

설정값 세팅 가이드

레볼루션 슬라이더가 적용되어 있습니다. 각 슬라이더의 텍스트와 이미지를 잘 선택하여 전체 슬라이더를 구성하시기 바랍니다.

슬라이더 퀵메뉴

동영상 배경 슬라이더를 사용할 경우 슬라이더 하던에 최대 6개의 퀵메뉴 아이콘을 표시할 수 있습니다.

슬라이더 퀵메뉴 개수

6개/4개/2개 중에서 퀵메뉴의 개수를 선택할 수 있습니다. 반응형을 위해 해당 개수만큼만의 바로가기를 지원합니다.

퀵메뉴 이미지

퀵메뉴 아이콘을 선택합니다. 64*64px 의 아이콘을 사용합니다. 이미지가 선택되어야 메뉴가 표시됩니다.

퀵메뉴 텍스트

바로가기 제목글씨를 입력합니다. 예) 제품소개

퀵메뉴 URL

클릭시 이동하는 주소를 입력합니다. 예) http://www.xelayout.com

서브페이지 - 헤더

여기서는 서브페이지 상단에 사용되는 옵션값에 대해서 알아봅니다. 서브페이지에 들어가는 상단의 페이지타이틀 바의 사용여부 ,색상, 이미지 등을 지정할 수 있습니다.

레이아웃의 서브페이시 상단에 사용되는 세팅항목 보기

설정값 세팅 가이드

서브페이지 타이틀 박스의 사용여부를 선택하시고 나머지 옵션의 값을 지정해 주시기 바랍니다.

서브 타이틀박스

서브페이지의 컨텐트와 메뉴부분 사이에 제목박스를 표시합니다. 해당 메뉴명 / 상위메뉴명 / 현위치 네비게이션이 표시됩니다.

사용안함 : 헤더를 사용하지 않습니다. 메인화면 혹은 페이지의 목적에 따라 사용이 가능합니다.
기본헤더 : 가장 기본적인 스타일의 헤더를 적용합니다.
색상헤더 : 사용자가 지정한 배경이미지로 타이틀박스의 배경이 표시됩니다.
배경이미지 헤더 : 사용자 지정 배경이미지로 표시가 됩니다. 텍스트 색상이 흰색이므로 배경은 검정개열의 배경색상을 지정해 주시기 바랍니다.
배경이미지 - parallax : 사용자 지정 배경이미지가 parallax효과와 함께 표시가 됩니다. 텍스트 색상이 흰색이므로 배경은 검정개열의 배경색상을 지정해 주시기 바랍니다.

서브 타이틀박스 이전/다음 이동메뉴

서브타이틀박스에 이전/다음메뉴 이동버튼의 표시여부를 선택합니다.

서브 타이틀박스 배경색상

서브 타이틀박스에 사용될 배경색상을 지정합니다. 값이 없을 경우 기본색이 배경색이 됩니다.

서브 타이틀박스 배경이미지

서브타이틀 박스에 사용될 배경이미지를 선택합니다. 서브 타이틀박스의 종류를 배경이미지 혹은 배경이미지 - Parallax로 선택하시기 바랍니다.

서브페이지 - 사이드바

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

레이아웃의 서브페이지 - 사이드바에 사용되는 이미지 세팅항목 보기

설정값 세팅 가이드

사이드바에는 미리 세팅된 위젯코드가 포함되어 있습니다. 사용자의 설정에 따라서 해당 위젯을 보이게 혹은 보이지 않도록 선택할 수 있습니다. 옵션을 보이게 할 경우 사용자의 게시판과 연동하는 작업이 꼭 필요합니다. module_srl값을 확인하여 아래 srl값 란에 넣어주시기 바랍니다. 각 옵션별 표시화면은 위 이미지를 참조하시기 바랍니다.

사이드바 - 글 위젯

사이드바의 글위젯 사용여부를 선택합니다. 탭형태로 보여지게 됩니다.

사이드바 위젯 탭제목1

사이드바 글위젯의 첫번째 탭 제목을 입력합니다.

사이드바 위젯 srl1

사이드바 글위젯 srl 을 입력합니다.

사이드바 위젯 탭제목2

사이드바 글위젯의 첫번째 탭 제목을 입력합니다.

사이드바 위젯 srl2

사이드바 글위젯 srl 을 입력합니다.

사이드바 글 위젯2

사이드바의 글위젯2 사용여부를 선택합니다.선택한 게시판의 글을 웹진형식으로 보여줍니다.

사이드바 위젯2 제목

사이드바 글위젯2의 제목을 입력합니다.

사이드바 위젯2 srl

사이드바 글위젯2 srl 을 입력합니다.

사이드바 위젯2 더보기 주소

사이드바 글위젯2 + 더보기 버튼을 클릭시 이동하게 될 페이지를 지정합니다.

사이드바 이미지 베너1

사이드바의 이미지베너에 표시될 이미지를 선택합니다.

사이드바 이미지 베너1 주소

사이드바의 이미지베너를 클릭시 이동할 주소를 입력합니다. ( 반드시 주소앞에 http:// 를 입력해주시기 바랍니다. )

사이드바 이미지 베너2

사이드바의 이미지베너에 표시될 이미지를 선택합니다.

사이드바 이미지 베너2 주소

사이드바의 이미지베너를 클릭시 이동할 주소를 입력합니다. ( 반드시 주소앞에 http:// 를 입력해주시기 바랍니다. )

하단정보

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

레이아웃의 하단정보에 사용되는 이미지 세팅항목 보기

설정값 세팅 가이드

레이아웃의 가장 하단 푸터 부분에 표시되는 정보입니다. 일반적으로 조직의 주소, 연락처, 대표 등의 정보가 입력됩니다.

푸터 색상

푸터부분의 컬러셋을 지정합니다. 배경색 및 폰트색상이 바뀌게 됩니다.

하단 정보

사이트하단에 표시되는 주소,이름 등 정보를 입력해 주시기 바랍니다.

사이트이름

카피라이트에 표기될 사이트의 이름을 입력해 주시기 바랍니다.

게시판 srl 넘버 확인방법

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

추가페이지 세팅

여기서는 스프라우트 레이아웃에서 제공되는 추가 페이지들에 대해서 세팅방법을 알려드립니다. 스프라우트 레이아웃에서는 메인페이지 3종,서브페이지 9종,로그인 회원가입 스킨,개발자코드를 제공하고 있습니다. 각 페이지들을 어떻게 설정하게 되는지 설명해드리겠습니다.

문서스킨 사용하기

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

메인스타일 문서

메인 - 기업1 없음 - layout.html 에 포함 : layouts/layout_sprout/_slider_type1.html을 통해 수정가능
메인 - 기업2 html 페이지 : layouts/layout_sprout/htmls/sp_main_type2.html
메인 - 기업3 html 페이지 : layouts/layout_sprout/htmls/sp_main_type3.html

서브스타일 문서

서브 - 회사소개 html 페이지 : layouts/layout_sprout/htmls/sp_sub_intro.html
서브 - 핵심가치 html 페이지 : layouts/layout_sprout/htmls/sp_sub_value.html
서브 - 회사연혁 html 페이지 : layouts/layout_sprout/htmls/sp_sub_history.html
서브 - 회사연혁 - 탭 html 페이지 : layouts/layout_sprout/htmls/sp_sub_history_tab.html
서브 - 서비스소개 html 페이지 : layouts/layout_sprout/htmls/sp_sub_service.html
서브 - 제품소개 html 페이지 : layouts/layout_sprout/htmls/sp_sub_product1.html
서브 - 제품소개-큰사이즈 html 페이지 : layouts/layout_sprout/htmls/sp_sub_product2.html
서브 - CI소개 html 페이지 : layouts/layout_sprout/htmls/sp_sub_ci.html
서브 - Contact us html 페이지 : layouts/layout_sprout/htmls/sp_sub_contactus.html

개발자코드 문서

개발자 코드 html 페이지 : layouts/layout_sprout/htmls/sp_sub_devcode.html

외부페이지 연결하기

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

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