Last Updated : 2018-02-23

XE Layout ROUND 레이아웃 테마
사용자 가이드Last Updated : 2018-02-23
XE Layout ROUND 레이아웃 테마
사용자 가이드ROUND XE 레이아웃 테마입니다. IT기업, 스타트업 등을 위한 ROUND 웹사이트를 쉽게 제작할 수 있습니다. 다양한 ROUND 레이아웃과 함께 간단한 방법으로 웹사이트를 만들어 보세요. 비즈니스라이센스와 일반라이센스 2가지로 제공이 되고 있습니다.
다운로드 받으신 테마패키지의 압축파일을 해제하셔서 각각의 폴더를 올바른 설치경로에 업로드 해주십시요. 일반라이센스는 서브페이지, 게시판스킨, 멤버스킨, 개발코드가 제공되지 않습니다.
여기서는 XE 레이아웃을 올바르게 적용하기 위한 기본적인 세팅 가이드를 제시해 드립니다. 반드시 레이아웃 패키지를 올바른 경로에 설치하신 후 진행하시기 바랍니다. 기본세팅 가이드 편은 모든 XE기반 레이아웃에서 거의 공통적으로 적용되는 사항이니 꼭 숙지해 주시기 바랍니다. XE 사용이 아직 익숙하지 않으신 분들은 아래 순서대로 따라해 주시기 바랍니다. *본 섹션은 테마별로 화면이 다를 수 있습니다. 기본적인 세팅에 대한 가이드로 이해해 주시기 바랍니다.
여기서는 사이트맵을 작성하는 방법을 알아봅니다. XE 테마 세팅은 사이트맵을 작성하는 것에서 부터 시작합니다.
여기서는 설치된 레이아웃 모듈을 사용하여 레이아웃을 생성하는 방법을 알아봅니다. 레이아웃 테마에 필요한 사이트맵 작성을 완료하셨다면, 이제 레이아웃을 생성해 줄 차례입니다.
대부분의 메인페이지 레이아웃에 적용된 설정값들은 서브페이지 레이아웃에서 공유되는 설정값들입니다. 따라서 먼저 메인페이지 레이아웃을 생성하여 설정을 완료하신 후, 이 레이아웃을 '복사'하여 서브레이아웃을 생성하시면 좋습니다. 설정값을 다시 입력해야 하는 번거로움을 줄이고 시간과 노력을 절약할 수 있습니다.
세부적인 레이아웃 설정값에 대해서는 각각 해당하는 가이드를 참고하시기 바랍니다.
여기서는 생성된 레이아웃을 각각의 페이지 / 게시판 등의 메뉴에 적용시키는 방법에 대해서 알아봅니다.
앞으로도 이와 같은 방식으로 필요에 따라 레이아웃을 생성 & 추가하여 적용해주시면 됩니다. 지금까지 알려드린 작업은 레이아웃 세팅의 가장 기본이 되는 작업을 수행한 것입니다. 이후 이어지는 레이아웃 설정과 관련된 가이드를 참고하여 레이아웃을 세팅하신다면, 멋진 사이트를 제작하실 수 있을 것입니다.
여기서는 레이아웃 테마를 세팅할 때 알아야 하는 모든 레이아웃 설정 항목들에 대해서 알아봅니다. 레이아웃 테마의 설정 페이지로 접근하는 방법은 아래의 가이드를 참고하여 주시기 바랍니다.
여기서는 레이아웃 설정 > 기본설정탭의 설정방법에 대해 알아봅니다.
원하는 레이아웃의 형태를 선택해 주세요. 전체너비는 브라우저 100%크기로 보여지게 되며 컨텐트 너비는 1170px의 너비로 컨텐트부를 보여지게 됩니다.
서브메뉴에서 사용되는 컨텐트 사이드바의 위치 및 사용여부를 정합니다. 왼쪽/오른쪽 위치를 지정해 줄 수 있습니다. 전체너비 혹은 메인화면 사용을 위해서는 사용안함을 선택해 주시기 바랍니다.
로고를 클릭 시에 이동할 홈 페이지 URL을 입력해 주세요. ( 반드시 주소앞에 http:// 를 입력해주시기 바랍니다. )
레이아웃의 상단에 표시될 로고이미지를 입력하세요. 214px x 57px의 너비에 최적화 되어 있습니다. 헤더의 배경색상에 맞는 로고색상을 선택하세요.
레이아웃의 하단에 표시될 로고이미지를 입력하세요. 214px x 57px의 너비에 최적화 되어 있습니다.
웹사이트의 기본색상을 지정합니다. 향후 색상 업데이트 시 추가 색상이 표시됩니다.
레이아웃의 헤더,풋터부분을 제외한 컨텐츠 부분에 대한 배경색을 지정합니다. 레이아웃 배경패턴을 반투명으로 사용하시면 다양한 효과를 볼 수 있습니다.
전체 18종류의 배경패턴을 선택 할 수 있습니다. 헤더,푸터부까지 모두 적용이 됩니다.
레이아웃 배경에 이미지를 삽입할 수 있습니다.
8가지의 기본폰트를 제공합니다. 웹사이트의 특성에 맞게 사용해주시기 바랍니다.
여기서는 레이아웃 설정 > 헤더설정탭의 설정방법에 대해 알아봅니다.
헤더부의 상단섹션 사용여부를 선택합니다. 바로가기 / 로그인 / 회원가입 / 검색창 등의 메뉴가 사용 가능합니다. 사용하지 않을 경우 로고 + 메뉴 섹션만 표시되게 됩니다.
메인 메뉴 상단 오른쪽의 다국어선택 사용여부를 선택합니다.
메인 메뉴 상단 오른쪽의 검색버튼의 사용여부를 선택합니다.
메인 메뉴 상단 오른쪽의 멤버버튼( 회원가입/회원로그인/로그아웃 등 ) 사용여부를 선택합니다.
헤더상단의 바로가기 이미지를 선택하세요.
헤더상단의 바로가기 텍스트를 클릭시 이동하게 될 주소를 입력하세요. 높이 15px로 맞추시기를 권장합니다.
헤더상단의 바로가기 텍스트를 입력하세요. ex) 회사소개
헤더상단의 바로가기 텍스트를 클릭시 이동하게 될 주소를 입력하세요. (반드시 주소앞에 http:// 를 입력해주시기 바랍니다.)
헤더상단의 바로가기 텍스트를 입력하세요. ex) 회사소개
헤더상단의 바로가기 텍스트를 클릭시 이동하게 될 주소를 입력하세요. (반드시 주소앞에 http:// 를 입력해주시기 바랍니다.)
여기서는 레이아웃 설정 > 슬라이더 설정탭의 설정방법에 대해 알아봅니다. 직접 수정은 _header.html 파일을 수정해 주시기 바랍니다.
슬라이더 사용여부 및 스킨을 선택합니다. 서브페이지로 사용하실 경우 "사용안함"을 선택하시기 바랍니다.
유튜브 영상의 주소를 입력해 주세요. 예) https://www.youtube.com/watch?v=YSBfgT2qpRY
유튜브 영상의 소리사용여부를 선택할 수 있습니다.
동영상 시작 시간을 설정합니다. (초단위) 예) 3
슬라이더에 사용될 이미지를 선택합니다. 첫번째 이미지는 유튜브동영상을 사용할 경우 동영상 시작 전 표시되는 이미지로 사용 됩니다.
슬라이더 이미지를 위한 제목 텍스트를 입력해 주세요. 가장크게 표시되는 제목입니다.
슬라이더의 제목을 텍스트 대신 이미지로 넣을 경우 선택합니다. 텍스트와 이미지 둘중 하나만 사용사용하시기 권장해드립니다. 두가지 사용할 경우 이미지와 텍스트가 겹쳐서 보이게 됩니다. 이미지와 텍스트가 나타나는 위치는 거의 동일합니다.
슬라이더 이미지를 위한 소제목 텍스트를 입력해 주세요. 제목위에 표시됩니다.
슬라이더의 중앙에 제목아래 소제목을 이미지로 넣을경우 선택합니다.
슬라이더를 위한 설명텍스트가 입력이 됩니다. 제목아래에 작은글씨로 표시됩니다.
바로가기 버튼텍스트를 입력해 주세요. (ex. 더보기, more, 바로가기 등 )
버튼 클릭 시 이동할 주소를 입력해 주세요.
여기서는 레이아웃 설정 > 서브페이지 -헤더 설정탭의 설정방법에 대해 알아봅니다. 직접 수정은 _header_topbar.html 파일을 수정해 주시기 바랍니다.
서브페이지 타이틀 박스의 사용여부를 선택하시고 나머지 옵션의 값을 지정해 주시기 바랍니다.
서브페이지의 컨텐트와 메뉴부분 사이에 제목박스를 표시합니다. 해당 메뉴명 / 상위메뉴명 / 현위치 네비게이션이 표시됩니다.
서브타이틀박스에 이전/다음메뉴 이동버튼의 표시여부를 선택합니다.
서브 타이틀박스에 사용될 배경색상을 지정합니다. 값이 없을 경우 기본색이 배경색이 됩니다.
서브타이틀 박스에 사용될 배경이미지를 선택합니다. 서브 타이틀박스의 종류를 배경이미지 혹은 배경이미지 - Parallax로 선택하시기 바랍니다.
서브타이틀박스 하단의 메뉴네비게이션 표시여부를 선택합니다.
여기서는 레이아웃 설정 > 서브페이지 사이드바 설정탭의 설정방법에 대해 알아봅니다. _side_bar.html 파일입니다.
사이드바에는 미리 세팅된 위젯코드가 포함되어 있습니다. 사용자의 설정에 따라서 해당 위젯을 보이게 혹은 보이지 않도록 선택할 수 있습니다. 옵션을 보이게 할 경우 사용자의 게시판과 연동하는 작업이 꼭 필요합니다. module_srl값을 확인하여 아래 srl값 란에 넣어주시기 바랍니다. 각 옵션별 표시화면은 위 이미지를 참조하시기 바랍니다.
사이드바의 글위젯 사용여부를 선택합니다. 탭형태로 보여지게 됩니다.
사이드바 글위젯의 첫번째 탭 제목을 입력합니다.
사이드바 글위젯 srl 을 입력합니다.
사이드바 글위젯의 첫번째 탭 제목을 입력합니다.
사이드바 글위젯 srl 을 입력합니다.
사이드바의 글위젯2 사용여부를 선택합니다.선택한 게시판의 글을 웹진형식으로 보여줍니다.
사이드바 글위젯2의 제목을 입력합니다.
사이드바 글위젯2 srl 을 입력합니다.
사이드바 글위젯2 + 더보기 버튼을 클릭시 이동하게 될 페이지를 지정합니다.
사이드바의 이미지베너에 표시될 이미지를 선택합니다.
사이드바의 이미지베너를 클릭시 이동할 주소를 입력합니다. ( 반드시 주소앞에 http:// 를 입력해주시기 바랍니다. )
사이드바의 이미지베너에 표시될 이미지를 선택합니다.
사이드바의 이미지베너를 클릭시 이동할 주소를 입력합니다. ( 반드시 주소앞에 http:// 를 입력해주시기 바랍니다. )
여기서는 레이아웃 설정 > 소셜 설정탭의 설정방법에 대해 알아봅니다.
소셜버튼에 연결될 링크를 입력합니다. 제작사 혹은 개인의 공식링크를 입력하면 클릭시 해당 링크로 바로 이동을 하게 됩니다.
구글플러스 연결주소를 입력합니다.
페이스북 연결주소를 입력합니다.
트위터 연결주소를 입력합니다.
인스타그램 연결주소를 입력합니다.
여기서는 레이아웃 설정 > 하단정보 설정탭의 설정방법에 대해 알아봅니다. 직접 수정은 _footer.html 파일을 수정해 주시기 바랍니다.
레이아웃의 가장 하단 푸터 부분에 표시되는 정보입니다. 일반적으로 조직의 주소, 연락처, 대표 등의 정보가 입력됩니다.
푸터부분의 컬러셋을 지정합니다. 배경색 및 폰트색상이 바뀌게 됩니다.
사이트하단에 표시되는 주소,이름 등 정보를 입력해 주시기 바랍니다.
카피라이트에 표기될 사이트의 이름을 입력해 주시기 바랍니다.
여기서는 레이아웃 설정 > 하단로고/링크설정탭의 설정방법에 대해 알아봅니다. 직접 수정은 _footer_type1.html 파일을 수정해 주시기 바랍니다.
레이아웃 하단에 파트너사의 로고를 표시합니다.
레이아웃 하단에 파트너사의 로고박스의 상단구분선을 표시합니다. 컨텐츠의 배경이 흰색인 경우 푸터와 구분선 역할을 합니다.
하단 푸터섹션에 표시된 로고이미지를 선택합니다.
위의 로고 클릭시 이동할 링크 주소를 입력합니다.(반드시 http:// 를 앞에 포함시켜주세요.)
여기서는 레이아웃 설정 > 관련사이트탭의 설정방법에 대해 알아봅니다.
레이아웃 푸터 우측에 관련 사이트 링크 기능을 출력합니다.
관련사이트에 링크시킬 사이트의 이름을 입력합니다.
위의 관련사이트 클릭시 이동할 링크 주소를 입력합니다.(반드시 http:// 를 앞에 포함시켜주세요.)
사이트 메뉴 편집 → 해당 게시판을 선택 → 상세설정 → 고급 설정 위에 마우스 커서를 올려두면 화면 왼쪽하단에 표시됩니다. (고급설정 버튼을 클릭하시면 안됩니다.)
여기서는 라운드 레이아웃에서 제공되는 추가 페이지들에 대해서 세팅방법을 알려드립니다. 라운드 레이아웃에서는 메인페이지 3종,서브페이지 9종,로그인 회원가입 스킨,개발자코드를 제공하고 있습니다. 각 페이지들을 어떻게 설정하게 되는지 설명해드리겠습니다.
여기서는 라운드 레이아웃에서 제공하는 라운드 전용 html 디자인 페이지에 대해서 설명을 해드립니다. 라운드에서는 아래와 같이 문서파일을 제공하고 있습니다. 향후 추가페이지가 제공예정입니다.
먼저 외부페이지를 불러오는 방법에 대해 알아보겠습니다. 반드시 레이아웃의 기본 세팅을 완료하신 이후에 작업을 진행하시기 바랍니다. 아직 레이아웃 테마의 기본 세팅을 완료하지 않으신 분들은 기본 세팅 가이드와 레이아웃 설정항목들에 대한 가이드를 참고하여 기본 레이아웃 세팅을 먼저 완료하시기 바랍니다.( 아래 예시 이미지는 본 레이아웃이 아닌 emily레이아웃의 예시로 공통으로 사용되는 부분임을 알려드립니다. )
layouts/layout_round/htmls/cm_sub_gallery2.html
여기서는 디갤러리 레이아웃의 게시판스킨의 설정법에 대해서 알아보겠습니다.
7가지 종류의 게시판 스킨이 제공됩니다. 목록형을 제외하고는 모두 블로그 형 디자인으로 표시됩니다.
모자이크, 그리드 형태를 제공하고 있습니다. 자세한 설정은 겔러리 게시판 형태별 설정값을 확인하시기 바랍니다.
사용할 경우 겔러리의 이미지 클릭 시 원본이미지를 보여줍니다. 사용하지 않을 경우 클릭시 해당 게시물로 이동 됩니다.
게시판의 컬러셋을 지정합니다. 버튼 텍스트 등의 색상이 컬러셋에 맞게 표시됩니다.
섬네일의 높이를 지정합니다. 높이를 지정하면 해당 높이의 이미지가 겔러리에 표시되지는 않습니다. 겔러리의 너비는 컬럼수에 의해서 결정이 되게 됩니다. 겔러리에서 이미지 확대보기를 하면 본 설정에서 지정한 높이대로 이미지가 표시됩니다.
각 겔러리요소의 좌우 간격을 조절합니다. 숫자만 입력합니다. 단위는 px단위 입니다.
각 겔러리요소의 상하 간격을 조절합니다. 숫자만 입력합니다. 단위는 px단위 입니다.
위젯이 몇개의 컬럼에 생성되는지를 지정합니다. 3개의 컬럼으로 하면 가로 겔러리의 개수가 3개로 보여지게 됩니다. 800px 이상에서 표시되는 겔러리 컬럼의 개수입니다. 800px 미만에서는 자동으로 컬럼개수가 바뀌게 됩니다.
게시판에 표시되는 제목의 글자 수를 입력합니다.
게시판에 표시되는 게시글 요약부분의 글자 수를 입력합니다.
섬네일 이미지의 생성방식을 선택합니다. 크롭은 사용자 너비 * 사용자 높이로 이미지가 생성되며 비율유지로 하게되면 원본의 비율이 유지됩니다.
섬네일 이미지와 요소의 박스 사이에 여백을 생성하여 겔러리에 다른 분위기를 연출 할 수 있습니다.
섬네일 슬라이더를 사용하게 되면 불러오는 게시물의 첨부이미지가 2개 이상인 경우 해당 이미지를 슬라이더로 보여주게 됩니다.
4가지 종류의 카테고리 메뉴스타일을 제공합니다.
카테고리 메뉴의 정렬값을 지정합니다. flaot 값으로 지정이 됩니다. 오른쪽 정렬로 사용하실 경우 검색버튼을 아래에 위치해놓으시기 바랍니다.
검색박스를 표시할 위치를 정합니다. 상단/하단/모두표시/표시안함
검색박스의 정렬값을 지정합니다. flaot 값으로 지정이 됩니다. 카테고리 메뉴의 위치와 반대 위치로 지정하시는 것을 권장합니다.
겔러리표시효과가 나타나는 속도를 설정합니다.
카테고리 기능을 이용할 경우 카테고리 클릭시 구분효과를 선택합니다.
겔러리에 마우스를 올릴 때 변화하는 효과를 선택합니다.
스킨 - 목록형 : 목록형 스킨의 옵션값 입니다. 아래 이미지 참조.
블로그형-기본 : 블로그형-기본 스킨의 옵션값 입니다. 아래 이미지 참조.
블로그형-라운드 : 블로그형-라운드 스킨의 옵션값 입니다. 아래 이미지 참조.
블로그형-박스 : 블로그형-박스 스킨의 옵션값 입니다. 아래 이미지 참조.
겔러리형-기본 : 겔러리형-기본 스킨의 옵션값 입니다. 아래 이미지 참조.
겔러리형-Mosaic : 겔러리형-Mosaic 스킨의 옵션값 입니다. 아래 이미지 참조.
겔러리형-Masonry : 겔러리형-Masonry 스킨의 옵션값 입니다. 아래 이미지 참조.
여기서는 레이아웃을 구매하신 사용자를 위해 멤버스킨 메뉴를 제공하고 있습니다. 자세한 설치방법은 아래설명을 참조해주시기 바랍니다.
여기서는 라운드 데모페이지에 사용된 사용자 코드 중에서 위젯코드로 사용된 값들을 알려드립니다.
데모페이지에 사용된 srl은 데모페이지 사이트 기준의 srl이 적용되어 있습니다. 데모페이지의 코드를 적용 시 구매자의 웹사이트 상황에 맞는 srl을 입력해 주시기 바랍니다. srl 확인하기
폴로에서 제공되는 폼을 사용하는 방법입니다. 실제로 메일을 전송할 수 있는 폴로폼은 수신자 이메일 설정 등 간단한 작업으로 이용할 수 있습니다.