Home디자인 관리레볼루션 슬라이더 가이드슬라이드 추가 및 설정

슬라이드 추가 및 설정

– 새로운 슬라이드 추가

  • 슬라이더 편집 화면[Slider Settings]에서 ‘Save Settings’ 버튼을 누르면 페이지가 전환되며 슬라이드 편집화면으로 이동됩니다.

    1번 : 비활성화(비활성화 시 빨간색 아이콘으로 변경 됨) 되고 편집은 가능하나 사이트에 표출되지 않습니다.
    2번 : 슬라이드가 활성화 되어있을 경우 아래 이미지 처럼 초록색 아이콘이 활성화되게 됩니다.
    3번 (Duplicate) : 슬라이드를 복사하는 버튼입니다.
    4번 (Add to Templates) : 현재 슬라이드를 템플릿으로 저장합니다.
    5번 (Delete) : 슬라이드 삭제 버튼입니다.

  • 1번 (Add Blank Slide) : 투명 배경을 바탕으로 슬라이드를 생성합니다.
    2번 (Add Bulk slides) : 배경 이미지를 추가하여 슬라이더를 생성하며, 한 번에 다량의 슬라이드를 추가할 수 있습니다.
    3번 (Add from Template) : 저장되어 잇는 템플릿을 불러올 수 있습니다.

– 슬라이드 설정

  • 슬라이드의 배경/애니메이션 효과/Link & Seo/Nav 속성 을 설정할수 있습니다.

    1번 (Main Background) : 가장 많이 쓰이며, 슬라이드의 색상/이미지/영상 등을 설정하실수 있습니다.
    2번 (General Settings) : 슬라이드의 재생 속도/시간을 설정하실수 있으며 특정 날짜에만 활성화/비활성화 하실수 있습니다.
    3번 (Thumbnail) : 슬라이드 네비게이션에 표출되는 썸네일의 이미지를 선택할수 있습니다.
    4번 (Slide Animation): 해당 슬라이드가 전환될 때 나타나는 애니메이션을 선택할수 있습니다.
    5번 (Link & Seo) : 슬라이드의 클래스/아이디를 넣을수 있으며 슬라이드 클릭시 페이지를 이동시킬수 있습니다.
    6번 (Slide Info) : 특정 유형의 탐색에 이용 될 수 있는 특수한 기능이며, 사용 예시는 하단을 참고하여 주시기 바랍니다.
    표시할 정보를 ‘Parameter 1’ 과 ‘Parameter 2’ 에 입력합니다.

    ‘Slider Settings’ 의 Navigation 에서 아래 표시된 영역을 변경하여 줍니다.

    변경 후 슬라이더를 확인하시면 슬라이더 하단에 텍스트와 이미지가 나타나는 것을 확인하실 수 있습니다.

    7번 (Nav. Overwrite) : 슬라이드 네비게이션의 스타일을 설정할수 있으며 ‘OFF’ 로 둘 경우
    ‘Slider Settings’ 에서 지정한 값으로 설정됩니다.

– 슬라이드 레이어 설정

  • 슬라이드 레이어의 속성 을 설정할수 있습니다.

    1번 (Style) : 레이어의 크기/색상/텍스트 사이즈 등 스타일을 설정할수 있습니다.
    2번 (Animation) : 레이어의 애니메이션을 설정하실수 있으며 하단을 참고하여
    ‘caption text1’ 은 레이어가 슬라이드의 전체에 걸쳐 나타나며
    ‘caption text2’는 슬라이드가 전체 나타나기 전에 레이어의 애니메이션을 끝낼수 있습니다.

    3번 (Loop) : 연속적으로 애니메이션을 나타냅니다.
    4번 (Visibility): 디바이스 별로 숨길수 있습니다.
    – Hide “Under” Width : ‘Slider Settings’ 우측의 ‘Layout & Visual’ > Mobile 에서 설정한 값에 따라 레이어가 숨겨집니다.
    -Only on Slide Hover : 마우스 오버 시 레이어가 나타나며 모바일의 경우 레이어를 탭하면 됩니다.

    5번 (Behavior) : 레이어의 반응형을 설정하실수 있는 창입니다.
    – Auto Responsive : 레이어가 반응형으로 되도록 설정합니다.
    – Child Elements Responsive : 레이어에 추가 컨텐트가 있으면 모든 요소의 크기를 조정합니다.
    – Align : ‘Grid Based’ 로 지정할 경우 슬라이드를 기준으로 움직이며,
    ‘Slide Based’로 지정하면 슬라이더의 전체 크기를 기준으로 움직입니다.
    – Responsive Offset : 활성화를 할 경우 레이어가 반응형으로 움직이며 비활성화 하면 설정한 설정한 값이 변경되지 않습니다.
    ex) top: 50px; 이라는 값을 주고 활성화를 하면 모바일에서는 25px로 줄어듭니다.
    6번 (Actions) : 레이어에 액션을 줄수 있으며 클릭시 페이지 이동/재생 및 일시 정지/jQuery 이벤트 트리거 추가 등
    다양한 설정을 할수 있습니다.
    7번 (Attributes) : 레이어에 클래스를 추가하여 Custom CSS를 레이어에 적용 할 수 있습니다.
    8번 (Parallax / 3D) : ‘Slider Settings’ 우측 ‘Parallax & 3D’ 를 활성화 하신 후 사용 하실수 있으며
    값을 레이어 별로 값을 조절 할수 있습니다.

– 슬라이드 레이어 추가

  • ‘Object Library’ : 저장되어있는 이미지/아이콘을 불러올수 있으며 이미지의 경우 라이센스가 필요합니다.
  • ‘Add Layer’에 마우스 오버 시 하단과 같이 리스트가 나옵니다.

    1번 (Text/Html) : 일반 글자를 입력하거나 Html 코드를 넣을수 있습니다.
    2번 (Image) : 이미지를 추가할수 있으며 ‘Style’ 탭에서 위치/크기 를 설정하실수 있습니다.

    3번 (Audio) : 오디오 파일을 넣을수 있으며 반복/시작점 등 설정하실수 있습니다.
    4번 (Video) : ‘YouTube’, ‘Vimoe’, ‘HTML5’ 의 영상을 추가 할수 있으며 크기/반복/모바일에서 숨김 등 설정하실수 있습니다.
    5번 (Button) : 버튼 레이어 생성 시 하단과 같이 설정창이 뜨며 우측 상단 부터 색상/마우스 오버시 효과/글자 를 넣으실수 있습니다.

    6번 (Shape) : 모양을 제작할수 있으며 색상/테두리/크기 를 설정할수있습니다.

    7번 (Object) : 저장되어있는 이미지/아이콘을 불러올수 있으며 이미지의 경우 라이센스가 필요합니다.
    8번 (Import) : 슬라이더의 레이어를 전체 또는 개별로 불러올수 있습니다.
Was this article helpful to you? Yes No