테마 소개

CREATIVE XE 레이아웃 테마입니다. 스튜디오, 개인포트폴리오, 작가사이트 등을 위한 CREATIVE 웹사이트를 쉽게 제작할 수 있습니다. 다양한 CREATIVE 레이아웃과 함께 간단한 방법으로 웹사이트를 만들어 보세요. 비즈니스라이센스와 일반라이센스 2가지로 제공이 되고 있습니다.

레이아웃 소개

레이아웃 설치

*CREATIVE 테마디자인은 polo 테마 시리즈 입니다. 많은 테마요소를 공유하고 있기 때문에 데모페이지, 미리보기 화면 등은 polo의 테마디자인과 함께 사용하고 있습니다.

패키지 구성 및 설치경로

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

POLO_4_CREATIVE_BIZ_PACKAGE_by_CODESIGNMALL 혹은 POLO_4_CREATIVE_PACKAGE_by_CODESIGNMALL 폴더
테마와 예제페이지에 대한 html파일을 포함하고 있습니다. html 파일은 메인페이지/서브페이지/개발코드가 포함됩니다. XE설치경로의 root 디렉토리에 업로드하여 주십시요.
POLO_공용_PACKAGE_by_CODESIGNMALL 폴더
POLO_공용_PACKAGE_by_CODESIGNMALL 파일에는 공용 파일들이 포함되어 있습니다. layouts를 제외한 폴더는 root 디렉토리에 업로드 해주시기 바랍니다. layouts/layout_polo의 파일들은 layouts/layout_polo_creative 폴더에 업로드 하시기 바랍니다. 덮어씌우기 하시면 됩니다.
modules 폴더
게시판스킨 6종과 멤버스킨,커뮤니케이션 스킨을 포함하고 있습니다. ( 비즈니스 라이센스 전용) XE설치경로의 root 디렉토리에 업로드하여 주십시요.
widgets 폴더
폴더 하위에 CREATIVE 레이아웃 테마 전용 위젯을 포함하고 있습니다. ( polo_conent 위젯 )XE설치경로의 root 디렉토리에 업로드하여 주십시요.
widgetstyle 폴더
폴더 하위에 CREATIVE 레이아웃 테마 전용 위젯스타일 스킨을 포함하고 있습니다. 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. 해당 레이아웃 페이지에서 원하시는 레이아웃 오른쪽의 설정버튼을 클릭합니다.
설치된 레이아웃
레이아웃 설정버튼

기본설정

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

기본설정 항목보기

레이아웃설정 기본설정

설정값 세팅 가이드

레이아웃 모델

테마전체 스타일을 박스형/박스심플형/와이드형 중 선택합니다. 박스형/박스심플형일 경우 헤더 슬라이더를 포함한 모든 컨텐츠가 박스안에 포함됩니다.

  1. 와이드형 : 사이트의 너비를 전체너비로 사용합니다.
  2. 박스형 : 좌우 여백을 두고 컨테이너 너비에 컨텐츠를 모두 표시합니다.
  3. 박스심플형 : 박스형에서 상하 여백을 추가합니다.
레이아웃 형태 및 사이드바

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

  1. 전체너비 : 페이지의 컨텐츠가 전체너비로 표시됩니다.
  2. 컨텐트 너비 : 컨테이너 너비만큼 컨텐츠가 표시됩니다.
  3. 컨텐트 너비 + 사이드바 : 컨텐트 너비에 사이드바가 같이 표시됩니다.
레이아웃 배경

레이아웃의 배경을 선택할 수 있습니다. 사용자 색상값을 지정하시면 아래에 색상코드를 입력하시기 바랍니다. 배경이미지를 선택하시면 아래의 배경 사용자 이미지를 선택하시기 바랍니다. 사용자 색상값과 사용자 이미지를 이용하기 위해서는 각 항목에 맞게 선택을 한 후 아래항목에 값을 넣어주시기 바랍니다.

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

레이아웃 배경으로 지정될 색상값을 입력해 주세요. ex) #353535, white, red 등 css 값. 사용자 값 사용시 레이아웃배경의 설정값은 "사용자 색상값"으로 선택해주시기 바랍니다.

레이아웃 배경 사용자 이미지

레이아웃 배경으로 지정될 이미지를 선택하세요. 이미지는 중앙정렬되어 반복됩니다. 패턴이미지에 최적화 되어 있습니다.

테마스타일 적용(제품에 따라 없을 수 있음)

각 테마별 고유의 css를 불러옵니다. 옵션을 선택하여 작업을 하시면 데모페이지에서 제공하는 형태의 스타일을 적용할 수 있습니다. 데모페이지의 베이커리 웹사이트와 동일하게 만들기 원할 경우 2.베이커리 를 선택 하시기 바랍니다.

레이아웃 색상

테마의 기본 컬러셋을 선택합니다. 사용자색상 선택 시 css/color-variations/custom.css 파일을 수정하시기 바랍니다.

사이트 이름

사이트에서 사용 될 사이트 이름을 입력합니다.

홈 페이지 URL

