• 이제 메인 페이지 컨텐츠에 대해 알아보겠습니다. 
    총 7개의 섹션이 제공되며, 원하는 섹션만 사용할 수 있습니다. 
     
    먼저 <출력 옵션과 슬라이드>에 대해 알아보겠습니다.
     
    manual_06.jpg
     

    ◈ 출력 옵션

     
    먼저 총 7개의 출력 옵션을 설정할 수 있습니다. 
    모든 섹션에 대해 알아두고, 추후에 출력 옵션을 통해서 사용 여부를 설정하면 됩니다. 
     
    * 모바일 뷰 : 특정 섹션은 모바일에서 보이지 않게 하고 싶다면 여기서 설정이 가능합니다.

     

     

    ◈ 슬라이드

     
    2 가지 스타일 중 선택할 수 있습니다.
    - 패럴랙스 단독 이미지 : 단독 배경 이미지만 사용하고 캡션을 넣을 수 있습니다. 특수 효과 없이 사용하고자 할 경우 적합
    - 프로모션 슬라이드 : 총 5장의 이미지를 사용. 특수 효과를 이용하여 다이나믹게 연출

     

     

    1) 패럴랙스 단독 이미지 설정
     
    - 패럴랙스 세로 : 세로 값을 입력합니다. 기본 400px
    - 패럴랙스 이미지 : 리사이즈 효과가 없으므로 1920x세로 값으로 사용하세요. (이미지 용량 고려하세요)
    - 캡션 타이틀 : 제목을 입력합니다. (비워두면 출력안함)
    - 캡션 요약 : 요약 내용을 입력합니다. (비워두면 출력안함)
    - 버튼 링크 : 링크 사용 시 링크를 입력하면 버튼이 출력 됩니다. (비워두면 출력안함)

     

     
    2) 프로모션 슬라이드 설정
     
    - 슬라이드 세로 : 기본 30% 적용. % 사용 시 세로 자동 조절.(모바일 대응) px 값 사용 시 고정.
    - 슬라이드 효과 : 기본 무작위(총 25가지 효과), 심플 페이드(부드럽게 사라짐), 왼쪽 스크롤(좌로 이동)
    - 슬라이드 수 : 총 5 개중 사용할 개 수 선택. 
    - 인터벌 : 기본 10초(10000) 적용 (1초당 - 1000)
    - 로딩바 : 출력, 사용안함
    - 캡션 폰트 사이즈 : 캡션 타이틀 폰트 사이즈를 지정할 수 있습니다. 기본 50px
     
    1) 슬라이드 이미지 : 자동 리사이징이 되므로 비율을 맞춰주세요. 예) 1920x세로 사이즈 일 때, 비율에 맞게 줄여서 약 가로 1200 이하로 줄이면 파일 용량도 줄일 수 있습니다. 
    * '이미지가 잘려요 ㅠ' 하는 분은 비율을 조정해주세요. %라 정확한 사이즈를 모르겠다 하는 분은 문의 주세요. 
    ㄴ 동영상 코드 : 비메오, 유투브 동영상을 추가할 수 있습니다.
    ㄴ 캡션 정렬 : 좌측, 가운데, 우측 중 선택할 수 있습니다.
    ㄴ 제목 : 제목 입력.  (비워두면 출력 안함)
    ㄴ 내용 : 내용 입력. (비워두면 출력 안함)
    ㄴ 버튼 : 링크 입력. (비워두면 출력 안함)
    * 이하 5 번까지 반복

     

     

    * 동영상 추가 방법

     

    방법은 간단합니다. 코드를 추가하고 가로/세로 값만 100%로 수정하면 됩니다. 

     

    예시) 비메오 영상

    <iframe src="//player.vimeo.com/video/89711963?title=0&byline=0&portrait=0&badge=0&color=f43ef7&"width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

     

    * 비메오 영상은 <iframe>...<iframe>외에 ~ 뒤에 붙는 코드는 제거 하시면 됩니다. 

     

    예시) 유투브 영상

    <iframe width="100%" height="100%" src="//www.youtube.com/embed/fLe_qO4AE-M?wmode=opaque" frameborder="0" allowfullscreen></iframe>

     

    * 유투브 영상에 경우 소스를 그대로 넣을 경우 depth가 높아서 메뉴보다 위로 올라오게 됩니다. 메뉴가 보이게 하고 싶다면 유투브 링크 뒤에 ?wmode=opaque 코드를 추가하면 됩니다.

     

    * 주의사항

     

    동영상을 사용하더라도 슬라이드 이미지를 사용해야 합니다. 섬네일이 먼저 출력되고 바로 영상으로 넘어가므로 영상을 추가한 후 스크린 샷을 찍어 슬라이드 이미지로 사용하거나 영상 안내 이미지를 따로 제작하여 사용하도록 하세요. 

     

     

     

    ◈ 1 섹션 티져(아이콘 박스)

     
    3, 4 컬럼 중 선택하여 사용할 수 있습니다. 
     
    - 티져 타이틀 : 제목 입력.
    - 아이콘 : 원하는 스타일의 아이콘 코드 삽입
    - 내용 : 내용 입력
    - 링크 : 링크 연결 시 링크 값을 넣습니다. (비워두면 출력 안함)
     
    product_avenue04.jpg
     
    * 모바일에서 자동으로 텍스트 슬라이더로 전환 됩니다. 

     

     

    ◈ 2 섹션 (최근 게시물)

     

    총 3개의 컬럼으로 나뉘며, 

    - 왼쪽이 타이틀과 위젯을 넣을 수 있는 공간 

    - 가운데가 탭 형 엘리먼트 : 총 4개의 탭 제공

    - 오른쪽에 아코디온 엘리먼트, 빈 공간 중 선택할 수 있습니다. 

     

    1) 왼쪽 위젯 제목 : 제목 입력

    ㄴ 더보기 링크 : 링크 입력 시 더보기 출력 (비워두면 출력 안함)

    ㄴ 위젯 코드 : 출력할 게시물 위젯 코드를 삽입합니다. 

     

    * 목록 형 - 리스트 타입 코드 예

     

    manual_05_1.jpg

     

    <img class="zbxe_widget_output" widget="content" skin="KSO_contentSkin" colorset="layout" content_type="document" module_srls="276" list_type="normal" tab_type="none" markup_type="list"list_count="8" page_count="1" subject_cut_size="50" option_view="title,regdate,nickname" show_browser_title="N" show_comment_count="Y" show_trackback_count="N" show_category="N" show_icon="Y" order_target="regdate" order_type="desc" thumbnail_type="crop" />

     

    * 목록 형 - 테이블 타입 코드 예

     

    manual_05_2.jpg

     

    <img class="zbxe_widget_output" widget="content" skin="KSO_contentSkin" colorset="layout" content_type="document" module_srls="276" list_type="normal" tab_type="none" markup_type="table"list_count="8" page_count="1" subject_cut_size="30" option_view="title,regdate" show_browser_title="N" show_comment_count="Y" show_trackback_count="N" show_category="N" show_icon="Y" order_target="regdate" order_type="desc" thumbnail_type="crop" />

     

     

    module_srls="276" : 출력할 게시판 모듈 값으로 수정해주세요.   

    list_count="8" : 게시물 수 입니다.

    subject_cut_size="30" : 제목 글자 수 입니다.

     

     
    2) 가운데 탭 엘리먼트
     
    - 탭 위젯 제목 : 위젯 제목을 입력합니다.
    - 위젯 코드 : 코드를 삽입합니다.
     
    * 총 4개의 탭을 제공하며 사용할 곳만 입력, 비워두면 출력 안함

     

     
    3) 아코디온 엘리먼트
     
    * 아코디온 엘리먼트와 빈 공간 중 선택하여 사용할 수 있습니다.
     
    - 아코디온 제목 : 제목을 입력합니다.
    - 내용 : 내용을 입력합니다.
    * 총 4개의 아코디온 탭을 제공하며 비워두면 출력 안함
     
    * 빈 공간 사용 시 동영상, 최근 게시물, 소셜 위젯 등으로 활용해보세요. 

     

     

    ◈ 3 섹션 (쇼케이스)

    * 1, 2 컬럼을 선택하여 사용할 수 있습니다.
     
    1) 1 컬럼 사용 시 : 이미지 업로드와 빈 공간으로 사용할 수 있습니다. 
     
    * 1컬럼 이미지 사용
     
    * 빈 공간 사용 시 사용자가 원하는 대로 꾸며보세요. 

     

     
    2) 2 컬럼 사용 시 : 이미지 업로드(왼쪽만 적용)와 빈 공간을 사용할 수 있습니다.
     
    * 2컬럼 이미지 사용
     
    * 빈 공간 사용 시 왼쪽 영역 동영상 등으로 꾸며 보세요.

     

     
    페이스북 트위터 미투데이 요즘 마이피플