테마 소개

리듬 원페이지 XE 레이아웃 테마입니다. 본 테마는 BESTLOOKER팀의 HTML 테마를 XE용으로 변환한 레이아웃 입니다. 본 레이아웃은 테마포레스트 및 BESTLOOKER 측과의 협의 하에 제작이 되었습니다. 미니멀한 디자인을 컨셉으로 21종의 메인슬라이더 스타일과 17종의 섹션디자인, 4종의 데모페이지를 사용하실 수 있습니다. 비즈니스라이센스와 일반라이센스 2가지로 제공이 되고 있습니다.

레이아웃 소개

레이아웃 설치

패키지 구성 및 설치경로

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

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

기본세팅 가이드

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

레이아웃 생성

여기서는 설치된 레이아웃 모듈을 사용하여 레이아웃을 생성하는 방법을 알아봅니다. 원페이지에 사용될 하나의 레이아웃을 만들어 줍니다. 한 페이지에 하나의 레이아웃을 만들어 주시면 됩니다.

  1. 일반적인 레이아웃 생성과는 생성방법이 다릅니다. 레이아웃 부분을 정독하여 주시기 바랍니다.
    1. (왼쪽 관리자메뉴) 고급 클릭
    2. 설치된 레이아웃 클릭
    3. (설치된 레이아웃 목록) 해당 레이아웃 테마 클릭
    4. 추가 클릭
    5. 제목에"리듬 원페이지" 입력 후 추가 클릭
    설치된 레이아웃
    설치된 레이아웃 추가버튼
    설치된 레이아웃 추가버튼
  2. 메인 레이아웃을 생성하셨으면 이제 설정값을 만져줄 차례입니다. 생성하신 레이아웃 오른쪽에 "설정" 버튼을 클릭합니다.
    레이아웃 설정버튼
  3. 레이아웃 설정 페이지에서 아래쪽에 "사용자정의" 부분을 찾습니다.
    1. "기본설정"탭 클릭
    2. "레이아웃 형태"에서 전체너비을 선택합니다.
    레이아웃 타입선택
  4. 계속해서 레이아웃 설정 페이지 가장 아래에 위치한 '메뉴'에서 전에 만든 사이트맵을 레이아웃에 연결시켜주어야 합니다. 글로벌 네비게이션 메뉴와 하단메뉴에 각각 위에서 만든 사이트맵을 선택하고 '저장' 버튼을 눌러 변경사항을 저장합니다.
    레이아웃 메뉴연결
레이아웃 생성하실 때 짧은 팁

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

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

레이아웃 적용하기

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

  1. 먼저 원페이지 레이아웃이 적용될 페이지를 만들어 줍니다.
    1. 사이트 메뉴 사이트맵 추가 클릭
    2. 해당 사이트맵의 메뉴 클릭
    3. 메뉴추가 클릭
    4. 외부페이지 클릭
    5. 메뉴명 및 메뉴 ID 입력
    6. 확인 클릭
    7. 생성된 메뉴 클릭
    8. 디자인 클릭
    9. 레이아웃 클릭
    10. 사이트 디자인 사용에서 OFF로 바꿈
    11. 생성해 둔 원페이지 레이아웃 클릭
    12. 저장버튼 클릭
    레이아웃 메뉴연결
  2. 사이트의 홈페이지를 설정해줍니다. 위에서 메인 레이아웃을 적용했던 메뉴를 클릭하고 '홈페이지로 사용하기'를 클릭하여 웹사이트의 홈페이지로 지정합니다.
    홈페이지 지정
  3. 웹상에서 메인 레이아웃이 제대로 적용되었는지 확인합니다. 아직 원페이지의 섹션을 설정해준 상태가 아니므로 빈페이지가 나올 수 있습니다. 아래 관리자페이지 상세설정에 따라서 원하는 섹션을 추가해 주시기 바랍니다.

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


레이아웃 세부설정 가이드

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

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

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

기본설정

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

기본설정 항목보기

레이아웃설정 기본설정

설정값 세팅 가이드

레이아웃 형태

레이아웃 형태는 리듬 원페이지레이아웃으로 제작되는 페이지들의 기본적인 레이아웃의 너비 및 모양을 결정하게 됩니다. 슬라이더의 너비, 메뉴너비, 메뉴상단 너비 등은 레이아웃 형태와 별개로 작동합니다.

  1. 전체너비 : 사이트의 너비를 전체너비로 사용합니다.
  2. 컨텐트 너비 : 사이트의 너비를 컨텐트 너비로 사용합니다. 필요에 따라 선택하시면 됩니다.
홈페이지 URL