로고를 클릭 시에 이동할 홈 페이지 URL을 입력해 주세요. ( 반드시 주소앞에 http:// 를 입력해주시기 바랍니다. )

상단 로고이미지 - 흰색

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

상단 로고이미지 _ 검정색

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

로고 대체 텍스트

로고이미지를 사용하지 않고 텍스트를 사용할 경우 표시되는 내용입니다.

하단 로고이미지 - 흰색

레이아웃의 하단에 표시될 로고이미지를 입력하세요. 푸터의 배경이 검정계열인 경우 표시됩니다. 128px x 90px 너비에 최적화 되어 있습니다.

하단 로고이미지 - 검정색

레이아웃의 하단에 표시될 로고이미지를 입력하세요. 푸터의 배경이 밝은계열인 경우 표시됩니다. 128px x 60px 너비에 최적화 되어 있습니다.

하단 로고 대체 텍스트

로고이미지를 사용하지 않고 텍스트를 사용할 경우 표시되는 내용입니다.


폰트설정

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

폰트설정 항목보기

레이아웃설정 기본설정

설정값 세팅 가이드

한글폰트

전체 사이트의 한글폰트를 지정합니다.

작은폰트 스타일

폴로테마는 기본 14px의 폰트사이즈를 사용합니다. 이를 기본 12px폰트로 지정하고 몇몇 H테그 및 큰 글씨 글자에 대해서 폰트사이즈를 줄입니다. 헤더 및 기본 텍스트의 자간을 -1px을 적용합니다. 커뮤니티, 메거진 및 한글위주의 사이트에는 적용을 권해드립니다.

영문폰트 - 상세스타일

기본 제공되는 폰트스타일과 더불어 상세한 폰트지정이 되어 있는 css를 적용합니다. 다음의 사이트 데모에서 적용되어 있습니다. 1.에이전시 3~4 / 2.비즈니스 3 / 3.기업 7~8 / 4.Creative 1,2,4,5,6 / 5.포트폴리오 에이전시,8,9

영문폰트 - Cedarville/Cursive

영문폰트 중 Cedarville/Cursive 폰트를 불러옵니다. 참조 - https://fonts.google.com/specimen/Cedarville+Cursive

영문폰트 - Pacifico

영문폰트 중 Pacifico 폰트를 불러옵니다. 참조 - https://fonts.google.com/specimen/Pacifico

영문폰트 - Nothing You Could Do

영문폰트 중 Nothing You Could Do 폰트를 불러옵니다. 참조 - https://fonts.google.com/specimen/Nothing+You+Could+Do

영문폰트 - Damion

영문폰트 중 Damion 폰트를 불러옵니다. 참조 - https://fonts.google.com/specimen/Damion

영문폰트 - GreatVibes

영문폰트 중 GreatVibes 폰트를 불러옵니다. 참조 - https://fonts.google.com/specimen/Great+Vibes

영문폰트 - PT Serif

영문폰트 중 PT Serif 폰트를 불러옵니다. 참조 - https://fonts.google.com/specimen/PT+Serif

영문폰트 - Roboto

영문폰트 중 Roboto 폰트를 불러옵니다. 참조 - https://fonts.google.com/specimen/Roboto

영문폰트 - Josefin Sans

영문폰트 중 Josefin Sans 폰트를 불러옵니다. 참조 - https://fonts.google.com/specimen/Josefin+Sans

영문폰트 - Herr Von Muellerhoff

영문폰트 중 Herr Von Muellerhoff 폰트를 불러옵니다. 참조 - https://fonts.google.com/specimen/Herr+Von+Muellerhoff

영문폰트 - 추가스타일

기본 제공되는 폰트스타일과 더불어 추가 폰트스타일이 지정이 되어 있는 css를 적용합니다. 다음의 데모를 사용할 때 사용하시기 바랍니다. 에이전시 3~4 / 비즈니스 3 / 기업 7~8 / Creative 1,2,4,5,6 / 포트폴리오 에이전시,8,9

영문폰트 테마설정

테마별로 필요한 영문폰트를 알려드립니다. 데모에서 제공하는 폰트스타일을 확인하여 각 스타일에 맞게 영문폰트를 추가하시면 됩니다.


헤더설정

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

헤더설정 항목보기

레이아웃설정 기본설정

설정값 세팅 가이드

메뉴종류

메뉴의 종류를 선택합니다. 전체너비 형식은 상단의 메뉴부가 전체화면 너비에 맞게 표시됩니다. 콘텐트 너비 형식은 1170px의 너비로 중앙정렬 되어 표시됩니다. 전체화면 형식은 메뉴 클릭 시 배경을 검정색으로 전체화면에 메뉴가 표시됩니다. 표시 안 함으로 선택할 경우 메뉴는 표시되지 않습니다.*모던메뉴는 배경색상값을 투명으로 하면 보이지 않습니다. *사이드패널/전체화면/원버튼 메뉴스타일은 메뉴너비는 전체넓이,헤더 배경투명은 투명으로 지정 후 사용해 주시기 바랍니다.

  1. 클래식
  2. 모던
  3. 로고중앙
  4. 로고우측
  5. 미니멀
  6. 사이드패널-고정
  7. 사이드패널-가변
  8. 전체화면
  9. 원버튼-상단펼침
  10. 표시안함
메뉴 위치

사이드메뉴 이용 시 메뉴의 위치를 지정할 수 있습니다.

메뉴 너비

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

헤더 배경투명

헤더부의 배경 투명도를 선택합니다. 투명을 선택할 경우 투명배경에 텍스트가 보여지게 되며 아래로 스크롤 할 경우 배경으로 선택된 색상이 보여지게 됩니다. 색상을 선택하시면 검정,희색 중에서 색상을 선택하실 수 있습니다.

헤더색상

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

스크롤-헤더표시

마우스로 화면을 스크롤 할 경우 상단 헤더의 표시여부를 선택합니다. 상단고정으로 선택 할 경우 슬라이더 위 (슬라이더가 있는 경우) 나 컨텐츠 위에 고정되어 보여지게 됩니다. 따라서 스크롤 시 아래로 따라오지 않습니다. (fixed) 상대위치 일 경우 헤더부분의 위치가 슬라이더 혹은 컨텐트 등의 위치에 따라서 배치되게 됩니다. 헤더상단부를 사용할 경우 상대위치로 정해주시기 바랍니다.

슬라이더-헤더위치

슬라이더아래 헤더를 위치하게 합니다. 헤더의 스타일이 클래식,모던,미니형식일 때 적용됩니다. 사이드바 형식은 기존과 동일하게 표시 됩니다.

헤더부 검색버튼

메인 메뉴 옆 검색버튼의 사용여부를 선택합니다.

헤더부 스크롤 위치바( 폴로스킨 전용 )

게시판 글읽기 화면에서 스크롤을 하면서 글을 읽을 때 헤더부에 현재 화면의 위치가 프로그래스 바를 통해서 표시됩니다. 미리보기


헤더상단부 설정

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

헤더상단부 설정 항목보기

레이아웃설정 기본설정

설정값 세팅 가이드

헤더 상단섹션

메뉴 상단의 다목적 공간을 추가할 수 있습니다. 기업 및 소상공인 형식에 맞게 개발되었으며 용도에 맞게 추가하시면 됩니다.

  1. 표시함
  2. 표시안함
헤더 상단섹션 배경

투명은 색상이 표시되지 않으며 "색상"을 선택할 경우 아래의 선택색상이 표시됩니다.

  1. 투명
  2. 색상
헤더 상단섹션 색상

검정 / 흰색 색상을 선택 가능하며 전체화면 형식의 메뉴종류에는 적용되지 않습니다. 일반적으로 헤더 색상과 맞추어 주게 됩니다.

  1. 흰색
  2. 검정색
  3. 색상
헤더상단바 너비

헤더 상단섹션의 넓이를 지정합니다.

  1. 컨텐츠너비
  2. 전체너비
헤더상단바 우측 소셜바로가기

상단섹션 우측 소셜바로가기 메뉴의 사용여부를 선택합니다.

헤더상단바 다국어

상단섹션 좌측 다국어기능의 사용여부를 선택합니다.

헤더상단바 로그인버튼

상단섹션 좌측 로그인 버튼의 사용여부를 선택합니다. 헤더색상을 흰색으로 설정하시기 바랍니다. 로그인페이지 형식은 로그인 페이지로 이동하여 로그인 및 회원가입을 하는 것이며 모달형식은 현재 페이지에서 바로 로그인을 하게 합니다. 로그인 페이지 형식으로 사용하실 경우 폴로전용 멤버스킨(비즈니스라이센스전용)을 이용하시기 바랍니다.

헤더상단바 뉴스표시여부

상단섹션 좌측 헤더상단의 뉴스표시위젯 표시여부를 선택합니다.

헤더상단바 뉴스표시 게시판

헤더상단의 뉴스표시위젯에 표시 될 게시판의 srl을 선택합니다.

헤더상단 바로가기 텍스트

헤더상단섹션 좌측에 표시되는 바로 가기 메뉴의 텍스트를 입력합니다.


슬라이더 설정

여기서는 레이아웃 설정 > 슬라이더 설정탭의 설정방법에 대해 알아봅니다. 직접 수정은 htmls_slider/ 폴더에 각 슬라이더별 html 파일을 수정해 주시기 바랍니다.

슬라이더 설정 항목보기

레이아웃설정 기본설정

설정값 세팅 가이드

슬라이더 종류 선택 (제품에 따라 표시되는 슬라이더가 다릅니다.)

페이지 상단에 사용되는 슬라이더를 선택해 주세요. 데모페이지를 통해서 슬라이더의 모양을 확인하시고 선택해 주시기 바랍니다. *TEXT-ROTATION 슬라이더는 단어 사이에 , 를 넣게되면 이를 기준으로 글자효과가 발생됩니다. 전체 슬라이더 미리보기는 http://codesignlab.cafe24.com/polo_main를 통해서 확인하시기 바랍니다.

슬라이더 배경기본색상

다국어 텍스트 설정 배경색상이 필요한 슬라이더는 기본 배경색상을 지정해 줍니다.

슬라이더 표시로고

슬라이더 타이틀 상단등에 사용되는 작은 크기의 로고를 선택합니다. 32x32사이즈로 데모에서 표시되고 있습니다. http://codesignlab.cafe24.com/polo_home_wine

슬라이더 표시날짜(제품에 따라 표시되지 않을 수 있습니다.)

이벤트 등 날자가 표시되는 부분에 들어가는 날짜를 정합니다. *중요!“2016/09/19 12:34:56”일 형식으로 입력하시기 바랍니다.

슬라이더 srl

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

슬라이더 이미지

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

슬라이더 큰 텍스트

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

슬라이더 큰 텍스트 이미지

제목 혹은 큰 텍스트를 대신할 이미지를 선택합니다. PHOTOGRAPHY SPLIT 슬라이더에서는 오른쪽 이미지를 지정합니다.

슬라이더 작은 텍스트

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

슬라이더 설명텍스트

설명문이 필요한 슬라이더는 큰제목,작은제목 아래에 슬라이더 설명텍스트가 표시 됩니다.

슬라이더 버튼1 텍스트

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

슬라이더 버튼1 Url

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

슬라이더 버튼2 텍스트

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

슬라이더 버튼2 Url

버튼 클릭 시 이동할 주소를 입력해 주세요. (반드시 'http://' 를 포함 , vimeo 혹은 youtube 주소가 들어가는 링크를 넣을 경우 자동으로 화면에서 영상이 보여지게 됩니다. )


슬라이더 유튜브 주소

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

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

레이아웃설정 기본설정

설정값 세팅 가이드

주소

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


서브페이지 - 상단

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

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

레이아웃설정 기본설정

설정값 세팅 가이드

서브 타이틀박스

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

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

서브타이틀박스에 이전/다음메뉴 이동버튼의 표시여부를 선택합니다. 같은 층에 위치한 메뉴에 한하여 이동하게 됩니다.

  1. 표시함
  2. 표시안함
서브 타이틀박스 정렬

제목 및 메뉴부분에 대한 정렬방식을 지정합니다.

  1. 왼쪽정렬
  2. 중앙정렬
  3. 오른쪽정렬
서브 타이틀박스 배경

서브페이지의 컨텐트와 메뉴부분 사이에 제목박스를 표시합니다. 해당 메뉴명 / 상위메뉴명 / 현위치 네비게이션이 표시됩니다. 이미지 배경을 선택할 경우 이미지의 색상에 따라서 텍스트 색상을 지정해줘야 합니다. "서브 타이틀박스 색상"선택에서 배경스타일에 맞는 텍스트색상을 선택하세요.

  1. 색상배경 : 지정된 혹은 사용자 배경색상을 단색으로 표시합니다.
  2. 이미지배경 : 사용자자 지정이미지를 배경으로 사용합니다.
  3. 동영상배경 : 유튜브 동영상을 배경으로 사용합니다.
서브 타이틀박스 색상

서브페이지 제목박스의 컬러셋을 선택합니다.

서브 타이틀박스 사용자 지정색상

서브 타이틀박스 색상을 사용자지정색상으로 사용하실 경우 값을 입력해 주시기 바랍니다. 예) #353535, white

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

