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

레볼루션 슬라이더 가이드

일반적으로 레볼루션 슬라이더를 생성하여 적용시키는 방법을 알아보도록 하겠습니다.

1. 새로운 슬라이더 생성
관리자 메뉴에서 Revolution Slider 를 클릭합니다.
페이지 전환 후 1번 영역을 클릭하면 아래 검은 박스에 메뉴가 보여지게 됩니다.
그 중 첫번째 2번 버튼을 클릭하여 새로운 슬라이더를 추가합니다.
rs01

2. ‘Title’ 과 ‘Alias’ 입력
슬라이더의 1번 ‘Title’ 과 2번 ‘Alias’를 입력합니다.
참고 > [rev_slider alias=””] 는 숏코드라고 불리우며, ‘Alias’를 입력하면 자동 생성됩니다.
rs02

3. 슬라이더 타입 설정
첫번째, ‘Standard Slider’ 는 홈페이지 상에 가장 많이 노출되는 슬라이더 형태입니다.
두번째, ‘Hero Scene’ 는 하나의 슬라이드로만 이루어진 슬라이더로 이 옵션을 선택할 경우, 우측 ‘Navigation’ 에서 설정할 수 있는 옵션이 사라지게 됩니다.
세번째, ‘Carousel Slider’ 회전하는 형식의 슬라이더로 선택 시 우측에 ‘Carousel Settings’ 탭이 추가됩니다.
네번째, 아래 표시된 영역은 슬라이더의 템플릿을 설정하는 구간이며, 마지막 ‘Save Current Settings as  Preset’ 를 클릭하실 경우 현재 설정 값을 저장할 수  있습니다.
rs06

4. 레이아웃 설정 Step 1
첫번째, ‘Auto’ 는 반응형의 기본 레이아웃으로, 항상 테마 페이지의 레이아웃 폭을 상속합니다.
두번째, ‘Full-Width’ 는 브라우저의 가로 사이즈와 슬라이더의 가로 사이즈가 동일한 레이아웃으로 가장 많이 사용됩니다.
세번째, ‘Full-Screen’ 는 브라우저의 크기와 항상 동일하게 보여집니다.
rs06

5. 레이아웃 설정 Step 2
레볼루션 슬라이더를 사용하실 경우 사용 기기나 브라우저의 크기에 따라 자동적으로 텍스트 및 이미지가 줄어들게 됩니다.
삽입한 컨텐츠의 사이즈가 알아보기 힘들게 줄어드는 경우 사용하는 부분으로 최대 넓이를 지정하여 가독성을 높여주는 역할을 합니다.
rs07

5. 레이아웃 설정 Step 3
위 이미지 하단의 ‘Show Advanced Size Option’ 버튼을 클릭하면 아래와 같은 설정창이 나타나게 됩니다.
‘Auto’ 와 ‘Full Width’ 옵션 설정
첫번째, Overflow Hidden : 대부분 ‘Carousel Slider’ 를 선택하였을 때 사용됩니다.
메인 슬라이더 외부에 내용이 배치되어 잇는 경우 사용하며, 그렇지 않을 경우 OFF 를 유지합니다.
두번째, Respect Aspect Ratio : 기본적으로 ‘레이어 그리드 높이’가 슬라이더의 ‘최대 높이’의 역할을 하지만, 슬라이더의 높이를 ‘레이어 그리드 높이’ 값 이상으로 확장 할 수 있도록 하기 위해 설정하는 부분입니다.
세번째, Min. Height : 슬라이더의 높이가 너무 짧은 경우 사용하는 옵션으로 높이의 최소값을 조정하는 영역입니다.
rs08

‘Full Screen’ 옵션 설정
첫번째, Fullscreen Align Force : 레이어를 전체 슬라이더 대신 계층 그리드를 기준으로 정렬합니다.
두번째, Containers : 페이지의 머리글 메뉴 및 바닥 글 사이에서 “전체 화면”슬라이더를 배치 할 때 유용합니다.
세번째, PX or % – 픽셀 또는 % 만큼 슬라이더의 높이를 줄일 수 있습니다.
네번째, Min. Height : 슬라이더의 최소 높이를 지정하는 부분입니다.
rs09

6. 슬라이더 설정 저장
위 설정이 완료되었다면 ‘Save Settings’ 버튼을 눌러 설정값을 저장합니다.
rs03

7. 슬라이더 리스트
‘Save Settings’ 버튼을 누르면 페이지가 전환되며 슬라이더 리스트로 돌아가게 됩니다.
리스트로 돌아와 아래 이미지에 표시된 영역의 수정 버튼을 클릭합니다.
rs04

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

9. 슬라이드 순서 변경
순서를 변경하시고자 하는 슬라이드를 드래그 하여 원하는 위치로 이동시킵니다.
드래그란? > 이동시킬 요소를 마우스의 왼쪽 버튼을 누른 채 이동시킨 후 버튼을 떼는 동작을 말합니다.
rs09

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

10. ‘Add from Template’
참고 > 구매하신 플러그인의 라이센스로 인증하셔야 사용이 가능합니다.
1번 : 본 플러그인에서 기본으로 제공하는 슬라이드 템플릿을 추가합니다.
2번 : 현재 슬라이드에 추가 할 수있는 모든 슬라이더에서 모든 슬라이드의 목록을 볼 수 있습니다.
3번 : 이전에 만든 슬라이드 템플릿 중 하나를 추가합니다.
rs11