로고 클릭시 이동되는 주소를 입력해 주세요 ( 반드시 주소 앞에 HTTP://를 입력해주시기 바랍니다. )

사이트 이름

웹사이트 전반에서 사용되는 사이트의 이름을 입력합니다. 사이트의 대표명/회사명/조직명을 적어주시면 됩니다.

사이트 슬로건

웹사이트 전반에서 사용되는 사이트의 슬로건을 입력합니다. 조직의 비전,목표 등 텍스트를 넣을 수 있습니다. 50~100 바이트 정도 ( 한글 20자 )로 입력해주시면 됩니다.

상단로로 이미지 - 흰색

레이아웃의 상단에 표시될 로고이미지를 입력하세요.헤더부 검정색을 선택할 경우 흰색 로고가 자동으로 보여집니다. 236px x 54px 너비에 최적화 되어 있습니다.

상단 로고이미지 _ 검정색

레이아웃의 상단에 표시될 로고이미지를 입력하세요.헤더부 흰색을 선택할 경우 검정색 로고가 자동으로 보여집니다. 236px x 54px 너비에 최적화 되어 있습니다.

상단 로고이미지 _ 포토

레이아웃의 상단에 표시될 로고이미지를 입력하세요.메뉴너비를 전체화면으로 하면 로고가 자동으로 보여집니다. 304px x 108px 너비에 최적화 되어 있습니다.

하단 로고이미지

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


헤더 설정

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

헤더 설정항목 보기

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

설정값 세팅 가이드

메뉴종류

메뉴의 종류를 선택합니다. 전체너비 형식은 상단의 메뉴부가 전체화면 너비에 맞게 표시됩니다. 콘텐트 너비 형식은 1170px의 너비로 중앙정렬 되어 표시됩니다. 전체화면 형식은 메뉴 클릭 시 배경을 검정색으로 전체화면에 메뉴가 표시됩니다. 표시 안 함으로 선택할 경우 메뉴는 표시되지 않습니다. ( 공사중 페이지 혹은 404페이지 등에 사용합니다 )

  1. 전체넓이
  2. 컨텐트 너비
  3. 전체화면
헤더색상

검정 / 흰색 색상을 선택 가능하며 전체화면 형식의 메뉴종류에는 적용되지 않습니다. 슬라이더 배경의 이미지에 맞추어 색상을 선택하시는 것이 좋습니다.

  1. 검정색
  2. 흰색
헤더 배경투명

헤더부의 배경 투명도를 선택합니다. 투명을 선택할 경우 투명배경에 텍스트가 보여지게 되며 아래로 스크롤 할 경우 배경으로 선택된 색상이 보여지게 됩니다.

  1. 투명
  2. 색상
헤더부 사용자 메뉴

원페이지 레이아웃의 메뉴에 추가로 사용자 메뉴를 넣습니다. 다른 페이지로의 이동이 필요한 경우 텍스트 및 주소를 넣어주시면 됩니다.

헤더부 다국어

메인 메뉴 옆 다국어기능의 사용여부를 선택합니다.

  1. 표시함
  2. 표시안함
헤더부 로그인버튼

메인메뉴 옆 로그인 버튼의 사용여부를 선택합니다. 헤더색상을 흰색으로 설정하시기 바랍니다.

  1. 표시함
  2. 표시안함
헤더부 이메일

메인 메뉴 옆 이메일 정보의 표시여부를 선택합니다. Landing 페이지 등 메뉴가 없는 페이지에서 사용하기 권장합니다.

  1. 표시함
  2. 표시안함
헤더부 연락처

메인 메뉴 옆 이메일 정보의 표시여부를 선택합니다.Landing 페이지 등 메뉴가 없는 페이지에서 사용하기 권장합니다.

  1. 표시함
  2. 표시안함

원페이지 구성

원페이지 레이아웃의 구성을 할 수 있는 옵션입니다. 제공되는 전체섹션을 확인하시고 구성하기 원하는 섹션을 선택해 주시면 됩니다. 제공되는 섹션중에서 원하는 부분으로 구성하여 나만의 원페이지를 만들어 보세요.

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

설정값 세팅 가이드

1~10번까지의 섹션을 구성할 수 있습니다. 각 순서별로 원하는 옵션을 선택하여 전체 원페이지를 만들게 됩니다.

첫번째 섹션

14가지 종류의 섹션이 제공됩니다. 회사소개, 제품소개, 프로모션 등 다양한 주제로 구성되어 있습니다. 원하는 섹션을 선택하시면 첫번째 섹션으로 보여집니다. 메뉴명은 기본으로 제공이 되는 메뉴명이 있습니다. ex) 회사소개 섹션->회사소개 메뉴명(상단에 표시됨)

섹션 메뉴명

기본으로 보여지는 메뉴가 아닌 사용자 메뉴명을 사용할 수 있습니다.

섹션 메뉴명만 표기

섹션은 표시되지 않고 메뉴명만 표시가 됩니다. 이는 외부페이지의 html 파일로 원페이지를 구성하실 때 사용하시면 됩니다.


원페이지 섹션별 srl

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

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

설정값 세팅 가이드

제공되는 섹션에는 게시판에서 데이터를 가지고 오는 경우도 있습니다. 이런 위젯을 사용하는 경우 연결되기 원하는 게시판의 srl을 입력해야 합니다. 현재 포트폴리오, 고객후기, 최근소식 섹션에는 srl을 연결해주는 작업이 필요합니다.

포트폴리오 srl

포트폴리오 섹션에 표시될 게시판의 srl을 입력합니다.

고객후기 srl

고객후기 섹션에 표시될 게시판의 srl을 입력합니다.