서브페이지의 제목박스에 표시되는 이미지를 선택합니다. 중앙정렬로 반복되므로 작은 패턴을 선택할 경우 패턴형식으로 보여지게 됩니다.

서브 타이틀박스 동영상

유튜브 동영상이 배경에 표시됩니다. 영상배경을 사용할 경우 상단 메뉴부는 투명배경을 사용하시면 헤더부까지 영상이 표시됩니다.


서브페이지 - 사이드바

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

서브페이지 - 사이드바 항목보기

레이아웃설정 기본설정

설정값 세팅 가이드

컨텐트 사이드바 위치

컨텐트 사이드바의 위치를 정합니다. 왼쪽/오른쪽 위치를 지정해 줄 수 있습니다.

  1. 왼쪽
  2. 오른쪽
컨텐트 사이드바 형태

컨텐트바와 함께 나오는 사이드바의 형태를 선택할 수 있습니다.

  1. 클래식
  2. 모던
사이드바 - 검색창

사이드바 상단의 검색창 사용여부를 선택합니다.

사이드바 - 메뉴

사이드바의 메뉴표시 사용여부를 선택합니다. 2차메뉴 및 3차메뉴가 표시되며 2차메뉴가 없는 경우 표시되지 않습니다.

사이드바 - 카테고리