11. Main Background
1번 : 가장 많이 쓰이며, 이미지를 배경으로 사용합니다.
Main / Background Image 를 클릭하신 후 ‘Change Image’ 버튼을 클릭하여 이미지를 변경할 수 있습니다.
2번 : 외부 도메인에서 사용하고 싶은 이미지의 전체 URL을 입력하여 사용하실 수 있습니다.
3번 : 선택 시 투명한 배경을 사용하실 수 있으며, 슬라이더 전체 백경 색상을 지정하였을 때 유용하게 쓰입니다.
4번 : 배경의 색상을 지정할 수 있습니다.
5번 : 유투브에 업로드된 영상을 배경으로 사용할 수 있습니다.
6번 : 비메오에 업로드된 영상을 배경으로 사용할 수 있습니다.
7번 : ‘MPEG’, ‘WEBM’, ‘OGV’ 를 지원하며, 영상의 URL 전체를 입력하면 됩니다.
동영상의 ‘MPEG’버전은 (파일이 ‘.MP4’로 끝나는) 필수이며, 블라우저 별로 지원되지 않는 버전이 있을 수 있으므로 다른 버전의 파일을 같이 업로드하는 것이 좋습니다.
‘Video’ 공통 ‘cover Image ‘ : 비디오의 포스터 이미지를 설정하는 부분으로 미디어에 저장된 이미지를 사용할 수 있습니다.
rs13

12. General Settings
1번 : 하나의 슬라이더가 표시되는 시간으로 지정되지 않을 경우 기본 9000ms 를 사용합니다.
2번 : 선택 슬라이드를 표시할지 하지 않을지 정하는 구간입니다.
3번, 4번 : 일반적으로 슬라이드는 항상 표시되지만, 특정 날짜를 지정하여 슬라이드를 활성화 / 비활성화 할 수 있습니다.
각각의 영역을 클릭하면, 옵션에 대한 날짜를 선택할 수있는 달력 팝업이 나타나게 됩니다.
5번, 6번 : 슬라이더 네비게이션에 썸네일이 표출되는 옵션을 사용하는 경우에 사용되며, 옵션을 선택 시 썸네일을 등록하여 슬라이드의 정보를 제공할 수 있도록 업로드하는 것이 좋습니다.
사용하지 않을 경우, 슬라이더의 백그라운드 이미지로 대체되게 됩니다.rs14

13. Slide Animation
해당 슬라이드가 전환될 때 나타나게 되는 애니메이션을 선택합니다.
1번 영역의 카테고리를 선택합니다.
2번 영역의 옵션에 마우스를 올리면 애니메이션의 미리보기가 나타나게 되며, 원하는 애니메이션을 찾으셨다면 옵션을 체크합니다.
3번 영역에서 드래그하여 애니메이션의 순서를 정하고, 애니메이션을 제거하려면, “X”아이콘을 클릭합니다.
4번 영역에서 애니메이션의 세부 설정을 하실 수 있습니다.rs15

14. Link & SEO
각각의 슬라이더의에 1번 클래스, 2번 아아디, 3번 HTML을 추가할 수 있습니다.
4번 : 슬라이드에 링크를 걸 것인가를 체크하는 부분으로 Enable로 체크하면 아래 설정 영역이 나옵니다.
5번 : ‘Regular’ URL(주소)을 입력하여 사용하는 부분입니다.
6번 : 슬라이드 클릭 시 이동될 URL(주소)를 입력하는 구간입니다.
7번 : 슬라이더 클릭 시 페이지를 전환(Same Window)할 것인지 새탭(New Window)으로 띄울 것이지 설정합니다.
8번 : 링크의 위치를 지정할 수 있습니다.
rs16

15. Slide Info
특정 유형의 탐색에 이용 될 수있는 특수한 기능이며, 아래 사용 예시를 확인하시기 바랍니다.
표시할 정보 ‘Parameter 1’ 과 ‘Parameter 2’ 를 입력합니다.
rs17
‘Slider Settings’ 의 Navigation 에서 아래 표시된 영역을 변경하여 줍니다.
rs16
변경 후 슬라이더를 확인하시면 슬라이더 하단에 텍스트와 이미지가 나타나는 것을 확인하실 수 있습니다.rs18

16. Slide Layer
1번 : 텍스트를 입력하여 스타일을 변경할 수 있으며, HTML, Icon, 숏코드를 지원합니다.
2번 : 미디어 라이브러리에 업로드 되어 있는 이미지를 삽입할 수 있습니다.
3번 : 유투브, 비메오, ‘MPEG’, ‘WEBM’, ‘OGV’ 를 지원합니다.
4번 : 버튼의 스타일을 제공하며, 색상, 텍스트 변경 등을 할 수 있습니다.
5번 : 사각 도형을 변경하여 삽입할 수 있습니다.
rs19

슬라이드에 추가된 레이어를 간단하게 볼 수 있는 영역으로, 숨김 처리 및 락을 걸어 레이어 수정을 방지할 수 있습니다.
rs20

Was this article helpful to you? Yes 1 No