최근소식 srl

최근소식 섹션에 표시될 게시판의 srl을 입력합니다.


슬라이더 설정

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

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

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

설정값 세팅 가이드

전체 21종의 메인스타일이 제공됩니다. 자세한 스타일 미리보기는 이곳을 통해서 확인해 보시기 바랍니다.

슬라이더 사용여부 선택

페이지 상단에 사용되는 슬라이더를 선택해 주세요. http://codesignlab.cafe24.com/rt_intro 페이지를 통해서 슬라이더의 모양을 확인하시고 선택해 주시기 바랍니다. 컨텐츠 슬라이더와 메거진 슬라이더는 슬라이더 srl값을 필수로 넣어주셔야 합니다.

슬라이더 srl

컨텐트 슬라이더와 메거진 슬라이더를 사용할 경우 컨텐트를 출력하고자 하는 대상 게시판의 srl을 입력합니다.

슬라이더 이미지

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

배경 반투명

슬라이더 배경의 검정색 반투명 정도를 정합니다. 10,30,50,70,90 값만 입력 가능합니다. 값이 높을 수록 진해집니다.

슬라이더 큰 텍스트

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

슬라이더 작은 텍스트

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

슬라이더 버튼 1 텍스트

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

슬라이더 버튼 1 Url

버튼 클릭 시 이동할 주소를 입력해 주세요. 비디오 배경에 필요한 영상의 주소도 이곳에 입력을 합니다. 로컬비디오인 경우 비디오의 절대경로를 입력해 주시기 바랍니다. 'BG HTML5 Video' 슬라이더의 경우 비디오 파일이 'video.mp4' 형식으로 되어야 합니다. (반드시 'http://' 를 포함 , vimeo 혹은 youtube 주소가 들어가는 링크를 넣을 경우 자동으로 화면에서 영상이 보여지게 됩니다. )


연락처/소셜연락처

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

레이아웃의 연락처/소셜연락처에 사용되는 이미지 세팅항목 보기

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

설정값 세팅 가이드

연락처/소셜연락처에 입력된 사용자의 입력값은 모든 사이트에서 공통적으로 사용됩니다. 메뉴상단의 아이콘 / 하단의 아이콘 / 사이드바의 버튼 등에 공통적으로 적용되는 값입니다.

구글주소

사이트에서 사용될 구글 연결주소를 입력합니다.

페이스북 주소

사이트 전체에서 사용되는 페이스북 주소를 입력합니다.

트위터 주소

사이트에서 사용될 트위터 주소를 입력합니다.

핀터레스트

사이트에서 사용될 핀터레스트 주소를 입력합니다.

이메일 주소

사이트에서 사용될 이메일 주소를 입력합니다.

전화번호

사이트에서 사용될 대표 전화번호를 입력합니다.

팩스번호

사이트에서 사용될 대표 팩스번호를 입력합니다.


게시판 srl 넘버 확인방법

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

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

추가페이지 세팅

여기서는 리듬 원페이지 레이아웃에서 제공되는 추가 페이지의 경로를 알려드립니다.


문서스킨 사용하기

여기서는 리듬 원페이지 레이아웃에서 제공하는 리듬 원페이지 전용 데모 디자인 페이지4개에 대해서 설명을 해드립니다. 리듬 원페이지에서는 아래와 같이 문서파일을 제공하고 있습니다.

메인스타일 문서
  1. 원페이지 - 작가,이미지 포트폴리오 html 페이지 : layouts/layout_rhythm/htmls/demo/_one_index2.html
  2. 원페이지 - 모바일 게임, 게임 html 페이지 : layouts/layout_rhythm/htmls/demo/_one_index3.html
  3. 원페이지 - 금융,파이낸셜 html 페이지 : layouts/layout_rhythm/htmls/demo/_one_index4.html
  4. 원페이지 - 스마트폰, 기기 html 페이지 : layouts/layout_rhythm/htmls/demo/_one_index5.html

외부페이지 연결하기

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

  1. 사이트 제작/편집사이트 메뉴 편집해당 메인페이지 메뉴선택 → 상세설정을 클릭합니다. 이때, 해당 메인페이지의 메뉴타입은 반드시 외부페이지로 되어 있어야만 합니다.
    메뉴 상세 설정
  2. 페이지 관리 창이 뜨면 하단에 외부 문서 위치 항목이 있습니다. 여기에 다음과 같이 입력해줍니다.
    layouts/layout_rhythm/htmls/demo/_one_index5.html
    프리셋 외부페이지 경로입력
  3. '저장'을 클릭하여 변경사항을 저장합니다.
  4. 레이아웃 설정원페이지 구성탭으로 이동합니다.
  5. 외부페이지에 연결된 섹션과 원페이지 구성에 나와있는 섹션을 동일하게 맞춰 줍니다. 작가페이지 의 관리자 페이지는 아래와 같이 세팅되어 있습니다. (작가 원페이지는 외부파일로 연결되어 있습니다. )
    프리셋 외부페이지 경로입력
  6. 웹사이트 홈페이지에 접속하여 적용되었는지 확인합니다.