사이드바의 카테고리 위젯 사용여부를 선택합니다. 해당 모듈의 카테고리가 없을 경우 표시되지 않습니다.

사이드바 - 태그표시

사이드바의 태그기능 사용여부를 선택합니다.

사이드바 - 태그표시 제목

사이드바의 태그기능 제목을 입력합니다.

사이드바 - 탭 위젯

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

1-1.사이드바 위젯 탭제목1

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

┗ 사이드바 위젯 srl1

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

사이드바 위젯 스킨1

사이드바의 글스킨의 종류를 선택합니다. 기본형태의 스타일과 항목으로 보여지게 됩니다. 폴로위젯 페이지에서 전체 위젯을 확인할 수 있습니다. 코드수정 및 사용을 위해서는 htmls/polo_widgets.html 파일을 확인하시기 바랍니다.

  1. 목록형 : 글 목록을 표시합니다.
  2. 웹진형 : 섬네일 이미지와 제목, 내용, 작성일 등의 정보를 표시합니다.
  3. 겔러리형 : 이미지가 표시되며 마우스 액션이 있을 경우 제목 등의 상세정보가 표시됩니다.


푸터/소셜연락처

여기서는 레이아웃 설정 > 푸터/소셜연락처탭의 설정방법에 대해 알아봅니다.

푸터/소셜연락처 항목보기

레이아웃설정 기본설정

설정값 세팅 가이드

푸터 표시

레이아웃 하단의 푸터 표시여부를 선택합니다.

  1. 표시함
  2. 표시안함
푸터 스타일

레이아웃 하단의 푸터 스타일을 지정합니다. 기본형,미니멀,심플-한줄텍스트 등 3가지 형태의 푸터를 제공합니다.

  1. 기본형
  2. 미니멀
  3. 심플-한줄텍스트
푸터 배경

레이아웃 푸터의 배경색상을 지정합니다. 색상배경으로 선택 시 테마색상에 맞추어 색상을 표시합니다.

  1. 검정색
  2. 희색
  3. 색상배경
푸터 슬로건

푸터에 사용 될 설명 및 슬로건을 지정합니다.

이메일 주소

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

전화번호

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

팩스번호

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

주소

사이트(푸터)에서 사용 될 대표 주소를 입력합니다.

기타정보

푸터에서 사용 될 기타 정보를 입력합니다. 대표자/사업자번호 등 입력할 수 있습니다.

Copyright

푸터에서 사용 될 Copyright 정보를 입력합니다.

구글주소

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

페이스북 주소

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

트위터 주소

사이트 전체에서 사용되는 트위터 주소를 입력합니다.

핀터레스트 주소

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

유튜브 주소

사이트 전체에서 사용되는 유튜브 주소를 입력합니다.


페이지로더

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

기본설정 항목보기

레이아웃설정 기본설정

설정값 세팅 가이드

페이지로더 사용

페이지 전환효과의 사용여부를 선택합니다. 페이지를 불러들이는 동안 페이지로딩아이콘이 표시되며 페이지 읽기 완료 후 부드럽게 화면이 표시됩니다.

  1. 사용함
  2. 사용안함
화면시작효과

페이지를 모두 불러들이고 화면에 표시할 때 사용되는 효과

  1. fadeIn
  2. fadeInDown
  3. fadeInUp
화면마침효과

다른 페이지로 이동할 때 사용되는 효과

  1. fadeIn
  2. fadeInDown
  3. fadeInUp
로더 아이콘

페이지를 읽는 중 표시되는 아이콘. 전체 11종류의 로더 아이콘을 제공합니다.

화면시작 시간

로딩 후 페이지 표시 전환효과 속도를 선택합니다. 기본 1000

화면마침 시간

다른 페이지로 이동 시 전환효과 속도를 선택합니다. 기본 500


서브메뉴 형태

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

레이아웃의 서브메뉴 형태에 사용되는 이미지 세팅항목 보기

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

설정값 세팅 가이드

상단의 메뉴표시를 3차메뉴까지 한번에 표시하고자 할때 옵션에 값을 넣어줍니다.

서브 메가메뉴

1차메뉴에 포함된 2차메뉴와 3차메뉴를 한번에 표시할 수 있게 합니다. 전체펼침 형식으로 표시하기 원하는 메뉴의 번호를 입력해 주시기 바랍니다. 예) 메인디자인/서브디자인/개발자코드/포트폴리오/게시판스킨 중에서 메인디자인을 전체펼침 하려면 '1'을 입력, 메인디자인과 서브디자인을 같이 설정하려면 '1,2' 를 입력하시면 됩니다. 입력하지 않을 경우 2차메뉴만 표시됩니다. 메가메뉴 형식으로 표시하기 위해서는 3차메뉴까지 메뉴가 만들어져 있어야 합니다.


게시판 srl 넘버 확인방법

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

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

추가페이지 세팅

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


문서스킨 사용하기 / 문서스킨은 POLO_공용_PACKAGE_by_CODESIGNMALL 압축파일에 포함되어 있습니다. 해당 파일을 layouts/layout_polo_creative 폴더에 넣어야 합니다.

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

메인스타일 문서

메인스타일은 테마에따라 제공되는 스타일이 차이가 있습니다. 데모페이지에 해당되는 메인 스타일만 제공이 됩니다.

  1. CREATIVE V1 html 페이지 경로 : layouts/layout_polo_creative/htmls/polo_home_creative.html
  2. CREATIVE V2 html 페이지 경로 : layouts/layout_polo_creative/htmls/polo_home_creative_v2.html
  3. CREATIVE V3 html 페이지 경로 : layouts/layout_polo_creative/htmls/polo_home_creative_v3.html
  4. CREATIVE V4 html 페이지 경로 : layouts/layout_polo_creative/htmls/polo_home_creative_v4.html
  5. CREATIVE V5 html 페이지 경로 : layouts/layout_polo_creative/htmls/polo_home_creative_v5.html
  6. CREATIVE V6 html 페이지 경로 : layouts/layout_polo_creative/htmls/polo_home_creative_v6.html
  7. AGENCY V1 html 페이지 경로 : layouts/layout_polo_creative/htmls/polo_home_agency.html
  8. AGENCY V2 html 페이지 경로 : layouts/layout_polo_creative/htmls/polo_home_agency_v2.html
  9. AGENCY V3 html 페이지 경로 : layouts/layout_polo_creative/htmls/polo_home_agency_v3.html
  10. AGENCY V4 html 페이지 경로 : layouts/layout_polo_creative/htmls/polo_home_agency_v4.html
  11. TEXT ROTATOR html 페이지 경로 : layouts/layout_polo_creative/htmls/polo_home_text_rotator.html
  12. TEXT ROTATOR DARK html 페이지 경로 : layouts/layout_polo_creative/htmls/polo_home_text_rotator_dark.html
  13. VIDEOBACKGROUND html 페이지 경로 : layouts/layout_polo_creative/htmls/polo_home_video_background.html
  14. VIDEOBACKGROUND DARK html 페이지 경로 : layouts/layout_polo_creative/htmls/polo_home_video_background_dark.html
  15. VIDEO CAROUSEL html 페이지 경로 : layouts/layout_polo_creative/htmls/polo_home_video_carousel.html
  16. IMAGE CAROUSEL html 페이지 경로 : layouts/layout_polo_creative/htmls/polo_home_image_carousel.html
  17. YOUTUBE BG html 페이지 경로 : layouts/layout_polo_creative/htmls/polo_home_video_youtube_background.html
서브스타일 문서 ( 비즈니스 전용 )
  1. 서브 - 회사소개1 html 페이지 : layouts/layout_polo_creative/htmls/polo_page_about_basic.html
  2. 서브 - 회사소개2 html 페이지 : layouts/layout_polo_creative/htmls/polo_page_about_extended.html
  3. 서브 - 프리랜서1 html 페이지 : layouts/layout_polo_creative/htmls/polo_page_about_me_basic.html
  4. 서브 - 프리랜서2 html 페이지 : layouts/layout_polo_creative/htmls/polo_page_about_me_extended.html
  5. 서브 - 컨텍트-클래식 html 페이지 : layouts/layout_polo_creative/htmls/polo_page_contact_classic.html
  6. 서브 - 컨텍트-지도1 html 페이지 : layouts/layout_polo_creative/htmls/polo_page_contact_advanced.html
  7. 서브 - 컨텍트-지도2 html 페이지 : layouts/layout_polo_creative/htmls/polo_page_contact_fullscreen_map.html
  8. 서브 - 컨텍트-지도3 html 페이지 : layouts/layout_polo_creative/htmls/polo_page_contact_fullwidth_map.html
  9. 서브 - 컨텍트-왼쪽사이드바 html 페이지 : layouts/layout_polo_creative/htmls/polo_page_contact_sidebar_left.html
  10. 서브 - 컨텍트-오른쪽사이드바 html 페이지 : layouts/layout_polo_creative/htmls/polo_page_contact_sidebar_right.html
  11. 서브 - 갤러리-5 Column html 페이지 : layouts/layout_polo_creative/htmls/polo_page_gallery_columns_5.html
  12. 서브 - 갤러리-4 Column html 페이지 : layouts/layout_polo_creative/htmls/polo_page_gallery_columns_4.html
  13. 서브 - 갤러리-3 Column html 페이지 : layouts/layout_polo_creative/htmls/polo_page_gallery_columns_3.html
  14. 서브 - 갤러리-2 Column html 페이지 : layouts/layout_polo_creative/htmls/polo_page_gallery_columns_2.html
  15. 서브 - 갤러리-왼쪽바 html 페이지 : layouts/layout_polo_creative/htmls/polo_page_gallery_sidebar_left.html
  16. 서브 - 갤러리-오른쪽바 html 페이지 : layouts/layout_polo_creative/htmls/polo_page_gallery_sidebar_right.html
  17. 서브 - 갤러리-전체너비 html 페이지 : layouts/layout_polo_creative/htmls/polo_page_gallery_fullwidth.html
  18. 서브 - 로그인-기본 html 페이지 : layouts/layout_polo_creative/htmls/polo_page_user_login_classic.html
  19. 서브 - 로그인-전체화면1 html 페이지 : layouts/layout_polo_creative/htmls/polo_page_user_login_creative.html
  20. 서브 - 로그인-전체화면2 html 페이지 : layouts/layout_polo_creative/htmls/polo_page_user_login_modern.html
  21. 서브 - 회원가입-기본 html 페이지 : layouts/layout_polo_creative/htmls/polo_page_user_register_classic.html
  22. 서브 - 회원가입-전체화면1 html 페이지 : layouts/layout_polo_creative/htmls/polo_page_user_register_creative.html
  23. 서브 - 회원가입-전체화면2 html 페이지 : layouts/layout_polo_creative/htmls/polo_page_user_register_modern.html
  24. 서브 - 서비스소개 html 페이지 : layouts/layout_polo_creative/htmls/polo_page_services.html
  25. 서브 - 팀원소개 html 페이지 : layouts/layout_polo_creative/htmls/polo_page_our_team.html
  26. 서브 - 협력사소개 html 페이지 : layouts/layout_polo_creative/htmls/polo_page_our_clients.html
  27. 서브 - 공사중 html 페이지 : layouts/layout_polo_creative/htmls/polo_page_maintenance.html
  28. 서브 - 페이지없음 html 페이지 : layouts/layout_polo_creative/htmls/polo_page_404.html
  29. 서브 - 페이지없음-이미지 html 페이지 : layouts/layout_polo_creative/htmls/polo_page_404_parallax.html
  30. 서브 - 서버에러 html 페이지 : layouts/layout_polo_creative/htmls/polo_page_500.html
  31. 서브 - 전체화면 html 페이지 : layouts/layout_polo_creative/htmls/polo_page_fullwidth.html
  32. 서브 - 전체화면-와이드 html 페이지 : layouts/layout_polo_creative/htmls/polo_page_fullwidth_wide.html
  33. 서브 - 사이드바-왼쪽 html 페이지 : layouts/layout_polo_creative/htmls/polo_page_sidebar_left.html
  34. 서브 - 사이드바-오른쪽 html 페이지 : layouts/layout_polo_creative/htmls/polo_page_sidebar_right.html
  35. 서브 - 사이드바-양쪽 html 페이지 : layouts/layout_polo_creative/htmls/polo_page_sidebar_both.html
  36. 서브 - 사이트맵 html 페이지 : layouts/layout_polo_creative/htmls/polo_page_site_map.html
  37. 서브 - FAQ html 페이지 : layouts/layout_polo_creative/htmls/polo_page_faq.html
개발자 문서 ( 비즈니스 전용 )
  1. 개발자문서 - 아코디언 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_according.html
  2. 개발자문서 - 경고창 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_alerts.html
  3. 개발자문서 - 애니메이션 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_animations.html
  4. 개발자문서 - 오디오/비디오 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_audio_video.html
  5. 개발자문서 - 인용문 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_blockquotes.html
  6. 개발자문서 - 페이지표시바 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_breadcrumbs.html
  7. 개발자문서 - 버튼 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_buttons.html
  8. 개발자문서 - 로고 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_client_logo.html
  9. 개발자문서 - 액션 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_calltoaction.html
  10. 개발자문서 - Carousel 슬라이더 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_carousel.html
  11. 개발자문서 - 코드섹션 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_code.html
  12. 개발자문서 - 타이머 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_countdown_timer.html
  13. 개발자문서 - 숫자변환 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_counters.html
  14. 개발자문서 - 텍스트 강조 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_dropcat_highlight.html
  15. 개발자문서 - 팀소개 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_employee.html
  16. 개발자문서 - 폼 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_forms.html
  17. 개발자문서 - 그리드시스탬 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_grid.html
  18. 개발자문서 - 아이콘박스 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_icon_boxes.html
  19. 개발자문서 - 아이콘리스트 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_icon_lists.html
  20. 개발자문서 - 이미지 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_labels_badgets.html
  21. 개발자문서 - 라벨/뱃지 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_labels_badgets.html
  22. 개발자문서 - 라이트박스 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_lightbox.html
  23. 개발자문서 - 리스트 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_lists.html
  24. 개발자문서 - 지도 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_maps.html
  25. 개발자문서 - 모달창 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_modal.html
  26. 개발자문서 - 네비게이션 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_navs.html
  27. 개발자문서 - 페이지번호 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_paginations.html
  28. 개발자문서 - 패널 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_panels.html
  29. 개발자문서 - 파이차트 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_pie_chart.html
  30. 개발자문서 - 툴팁 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_popover_tooltip.html
  31. 개발자문서 - 가격표 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_progress_bar.html
  32. 개발자문서 - 진행그래프 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_responsive_utilities.html
  33. 개발자문서 - 반응형코드 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_responsive_utilities.html
  34. 개발자문서 - 섹션 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_sections.html
  35. 개발자문서 - 분리자 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_separators.html
  36. 개발자문서 - 스크롤효과 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_smooth_scrolling.html
  37. 개발자문서 - 소셜아이콘 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_social_icons.html
  38. 개발자문서 - 테이블 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_tables.html
  39. 개발자문서 - 탭 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_tabs.html
  40. 개발자문서 - 이용후기 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_testimonial.html
  41. 개발자문서 - 타임라인 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_timeline.html
  42. 개발자문서 - 토글 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_toggles.html
  43. 개발자문서 - 타이포그라피 html 페이지 : layouts/layout_polo_creative/htmls/polo_shortcode_typography.html
CREATIVE 문서
  1. CREATIVE - 클래식 - 기본 html 페이지 : layouts/layout_polo_creative/htmls/polo_portfolio_classic.html
  2. CREATIVE - 클래식 - 제목없음 html 페이지 : layouts/layout_polo_creative/htmls/polo_portfolio_classic_no_title.html
  3. CREATIVE - 클래식 - 상세없음 html 페이지 : layouts/layout_polo_creative/htmls/polo_portfolio_classic_with_details.html
  4. CREATIVE - 클래식 - 간격없음 html 페이지 : layouts/layout_polo_creative/htmls/polo_portfolio_classic_no_spacing.html
  5. CREATIVE - 클래식 - 전체너비 html 페이지 : layouts/layout_polo_creative/htmls/polo_portfolio_classic_sidebar.html
  6. CREATIVE - Masonry - 기본 html 페이지 : layouts/layout_polo_creative/htmls/polo_portfolio_masonry.html
  7. CREATIVE - Masonry - 전체너비 html 페이지 : layouts/layout_polo_creative/htmls/polo_portfolio_masonry_fullwidth.html
  8. CREATIVE - Masonry - 상세표시 html 페이지 : layouts/layout_polo_creative/htmls/polo_portfolio_masonry_with_details.html
  9. CREATIVE - Masonry - 회색배경 html 페이지 : layouts/layout_polo_creative/htmls/polo_portfolio_masonry_grey_background.html
  10. CREATIVE - Masonry - 제목없음 html 페이지 : layouts/layout_polo_creative/htmls/polo_portfolio_masonry_no_page_title.html
  11. CREATIVE - 1 Column html 페이지 : layouts/layout_polo_creative/htmls/polo_portfolio_columns_1.html
  12. CREATIVE - 2 Column html 페이지 : layouts/layout_polo_creative/htmls/polo_portfolio_columns_2.html
  13. CREATIVE - 3 Column html 페이지 : layouts/layout_polo_creative/htmls/polo_portfolio_columns_3.html
  14. CREATIVE - 4 Column html 페이지 : layouts/layout_polo_creative/htmls/polo_portfolio_columns_4.html
  15. CREATIVE - 5 Column html 페이지 : layouts/layout_polo_creative/htmls/polo_portfolio_columns_5.html
  16. CREATIVE - 6 Column html 페이지 : layouts/layout_polo_creative/htmls/polo_portfolio_columns_6.html
  17. CREATIVE - 프리젠테이션 html 페이지 : layouts/layout_polo_creative/htmls/polo_portfolio_page_presentation.html
  18. CREATIVE - 프리젠테이션 - Parallax html 페이지 : layouts/layout_polo_creative/htmls/polo_portfolio_page_presentation_parallax.html
  19. CREATIVE - 갤러리 html 페이지 : layouts/layout_polo_creative/htmls/polo_portfolio_page_gallery.html
  20. CREATIVE - 비디오배경 html 페이지 : layouts/layout_polo_creative/htmls/polo_portfolio_page_video_background.html
  21. CREATIVE - 슬라이더 html 페이지 : layouts/layout_polo_creative/htmls/polo_portfolio_page_slider.html
  22. CREATIVE - 기본 html 페이지 : layouts/layout_polo_creative/htmls/polo_portfolio_page_basic.html
게시판스킨 경로 ( 비즈니스 전용 )
  1. 게시판 - 리스트 스킨위치 : modules/board/skins/polo/
  2. 게시판 - FAQ 스킨위치 : modules/board/skins/polo/
  3. 게시판 - 클래식 사이드바 스킨위치 : modules/board/skins/polo/
  4. 게시판 - 클래식 2 Column 스킨위치 : modules/board/skins/polo/
  5. 게시판 - 클래식 3 Column 스킨위치 : modules/board/skins/polo/
  6. 게시판 - 클래식 4 Column 스킨위치 : modules/board/skins/polo/
  7. 게시판 - 클래식 5 Column 스킨위치 : modules/board/skins/polo/
  8. 게시판 - 클래식 전체너비 스킨위치 : modules/board/skins/polo/
  9. 게시판 - 모던 사이드바 스킨위치 : modules/board/skins/polo/
  10. 게시판 - 모던 2 Column 스킨위치 : modules/board/skins/polo/
  11. 게시판 - 모던 3 Column 스킨위치 : modules/board/skins/polo/
  12. 게시판 - 모던 4 Column 스킨위치 : modules/board/skins/polo/
  13. 게시판 - 모던 전체너비 스킨위치 : modules/board/skins/polo/
  14. 게시판 - Masonry 사이드바 스킨위치 : modules/board/skins/polo/
  15. 게시판 - Masonry 2 Column 스킨위치 : modules/board/skins/polo/
  16. 게시판 - Masonry 3 Column 스킨위치 : modules/board/skins/polo/
  17. 게시판 - Masonry 4 Column 스킨위치 : modules/board/skins/polo/
  18. 게시판 - Masonry 전체너비 스킨위치 : modules/board/skins/polo/
  19. 게시판 - 타임라인 왼쪽 사이드바 스킨위치 : modules/board/skins/polo/
  20. 게시판 - 타임라인 오른쪽 사이드바 스킨위치 : modules/board/skins/polo/
  21. 게시판 - 타임라인 전체너비 스킨위치 : modules/board/skins/polo/
  22. 게시판 - 섬네일 왼쪽 사이드바 스킨위치 : modules/board/skins/polo/
  23. 게시판 - 섬네일 오른쪽 사이드바 스킨위치 : modules/board/skins/polo/
  24. 게시판 - 섬네일 양쪽 사이드바 스킨위치 : modules/board/skins/polo/
  25. 게시판 - 섬네일 전체너비 스킨위치 : modules/board/skins/polo/
  26. 게시판 - 섬네일 왼쪽 사이드바 모던 스킨위치 : modules/board/skins/polo/
  27. 게시판 - 섬네일 오른쪽 사이드 모던 스킨위치 : modules/board/skins/polo/
  28. 게시판 - 섬네일 전체너비 모던 스킨위치 : modules/board/skins/polo/

외부페이지 연결하기

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

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

게시판 스킨 세팅하기 - 비즈니스 전용

본 테마의 데모페이지에는 3가지 종류의 스킨이 적용되어 있습니다. 게시판 스킨은 모두 CREATIVE 레이아웃에 최적화 되어 있으며 타 레이아웃에서는 적용되지 않습니다.

게시판스킨 경로
  1. 게시판 - 리스트 스타일 모듈스킨 위치 : modules/board/skins/polo
  2. 게시판 - FAQ 스타일 모듈스킨 위치 : modules/board/skins/polo
  3. 게시판 - 클래식 스타일 모듈스킨 위치 : modules/board/skins/polo
  4. 게시판 - 모던 스타일 모듈스킨 위치 : modules/board/skins/polo
  5. 게시판 - Masonry 스타일 모듈스킨 위치 : modules/board/skins/polo
  6. 게시판 - 타임라인 스타일 모듈스킨 위치 : modules/board/skins/polo
  7. 게시판 - 섬네일 스타일 모듈스킨 위치 : modules/board/skins/polo
게시판 스킨값 세팅
  1. 관리자페이지고급설치된 모듈게시판 → 원하는 게시판의 설정버튼 클릭 → 기본 텝의 스킨선택박스에서 polo 게시판
    메뉴 상세 설정
    메뉴 상세 설정
  2. 상단의 스킨관리 탭을 선택하세요. 사용자 정의 부분에서 게시판 상단의 디자인 부분의 값들을 설정할 수 있습니다.
    프리셋 외부페이지 경로입력
    게시판 스킨선택

    리스트 / FAQ / 클래식 / 매거진 / Masonry / 타임라인 / 웹진 스타일 중에서 한가지를 선택할 수 있습니다.

    다단 설정

    게시판에 표시되는 단수를 설정할 수 있습니다. 클래식은 기본 1단으로 적용이 됩니다. 매거진 및 Masonry는 다단으로 선택이 가능합니다.

    제목 글자 수

    게시판에 표시되는 제목의 수를 입력합니다. 한글은 한글자에 2가 필요합니다.

    내용 글자 수

    게시판에 표시되는 내용의 수를 입력합니다. 한글은 한글자에 2가 필요합니다.

    카테고리 탭 스타일

    기본 / 배경투명 / 클래식 3가지 스타일을 제공합니다.

    리스트 스타일

    기본 / 홀수배경 / 박스 3가지 스타일을 제공합니다.

    FAQ 스타일

    기본 / 클린 / 색상 3가지 스타일을 제공합니다.

    FAQ 컨텐츠박스

    기본 / 보더박스 2가지 스타일을 제공합니다.

    FAQ 컨텐츠박스

    기본 / 보더둥글게 2가지 스타일을 제공합니다.

    FAQ 제목보더

    기본 / 사용 / 색상 제목줄 사용

    페이지 번호 스타일

    기본 / 스타일1 / 스타일2 / 스타일3

    섬네일 너비

    이미지가 표시되는 목록에서 섬네일 이미지의 너비를 설정합니다.

    섬네일 높이

    이미지가 표시되는 목록에서 섬네일 이미지의 높이를 설정합니다.

    이지지 여백

    이미지 겔러리 형식의 목록은 각 이미지사이의 간격을 설정하게 됩니다. 1~10사이의 값을 넣어주시기 바랍니다.

    웹진스타일

    웹진스타일 게시판은 2가지 종류의 스킨을 제공합니다.

  3. '저장'을 클릭하여 변경사항을 저장합니다.
  4. 웹사이트 홈페이지에 접속하여 적용되었는지 확인합니다.

멤버스킨 사용하기 .Biz

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

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


데모페이지 사용코드 - CM_polo 위젯 polo 스킨

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

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

  1. 제목 목록형 스킨

      
                            
                                	

  2. FAQ TYPE1

                                	
                            
                                
    

  3. FAQ TYPE2

                            
                            
                                
                                

  4. FAQ TYPE3

                            
                            
                                
                               	

  5. 웹진형 TYPE1

                                	
                            
                                
                                

  6. 웹진형 TYPE2

                            
                            
                                
                                

  7. 블로그 TYPE1

                            
                            
                                
                                

  8. 블로그 TYPE2

                            
                            
                                
                                

  9. 블로그 TYPE3

                            
                            
                                
                                

  10. 블로그 TYPE4

                            
                            
                                
                                

  11. 겔러리 TYPE1

                            
                            
                                
                                

  12. 겔러리 TYPE2

                            
                            
                                
                                

  13. 겔러리 TYPE3

                            
                            
                                
                                

  14. 겔러리 TYPE4

                            
                            
                                
                                

  15. 겔러리 TYPE5

                            
                            
                                
                                
                                	
    							

  16. 겔러리 TYPE6

                            
                            
                                
                                

  17. 겔러리 TYPE7

                            
                            
                                
                                

  18. 겔러리 TYPE8

                            
                            
                                
                                

  19. 리뷰스킨 TYPE1

                            
                            
                                
                                
                                

  20. 리뷰스킨 TYPE2

                            
                            
                                
                                

  21. 리뷰스킨 TYPE3

                            
                            
                                
                                

  22. 뉴스스킨

                            
                            
                                
                                

  23. 하이라이트

                            
                            
                                			


폼메일 사용하기

폴로에서 제공되는 폼을 사용하는 방법입니다. 실제로 메일을 전송할 수 있는 폴로폼은 수신자 이메일 설정 등 간단한 작업으로 이용할 수 있습니다.

폼메일 경로
레이아웃을 설치하면 layouts/include/contact-form.php 파일을 확인할 수 있습니다. 해당 파일을 드림위버,나모에디터 혹은 메모장으로 편집을 해야 합니다.
  1. layouts/include/contact-form.php파일 열기11줄 $to = "touchxe@gmail.com"; 에 이메일 입력저장서버로 업로드
    프리셋 외부페이지 경로입력
  2. 서브페이지컨텍트하부페이지컨텍트 폼에 내용을 입력보내기 클릭
    프리셋 외부페이지 경로입력