코드캐년으로 부터 레볼루션 슬라이더를 구매하고 다운로드받은 파일의 압축을 풀게되면 폴더안에 몇개의 폴더와 파일들이 보일것이다. 그중 revslider.zip파일이 설치파일이다.

먼저 워드프레스의 메인화면에서 Plugins메뉴로 들어간후 아래 그림에서 보이는 Add New 버튼을 누른다:

다음, Upload 버튼을 누른다:

다음화면에서 Browse버튼을 누르고, 내 컴퓨터에 다운로드 받은 revslider.zip 파일을 선택한다:

그런다음 Install Now 버튼을 누른다:

마지막으로 Activate Plugin 링크를 누른다:

이제 Plugins페이지 리스트와 워드프레스 메인메뉴에 Revolution Slider라는 새로운 아이템이 추가 될것이다:

성공적으로 설치가 완료 되었습니다!

주의 사항:

• 한개의 웹사이트당 한개의 구매코드를 등록할수 있다. 만약 사용중인 코드를 다른 사이트로 이동하고 싶으면여기를 클릭하라.
• 구매 코드 등록은 단지 코드캐년에서 직접 구매한 플러그인만 가능하다.  만약 당신이 사용하는 레볼루션 슬라이더 플러그인이 테마속에 패키지로 구매된것이라면 프리미엄 지원서비스와 자동업데이트를 받기위해선 코드캐년에서 새로운 플러그인을 구매하고 코드를 받아야한다. ( 아래의 "Need Premium Support and Auto Updates" 참조).
• 당신이 테마개발자 이고, 당신의 고객에게 레볼루션 슬라이더 구매 코드 등록섹션을 감추고 싶다면 여기를 참조하라.
• 만약 레볼루션 슬라이더가 당신의 테마에 팩키지로 포함 되어 있었고, 그럼에도 당신이 프리미엄서비스를 받고저 따로 코드캐년에서 플러그인을 구매하였는데 구매 코드를 입력하는 섹션이 보이지 않는다면여기 와여기를 참조하라.

플러그인이 설치되었다면 워드프레스 메인메뉴에서 Revolution Slider를 클릭하여 들어 가면 플러그인의 메인 관리 화면이다. 중간쯤에 보면 아래의 이미지와 같은 곳이 있다:

아래와 같은 섹션으로 이동하여 플러그인을 등록 하는데, 그전에 먼저 등록시 혜택을 보자:
(설치문제,버그, 다른 플러그인이나 테마와의 충돌 문제등을 지원하고 자동으로 새로운 버전업데이트가 가능해 진다.)

플러그인의 등록하고 활성화 하기 위해서는 세개의 칸에 정보를 입력해야 한다:

Username:

여기는 코드캐년의 사용자이름이다. 코드캐년에 로그인 하기위해서 입력하는 사용자이름과 같다:

Envato API Key:

이것은 당신의 코드캐년 계정페이지에서 생성한는 특별한 "key" 이다. 이 API key를 얻기위해서는 , 아래의 링크에 접속하여 로그인한후:

http://codecanyon.net/downloads

My Settings 탭을 누르고 들어간다:

그리고 탭메뉴의 아래에 있는 API Keys 옵션으로 들어간다:

아무이름이나 만들어서 라벨을 입력해 주고 Generate API Key 버튼을 누른다:

생성된 API key 를 복사하여 레볼루션 슬라이더 등록폼의 Envato API Key 칸에 붙여 넣는다:

Purchase Code:

purchase code 를 얻기위해서는 다음 페이지로 이동한다:

http://codecanyon.net/downloads

구매한 레볼루션 슬라이더 리스트옆의 Download 버튼을 누르면 나타나는 드롭메뉴 중에서, License certificate & purchase code 를 선택한다:

다운로드된 텍스트 파일 안에서 당신의 purchase code 를 발견할수 있을것이다. 이것을 복사하여 레볼루션 슬라이더 등록폼의 Purchase Key 칸에 붙여 넣는다:

당신의 Username, Envato API Key, 그리고 Purchase Code를 입력하고, 녹색Activate 버튼을 누르면, activation 이 성공하고, 해당 섹션이 녹색으로 바뀔것이다:

플러그인 등록이 완료되었다.

쉽게 배우는 방법중 하나는 이미 만들어진 것을 수정해 가면서 사용해 보는것이다. 이렇게 하기 위해서 데모 슬라이더를 import(가져오기) 하면된다. 여기에 import 가능한 슬라이더의 목록이 있다.

• fullfeature_boxed.zip - 데모 보기
• fullfeature_fullscreen.zip - 데모 보기
• fullfeature_fullwidth.zip - 데모 보기
• kenburns_boxed.zip - 데모 보기
• kenburns_fullscreen.zip - 데모 보기
• kenburns_fullwidth.zip - 데모 보기
• kenburnsexport.zip - 데모 보기
• parallax_scroll_slider.zip - 데모 보기
• parallax_slider.zip - 데모 보기
• sliderpreview.zip - 데모 보기
• sliderpreview_fullscreen.zip - 데모 보기
• vertical_boxed.zip - 데모 보기
• vertical_fullscreen.zip - 데모 보기
• vertical_fullwidth.zip - 데모 보기
• video_boxed.zip - 데모 보기
• video_fullscreen.zip - 데모 보기
• video_fullwidth.zip - 데모 보기
• videoexport.zip - 데모 보기

• 테마펀치 슬라이더 예제 다운로드 받는곳

플러그인의 메인 관리 화면에가서 Import Slider 버튼 을 클릭한다:

아래의 설명은 코드캐년에서 레볼루션 슬라이더 플러그인을 구매한 경우에 해당하는 예제지만
위에서 링크한 레볼루션 슬라이더 웹사이트에서 제공하는 예제슬라이더를 가져와서 사용는 경우와 그 외에 예제 슬라이더가 나의 pc에 있는 경우(테마에 따라서 예제파일이 함께있는경우가 많다)도 마찮가지로 아래에서 설명하는 방법과 같다.

다음 코드캐년에서 다운받은 파일을 압축해제한 폴더내에서 example-zips폴더를 찾아 클릭하여 들어간후 가져오고 싶은 데모 슬라이더를 선택하여 아래의 그림과 같이 가져온다:

예제를 import 한후에 페이지의 상단에 슬라이더의 리스트가 보여질 것이다:

레볼루션 슬라이더 플러그인은 모든 슬라이더에 적용할수 있는 몇가지의 전역설정(Global Settings)이 있다.
이설정으로 만약 이플러그인과 테마 또는 다른플러그인사이에서 충돌이 발생한다면 해결할수 있는 방법을 찾을수도 있고, 당신의 사이트 내에서 이 플러그인을 효과적으로 사용할수 있는 몇가지 옵션을 제공한다.

1. 플러그인 사용 허용범위선택:워드프레스에 로그인한 사용자중에서 어느 범위까지 이 레볼루션 슬라이더를 사용할수 있는지 정함
   • Admin
   • To Editor, Admin
   • Author & Editor & Admin
2. 전역(웹사이트내의 모든곳에서 = 모든 페이지에서)에서 레볼루션 슬라이더 라이브러리(레볼루션 슬라이더를 작동하는데 기본이 되는 자바스크립트와 CSS파일들)를 로딩한다:
   • ON: 모든 페이지에 CSS와 JS 파일을 로딩한다. 만약 레볼루션 슬라이더를 PHP코드로 사이트에 삽입하였거나, 위젯안에 슬라이더를 넣었다면 이 옵션을 사용한다.
     로딩이 불필요한 페이지에서는 페이지로딩시간이 길어지는 단점이 있다.
   • OFF: 단지 [rev_slider] 숏코드(레볼루션 슬라이더 숏코드)가 사용된 페이지 에서만 CSS 와 JS 파일을 로딩한다.
     불필요한 파일의 로딩을 줄이게 되어 레볼루션 슬라이더가 없는 페이지의 로딩속도가 빨라진다.
     만약 슬라이더를 PHP코드로삽입했거나, 위젯안에 슬라이더를 넣었음에도 불구하고 해당하는 페이지에만 라이브러리를 로딩하고 싶다면 아래의 Pages to include RevSlider libraries 옵션을 사용하면된다.
3. 레볼루션 슬라이더 라이브러리를 로딩할 페이지를 지정하기: 슬라이더 라이브러리 파일이 로딩될 페이지를 개별적으로 지정할수 있다. 페이지의 ID를 콤마(,)로 구분하여 나열해서 적으면된다. 위의 2번의 옵션을 OFF 로 하고, 실제 레볼루션 슬라이더가 사용되는 페이지의 ID를 여기에 적어주면 효과적이다. 페이지나 포스트의 ID를 찾는방법.
4. 레볼루션 슬라이더의 자바스크립트파일을 헤더가 아닌 푸터에 로딩한다: 이옵션은 종종 슬라이더의 로딩속도를 증진시키고, jQuery의 중복 로딩에의한 충돌등을 해결하는데 유용 하다.
5. 마크업 내보내기 옵션이 활성화된다: 메인화면의 슬라이더 리스트에 정적 HTML 페이지에서 슬라이더를 사용할수 있도록 소스코드를 생성해서 내보내 주는 버튼이 활성화 된다. 이 옵션을 활성화 하고 "Update" 버튼을 누른후 페이지를 새로 로딩하면 슬라이더 리스트 화면에 "Export HTML" 버튼이 보여질 것이다:
   

   

6. 로그 사용하기 :디버깅을 하기위해서 로그를 사용한다.

슬라이더의 기본 개념

• 슬라이더(Slider) : 각각의 슬라이드(Slide - 한개의 독립적인 이미지 또는 단색/투명막 위에 놓인 레이어들의 집합체 )를 일정한 시간 간격을 두고, 넘겨보는 기능을 가진 집합체. 슬라이더 내에 슬라이드 가 3장이 들어 있다면 대게 반복해서 3장의 이미지가 순환되며 보여진다. 이 '슬라이드'들의 컨테이너인 '슬라이더'는 독립된 객체로, 웹사이트 어디에든 필요에 따라서 삽입되어 보여질수 있다.


• 슬라이드(Slide ) : 슬라이더를 이루는 하나의 독립된 단위. 대부분 설정된 일정 간격을 두고 다른 슬라이드 들과 순환되며 화면에 보여진다. 배경으로 이미지,단색,투명막 을 가지며 그 위에 레어어를 이용해서 텍스트,이미지,동영상, 링크버튼 , 포스트, 페이지, 상품정보 등을 다양한 효과와 함께 올려서 사용한다.


• 레이어(Layer) : 만약 특정 슬라이더내의 모든 슬라이드가 10초의 단위로 순환한다면, 그 각각의 슬라이드 는 10초의 안에서 다양한 효과를 보여줄수 있다. 이때 사용하는것이 레이어 이며 레이어를 슬라이드 위에 쌓아올리면서 그 각각의 레이어 속에 하나 하나의 텍스트나 동영상, 이미지, 링크, 버튼 등을 효과와 함께 보여준다. 또한 슬라이더의 메인세팅에서 "Source Type"을 포스트타입 기반으로 선택할 경우, 이 레이어 위에 포스트의 타이틀, 글쓴이, 컨텐츠,글 작성 날짜, 우커머스 상품가격, 상품이름 등 각종 메타 정보를 삽입할수 있다

새로운 슬라이더를 만들기 위해 플러그인의 어드민 화면에 가서 Create New Slider 버튼을 누른다:

가장먼저 새로운 슬라이더에서 사용할 이름[Title : 관리자 화면에서만 사용한다.]과 별칭[Alias : 웹페이지에 삽입할 레볼루션슬라이더 숏코드에 사용된다. 소문자를 사용하며 공백(apace)과 특수문자가 없어야 하고, 대시(-)와 언더스코어(_) 는 사용이 가능하다 ] 을 만들어서 붙여준다.

마지막으로 아래 부분에 녹색 Create Slider 버튼을 눌러 새 슬라이더를 만들어 준다.

버튼을 누르기전에 먼저 슬라이더 메인 설정을 한 후에 나중에 '슬라이더 만들기'버튼을 클릭해도 된다. 그러나 이것은 슬라이더를 만들기 위해서 꼭 필요한 일은 아니다. 일단 슬라이더 만들기를 선언한후 나중에 메인설정을 해 줘도 되기 때문이다.

'슬라이더 만들기' 버튼을 누르면 플러그인 어드민 화면으로 변경되며 그곳에서 새로만들어진 슬라이더를 확인 할 수 있다:

이제 slider's main settings로 가서 본격적으로 슬라이더를 만들어 보자!

먼저 슬라이더를 새로 만들었고, 만들어진 슬라이더의 메인 세팅을 하기 위해 슬라이더 리스트 오른쪽에 있는 녹색 "Settings" 버튼을 누른다:

그러면 방금전 슬라이더를 만들때 이름을 지어주었던 화면으로 돌아갈것이고 여기에서 몇개의 섹션으로 이루어져 있는 좌/우측 두개의 칼럼을 볼수 있다:

Main Slider Settings

^ back to Slider Main Settings menu

1. Slider Title: 맨처음 만들어서 붙여줬던 현재 작업중인 슬라이더의 이름. 관리자 화면에서 관리용으로 사용되기만 할뿐이다.
2. Slider Alias: 현재 작업중인 슬라이더를 위해 제공되는 숏코드를 만드는데 사용되는 별칭. 소문자를 사용하며 공백(apace)과 특수문자가 없어야 하고, 대시(-)와 언더스코어(_) 는 사용이 가능하다.
3. Slider Shortcode: 바로 위의 Slider Alias에서 입력된 값으로 자동생성되는 숏코드. 이것을 복사해서 원하는 포스트나 페이지에 붙여 넣으면 현재 작업중인 슬라이더가 보여진다.
4. Source Type: 만들고 있는 슬라이더에서 사용할 소스를 어디에서 가져올것인지를 선택한다. 기본값인 미디어 갤러리에서 가져오기와 포스트, 페이지,프로덕트 등 포스트타입기반 의 소스를 슬라이더의 재료로 가져올수 있다
   • Gallery: 기본옵션. 미이어 갤러리를 통해서 슬라이더를 직접 만들기 위한 방법
   • Posts: 포스트나 페이지, 프로덕트(우커머스 상품)등의 내용을 가져와서 (이미지는 특성이미지를 끌어옴) 슬라이더를 설정값에 따라 자동 생성함
   • Specific Posts: 특정(포스트 ID를 지정함) 포스트,페이지,프로덕트등 에서 내용을 가져와서 슬라이더를 생성함 페이지/포스트의 ID 를알아내는 방법.
5. Slider Layout: View Screencast
   • Auto Responsive: 대부분의 웹사이트에서 가장 좋은 선택 슬라이더는 항상 부모컨테이너( 사용중인 테마내에 슬라이더가 놓이게되는 위치를 감싸고 있는 html 태그: 페이지컨텐츠내의 풀컨테이너인가 2분의1 컨테이너인가, 3분의1컨테이너 속인가 또는 테마의 레이아웃이 박스타입인가 와이드타입인가 등등 현재 테마가 제공한는 위치중 어디에 슬라이더가 놓이게 되는가를 결정하는 고유값)에게 반응하여 크기가 조절된다.
   • Fixed: 반응형이 아닌 항상 같은 크기의 슬라이더, 웹사이트가 반응형이 아닐때 사용한다. Layers Grid Size에서 슬라이더의 크기를 지정한다.
   • Custom: 반응형 슬라이더를 원할땐 "Auto Responsive" 옵션이 최선이다. 그러나 만약 더욱 정교하게 슬라이더가 반응하게 되길 원한다면 Custom 옵션을 사용할수도 있다.:
     Grid Settings : (아래에서 설명)
     Responsive Sizes : Screen Width 를 지정(반응포인트)해서 화면의 크기(PC브라우저를 늘였다 줄였다 할 수 도있고, 스마트폰, 태블릿에서 볼수도 있다)가 지정한 크기 보다 작아지면 슬라이더의 크기를 Slider Width 에 지정한 값으로 줄이고, 이러한 반응을 6 단계로 제어할수 있다.

     

   • Full Screen: 슬라이더의 사이즈가 화면의 크기와 같아 진다. 만약 화면의 크기가 1024x768 이라면 슬라이더의 크기도 1024x768 이 된다는 말이다. 그 상태에서 화면의 크기를 위/아래 로 줄이면 슬라이더의 크기도 똑같이 역동적으로 변화한다. 이 옵션은 슬라이더가 위치하게되는 부모컨테이너의 영향을 받는다. 2분의1 칼럼 속에 슬라이더가 위치해 있다면 슬라이더의 넓이는 2분의1 칼럼의 넓이와 같지만 높이는 화면의 전체 높이가 된다.(부모 컨테이너가 넓이를 구속하지만 높이를 구속하지는 않으므로) 이때 아래의 Force Full Width 옵션을 On 해 주면 부모 컨테이너도 뛰어 넘어서 강제로 화면의 크기와 같아진다. (단, 현재 사용중인 테마가 박스(Boxed)레이아웃을 제공하고, 그 레이아웃을 선택해서 웹사이트를 만든경우에는 박스를 넘어서지 못할수도 있다. 테마에 따라서 다르다):
     
     Offset Containers :풀 스크린 슬라이더가 되면 슬라이더의 크기가 화면의 크기와 같아진다. 만약 웹사이트가 상단에 헤더 (탑메뉴 , 메인메뉴 네비게이션 , 로고 등이 들어있는 공간)이 필수적으로 보여지는데, 그 아래에 슬라이더가 위치해 있다면, 그리고 그 슬라이더의 옵션이 풀 스크린 모드이라면 슬라이더는 헤더의 아래부분에 가려지는 영역이 발생하기도 하고(화면 전체의 크기에 슬라이더와 그 위쪽에 헤더가 올라와 있는 모양) 또는 헤더의 높이만큼 슬라이더가 아래로 밀려 내려가서(한 화면속에 슬라이더 전체가 보여지는게 아니라 약간 스크롤 해서 내려가야 전체가 보여짐) 보여 지기도한다(테마의 컨테이너 특성에 따라서 다르고 옵션으로 선택할수도 있고... 여러가지 변수가 있음). 이 가려지는 영역속에 중요한 내용이 없다면 상관이 없겠지만, 전달하고저 하는 컨텐츠가 있다면 슬라이더는 헤더영역의 아래에서부터 시작해서 화면에 보여지는 만큼의 크기가 될 필요가 있다. 이때 이 옵션을 사용해서 헤더의 영역만큼 뺀크기(옵셋한크기)의 슬라이더를 만들수 있다. 화면의 크기가 1024x768 이고 상단 헤더의 두께가120px이라면 슬라이더의 크기는 1024x648 이 된다는 것이다.푸터가 꼭 보여져야 할때도 이 방법을 사용해서 full screen 슬라이더의 높이를 줄여 푸터의 자리를 내어줄수 있다.
     
     방법 : 만약 헤더의 영역을 빼고저 한다면 현재 헤더를 이루고 있는 컨테이너(헤더블럭의 태그. 보통div, header 태그 등)를 지정하는 태그나 크래스,ID 정보를 찾아서(보통 header 또는 header-container 등의 class나 id) 이 옵션 폼에 적어준다. ex) header , footer , .header , .header-container , #header , #header-container
     
     Offset Size : 바로 위에서 처럼 컨테이너를 지정해서 슬라이더의 높이를 줄일수도 있지만, 여기서는 '상단'에서 줄여야 하는 크기를 '지정'할수도 있다. px과% 단위로 지정이 가능하다.
     
     Min.Fullscreen Height : 풀스크린 슬라이더의 경우 브라우저의 화면이 줄어들면 슬라이더의 크기도 제한없이 줄어든다.(화면크기에 맞춰서) 이때 여기서 더이상은 줄어 들면 안되는 높이를 지정할수 있다. 값을 설정해 놓으면 화면의 높이가 그 이하로 줄어들어도 슬라이더의 높이크기는 설정해 놓은 값으로 유지된다.px 단위이나 px을 쓰지 않는다. (현재 버전 4.6.91 )
     
     Full Screen Align : 설정해 놓은 그리드 영역도 풀 스크린 모드가 된다.(그리드가 풀 스크린 영역으로 확장됨)
     
     Unlimited Height : 풀스크린 슬라이더에는 해당하는 옵션이 아니다. 단지 "Auto Responsive" 레이아웃을 선택했을때만 해당된다.(아래에서 설명)
     
     Force Full Width : 풀 스크린 슬라이더라도 그 슬라이더가 담겨져 있는 부모컨테이너의 넓이에 영향을 받아서 보여진다. 페이지 컨텐츠 영역내의 4분의 1칼럼 속에 슬라이더가 있다면 그 슬라이더의넓이는 페이지 컨텐츠 영역의 4분의 1 넓이밖에 안된다는 말이다. 이때 이 옵션을 On 하면 부모 컨테이너를 넘어서서 화면 전체 크기의 슬라이더가 된다. (일부테마의 박스(Boxed) 타입 레이아웃의 경우 넘어서지 못하기도 한다. 예)The 7 테마의 boxed타입)
     
     Grid Settings : (아래에서 설명)

     

6. Unlimited Height: (단지 슬라이더 레이아웃이 "Auto Responsive" 선택되었을때만 해당된다) 이 옵션을 이해하려면 먼저 아래 부분의 "8.Grid Settings"을 이해한후 부연 설명 을 참고한다.
7. Force Full Width: 웹페이지 내에서 슬라이더가 강제로 최대넓이가 된다.
8. Grid Settings: 슬라이더의 초기 사이즈를 지정한다.위 5번에서 슬라이더 레이아웃 선택을 "Fixed" 로 한 경우는 이 값이 페이지에서 보여지는 슬라이더의 크기가 된다. 만약 슬라이더 레이아웃 선택이 "Fixed"이외인 경우는 여기서 설정한 값을 기초로 해서 화면의 크기에 "반응(respond - 화면의 크기에 따라서 슬라이더의 크기가 변화함)" 한다. 특히 이 값은 슬라이더 내부에 레이어들을 위치시키는 영역이기도하고 (의도에 따라서 밖에 놓을수도 있지만...) 여기에 레이어를 위치시키는 이유는 반응하면서 확대/ 축소를 를 해도 여기서 설정한 부분의 내용은 항상 보여지기 때문이다.( 슬라이더가 확대 되어도 , 설정된 그리드 이상으로 그리드 영역 내부의 레이어들이 확대되는 법은 없으며, 슬라이더가 축소되어 설정된 그리드 보다 작아지는경우 그리드영역도 비율에 맞춰 축소되고 그 내부의 레이어들도 비율에 맞춰 축소된다. - 개별 슬라이드(slide) 편집 화면에서 레이어가 놓이게 되는 위치의 기준선(헬퍼 그리드-Helper Grid)도 이 그리드 세팅으로 만들어 진다.)
   이 세팅이 적절하지 못할경우 가로디스플레이와 세로 디스플레이 사이의 슬라이더 크기가 어색해 질수도 있다. 슬라이더의 넓이가 높이에 비해 큰 비율(가로로 넓은 슬라이더) 인데 세로 디스플레이 기기인 스마트폰에서 보여진다고 가정해 보자. 슬라이더의 가로/세로 비율과 같은 그리드넓이/높이가 설정 되어있다면 스마트 폰에서 보여지는 슬라이더는 두께가 너무 얇아서(좌우폭이 좁은 기기이므로 슬라이더가 충분히 넓어지질 못해서) 무슨 내용인지 알아보기 힘들게 될것이다. 이때 만약 슬라이더의 가로/세로 비율에 상관없이 그리드의 넓이 /높이 비율을 적당히 (너무 한쪽으로 치우치지 않게) 설정해 놓는다면 스마트 폰에서 슬라이더가 보여질때는 휠씬 크게 보여질 것이다. (물론 좌/우 이미지는 크롭되는 것을 감안해야한다.)
   • Grid Width: 슬라이더의 초기 넓이 (required value)
   • Grid Height: 슬라이더의 초기 높이 (required value)
9. Layout Example: 슬라이더 세팅의 옵션을 바꿀때 만다 그 옵션 변경이 어떻게 적용되는지 육안으로 확인할수 있도록 보여준다.
10. Save Settings: 설정한 세팅값을 저장한다.
11. Delete Slider: 현재 슬라이더를 삭제한다.
12. Close:레볼루션 슬라이더 플러그인 관리자 화면으로 간다.
13. Edit Slides: 현재 세팅 중인 슬라이더(Slider)의 하위 슬라이드(Slide) 목록 화면으로 넘어간다.
14. Preview: 현재 세팅중인 슬라이더를 실행시켜 보여준다.(물론 하위 슬라이드(Slide)가 추가 되어 있어야 한다.)

General Settings

^ back to Slider Main Settings menu

1. Delay: 슬라이더 내의 각각 슬라이드(slide)가 전환되는 간격을 나타내는 시간. 글로벌(전역)설정으로 각각의 개별 슬라이드 편집화면에서 재조정 할수 있다 1sec=1000
2. Shuffle Mode: 슬라이드가 전개 되는 순서가 슬라이드 리스트 순서가 아니고, 볼때마다 무작위로 달라지도록 설정하는 것
3. Lazy Load: 슬라이더가 페이지에 로딩될때 순서가 아닌 모든 이미지를 모두 로딩한후에 작동하는것이 아니고, 일단 필요한 이미지부터 로딩후 작동을 시작하고, 다음번 이미지는 자신이 등장할 순서가 되었을때 서버에서 불러들여 로딩하는 방식. 이 옵션은 페이지의 초기 로딩시간을 단축시키고, 캐시플러그인과 발생할수 있는 문제를 방지하는 데 유용하다.
4. Use Multi Language (WPML):WPML 플러그인(웹사이트를 다국어 사이트로 만들어 주는 플러그인)에 대응해서 레볼루션 슬라이더를 각 각 설정하는 국가별 언어로 만들수 있도록 도와준다. 활성화 하면 슬라이드(slide) 리스트 화면의 각각 슬라이드 에디트 버튼 아래에, 또 슬라이드 편집화면으로 들어가면 상단 부분에, 슬라이드의 언어를 선택할수 있는 버튼이 보여진다. 이 버튼을 누르면서 화면을 전환해 가며 각국의 언어로 슬라이들 작성할수 있고, WPML 언어 선택기의 선택에 따라서 각국의 언어로 변환된 슬라이더가 보여진다.
5. Enable Static Layers: 정적 레이어 (슬라이드가 계속 전환되도 항상보이는 버튼, 멘트, 로고 등을 보여줄때 사용할수 있는 레이어)가 활성화된다.
6. Next Slide on Focus:
7. Initialization Delay:

Loop and Progress

^ back to Slider Main Settings menu

• Stop Slider :슬라이더내에서 슬라이드들이 반복해서 돌아가게 할것인가 말것인가를 설정한다.
• Stop After Loops : 위에서 On을 선택했다면 멈추기전 몇번의 루프(반복동작)을 하고 멈추게 할것인가를 설정한다.
• Stop At Slide : 위에서 On을 선택했다면 몇번의 루프후 몇번째 슬라이드에서 멈출것인가를 설정한다.
• Show Progressbar : 슬라이드 전환시간을 진행막대로 보여 준다. 표시 위치를 상/하단 에서 선택할수 있고, 숨길 수도 있다.
• Loop Single Slide : 슬라이더 내에 단 한개의 슬라이드가 있을때, 이 슬라이드를 설정한 시간 간격만큼 지났을때, 다른 슬라이드 인것처럼 혼자서 전환되는 효과를 보여줄 것이지, 아니면 그냥 멈춰있는채로 둘것인지를 설정한다.

슬라이더 자동플레이 기능을 못하게 하려면

1. "Stop Slider" 를 "on" 으로
2. "Stop After Loops" 를 "0" 으로
3. "Stop At Slide" 를 "1" 로 설정한다.

Position

^ back to Slider Main Settings menu

이 섹션은 슬라이더가 웹사이트의 페이지 내에서 어떻게 정렬해 있을것인지 그리고 상/하/좌/우 마진값을 얼마로 설정할 것인지를 결정하는옵션이다. 포지션을 "Center"로 하는 경우 좌/우 마진 값은 입력되지 않는다. 상/하 마진은 위 아래 다른 컨텐츠들과의 간격을 설정할때 좋고, 좌/우 마진은 만약 슬라이더가 같은 부모 컨테이너 내에다른 컨텐츠들과 섞여 있다면(예를들어 다른 텍스트나 이미지등) 그것들과의 관계를 설정하는데 유용하다. (통상 포지션은 Center나 Left가 적당하다.)

Appearance

^ back to Slider Main Settings menu

1. Shadow Type: 슬라이더의 아랫부분에 그림자 효과를 선택한다. "그림자 효과없음"과 1~3 번 효과중 하나를 선택할수 있다.

   1:
   

   2:
   

   3:
   

2. Padding (border): 슬라이더를 담게되는 컨테이너에 패딩값을 준다. 결과적으로 그 안에 담기는 슬라이더는 테두리가 생기고, 그 색은 아래 "Background Color"에서 설정한 색이 된다.
3. Background Color: 슬라이더 바탕의 메인 배경색을 설정한다. 첫번째 슬라이드가 보여지기 전에 비춰지며, 만약 슬라이드가 투명막 슬라이드라면 아래로 이 색상이 비춰져서 보여지게 된다. Hex Color Codes 를 사용해도 되고 예 #ff0000 - 빨강, RGBA color space 를 사용해도 된다. 예 rgba(255,0,0,0.5) - 불투명도 0.5의 빨강
4. Dotted Overlay Size: 슬라이더의 배경에서 dotted/transparent overlay graphic(점이 찍힌 투명막???)효과가 보여지는게 하고 싶을때 이 점의 크기와 색상을 선택한다.
   • None
   • 2x2 Black
   • 2x2 White
   • 3x3 Black
   • 3x3 White
5. Show Background Image: "Yes"를 선택하면 슬라이더의 배경에 이미지를 넣을 수 있다. 이 이미지는 첫번째 슬라이드(Slide)가 보여지기 전에 살짝 보여지며, 만약 슬라이드를 이미지나 단일색이 아닌 투명막으로 선택해서 사용하였다면 슬라이드가 동작하는 동안 아래로 이 배경이미지가 보여지게 될것이다.
6. Background Image URL: 만약 바로 위에서 배경이미지를 사용하기로 선택했을때, 여기에 사용하고자 하는 이미지의 절대 경로를 넣으면 된다.
7. Background Fit: 위에서 슬라이더 메인 배경이미지를 설정할 경우 그 이미지에 적용될 CSS "background-size"속성의 값을 설정한다. 여기 이미지 참조
   • Cover: 슬라이더 전체 공간을 꽉 채우기 위해서 이미지가 늘어나거나 일부분이 잘려진다(슬라이더의 상하비율과 이미지의 상하비율이 다를경우)
   • Contain: 항상 이미지 전체가 슬라이더영역안에 들어간다. 이미지가 잘려지는 부분은 생기지 않지만, 이미지의 상하비율과 슬라이더 상하비율이 다를 경우 슬라이더 내부에 공백(이미지가 채워지지않는)이 생긴다.
   • Normal: 이미지가 리사이즈 되지않고 항상 이미지 원본의 크기 대로 슬라이더 배경에 자리한다.
8. Background Repeat: 만약 슬라이더의 배경이미지가 일반적인 이미지라면 반복해서 슬라이더의배경을 채울 필요는 없으나, 배경이미지가 일정한 패턴이나 무늬라면 X축,Y축 또는 둘다 반복해서 슬라이더의 배경으로 채워 넣을 수 있다.
9. Background Position: 슬라이더의 배경이미지 설정시 그 이미지가 슬라이더의 어느 지점을 기준으로 위치하게 될지를 결정한다. 위7번 "Background Fit"의 선택이 "Cover"이면 "center top" 이나 "center center"를 설정하는 것이 좋고, "Background Fit"의 선택이 "Contain"인 경우는 "center center" 가 좋다.

Navigation: 화면상에서 클릭하면 지정된 곳으로 이동할수 있도록 하는 요소

^ back to Slider Main Settings menu

1. Stop On Hover: "On" 설정시 슬라이더 위에 마우스가 위치하면 슬라이더의 진행이 멈춰진다..
2. Keyboard Navigation: "On" 설정시 키보드의 방향 좌/우 로 슬라이더의 화면 전환을 컨트롤 할수 있게 된다.
3. Navigation Style: 네비게이션에는 애로우(Arrow - 좌/우 화살표)와 불릿(Bullet - 슬라이더 중앙에 현재 슬라이더가 몇개중 몇번째인지를 표시하는 아이콘) 이 있고, 슬라이더에서 어떤 스타일을 사용할것인지를 선택한다.

   Round:
   

   NavBar:
   

   Preview 1:
   

   Preview 2:
   

   Preview 3:
   

   Preview 4:
   

   Old Round:
   

   Old Square:
   

   Old Navbar:
   

   Custom: 만약 레볼루션 슬라이더 플러그인이 당신의 테마에 패키지로 포함되어있어서 당신의 워드프레스에서 사용중이라면, 당신 테마가 만들어서 제공하는 스타일이 있을수 있다. 이때 이 옵션을 사용한다. 만약 테마에서 따로 제공하는 스타일이 없다면, 당신이 직접 만들수도 있는데 이때의 클래스 네임은 아래의 것을 이용해야 한다 참조:
   
   .tp-leftarrow.custom
   
   .tp-rightarrow.custom

4. Bullet Type: 옵션을 설정한다
   • None: 불릿 네비게이션을 사용하지 않는다.
   • Bullet: 전통적인 모양
   • Thumb: 썸네일을 모여주는 타입(아래그림)
     
5. Navigation Arrows: 화살표네비게이션이 보여지는 타입을 선택한다.
   • With Bullets: 불릿 네비게이션 양 옆으로 화살표 네비게이셔닝 합쳐진다. (not compatible with all "Navigation Styles").
   • Solo: 슬라이더의 좌/우에 네비게이션애로우가 위치하게 된다. (불릿 네비게이션과 따로따로)
   • None: 네비게이션 애로우를 사용하지 않는다.
6. Always Show Navigation: "On"하면 네비게이션이 항상 보여진다.
7. Hide Navigation After: 바로 위에서 "Off" 설정 했을때 마우스가 슬라이더에서 나왔을때 몇초후에 네비게이션이 사라지게 할 것인지를 milliseconds 단위로 적는다.
8. Bullets / Thumbnail Position: Bullets(Thumbnail) 네비게이션이 위치할 곳을 지정한다. 가로축의 위치(좌/센터/우)와 세로축의 위치(상/중/하)에다가 좌/우옵셋과 상하 옵셋값(px단위)을 지정할수 있다.
9. Left Arrow Position: 네비게이션 애로우중에서 왼쪽 화살표의 위치를 지정한다. 가로축의 위치(좌/센터/우)와 세로축의 위치(상/중/하)에다가 좌/우옵셋과 상하 옵셋값(px단위)을 지정할수 있다.
10. Right Arrow Position: 네비게이션 애로우중에서 오른쪽 화살표의 위치를 지정한다. 가로축의 위치(좌/센터/우)와 세로축의 위치(상/중/하)에다가 좌/우옵셋과 상하 옵셋값(px단위)을 지정할수 있다.

Thumbnails

^ back to Slider Main Settings menu

단지 섬네일의 세팅만을 하는곳이다.네비게이션 세팅 (Navigation Settings)의 4번 "Bullet Type"을 "Thumb" 으로 선택했을 때만 해당된다.

• Thumb Width : 썸네일의 넓이를 지정한다.
• Thumb Height : 썸네일의 높이를 지정한다.
• Thumb Amount : 썸네일을 몇개 보여줄것인가를 지정한다. (4.6.91 현재 px라고 적혀있는것은 오류인듯)

Spinner

^ back to Slider Main Settings menu

슬라이더의 이미지가 로딩되기전에 중심부분에서 빙글빙글 돌아가며 이미지가 로딩되고 있다는 것을 시각적으로 알려주는 아이콘(= Preloader)을 표시안함과 1~5번 모양 중에서 선택하여 설정할수 있다. 여기에서 설정된 프리로더는 슬라이더가 처음 실행된때 맨 첫 이미지의 로딩시에 보여지거나, Lazy Load 옵션을 활성화 했을 때는 슬라이더의 각각 슬라이드가 처음 로딩될때 (루프가 1번 돌때)마다 보여진다.

Parallax

^ back to Slider Main Settings menu

이 섹션은 슬라이더의 레이어에 패럴랙스효과(스크롤-마우스의 움직임에 따라 오브젝트와 배경 이미지가 시간차를 두고 변하는 기법) 를 나타내는 설정이다. 여기 와 여기 를 보면 예제를 볼수 있고, 또한 여기에서 예제를 가져올수 있다. ("example-zips/parallax_slider.zip" 또는 "example-zips/parallax_scroll_slider.zip") 파일을 이용해서 시작하면 편리할것이다.

1. Enable Parallax: 활성화하면 슬라이더에 팰럴랙스 효과를 넣는 설정(2~5번)이 가능해 진다. 또한 개별 슬라이드(Slide)편집화면의 슬라이드 레이어(Layer) 세팅 화면에 새로운 "parallax" 옵션이 활성화 된다.(바로 아래 이미지 참조)
2. Disable on Mobile: 아래의 Type 옵션중에서 마우스의 움직임에 반응하는 패럴랙스 효과의 경우 모바일기기에서는 필요가 없는 설정이므로 여기서 "On"하면 모바일에서는 사용하지 않도록 설정한다.
3. Type: Options are:
   • Mouse Position: 슬라이더 영역안으로 마우스오버가 되었을때 패럴랙스 효과가 나타난다. (마우스의 방향과 반대로 반응하며 마우스가 움직인 양 만큼 반응하는 값이 실험적으로 %단위이다. 100이면 마우스의 움직임과 양이 같고, 200이면 두배, 50 이면 절반이다)Example-예제에서 네겹의 파도중 최상단 파도는 3 (3%), 최 하단 파도는 10(10%) 정도 반응한다. (마우스를 슬라이더의 정 중앙에서 진입하여 좌/우 로 움직여 보면 파도가 반대로 움직이고,그 반응하는 양이 다르다.)
   • Scroll Position: 윈도우의 스크롤에 반응하여 레이어들이 패럴랙스 효과가 나타난다. 스크롤과 똑같이 작용하는것이 "0" (기본값)이고, 50이면 스크롤되는 양의 절반정도가 느리게 스코롤되고, 100이면 스크롤 되어도 레이어는 항상 그자리에 위치한다 (고정된 팰럴랙스) 100이상은 스크롤되는 방향과 반대로 스크롤 된다.Example
   • Mouse & Scroll: 마우스와 윈도우 스크롤 모두에 위와 같이 반응한다.
4. BG Freeze: "On"하면 슬라이드 이미지(슬라이드 배경이미지)가 패럴랙스와는 아무 상관없이 (평상시 기본 적인 반응과 같음)움직이고, "Off" 하였을 때는 슬라이드 이미지(슬라이드 배경이미지)가 패럴랙스 효과를 갖게 된다. 기준값은 아래에서 설정하는 Level Depth 1 을 사용한다. (이상은 레볼루션 슬라이더 제작사인 테마펀치의 지침이나... 만약 슬라이드 이미지의 위치가 스크롤 해도 항상 같은 자리에 있는 패럴랙스 효과를 만들고 싶으면, 그들은 배경이미지의 패럴랙스효과를 위해 이 기능을 사용하지말고 (ON 해 놓고 - Off 시에 패럴랙스 효과가 나타나므로),슬라이드로 투명 배경을 선택한후, 배경이미지에서 보여주고 싶은 이미지를 레이어에 넣고, 위치는 center center 로 하고,그 레이어의 패럴랙스 level depth 를 최상으로 놓고 (100정도) 사용하라고 한다.(개인적으로 이 훌륭한 플러그인의 가장 미흡한 기능이 바로 팰럴랙스라고 생각한다. BG Freeze 기능은 불안하고, 레이어를 이용한 방법도 스크롤시 떨림현상이 많다. 테마 펀치에서도 5.0버전에서 개선된 패럴랙스기능을 선보이겠다고 약속하고 있는 상태다 (현재 Ver. 4.6.91))
5. Level Depth 1-10: 슬라이드(Slide) 안에 레이어를 설정할때, 각각의 레이어에 다른 양만큼의 패럴랙스 효과를 줄수 있다. 여기서 각 레이어가 선택할 패럴랙스 효과의 정도(깊이)를 10가지로 분류하여 미리 규정해 놓고 , 개별 슬라이드 내의 개별레이어 설정에서 사용할수 있다.(바로 아래 사진) 작은 숫자가 적게 움직이고(마우스 움직임시 작게 반응 = 스크롤시 스크롤속도와 격차가 적음), 큰 숫자일때 많이 움직인다( 마우스 움직임시 크게반응 = 스크롤시 스크롤과 격차가 큰 예) 100 으로 지정하면 화면 스크롤 해도 스크롤과 똑 같은 격차로 밀림 = 스크롤을 해도 항상 그자리에 위치한다= )

   

Mobile Touch

^ back to Slider Main Settings menu

1. Touch Enabled: 모바일에서 슬라이드를 터치로 넘기는것을 허용한다.
2. Swipe Threshold(0 - 200) : 모발일에서 터치(스와이프 =Swipe)가 얼마만큼 되어야 명령으로 인식할것인가를 지정하는 것. 낮을수록 민감하고 높을수로 정확하게 스와이프 되어야 슬라이드가 넘어간다.
3. Swipe Min Finger: 모바일에서 최소한 몇개의 손가락으로 스와이프해야 명령으로 인식할것인지를 설정한다.
4. Drag Block Vertical: "On" 하면 슬라이더 위에서 상하 방향의 터치에 아무 반응도 하지 않는다. "Off"하면 화면이 스크롤됨. (*주의 : 슬라이더가 모바일 화면에서 크게 위치할때 이 기능이 on 되어있으면 드래그하지 못하게 될수도 있다)

Mobile Visibility

^ back to Slider Main Settings menu

1. Disable Slider on Mobile: 모바일 기기에서 레볼루션 슬라이더가 사라지도록 설정한다.
2. Disable KenBurn on Mobile: 모바일 기기에서 켄번 슬라이더 효과가 사라지도록 설정한다.
3. Hide Slider Under Width: (사용하지 않을때는 "0" 입력)화면의 크기가 여기서 설정한 넓이 보다 작아지면 레볼루션 슬라이더가 사라진다.예를 들어 스마트 폰에서만 슬라이더가 보이지 않게 하고 싶으면 "641" 을 넣으면된다.
4. Hide Defined Layers Under Width: (사용하지 않을때는 "0" 입력) 여기에 설정된 넓이 이하로 화면이 작아지면, 슬라이드 안의 레이어 중에서 특별이 선택된것(개별레이어 세팅 중에서 "Advaced Responsive Settings"의 Hide Under Width 가 선택된 레이어 - 아래의 이미지참조)들은 사라진다.

   

5. Hide All Layers Under Width: (사용하지 않을때는 "0" 입력) 여기에 설정된 넓이 이하로 화면이 작아지면, 슬라이드 안의 모든 레이어가 사라진다.(위에서 설정된 "Hide Under Width" 설정은 여기서 설정된 화면 이전 크기에서만 작용한다. 예)1920px 화면에는 모든 레이어가 보이고, 1000px 화면에서는 몇개의 레이어만 사라지고, 600px 이하가 되면 모든 레이어가 사라지게 할수 있다.)
6. Hide Arrows on Mobile: "On"했을때 모바일에서 좌/우 화살표 네비게이션이 사라진다.
7. Hide Bullets on Mobile: "On"했을때 모바일에서 불릿네비게이션이 사라진다.
8. Hide Thumbnails on Mobile: "On"했을때 모바일에서 섬네일 네비게이션이 사라진다.
9. Hide Thumbs Under Width: 여기서 설정한 화면 이하가 되면 슬라이더의 섬네일이 사라진다.
10. Hide Mobile Nav After: 슬라이더에 나타났던 네비게이션들(좌/우 방향, 불릿(또는 섬네일))이 여기에 설정된 시간이 지나면 사라진다.(1초=1000)

Alternative First Slide

^ back to Slider Main Settings menu

이 옵션에서는 슬라이더가 처음동작할때 보여지길 원하는 슬라이드와 그 슬라이드에 적용되는 애니메이션 효과를 지정할수 있다.

1. Start With Slide: 슬라이더가 처음동작할때 로딩되길 원하는 슬라이드가 1번이 아닌경우 여기서 다른 슬라이드 번호를 지정하면 그 것이 첫번째로 로딩된다."General Settings"에서 "Shuffle Mode"가 "Off" 인 경우에만 해당된다.
2. First Transition Active: 첫번째로 로딩되는 슬라이드에 여기서 특정한 에니메이션효과를 줄것인지 말것인지 결정한다."On"하면 아래 옵션에 입력이 가능해진다.
3. First Transition Type: 첫번째로 로딩되는 슬라이드에 적용할 에니메이션효과를 여기서 선택한다.
4. First Transition Duration: 첫번째로 로딩되는 슬라이드에 에니메이션효과가 적용되는 시간을 여기서 선택한다.
5. First Transition Slot Amount: 첫번째로 로딩되는 슬라이드에 적용된 에니메이션효과가 "slots-based(슬롯모양으로 분할되어 나타나는 타입들)"효과중 하나라면, 그 효과에 적용되는(분할 되는)양을 여기에서 설정한다. 7이나 그 이하의 값이 권장된다. (예. 트랜지션타입을 "Fade Boxes"로 하고 이설정에 "4"를 넣으면 슬라이드가 처음 동작할때 첫 슬라이드의 등장 은 4개의 격자모양으로 시작된다.)

Fallbacks

^ back to Slider Main Settings menu

Fallbacks :대비책 - 무언가 적용이 실패할때 차선책.

1. Simplify on IOS4/IE8: IOS4/IE8 일때 Ken burn(켄번 슬라이더)는 효과가 사라지고 항상 슬라이더 공간이 꽉 차도록 이미지가 리사이즈된다.
2. Use Alternative: 여기서 선택한 상황인 경우 슬라이더 대신 아래에서 설정한 이미지를 보여준다. 예)모바일인 경우 아래에서 선택한 이미지를 슬라이더 대신 보여줘라
3. Alternate Image: 바로 위 옵션에서 선택한 상황이 될 경우 여기에 입력된 주소의 이미지를 보여준다.(대체 이미지)

Global Overwrites

^ back to Slider Main Settings menu

이 슬라이더 내의 모든 슬라이드에 동일한 트랜지션효과(슬라이더가 등장할때 나타나는 에니메이션효과)를 적용하고, 동일한 트랜지션 시간을 적용할때 사용한다.(여기서 설정하고 저장해도 위의 "Alternative First Slide" 에서 설정한 것은 적용된다.) 두가지를 설정하고, "Excute settings on all slides" 를 누른후, 메인화면의 "Save Settings"가 눌려야 적용된다.

Troubleshooting

^ back to Slider Main Settings menu

The Troubleshooting section is useful for solving conflicts with themes and other plugins.

1. jQuery No Conflict Mode: 만약 사용중인 테마나 다른 플러그인이 jQuery에서 "$"기호를 사용한다면, 여기서 "On"할경우 이것들의 사용을 "jQuery"로 바꿀것이다.(워드프레스 자체가 No Conflict Mode를 사용한다. 하지만 일부 테마나 플러그인이 No Conflict Mode로도 해제가 되지 않도록 "$"기호를 jQuery에서 사용하여 충돌이 발생하게 되는 경우가 생긴다.(에러가 발생) 이를 방지하기위해서 이 옵션을 사용한다.)
2. Put JS Includes To Body: 레볼루션 슬라이더에서 필요로 하는 자바스크립트 라이브러리를 보통은 페이지의 head 태그안에 집어넣는다.그러나 여기서 "True"에 체크하면 이것들이 페이지의 슬라이더 html 태그 바로 위에서 불려진다. 이렇게 하는것은 사이트 내에서 jQuery나 다른 자바스크립트라이브러리 사이에서의 충돌로 에러가 발생할경우 (에러문 내에 javascript 관련 문장이 있을것임) 해결하는데 유용하다.
3. Output Filters Protection: 어떤 테마에서는 슬라이더가 깨져 보이기도 한다. 워드프레스가 포스트나 페이지에 기본 필터를 적용하여 컨텐츠를 처리하는데, 테마자체의 숏코드를 이용해서 페이지를 만들때 이 필터 기능을 정지해 주어야 한다.그렇게 하지 않은채 숏코드가 작성되면 br,p 태그등이 섞여 들어간다. 이럴때 레볼루션 슬라이더의 숏코드가 섞여 있으면 이속에도 br,p 태그가 섞여 들어가므로 에러가 발생할수 있다. 이때 여기 있는 옵션중 하나로 해결할수 있다.(대부분 "by Echo Output" 설정으로 해결된다)

Google Font Settings

^ back to Slider Main Settings menu

구글폰트를 설정하는 섹션이었으나, 현재는 어드민 메뉴의 "Punch Fonts"로 기능이 들어갔다. 여기서는 더이상 아무것도 할것이 없다. 구글 폰트를 설정해서 레볼루션 슬라이더에서 사용하고 싶으면, 왼쪽 사이드에 있는 "Punch Fonts"로 간다. .

CSS / JavaScript

^ back to Slider Main Settings menu

이 섹션은 이 슬라이더가 들어있는 페이지에서만 로딩되는 Custom CSS와 자바스크립트를 적어넣을수 있는 곳이다.

created a slider (슬라이더 만들기)가 완료 되면, 이제 슬라이드(Slide)를 만들수 있는 준비가 된것이다. 슬라이더 메인 페이지에서 아래의 이미지처럼 "Edit Slides" 버튼을 누른다:

새 슬라이드를 만들수 있는 페이지에 가게되면, 아래와 같이 보일것이다. 각 기능들을 설명하면:

• New Slide : 워드프레스 미디어 리스트에서 선택한 이미지를 배경 이미지로 하는 슬라이드가 추가 된다.(미디어를 선택하는 창이 활성화된다)
• New Transparent Slide : 공백(투명한 막)슬라이드가 추가된다. 이후에 슬라이드 편집화면에서 배경이 공백이 아닌, 이미지나 색상으로 바꿀수 있다.
• Close :플러그인의 메인 관리자 화면으로 간다.
• Slider Settings :슬라이더의 메인 세팅 화면으로 간다.

예제에서는 위 이미지의 중 "New Slide"버튼을 눌러서 사용한다. 이 버튼을 누르면 슬라이드의 배경이미지로 사용할 것을 선택하는 창이 나타난다. 여기서 새로운 이미지를 업로드하거나 현재 업로드 되어있는것중에 골라서 선택한다:

힌트:여러개의 이미지를 선택할수 있다.(선택된 이미지가 각각 하나씩의 슬라이드가 된다)

슬라이드의 배경으로 사용할 이미지가 선택되면, 새로운 슬라이드의 리스트가 생성된것을 볼수 있다. 슬라이드 옵션 정보가 포함된 아래의 이미지를 참조:

만약 슬라이드가 여러개라면 오른쪽의 화살표를 클릭/ 드래그 하여 순서를 바꿔줄수 있다.:

이 섹션안에서 개별 슬라이드에 적용되는 모든것을 관리할수 있다. (슬라이드의 배경이미지, 레이어추가,하이퍼링크, 애니메이션효과 등등)

개별설정을 시작하기 전에 이화면에서 다루는 일반적인 버튼들을 살펴 보자:

General Slide Settings (슬라이드 일반 설정)

^ back to Slide Settings menu

1. Slide Title: 이 슬라이드의 이름. 단지 슬라이드 관리를 위해서만 사용된다.
2. Published: 슬라이더 내에서 이 슬라이드의 공개 여부. 만약 "published" 상태라면 웹사이트 내의 슬라이더 안에서 이 슬라이드가 보여지는 상태인 것이고, "Unpublished" 는 이 슬라이드가 숨겨져 있는 상태를 나타낸다. 이 옵션은 슬라이드를 만들었지만 아직 계획적으로 공개되지않고 기다릴때 사용하면 유용하다.

1. Visible From: 이 슬라이드가 슬라이더 속에서 보여지기 시작하는 시간을 설정할수 있다. 여기서 시작시간을 세팅하고, 이 시각이 되기 전에는 보여지지 않다가 도달하면 보여진다. 보통 날짜로 세팅하는데 시간세팅도 가능하다. 시간은 GMT(그리니치 평균시)를 따른다. 한국일 경우 현재 시각에서 -9시간 (VER 4.6.91 ). 물론 바로위의 "Published"가 "published" 상태여야 한다.
2. Visible Until: 이 슬라이드가 슬라이더 속에서 사라지기 시작하는 시간을 설정한다.

1. Transitions: 이 슬라이드가 등장할때의 전환효과(애니메이션효과) 를 선택한다.여러개 선택 가능. (여기서 선택된 전환효과는 슬라이드 자체에만 해당되며, 이 슬라이드 위에 놓여지는 개별 레이어들에게 해당되는것은 아니다.) 여러개를 선택하면 슬라이드가 나타날때마다 순서 대로 변경되며 전환효과가 나타나고, 하나의 전환효과로만 표현 하고 싶으면 한가지만 선택하면 된다."Random Transitions" 선택하면 매번 임의로 선택된 효과가 나타날것이며, 단순히 "Fade" 또는 "No Transition(효과없음)"을 선택할수도 있다.

   

2. Slot Amount: 이름속에 "slot"과 "boxes"가 포함된 전환효과에 적용되며, "slot"전환효과란 슬라이드가 전환될때 배경이미지가 여러 조각으로 분리되는 애니메이션효과가 나타나는 것을 말하며, 여기서 설정하는 "슬롯 개수"는 분리되는 조각의 숫자를 설정하는 것이다.7이나 그 이하를 사용하는것이 권장된다.
3. Rotation: Rotation (-720 -> 720, 999 = random) Only for Simple Transitions.
4. Transition Duration: 슬라이드가 전환되는데 걸리는 시간 (시작에서 완전히 등장할때 까지) 1초=1000 (300 에서 1000사이 권장)

1. Delay: 다음 슬라이드가 나타날때 까지 머물러 있는 시간. 공란으로 두면 슬라이더 메인 설정화면의 "General Settings(일반설정)"에서 설정한 시간을 사용한다. 여기에 값을 입력하면 이 슬라이드에만 적용되는 값을 갖게 되는것이다.
2. Save Performance: 현재 작동된 슬라이드가 많은 레이어를 가지고 있고, 이것들이 모두 나타나고 사라지는 트랜지션을 가지고있다면, 다음 슬라이드가 등장하기 전까지 미쳐 이 슬라이드의 레이어들이 동작을 완료하지 못해서 , 등장하는 슬라이드가 느려지거나 들쭉날쭉해지는 경우가 생길수 있다. 이때 이 옵션을 "On"으로하면 이전 슬라이드의 레이어가 완전히 사라진후 다음 슬라이드가 작동을 시작한다. *최근 애니메이션 엔진의 성능이 좋아져서 크게 필요하지않은 기능

이 슬라이드가 링크를 갖게하는 설정 (개별 레이어가 아닌 슬라이드 전체)Click here for more information about hyperlinking slider content.

1. Enable Link: 슬라이드가 링크를 가질수 있도록 설정
   • "Enable" = 하이퍼링크 사용
   • "Disable" = 링크사용 안함
2. Link Type:
   • "Regular" = 외부의 다른 사이트나,내 사이트의 다른 페이지로 링크할때
   • "To Slide" = 이 슬라이드가 있는 슬라이더의 다른 슬라이드로 링크
3. Slide Link: (위에서"Link Type"을 "Regular"로 선택한 경우) 슬라이드를 클릭하면 가게될 웹페이지 를 지정한다. url을 적어넣을 수도 있고, 템플릿 슬라이더의 경우 메타 태그를 넣을 수도 있다. (%link% - 현재 슬라이드에 나타난 포스트나 상품의 페이지로가기, %meta:somemetatag% - 사용자가 지정한 메타태그를 이용한 링크 ,예)커스텀필드 사용)
4. Link Opens In: (위에서"Link Type"을 "Regular"로 선택한 경우)
   • "Same Window" = 현재 사용중인 브라우저 창에서 링크된 페이지를 띄움
   • "New Window" = 새로운 창이나 탭에서 링크된 페이지를 띄움
5. Link to Slide: (위에서 "Link Type" 을 "To Slide"으로 선택한 경우) 링크 하고싶은 슬라이드를 선택한다.
6. Link Position:
   • "Front" 슬라이드 어디에서나 링크가 가능(클릭이 가능).레이어 위에서도 가능하다는 뜻
   • "Back" = 레이어 위에서는 안되고, 레이어가 없는 공간에서만 클릭이 가능해진다.

Thumbnail: 만약 slider's navigation settings (슬라이더 네비게이션 설정))에서 썸네일을 사용하기로 설정되어 있다면, 이 슬라이드를 위해서 사용할 썸네일을 여기서 설정할수 있다. 만약 설정하지 않으면 아래에 설정되어있는 슬라이드 메인 배경이미지를 자동으로 리사이즈해서 사용한다.

1. Class: 이 슬라이드를 위한 class를 설정한다.이 슬라이드에만 적용할 CSS를 설정하기 위해서 사용하면 좋다.
2. ID: 이 슬라이드를 위한 ID 를 설정한다. jQuery 스크립트등을 이용해서 이 슬라이드에 접근할때 선택자로 사용하면 편리하다.
3. Attribute: 이 슬라이드가 만들어 지는 li HTML element 속에 attribute(속성)을 추가 할 수 있다.(값이 없는 속성만 입력가능)
4. Custom Fields: 이 슬라이드의 메인 HTML element 속에 넣고싶은 "속성=값" 문장을 넣을수 있다. 연결해서 계속 입력해 넣으면 다수도 가능, 여기에 입력한 그대로 이 슬라이드의 소스코드 속에 삽입된다.(콤마를 넣으면...콤마도 포함된다. 테마펀치 메뉴얼에는 콤마로 분리하라는데... 넣지 않아도 된다)

Slide Main Image / Background (슬라이드 메인 이미지/배경 설정)

^ back to Slide Settings menu

이미지, 단색 또는 아무것도 없는 투명창 을 개별 슬라이드의 메인 배경으로 설정할수 있다.

참고 : 여기서 설정하는 것은 슬라이'더' 의 메인 배경을 설정하는 것과 다른것임을 명심하자.

1. Background Source:
   • Image BG: 만약 슬라이드를 만들때 배경이미지를 설정하지 못했거나, 설정한 것이 마음에 들지않아 교환할때 "Change Image" 를 클릭하면, 워드프레스 미디어창이 팝업된다. 여기서 새로운 이미지를 선택한다.

     

      

   • External URL: 슬라이드의 배경으로 사용할 이미지가 다른 웹사이트에 있다면 여기에 링크를 걸어 가져올수 있다.

     

      

   • Transparent: 배경이미지와 배경색 모두를 사용하지 않을때 선택한다.완전히 투명한 슬라이드가 된다.

      

   • Solid Colored: 슬라이드의 배경으로 사용할 색상을 선택한다.(단색 슬라이드)

     

      

2. Background Settings:
   • Background Fit: 이 옵션에서 대체적으로 좋은 선택은 "Cover"이고,슬라이더 안에서 가장 적합한 이미지의 크기는 슬라이더의 설정된 그리드넓이와 높이 (Grid Width and Grid Height settings)에 맞춰서 제작하는것이다.
     • Cover: 이미지가 슬라이드에 꽉 차게 보여진다. 슬라이드 안에 빈공간이 없도록 이미지가 슬라이드 영역을 감싸안는 모양.그리드의 넓이/높이 비율과 이미지의 넓이/높이 비율이 다를때 이미지가 잘려보여진다.
     • Contain: 이미지의 전체가 항상 슬라이드안에 보여진다. 잘려나가는 부분이 없다. 그리드의 넓이/높이 비율과 이미지의 넓이/높이 비율이 다를때 슬라이드 내에 빈 공간이 생기게 된다.
     • Percentages: 슬라이드 넓이에 % 비율로 이미지가 리사이즈된다.
     • Normal: 이미지가 원본 크기 그대로 들어 슬라이드에 보여진다.

      

     위에서 언급했듯이 슬라이더의 그리드 넓이와 높이 (Grid Width and Grid Height) 크기와 같은 사이즈로 이미지를 만들어서 슬라이더을 만드는 것이 가장 좋은 선택이다. 불가피하게 그렇게 하지못한다면 "Cover" 과 "Contain"의 설정에 따라서 이미지가 어떻게 보일것인지 정확하게 아는것이 중요하다.

      

      

     아래의 예제는 그리드의 넓이가 900,높이가 300인데 (900x300), 이미지의 크기는 600x300인 경우이다.

      

      

     원본 이미지(600x300):

     

      

      

     Background Fit = Cover 로 선택했을때: 이미지가 그리드 보다 작기때문에 그리드 영역을 가득채우기 위해서 넓이와높이가 크게 리사이즈 된다. 넓이가 늘어난 만큼 높이도 늘어나서 결과적으로 이미지 상단이나 하단이 보여지지 않는다.(나중에 나오지만 "Background Position" 설정에 따라서 잘려지는 위치가 달라진다.)

     

      

      

     Background Fit = Contain 로 선택했을때: 그리드 안에 이미지 전체가 보여진다.(예제에서는 높이가 둘다 300px 이기 때문에 원본 이미지가 작아지지는 않았으나, 만약 설정된 그리드의 높이가 300이하라면 이미지의 크기는 작아져서 들어갈것이다.)

     

      

      

      

   • Background Repeat: 선택한 이미지를 반복해서(XY축동시,X축만,Y축만) 슬라이드의 배경을 채운다는 뜻이다. 패턴형식의 배경이미지를 사용할때 유용하다.( ex. 10x10px png 파일 패턴)

     

      

   • Background Position: 배경이미지의 위치를 설정한다. 9가지선택이 가능하며, 슬라이드 내에서 이미지가 어떻게 보일지를 조정한다. 보통 왼쪽상단(Left Top) 이나 정중앙(Center Center)이 무난하다.

      

      

     "Background Fit" 옵션과 "Background Position"옵션에 따라서 이미지가 슬라이드 내에 어떻게 보여지는지 예제를 보자

      

     "Background Fit" 옵션은 "Cover" 이고, "Background Position" 옵션이 "Left Bottom"일때 아래와 같이 보여진다.

     

     "Background Fit" 옵션은 "Contain" 이고, "Background Position" 옵션은 "Right Top"일때 아래와 같이 보여진다.

     

    

3. Ken Burns / Pan Zoom Settings 이 슬라이드의 배경이미지가 등장한 후 켄번(Ken Burns :1953년생 미국인. 다큐멘터리 감독) 효과(이미지가 줌밍/패닝 되는 효과)가 나타나도록 설정한다.  켄번효과란? 예제보기 , 레볼루션 슬라이더의 켄번 예제

    

   

    

   1. Start Position: 켄번 효과가 시작되는(패닝이 시작되는)순간의 위치를 설정한다.
   2. End Position: 켄번 효과가 끝나는(패닝이 끝나는)순간의 위치를 설정한다.( Start Position에서 End Position으로 이동할것이다.)
   3. Start Fit: 켄번 효과가 시작되는 순간의 이미지의 크기
   4. End Fit: 켄번 효과가 끝나는 순간의 이미지의 크기 (여기까지 네 가지의 조합으로, 패닝과 줌밍이 이루어진다.)
   5. Easing (애니메이션 흐름을 원활하게 하기 위해 동작 속도를 조절하는것): "Linear.easeNone(속도의 변화가 없이 일정한속도 유지)"이 가장 무난하다.
   6. Duration: 켄번효과가 시작해서 끝날때 까지의 지속시간.

참고:

• 전통적인 켄번효과를 내기 위해서 "Easing"설정은 "Linear.easeNone"를 선택하는 것이 가장 좋다.
• 만약 슬라이드가 등장할때 전환효과시간(Transition Duration)이 설정되어있다면, 이 시간과 켄번효과에서 설정한 시간을 합친 시간 이상으로 슬라이드의 지속시간(Delay)이 설정되어야 한다.(그렇지 않으면 어느한쪽의 시간이 강제로 짧아진다.)
  [ 슬라이드 전환효과(되는)시간(Transition Duration)+켄번효과가 시작해서 끝날때 까지의 지속시간(Duration) ≤ 슬라이드 지속시간(슬라이드 화면이 보이기 시작해서 사라질(다음슬라이드로전환)때까지의 시간 : Deley) ]

여기까지 슬라이드 메인설정이 끝나면 이제부터는 비디오, 이미지, 텍스트, html 등 추가적인 컨텐츠를 이 슬라이드 위에 추가할수 있다.

Slide 섹션(현재 슬라이드 미리보기 + 레이어를 관리하는 화면)

만약 작업중에 생각했던 것과 다르게 미리보기가 보여진다고 느껴지면...한번쯤 페이지를 다시로딩해 보세요.간혹 보여지는것과 미리보기가 다른 경우가 있습니다.

Add Layer - Text/HTML Layer (텍스트,HTML,버튼,숏코드 레이어)

^ back to Slide Layer Content menu

기본 텍스트/HTML 레이어를 추가한다. 그냥 입력칸에 추가하면된다. 또한 다른 플러그인에서 제공하는 숏코드도 입력 할 수 있다(100%는 아니지만, 대부분의 다른 플러그인과 호환된다.) 버튼을 추가 할수도 있다.

참고: JavaScript/CSS/PHP 소스코드는 추가되지 않는다.

Basic Text (텍스트)

Raw HTML (HTML 코드)

Buttons (버튼)

Shortcodes (숏코드)

Add Layer:Image - Image Layers(이미지 레이어)

^ back to Slide Layer Content menu

Add Layer:Video - HTML5 Video, YouTube & Vimeo (동영상 레이어)

^ back to Slide Layer Content menu

내 웹사이트에 업로드된 비디오 파일을 이용하는 HTML5 Video와, 유튜브와 비메오를 이 레이어로 삽입할수 있다. (레볼루션 비디오 슬라이더를 가져와서 테스트 해 보자import one of the video demos)

HTML5 Video (내가 가진 동영상 파일을 직접 슬라이더에 넣는방법)

HTML5 Video 레이어를 넣기 위해서 우선 당신의 웹사이트에 비디오 파일을 업로드 해야한다.워드프레스 미디어 메뉴를 이용해서 업로드 할수 있고, 파일이 너무 크다면 FTP를 이용해서 업로드 할수도 있다.

대부분의 웹브라우저는 HTML5 Video를 작동시키기 위해서 "mp4"파일 형식을 지원한다.Firefox 와 Apple Macs을 제외하고 말이다. 이 제외된 브라우저를 위해서 대체할수 있는 비디오 파일 형식이 필요한데 "ogv" (Theora) 와 "webm" 파일형식이 그것이다. 보통 비디오 파일을 만들때 mp4파일을 만들고 두가지중 하나로 다시 만들어 준다. 참고 :비디오 파일을 인코딩해주는 프로그램.

Firefox 와 Apple Macs 을 위한 대체 비디오는 "ogv" 나 "webm"중 하나만 있으면 된다.
만약 슬라이더에 비디오를 추가 했는데 비디오가 작동하지 않는다면, 당신의 호스팅 서버가 이 비디오 파일 타입을 지원하지 않기 때문일 것이다. 그때는 이 글을 참고한다.

참고 : 아이폰, 아이패드를 포함해서 대부분의 모바일 기기들은 웹 페이지 로딩시 오디오와 비디오의 자동시작을 허용하지 않는다.(배터리 수명을 위한 조치) 그래서 아래의 1번에서 설정하는 "Poster Image"를 비디오의 미리보기 화면으로 보여준다.

1. Poster Image Url: 비디오를 위한 미리보기 이미지를 제공하는 경로를 적는다.옵션이지만, 모바일 기기를 위해서 꼭 추천하는 항목이다.
2. Video MP4 Url: 비디오 "mp4" 파일의 절대 경로를 적는다. (필수요소)
3. Video WEBM Url: 비디오 "webm" 파일의 절대 경로를 적는다.
4. Video OGV Url: 비디오 "ogv" 파일의 절대 경로를 적는다. ( WEBM 과 OGV 두개중 하나만 적으면 된다.)
5. Full Screen: 체크하면 슬라이드 속에 비디오가 슬라이드의 넓이만큼 강제로 넓어진다. 동시에 6,7번옵션은 사라진다.
6. Width: 비디오의 넓이를 지정한다.정확한 리사이즈를 위해서 비디오 원본의 넓이를 넣는것이 좋다
7. Height: 비디오의 높이를 지정한다.정확한 리사이즈를 위해서 비디오 원본의 높이를 넣는것이 좋다
8. Force Cover: 비디오를 "Full Width"하면 슬라이드의 비율에 따라서 비디오의 상/하에 공란이 생길수 있다. 이때 이 옵션을 선택하면 비디오가 슬라이드 전체에 채워진다.(대신 비디오가 잘려질수있다) 슬라이드 배경이미지설정의 Background Fit -> Cover와 유사하다. 체크하면 아래와 같이 두가지 옵션이 나타난다.

   

   • Dotted Overlay : 동영상 위에 점으로된 막을 덮어씌우는 효과를 낼수 있다. 이때 점(Dot)의 크기와 색상을 지정한다.
   • Aspect Ratio : Cover 를 선택했을때 들어가는 동영상의 가로 세로 비율을 선택할수 있다.
9. Autoplay: 슬라이드 안에 비디오가 나타나자 마자 플레이 된다.(모바일 기기에서는 해당되지 않는다.위의 참고를 보라)
   여기를 체크하면 "Only 1st Time"이 활성화 되는데 이것은 이 비디오가 있는 슬라이드가 처음등장할때만 자동플레이 되는 옵션이다
10. Loop Video: 슬라이드 안에서 비디오가 어떻게 반복 플레이 될것인지를 설정한다.

    

    • Disable (1번 플레이시키는 옵션): Autoplay 인경우- 동영상이 무조건 한번 플레이 되면 다음 슬라이드로 넘어간다. 중간에 정지해도 넘어간다
      Autoplay 가 아닌경우 - 슬라이드가 머물러 있는동안 플레이 시키지 않으면 Delay 시간이후 다음 슬라이드로 넘어가고, 플레이 시키면 동영상이 한번 플레이 되어 끝나거나 ,스톱 시킬때 까지 슬라이드가 진행되지 않는다.
    • Loop : Autoplay 인경우 - 비디오가 계속 반복되며 , 정지시키면 그때 다음 슬라이드로 넘어간다.
      Autoplay 가 아닌경우 - 슬라이드가 맞춰진 슬라이드지속시간(Delay = 보여지는시간)대로 돌아 가다가 비디오의 플레이를 누르면 슬라이드가 정지하고 동영상이 계속 반복된다.
    • Loop, Slide does not stop : 비디오가 돌아가도 슬라이드가 넘어갈 시간이 되면 그냥 넘어간다. 다음 차례가 되었을때 다시 비디오가 돌아간다.(계속해서 슬라이드 Delay 타임 만큼만 동영상이 보여지는것)
11. Next Slide on End: 위에서 "Loop Video" 옵션이 "Disable"인 경우 한번의 동영상이 다 돌고, 더해서 슬라이드 Delay가 적용된후 다음 슬라이드로 넘어간다.이때 이 옵션을 체크하면 동영상이 끝나자 마자 바로 다음 슬라이드로 넘어간다.
12. Force Rewind: 동영상이 돌아가고 있을때 수동으로 슬라이드를 넘긴경우 , 다시 동영상이 있는 슬라이드 차례가 되었을때 동영상은 멈췄던 자리에서 다시 시작된다. 그런에 이 옵션을 체크하면 이경우 처음부터 동영상이 돌아간다.
13. Hide Controls: 비디오의 컨트롤 버튼을 슬라이드에서 보이지 않게 한다.
14. Mute: 비디오의 소리 볼륨을 "0"으로 한다.(무음)
15. Disable Mobile: 모바일 기기에서 동영상을 표시하지 않는다.(동영상은 없는것처럼 슬라이드가돌아간다.)
16. Video Preload: 비디오 파일은 프리로드(미리 가져와서 저장함)가 되지않고, 요구에 따라서(플레이 되는 순간에) 불려진다. 이 옵션은 비디오의 메타데이터 라도 미리 가져오는 동작을 하겠는가 를 묻는 옵션이다.
    
    Argurment :아래 Youtube/Vimeo에서 설명

YouTube / Vimeo (유튜브와 비메오의 동영상을 불러와서 슬라이더에 넣기)

유튜브와 비메오의 동영상을 넣기 위해서 먼저 각각의 사이트에 접속해서 원하는 동영상의 비디오 ID를 찾아와야 한다. (브라우저의 주소창에 표시):

참고: 만약 당신의 비메오 동영상이 "private" 등급이면 동영상을 슬라이더에 불러올수 없으므로, 일단 "public"으로 한후 동영상을 슬라이더에 불러와서 넣는다. 슬라이더를 저장한후 다시 비메오 계정에 들어가서 동영상을 "private"으로 바꿔 놓으면된다.

다음, 유튜브나 비메오중 하나를 선택해서 비디오 ID를 입력하고, "Search"를 누른다:

Special Note: YouTube and Vimeo videos will always "fit" the video to display within the allotted space. Because of this, if you need your video to always cover the entire size of the slide, use HTML5 video with the "Cover" option instead.

1. Full Width: 선택하면 비디오가 슬라이더의 넓이로 확대되면서 보여진다.
2. Width: 비디오의 넓이를 지정한다.
3. Height: 비디오의 높이를 지정한다.
4. Force Cover: 그동안 레볼루션 슬라이더메뉴얼에는 항상 "유튜브와 비메오는 허용된공간에 항상 'fit'하게 보여지기 때문에, 슬라이더의 그리드가 어떤 비율이든 전체 슬라이드 영역을 비디오로 커버하는 기능을 사용할수가 없어서 만약 그런기능이 필요하다면 HTML5 video(이미 위에서 설명한 웹사이트에 mp4파일을 업로드하여 슬라이드에 동영상을 넣는 방법)을 사용하고, 그 속의 'Cover'옵션을 사용하라"고 알려 왔다. 그런데 최근 버전에 이 옵션이 추가 되었다... 그런데... 이옵션은 아직 정상적으로 작동하지 않는다 (현재 Ver 4.6.91) ...왜 넣은건지...
5. Autoplay: 슬라이드 안에 비디오가 나타나자 마자 플레이 된다. 한번 플레이가 끝나면 다음 슬라이드로 넘어가고, 다시 이 비디오가 있는 슬라이드 순서가 되면 또 비디오가 자동으로 플레이 된다.(모바일 기기에서는 해당되지 않는다.위의 참고를 보라)
   여기를 체크하면 "Only 1st Time"이 활성화 되는데 이것은 비디오가 있는 슬라이드가 첫번째 나올때만 비디오가 자동플레이 되는 옵션이다
6. Next Slide on End: 동영상이 다 돌고, 더해서 슬라이드지속시간(Delay = 보여지는시간)이 적용된후 다음 슬라이드로 넘어간다.이때 이 옵션을 체크하면 동영상이 끝나자 마자 바로 다음 슬라이드로 넘어간다.
7. Force Rewind: 동영상이 돌아가고 있을때 수동으로 슬라이드를 넘긴경우 , 다시 동영상이 있는 슬라이드 차례가 되었을때 동영상은 멈췄던 자리에서 다시 시작된다. 그런에 이 옵션을 체크하면 이경우 처음부터 동영상이 돌아간다.
8. Hide Controls: 비디오의 컨트롤 버튼을 슬라이드에서 보이지 않게 한다.
9. Mute: 비디오의 소리 볼륨을 "0"으로 한다.(무음)
10. Preview Image: 유튜브/비메오의 기본 미리보기 이미지를 사용하지 않고, 내가 넣고 싶은 미리보기 이미지를 이 동영상을 위해서 넣을수 있다.여기서 세팅하고, 삭제가 가능하며 , 모바일에서 동영상을 사용하지 않는대신 이 이미지를 보여주도록 설정할수있다.
11. Arguments: 유튜브/비메오 동영상 Embed 옵션을 여기에 직접 설정할수 있다. 모든 임베드 파라미터를 보고싶으면
    유튜브 비디오 옵션 과 비메오 비디오 옵션에서 찾아 볼수 있다. 아래의 문장과 같이 사용한다:

    param1=value&param2=value

위에서 처럼 필요한 레이어를 추가하면, 아래부분에 Layers Timings & Sorting 에 추가한 레이어들이 쌓이고, 여기서 선택된 레이어를 Layer General Parameters, Layer Animation, Layer Links & Advanced Params의 영역에서 상세하게 편집할수 있다. 여기서 부터는 이 영역들에 대해서 설명한다.

Layer General Parameters (2개의 서브섹션이 있다)

^ back to Slide Layer Settings menu

• Layer Content
• Align, Position & Styling

 

Layer Content 섹션: 레이어의 내용과 스타일 등을 편집, 적용한다



 

1. Style: 드롭다운 리스트에서 저장되어있는 일반적인 스타일중 하나를 선택해서 레이어의 컨텐츠에 적용을 한다.

   

    

2. Edit Style: 폰트패밀리,폰트컬러,폰트사이즈,배경색,배경투명도,테두리선색,테두리두께 등을 편집한다.

   Simple Editor :기본적인 사항을 편집하는 영역. 스타일을 조정할때 마다. 상단에 적용된 이미지가 바로바로 보여진다.

   

   "Save/Change" 를 누르면 현재 스타일이름에 편집된 내용이 덮어쓸것인지, 아니면 새로운이름으로 저장할것인지를 묻는다. 자주쓰는 나만의 스타일을 만들어서 새로운 이름으로 등록하여 사용할수 있다.

   

    

   Advanced Editor: CSS를 직접입력해서 레이어에 적용할수 있다.

   

    

3. Edit Global Style: 모든 슬라이더(sliders)에 적용되는 "Global Styles(전역스타일)" CSS를 추가하거나 편집할수 있다."Dynamic Styles"는 내가 편집할수 없고, "Static Styles"만 편집이 가능하다

   

    

4. Insert Button 버튼을 넣을때 사용한다. 여기 참조
5. Layer Content 이 레이어에서 사용될 텍스트나 HTML 코드를 입력한다.
   
   이미지레이어나 비디오레이어라면 사라지고, 이미지를 교환하거나 동영상을편집할수 있는 버튼이 보여진다.

 

Align, Position & Styling: Position the layer within the current slider.

^ back to Layer General Parameters menu



 

바로위의 설정대로 라면 아래의이미지 처럼 레이어가 위치하게 된다. ( ①상단+왼쪽, ② 100px , ③ 100px)



 

참고 : 큰 화면에서 그리드 바깥에 있는 내용들이 보여진다 하더라도, 모든 레이어들은 미리보기의 그리드영역안에 들어가야 한다. 화면의 크기가 작아지면( 브라우저를 줄이거나 , 모바일 환경으로 보여지거나 등등) 슬라이더의 뷰영역(설정된 그리드 영역) 바깥에 있는 것들은 가려진다.



 



 

1. Position: 레이어의 초기 위치. 이 위치를 기준으로 "X" 와 "Y" 값을 넣어서 정확한 위치를 잡는다.
2. X : 위의 #1 에서 정의한 위치에서 가로축의 정밀한 조정을 할때 사용한다. 양수와 음수를 모두 사용할 수 있다.(바로 위의 이미지 두개를 참고)
3. Y : 위의 #1 에서 정의한 위치에서 세로축의 정밀한 조정을 할때 사용한다. 양수와 음수를 모두 사용할 수 있다.(바로 위의 이미지 두개를 참고)



참고 : #2,#3 을 설정할때 가급적 적은 수치가 들어가는 쪽으로 먼저 #1을 설정한다. #1에서 설정한 위치와 #2,#3을 적용한 실제위치의 차이가 커질수록 슬라이더가 반응을 할때 레이어가 그리드영역을 이탈할 확률이 커진다.(특히 가로축)

4. White Space (여백): 어떻게 텍스트를 "wrap(줄바꿈)" 할것인지를 결정한다. 텍스트 레이어를 위해 대체적으로 좋은 옵션은 "Normal" 과 "No Wrap"이다.



 

• Normal : 여러개의 스페이스가 하나의 스페이스로 취급된다. 아래 #5 에서 설정하는 "Max Width" 에 기초해서 자연스럽게 줄바꿈을 한다.행바꿈(엔터로 강제줄바꿈한것)이 되지않는다.행바꿈을 하려면 br 태그를 넣어야 한다.
• Pre : 작성된 모양 그대로 보여진다. 스페이스는 그 개수만큼 띄어지고, 행바꿈한 모양도 그대로 표현된다.(html의 pre 태그를 생각하면 된다)

  

   

• No-wrap : 여러개의 스페이스도 하나의 스페이스로 취급된다.br 태그를 넣지 않는한 텍스트는 항상 한줄로 표기된다.( 줄바꿈,행바꿈이 없음 :이경우 문장이 길면 슬라이더가 반응할때 문장이 보이지 않는 영역으로 사라진다. 줄바뀜되면 소위 '각' 떨어질때 사용한다.)
• Pre-Wrap : 작성된 모양 그대로 보여지고, 스페이스는 그 개수만큼 띄어지지만, 필요에 따라(반응하면서 범위가 좁아지면) 줄바꿈과 행바꿈이 가능하다.
• Pre-Line : 여러개의 스페이스가 하나의 스페이스로 취급된다. 영역안에서 자동 줄바꿈과 글작성시 엔터를 이용한 행바꿈이 가능하다.
5. Max Width: 텍스트가 위치하게되는 영역의 최대 넓이를 여기에 설정한다.(그리드 설정이 넓이 1000px 일 경우, 여기서 500px을 설정 했다면 슬라이더 그리드 넓이의 절반 비율로 항상 반응한다는 뜻) 이 넓이는 이 슬라이더에 설정된 그리드의 넓이를 초과하면 안된다. px(단위 써줘야함. 현재 Ver 4.6.91)이나 auto 로 설정
6. Max Height: 텍스트가 위치하게되는 영역의 최대 높이를 여기에 설정한다. 실제 텍스트가 설정된 높이 이상 나가게 되면 보이지 않거나 하는것은 아니다. 특별히 억제하는 것은 없으나, 문단의 위치를 정렬하는데는 중요한 변수가 된다.높이를 바꿔가면서 #1의 Position 의 위치를 바꿔보면 텍스트 레이어가 정렬하는 위치가 달라진다는것을 알수 있다. px(단위써줘야함) 과 auto 가 사용가능하다.

 

Final Rotation: Apply a 2D rotation to the layer.

^ back to Layer General Parameters menu





 

1. 2D Rotation: 레이어를 회전시킬때 그 각도를 여기에 입력한다.레이어에서 직접 마우스로 돌려도 된다.회전을 없애고 싶으면 0을 입력한다.
2. Rotation Origin X: 레이어를 회전시킬때 레이어의 어디를 중심축으로 할것인가를 결정하는 칸이다.가로축에 해당하며 %단위 이다. 0이면 레이어의 맨 왼쪽끝을 기준으로 하고,50 이면 중앙, 100이면 오른쪽 끝이 기준이된다.
3. Rotation Origin Y: 레이어를 회전시킬때 레이어의 어디를 중심축으로 할것인가를 결정하는 칸이다.세로축에 해당하며 %단위 이다. 0이면 레이어의 최상단을 기준으로 하고,50 이면 중앙, 100이면 최하단이 기준이된다.(보통 50,50 으로 하여 정중앙을 기준으로 하는 것이 좋다)

 

Layer Animation (레이어에 애니메이션 효과 주기)

^ back to Slide Layer Settings menu

• Preview Transition Section (레이어 변환과정 미리보기)
• Start Transition (레이어가 슬라이드에 등장할때 변환 애니메이션 설정)
• End Transition (레이어가 슬라이드에서 나갈때 변환 애니메이션 설정)
• Loop Animation (레이어가 슬라이드에 나타나 있는 동안의 애니메이션 설정)

 

Preview Transition 섹션

현재 이 레이어의 Start Transition (등장할때 변환 애니메이션)과 End Transition (나갈때 변환 애니메이션) 설정에 따라 미리보기를 보여준다. 왼쪽 아래에 토글 스위치로 "on/off" 할수 있다. 실제 슬라이더에 반영되는 모습은 아니고, 단지 설정되있는 효과만 보여준다.



 

 

Start Transition (레이어가 슬라이드에 등장할때 변환 애니메이션 설정)

^ back to Layer Animation menu

이 레이어가 슬라이드내에 등장할때, 어느정도의 속도로 어떤 애니메이션효과를 가지고 등장할것인가를 설정한다.

참고 : 등장할때 아무런 효과를 원하지 않는경우 "Start Animation"으로 "Fade"를 선택하고, "Start Duration"을 "0"으로 넣으면된다.



 

1. Start Animation: 레이어가 처음 화면안으로 들어오면서 나타나는 애니메이션효과의 타입을 선택한다(위에서 내려오는 애니메이션, 오른쪽/왼쪽 에서 나타나는 애니메이션 외쪽/오른쪽 에서 비틀면서 들어오는 애니메이션 등등):

   

    

2. Start Easing: 위에서 선택한 애니메이션효과가 아래에서 설정한 시간동안 진행될때, 속도 변화에 일정한 규칙을 설정하는 옵션. 각 옵션에 대한 속도의 변화 그래프는 여기를 참조한다.( 선택하면 위의 미리보기에 반영되므로 보고 판단하면 된다.)
   • Linear based transitions: 속도의 변화가 없이, 일정하다
   • EaseOut based transitions: 처음엔 빠르게 끝나갈수록 느리게
   • EaseIn based transitions: 처음엔 느리게 끝나갈수록 빠르게
   • EaseInOut based transitions: 처음엔느리게 중간은 빠르게 끝으로 갈수록 느리게
3. Start Duration: 레이어가 등장할때 변환이 이루어지는 시작 부터 끝까지의 시간. 1초=1000, 보통 300~1000 사이가 좋다
4. Split Text per: 텍스트 기반의 레이어에만 적용할수 있다. 문장 속에있는 글자들 각각 또는 단어 또는 행 단위로 애니메이션 효과를 줄수 있다.
   • No Split: 분할을 하지 않는다(기본).모든 텍스트에 똑같은 애니메이션 효과를 준다.
   • Char Based: 글자 하나 하나를 분할해서 애니메이션 효과를 준다. 한 줄의 문장에 적용하면 효과적이다.
   • Word Based: 단어 단위로 분할해서 애니메이션 효과를 준다.
   • Line Based: 행 단위로 분할해서 애니메이션 효과를 준다.
5. Split Delay: 위의 "Split Text Per" 옵션이 "Char","Word","Line" 중 하나로 설정되었을때, 각각의 텍스트에 애니메이션 효과가 나타나는 간격을 설정한다. 밀리초의 단위이다(1초=1000).예를 들어 "Split Text per"옵션이 "Char Based" 로 선택 되었을때 여기에 "10"을 넣었다면, 매 10밀리초 마다 하나씩 글자가 나타나게 되는것이다. 보통 200밀리초 이하의설정이 좋다
6. Custom Animation: 지금까지 설정한것만으로 흡족하지 않을때 애니메이션효과를 직접 만들수 있다. 버튼을 누르면 아래의 화면이 나타난다.:

   

    

   1. Live Preview: 아래에서 설정하는 변화에 따라서 애니메이션효과가 어떻게 나타나는지 실시간으로 볼수 있다.
   2. Layer Animation Settings Panel: 레이어의 애니메이션 시작 위치,회전,비틀기,투명도 등등을 마음대로 설정한다.이 설정으로 등장할때 뿐만아니라 레이어가 사라질때의 모습도 실시간으로 볼 수(아래 #5번)있다.
   3. Randomize: 버튼을 누를때 마다 랜덤하게 선택된 설정에 따라서 레이어 애니메이션이 생성된다.
   4. Test Parameters: 이 팝업창에서 미리보기에 나타나는 애니메이션을 위한 기본 설정이다. "단지" 미리보기 화면만을 위한 설정이다. 나중에 저장을 하더라도 이 설정값은 저장이 되지 않는다.
   5. Transition Direction: 설정된 옵션에 의해서 레이어가 나타나는 미리보기 뿐만 아니라, 사라지는 모습을 미리보기 할 수 있다. 두개를 동시에 볼수도 있다.

    

   커스텀 세팅을 모두 완료한 후에Save/Change 버튼을 눌러, 새로운 이름을 붙여주기 위해 "Save As" 를 누른다.

   

   새로운 이름을 붙여준다.

   

   완료되면 "Layer Animation" 의 "Start Animation" 옵션속에 새로만든 애니메이션 타입이 보인다.(End Animation 속에도 동시에 들어있다)

   

 

End Transition (레이어가 슬라이드에서 나갈때 변환 애니메이션 설정)

이 레이어가 슬라이드내에서 사라질때, 어느정도 속도와 어떤 애니메이션효과를 가지고 사라질것인가를 설정한다. "End Animation" 의 "Choose Automatic"을 제외하고 이 옵션은 위에서 설명한Start Transition과 거의 유사하다. "등장"을 "퇴장"으로 바꾼다면 위에서 설명한 "Start Animation" 섹션의 정의들을 그대로 사용하면된다.

 

Loop Animation (레이어가 슬라이드에 나타나 있는 동안의 애니메이션 설정)

^ back to Layer Animation menu

레이어가 "Start Transition"에서 설정한 대로 들어오고, "End Transition"에서 설정한 대로 나가는 사이... 다시말하면 "슬라이드 내에 보여지고 있는 동안"에 사용 할 수 있는 애니메이션 효과를 설정한다.

 

참고 : 이 "Loop Animation" 설정은 위의 "Layer Animation Live Preview (레이어 애니메이션 미리보기)"화면에 실시간으로 보여지지 않는다.대신에 화면의 오른쪽 상단에 있는 "돋보기"를 눌러서 슬라이드 미리보기를 효과를 볼 수 있다.



 

 

"Loop Animation" 의 옵션 적용예가 아래에 있다. :









 

Layer Links & Advanced Params (레이어에 링크걸기)

^ back to Slide Layer Settings menu

• 텍스트 레이어인 경우
• 이미지 레이어인 경우

 

A. 텍스트 레이어인 경우 : 단지 이 슬라이더 내의 다른 슬라이드로만 링크가 됨. 슬라이더 에서의 각종 링크 방법 모음.



1. Links (optional): 현재 슬라이'더' 내의 다른 슬라이'드' 로 가는 링크를 설정한다.
   • Not Chosen: 링크 없음
   • Next Slide: 다음 슬라이드로 링크
   • Previous Slide: 이전 슬라이드로 링크
   • Scroll Below Slider: 현재 슬라이더 아래로 화면을 보냄. 선택하면 "Scroll Under Slider Offset" 옵션이 보여진다. 여기에 슬라이더아래로 얼마나 더 내려보낼것인지 px 단위로 적어줄수 있다. (+/- 단위 모두 가능)
   • Specific Slide: 현재 슬라이더 내의 특정 슬라이드로 링크
2. Caption Sharp Corners (단지 배경색을 가진 레이어에만 해당된다.)
     레이어의 배경 좌/우를 날카롭게 만들어 준다.

    

   Sharp:

   

    

   Sharp Reversed:

   

    

   Left Corner = Sharp, Right Corner = Sharp Reversed 조합일때:

   

    

   Left Corner = Sharp Reversed, Right Corner = Sharp 조합일때:

   

    

3. Advanced Responsive Settings:
   • Responsive Through All Levels: 단지 여러개의 html 요소를 가지고 있는 레이어에 해당되는 옵션이다. 여기를 체크하면 슬라이더가 화면의 크기에 반응할때 이 레이어 안에 있는 HTML 요소들을 리사이즈한다. (100% 가능한것은 아니지만 대체적으로 효과는 좋다.) 슬라이더 내부에 Form 을 삽입할때 유용하다.
   • Hide Under Width: 슬라이더 메인 설정화면의 Mobile Visibility 섹션 #4번에 값이 설정되어 있는경우, 이 값에 도달하면 여기 옵션에 체크된 레이어들은 모바일에서 사라진다.(모바일환경일때 선별해서 레이어를 감출수 있는 기능)
4. Attributes (optional): 현재 선택된 레이어에 id,class,title(레이어에대한 부가적인정보 툴팁으로 보이기도함),rel(레이어와 링크된 페이지와의 관계정보를 알려주는 속성) 속성을 부여해서 커스터마이징하는데 사용 할 수 있다.







B. 이미지 레이어인 경우 :



1. image Link : 이미지 레이어를 클릭했을때 링크되는 주소를 입력한다.
2. Link Open In : 링크된 페이지가 나타날때 현재 슬라이더가 작동중인 페이지에 띄울것인지, 아니면 새 웹브라우저 페이지에 띄울것이지 설정한다.
3. Link To Slide : 현재 슬라이더의 다른 페이지로 링크할때 사용한다.
   • Not Chosen: 링크 없음
   • Next Slide: 다음 슬라이드로 링크
   • Previous Slide: 이전 슬라이드로 링크
   • Scroll Below Slider: 현재 슬라이더 아래로 화면을 보냄. 선택하면 "Scroll Under Slider Offset" 옵션이 보여진다. 여기에 슬라이더아래로 얼마나 더 내려보낼것인지 px 단위로 적어줄수 있다. (+/- 단위 모두 가능)
   • Specific Slide: 현재 슬라이더 내의 특정 슬라이드로 링크
4. 현재 이미지 레이어에 링크를 정의하면 슬라이드 태그에 a 태그가 생성된다. 이때 이 a 태그를 커스터마이징하기 위해서 id, class, title(레이어에대한 부가적인정보. 툴팁으로 보이기도함),rel(레이어와 링크된 페이지와의 관계정보를 알려주는 속성)을 정의한다.

 

Layers Timing & Sorting (레이어 시간조절, 분류)

^ back to Slide Layer Settings menu

이 섹션은 레이어들의 z-index(레이어가 겹쳐질 경우 어떤레이어가 가장위에서 보여질것인지) 와 레이어 애니메이션의 시작시간과 끝나는 시간을 관리하는 영역이다.

 

참고 : 아래 이미지에 보여지는 "layer timeline"은 슬라이드 지속시간이다. 그리고 그속에는 레이어의 등장할때와 사라질때의 애니메이션 변환이 이루어 지는 시간을 포함한다.

각각의 레이어 z-index 설정하기:



 

레이어 애니메이션의 시작과 끝나는 시간 조정:



 

젼역 레이어 옵션 (모든 레이어에 동시 적용된다.)



 

개별 레이어 옵션



 

고정 레이어는 슬라이더 내에서 항상 보여야하는 컨텐츠를 표현할때 유용하다. 예를들어 슬라이더 안에 5개의 슬라이드가 있고,어떤 슬라이드가 진행되던 상관없이 같은 위치에 로고나 특정 장소로 가는 링크 버튼을 보여주고 싶을수 있다. 이때 사용하는것이 Static Layers (고정 레이어)이다.

고정 레이어를 사용하려면 먼저 슬라이더 메인 세팅(slider's main settings)의 오른쪽 상단 General Settings 센션에서 "Enable Static Layers"옵션을 "On" 해야 한다.

그후, 슬라이드 목록 (slide list)화면에 가면, "Edit Static/Global Layers" 버튼이 새롭게 보일것이다.

고정 레이어의 옵션은 슬라이드 레이어 컨텐츠 와 슬라이드 레이어 설정에서 설명한 것들과 거의 동일하다.단지 아래에서 설명하는 몇가지 옵션만 다를 뿐이다:

• 슬라이드 미리보기화면에서 고정레이어가 각각의 슬라이드 위에서 어떻게 보여지는지 확인하며 작업을 할 수 있다.

• 고정 레이어가 어느 슬라이드부터 어느 슬라이드 까지 나타나게 할 것 인지를 설정할 수 있다.

1단계 - 템플릿 슬라이더 만들기

포스트의 내용을 가져와 슬라이더를 만들기 위해서는 먼저 "템플릿 슬라이더"를 만들어야한다.레볼루션 슬라이더 플러그인 메인화면으로 가서 "Create New Template Slider (템플릿 슬라이더 만들기)" 버튼을 누른다:

"템플릿 슬라이더 만들기" 버튼을 누르면 나타나는 슬라이더 설정화면은 지금까지 위에서 설명했던 일반 슬라이더(지금까지 그냥 슬라이더라 불리던것, 템플릿 슬라이더와 구분하기 위해서 '일반'이라 표현했음) 메인 설정화면과 모든 옵션이 유사하다.(템플릿 슬라이더를 만들어도 웹사이트에 표시되는것은 이것이 아니기 때문에 슬라이더 고유의 숏코드가 없다. ) 그러므로 "포스트의 내용을 가져와서 만든 슬라이드"를 만들고 싶으면 여기서 기본적인 설정을 하고, 일단 "Create Template"버튼을 누른다.

2단계 - 일반 슬라이더를 만들어 1단계에서 만든 템플릿 슬라이더와 연결하기 ( 일반 슬라이더의 개별 슬라이드 만들기는 없음)

새로운 템플릿 슬라이더를 만들었다면, 이제 이 템플릿을 사용하여 포스트의 내용을 끌어올 새로운 일반 슬라이더를 만들러 간다. ( "템플릿 슬라이더"의 '슬라이드' 내용은 다음 단계에 만든다 )

일반 슬라이더 메인 설정 페이지에서 "Source Type" 을 "Posts"로 선택한다:

• 슬라이더의 "Source Type" 을 "Posts" 로 선택하면, 오른쪽의 모든 설정칼럼들이 사라진다. ( "Source Type" 을 "Specific Posts"로 선택할때는 사라지진 않지만, 설정해 봐야 아무 효과가 없다. Ver 4.6.92)
• 슬라이더의 "Source Type" 을 "Posts"(또는 "Specific Posts") 로 선택하는 순간부터 이 "일반 슬라이더"는 자신의 모든 설정과 컨텐츠를 "템플릿 슬라이더"(옵션에서 어떤 템플릿 슬라이더를 사용할 것인지 선택함)에서 가져와 사용한다.
• 슬라이더의 "Source Type" 을 "Posts"(또는 "Specific Posts") 로 선택하는 순간부터 이 "일반 슬라이더"가 하는 일은 아래와 같다.
  1. 어떤 "템플릿 슬라이더"를 이용해서, 어떤 포스트(또는 페이지 또는 포트폴리오 또는 상품 등)중, 어떤 카테고리를, 어떤 순서로, 몇개 보여줄 것인지 선택한다
  2. 웹사이트의 어디에 슬라이더가 표시될건인지에 이용되는 객체(숏코드나, 템플릿태그 등으로 표시되는 컨테이너)가 된다.

아래는 슬라이더의 "Source Type" 을 "Posts" 로 선택하고, 1단계에서 만들어진 "Template Slider"와 연결하여 일반 슬라이더를 세팅하는 그림이다.

1. Slider Title: 이 일반 슬라이더의 이름. 관리자 화면에서 관리용으로 사용되기만 할뿐이다.
2. Slider Alias: 현재 작업중인 슬라이더를 위해 제공되는 별칭. 숏코드를 만드는데 사용되기도 한다.소문자를 사용하며 공백(apace)과 특수문자가 없어야 하고, 대시(-)와 언더스코어(_) 는 사용이 가능하다.
3. Slider Shortcode: 바로 위의 Slider Alias에서 입력된 값으로 자동생성되는 숏코드. 이것을 복사해서 원하는 포스트나 페이지에 붙여 넣으면 이 슬라이더가 웹사이트 전면에 보여진다.
4. Source Type:
   • "Posts" 를 선택하면 , 아래의 #5번 과 #6번 에서 "Post Type" 과 "Post Categories"를 선택할수 있다.
   • "Specific Posts"를 선택하면 , 내가 특정한 포스트를 선택(포스트타입, 카테고리 구분없이)해서 슬라이더를 구성하겠다는 의미 이므로, 그 특정한 포스트의 ID를 입력하는 새로운 섹션이 아래에 나타난다.( 바로 아래 이미지 참조 )    ( 특정 포스트/페이지의 ID를 알아내는 방법 )
     이 선택에는 몇가지 불편한 사항이 있는데(현재 Ver 4.6.91)
     • 슬라이드의 순서를 바꿀수 없다. ID의 역순으로 돌아간다
     • 오른쪽의 각종 설정컬럼과 아래쪽의 옵션창들이 보여지는데( Source Type을 Gallery로 선택한것처럼 ) 모두 필요없는 것들이다.
     • 템플릿을 교체하는 옵션이 없다.
       그렇다고 템플릿 교체가 불가능한 것은 아니다.
       1. "Source Type"을 "Posts"로 한후 사용할 템플릿 슬라이더를 선택(아래 #9번 참고)한다.
       2. 저장을 한다
       3. 다시 "Source Type"을 "Specific Posts"로 한후 나머지 설정을 한다.
       4. 저장을 한다. 이후 교체한 템플릿이 적용되는 것을 확인할 수 있다.

     

      

5. Post Types: "Source Type" 을 "Posts"로 했을때 사용가능하며, 슬라이더의 내용으로 가져올 포스트타입(Post Types)을 선택할수 있다.
   
   아바다 테마의 경우 포스트 타입 예)
   • 글 ( Post Types 은 post )
   • 페이지 ( Post Types 은 page )
   • 포트폴리오 ( Post Types 은 avada_portfolio )
   • FAQs ( Post Types 은 avada_faq )
   • 우커머스 상품( Post Types 은 product ) 등등
6. Post Categories: "Source Type" 을 "Posts"로 했을때 사용가능하며, 바로 위에서 선택한 포스트타입에 대한 카테고리,태그분류를 사용하여 슬라이더의 내용으로사용할 포스트를 선택할 수 있다.카테고리, 태그등에 할당된 글들이 있어야 나타난다. 복수를 선택하려면 컨트롤키를 누르고 클릭하면된다.
7. Sort Posts By: 위에서 선택한 포스트가 슬라이더에 나타나는 순서를 정할때, 무엇을 기준으로 할 것인지 선택한다.
   • Post ID : 포스트(글,페이지,포트폴리오,상품 등)의 ID를 기준으로 한다.   ( 포스트 ID를 알아내는 방법 )
   • Date : 포스트가 만들어진 날짜,시간을 기준으로 한다.
   • Title : 포스트 제목의 글자순서를 기준으로 한다.
   • Slug : 포스트의 slug 글자순서를 기준으로 한다.
   • Author : 글쓴이의 User Id 를 기준으로 한다.User Id 알아내는 방법
   • Last Modified : 포스트가 마지막으로 수정된 날짜를 기준으로 한다.
   • Number of Comments : 포스트에 달려있는 댓글의 개수를 기준으로 한다.
   • Random : 무작위로 선정한다.
   • Unsorted : 순서를 정하지 않는다.(기본값 포스트의 id 오름차순)
   • Custom Order : 내가 마음대로 설정한다. 슬라이드 리스트 목록에서 드래그하여 변경한다.순서만드는법

   

    

8. Sort Direction: 바로 위에서 선택한 기준으로 오름차순으로 보여줄지 내림차순으로 보여줄지 결정한다. Descending 은 내림차순 ( 예.포스트의 id 번호가 큰것(= 가장 최근에 쓴 글)부터 낮은(=오래된글) 순서로), Ascending 은 오름차순
9. Max Posts Per Slider: 슬라이더 안에 몇개의 포스트를 보여줄것인지. 다시말하면 슬라이드의 개수를 몇개로 할것인지를 설정한다. 숫자가 해당되는 포스트 개수보다 클 경우, 있는 포스트 개수 만큼만 보여진다.
10. Limit the Excerpt To: 슬라이더 내에 요약글을 보여준다면 몇개의 단어를 보여줄 것인지 설정한다.불러오는 포스트 안에 "요약" 섹션(아래 이미지 참고)에 추가된 내용이 있다면 이것을 가져오고, 만약 이 섹션에 내용이 없다면 본문에서 해당하는 개수 만큼의 단어를 가져온다.
    

    이 설정은 아래에서 설명하겠지만, 템플릿 슬라이더 내에 '슬라이드'를 만들때 "메타 데이터 레이어"를 이용해서 "요약문을 가져오는 메타( %excerpt% )"를 삽입했을 때만 해당된다.



 

11. Template Slider:어떤 템플릿 슬라이더를 연결할 것인지 결정한다.
    

    이 슬라이더(일반 슬라이더)가 '포스트의 정보를 가져와서 보여주는 슬라이더' 역할을 하기 위해서는 포스트의 정보를 끌어올수 있는 방법이 있어야 한다. 이 방법이 바로 "템플릿 슬라이더"를 사용하는 것이고(자신이 못하는 일을, 템플릿 슬라이더가 할 줄 아니까 이것을 끌어 안고, 자기가 하는척 함),어떤 템플릿 슬라이더를 사용하는가에 따라서 이 슬라이더(일반슬라이더)의 모양, 내용이 달라(같은 포스트 이지만 제목을 표시하거나 뺄수 있고, 요약문을 표시하거나 뺄 수 있다는 뜻) 보이는것이다.

3단계 - 템플릿 슬라이더의 슬라이드 만들기

위에서 템플릿 슬라이더를 만들었고, 일반슬라이더도 만든 후에 템플릿 슬라이더를 연결했다. 이제 처음에 만들었던 템플릿 슬라이더의 Slides를 만들어서 불려진 포스트가 표시되는 모양을 디자인하고, 설정한다

템플릿 슬라이드를 만드는 방법과 설정은 일반 슬라이드(지금까지 그냥 슬라이드라 불리던것, 템플릿 슬라이드와 구분하기 위해서 '일반'이라 표현했음)의 설정과 만드는법이 대부분 유사하다. 가장 큰 차이는 "메타 데이터 레이어(meta data layers)"를 사용하여 슬라이더 안에 포스트(또는 페이지 또는 포트폴리오 등)의 각종 정보(제목,내용,요약,글쓴이,날짜,태그 등등)를 보여 줄 수 있다는 것이다.

메타 데이터(meta data) : 여기서 말하는 메타 데이터는 제목, 글쓴이,글쓴 날짜, 마지막으로 수정된날짜,alias,요약글,댓글 개수,카테고리정보,태그정보 등 해당 포스트가 가지고 있는 정보를 말한다.

메타 (meta) : 여기서 말하는 메타는 해당 포스트의 메타데이터를 가져오는데 사용하는 기호이다. 숏코드와 같은 개념으로 생각하면된다.

다시말하면 수동적으로 포스트 하나당 슬라이드 하나,하나씩 만드는것이 아니라. 필요한 슬라이드 유형(템플릿=형판) 하나를 "메타 데이터 레이어(meta data layers)"를 사용해서 만들어 놓으면, 연결된 일반 슬라이더에서 선택한 포스트의 개수 만큼 이 틀에 찍어서 보여주는 개념이다.

"메타 데이터 레이어(meta data layers)"를 만들기 위해서 "Add Layer" 버튼을 누르고, "Insert Meta" 버튼을 누른후, 원하는 메타(meta)를 추가하면된다:

Example

1. 포스트 제목을 보여주는 "%title%"메타와 포스트 요약글을 보여주는 "%excerpt%" 메타를 두개의 레이어를 이용하여 템플릿 슬라이드를 만들었다

   

2. 슬라이더로 가져올 포스트중 하나가 아래의 이미지와 같다면

   

3. 이제 레볼루션 슬라이더 메인 화면에 가서 이 템플릿 슬라이더가 연결된 일반 슬라이더의 미리보기를 눌러보면, 슬라이더 안으로 포스트의 내용이 보여지는것을 확인할수 있다

   

   

참고 : %excerpt% 메타의 "White-Space" 옵션 세팅을 "Normal" 하고, 적당한 "Max Width" 값을 지정하면 위의 이미지와 같이 요약문이 자연스럽게 줄바꿈을 한다.

슬라이더를 만든후에 이것을 웹사이트에 넣는 방법을 서술한다.

1.숏코드를 사용하는 방법

워드프레스 메뉴에서 슬라이더가 보여지길 원하는 페이지를 만들거나, 선택해서 편집을 한다. 아래에 보여지는것과 같다:

2.비주얼 컴포져 이용법

만약 비주얼 컴포져가 설치되어 있다면, 컴포넌트 옵션중 "레볼루션 슬라이더"를 이용해서 페이지에 삽입한다.:

3.위젯을 사용하는 방법

테마에 따라서 위젯은 "사이드바","푸터","헤더" 등, 어디든 들어갈수 있다. 이 위젯을 사용해서 레볼루션 슬라이더를 웹사이트에 넣을 수 있는데, 워드프레스 어드민메뉴-외모-위젯페이지에 들어가면 위젯 리스트중에 아래의 그림처럼 "레볼루션 슬라이더"위젯이 보일것이다:

클릭 드래그 해서 사용가능한 사이드바 에 넣는다:

위젯의 옵션을 열고 원하는대로 설정한다:

위에서 보이는 것처럼 만약 홈페이지에서만 이 슬라이더 위젯이 나타나길원한다면 체크를 할수 있고, 아니면 특정한 페이지 에서만 이 슬라이더 위젯이 나타나도록 설정할 수 있다.페이지나 포스트의 ID를 찾는방법:

4.PHP 코드를 이용하는 방법

슬라이더를 PHP 파일 내부에 직접 넣기를 원할 수 도 있다.이 방법은 PHP에 익숙한 사용자들을 위한 방법이다.

시작하기 전에 레볼루션 슬라이더의 조건에 따라서 슬라이더를 표시하는 함수의 소스코드를 알아보자

• <?php putRevSlider("slider1") ?>   // 항상 "slider1" 을 출력한다.
• <?php putRevSlider("slider1", "homepage") ?>   // 홈페이지 에서만 "slider1"을 출력한다.
• <?php putRevSlider("slider1", "2") ?>   // 사이트의 고유주소 설정이 "기본" 으로 되어 있을때, 특정 페이지(여기선 ID 2번)에서만 "slider1"을 출력한다.
• <?php putRevSlider("slider1", "2, 3") ?>   // 사이트의 고유주소 설정이 "기본" 으로 되어 있을때, 특정 페이지(여기선 ID 2,3번)에서만 "slider1"을 출력한다.
• <?php putRevSlider("slider1", "slug1") ?>   // 사이트의 고유주소 설정이 "Post Name" 으로 되어 있을때, 특정 페이지( slug가 slug1 )에서만 "slider1"을 출력한다.
• <?php putRevSlider("slider1", "slug1,slug2") ?>   // 사이트의 고유주소 설정이 "Post Name" 으로 되어 있을때, 특정 페이지( slug가 slug1,slug2 )에서만 "slider1"을 출력한다.

지금부터 예제를 통해서 "alias(별명 = 슬라이더의 숏코드에 사용되는 이름)"가 "slider1"인 레볼루션 슬라이더가 홈페이지 에서만 출력되도록 할것이다. ( 만약 여러분의 슬라이더 이름이 다르다면 슬라이더 메인 세팅 화면에서 사용하고자 하는 슬라이더의 "alias"를 알수 있다):

먼저 테마 내 어디에서 슬라이더가 출력되길 원하는지 결정해야 한다. 대개 테마의 page.php 파일이 사용되는 경우가 많으므로, 예제의 경우도 그 파일안에서 슬라이더가 사용된다고 가정한다면 (홈페이지로 사용되는 템플릿을 특별히 만들어서 지정한 테마가 아니라면 대부분 page.php 파일이 홈페이지에 사용된다.) 이 파일을 편집하기 위해 워드프레스의 어드민 메인 화면으로 가서, "외모"-"편집" 화면으로 들어간다. 그리고 오른쪽 목록에서 "page.php" 파일을 찾아 클릭한다.

"page.php" 파일 안에서 "The Loop"라 불리는 영역을 찾을 수 있을것이다:

"The Loop" 는 웹사이트 화면에 포스트나 페이지의 내용 (제목,내용, 글쓴이 등등)을 출력할때 사용하는 것이고, 이 예제에서는 페이지의 메인 컨텐츠 바로 위에 슬라이더를 출력할 것이므로 "The Loop" 바로 앞에 레볼루션 슬라이더 출력함수를 입력한다.

이 "page.php"파일에 함수를 직접 넣었어도(이 파일은 워드프레스의 page를 출력하는 범용템플릿이다) ,입력한 함수의 두번째 인자로 "homepage"를 넣었기 때문에, 슬라이더는 단지 웹사이트 상에서 "홈페이지(메인페이지)"라고 불리는 페이지 에서만 출력될것이다.

5.테마 고유의 방법

만약 구매한 테마내에 레볼루션 슬라이더 플러그인이 포함 되어 있다면, 그 테마는 자체적으로 레볼루션 슬라이더를 표시하는 방법을 가진 경우가 대부분이다.테마 옵션 내부에 "슬라이더 옵션"을 가진경우가 있으며, 또는 포스트나 페이지의 편집화면에서 고유한 위치에 슬라이더를 넣어 출력하는 방법을 지원하기도 한다.

레볼루션 슬라이더내의 텍스트에 기본으로 적용되는 폰트 이외에 구글 폰트를 사용하고 싶으면, 아래와같이 필요한 폰트를 불러주는 과정이 필요하다

왼쪽의 워드프레스 어드민 메뉴중에서 Punch Fonts를 찾는다. 이 플러그인은 레볼루션 슬라이더를 만드는 "테마펀치"社 에서 구글 폰트공급용으로 만든 플러그인이다. 레볼루션 슬라이더를 설치하면 자동으로 동시 설치 된다.

Add New Font 버튼을 누르면 , 사용하고자 하는 구글폰트를 등록하는 팝업이 보인다:

• Handle - 워드프레스 내부에서만 이 폰트를 위해 사용하는 별명을 만들어 준다.공백이 없는 소문자
• Parameter - 원하는 구글 폰트를 불러오기 위한 파라미터를 적어준다.(아래에서 설명)

구글 폰트를 가져오기 위한 파리미터(Parameter)를 모를 경우, 구글 폰트 웹사이트에 방문하여 필요로 하는 폰트를 찾는다:

오른쪽 하단에 "Quick Use" 아이콘을 클릭한다(바로 위 이미지 참조). 그리고 아래로 내려가면 3번 Add this code to your website 섹션이 보일것이다:

바로위의 이미지 처럼 폰트를 사용할수 있는 스타일 시트(CSS) 파일의 경로가 보이는데 여기서 필요한 부분은 = 기호와 '기호 사이의 문장이다.(만약 복사가 되지 않는다면 전체를 복사해서 붙인후 편집한다.)

펀치폰트 플러그인의 "Add Font" 에 위에서 복사한 것을 넣고 저장하면, 펀치 폰트 리스트에 입력한 폰트목록이 보인다(더블클릭해서 편집 삭제가 가능하다):

마지막으로 슬라이더에 새 구글폰트를 적용한다.
먼저 슬라이드 편집화면에서 레이어를 선택한후 Edit Style 섹션으로 들어간다. 이 때 보이는 편집창에서 Family 옵션을 드롭다운 해 보면 , 새로 추가된 구글 폰트가 목록에 보일것이다. 선택해 주면 된다:

레볼루션 슬라이더내에서 나눔 폰트를 적용하는 방법은 아래와 같다.
만약 현재 웹사이트에서 나눔폰트를 사용하고 있고, 그 폰트를 레볼루션 슬라이더에도 추가로 적용하고 싶은 경우라면 1번을 건너뛰고 곧바로 2번.레이어의 한글 텍스트에 나눔폰트 적용하기 로 가면된다.

1.나눔폰트 CSS 불러오기

먼저 나눔폰트를 불러오는 경로를 알아야 하는데 구글 Early Access 폰트 화면으로 간다.원하는 나눔폰트를 찾아서 "Link" 주소를 복사한다.

나눔폰트가 적용될 슬라이더의 메인 세팅 화면 아래부분 CSS / JavaScript 섹션에 복사한 링크를 붙여 넣은후 저장한다.

2.레이어의 한글 텍스트에 나눔폰트 적용하기

적용할 레이어의 "Edit Style"로 들어가서 메모해둔 "Font Family"를 입력한다.위의 경우 처럼 나눔고딕을 적용하려면 Nanum Gothic (대소문자 구분), 다른 서체의 링크를 가져왔다면 해당하는 폰트패밀리를 입력하면 된다.(현재 구글 Early Access Font 에 등록된 나눔서체는 다섯가지임 - Nanum Brush Script, Nanum Gothic, Nanum Gothic Coding, Nanum Myeongjo, Nanum Pen Script )

워드프레스에서 사용할 슬라이더 내보내기

슬라이더는 내보내기와 가져오기가 가능하다. 이 기능은 슬라이더를 백업할때나 다른 워드프레스 웹사이트로 옮길때 유용하다. 내보내기를 하기 위해서 슬라이더의 목록 화면으로 간후, "내보내기( Export Slider )"버튼을 누르면, 지정된 폴더로 저장될 것이다.

정적인 HTML 웹 사이트에서 사용할 슬라이더 내보내기

슬라이더 레볼루션은 워드프레스에서 사용할수도 있지만, 표준 jQuery를 쓸수 있는 환경이면 어디서든 구현이 가능하다.이 기능은 워드프레스의 막강한 어드민 환경에서 슬라이드를 제작한후 정적인 HTML 파일로 이루어진 웹사이트에서 사용하고 싶을때 유용하게 사용할수 있는 방법이다.

가장먼저 레볼루션 슬라이더 플러그인 메인 페이지 오른쪽 상단의 Global Settings버튼을 누르고 들어가서, "Enable Markup Export option" 옵션을 "On"으로 한다.

다음, 페이지를 "새로고침"하면 아래와 같이 새로운 버튼이 나타나고,그 버튼을 누르면 새로운 창이 나타난다:

1. Replace image URLs:현재 웹사이트와 새로적용할 HTML 웹사이트의 이미지경로를 적어서 아래 코드를 변경해 주는 기능인데... 제대로 작동을 하지 않는다(현재 Ver 4.6.91). 그냥 이미지의 경로를 바꿔 줘야 한다는 점을 상기하고, 모든 작업은 2번~5번을 참고한다.
2. Header: 복사해서 당신의 HTML 문서의 "head" 영역에 넣어 줘야 하는 문장이다.불러오는 문서의 경로를 변경해 주어야 한다. 자세한 설명은 아래와 같다.
   1. 복사해서 편한 텍스트 편집기에 붙여 놓는다.
   2. 복사한 소스코드 속에 각각의 파일들( settings.css ,jquery.themepunch.tools.min.js, jquery.themepunch.revolution.min.js )을 경로를 따라 플러그인 폴더에서 가서 FTP로 다운로드 받은후에, 새로 슬라이더를 넣을 웹사이트의 특정 폴더에 업로드 한다.
   3. 소스코드 속의 파일 경로를 새로 등록한 폴더의 경로(새 HTML 웹사이트의 특정폴더)로 바꿔준다.
   4. 여기에 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script> 코드를 추가로 붙여준다.
   5. 완성 되었다. 이 전체의 코드를 새 웹페이지의 "head"태그 안에 붙여 넣는다.
      

      완성 소스 예

      <link rel='stylesheet' id='rs-plugin-settings-css' href='http://새웹사이트주소/특정폴더/settings.css' type='text/css' media='all' />
      <script type='text/javascript' src='http://새웹사이트주소/특정폴더/jquery.themepunch.tools.min.js'></script>
      <script type='text/javascript' src='http://새웹사이트주소/특정폴더/jquery.themepunch.revolution.min.js'></script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
      
3. CSS: 복사해서 <style type="text/css" > 와 </style> 태그로 감싼후에 새 웹페이지의 메인 CSS 파트에 붙여 넣으면 된다.
4. Body: 복사해서 새 웹페이지의 Body 태그 영역에 붙여 넣어야 한다.그러나 두가지 선행되어야할 일이 있다.
   1. 현재 소스코드에 있는 이미지 경로를 따라가 슬라이더에 표현되는 배경이미지를 모두 다운로드 받아서, 새로 사용할 웹사이트 특정폴더에 업로드한다.
   2. 현재 소스코드의 이미지 경로를 모두 새로 사용할 HTML 웹사이트의 이미지 경로로 바꿔준다.
5. Script: 복사해서 <script type="text/javascript" > 와 </script> 태그로 감싼후에 새 웹페이지 body 영역의 맨 마지막 부분에 붙여 넣는다.

2번~5번 까지 만든 소스코드를 HTML 문서의 어느 부분에 넣어야 하는지 아래에 개략적으로 표현하였다:

<!DOCTYPE HTML>
<html>

    <head>
    
        <meta charset='utf-8'>
        <title>Slider Revolution - Export to HTML Skeleton Example</title>
        
       
        // 2번 "Header" 부분을 여기에 붙여 넣는다 
        
       
        <style type="text/css">   // style 태그로 먼저 감싼다 
	    // 3번 "CSS" 부분을 여기에 붙여 넣는다 
	</style>
        
    </head>

    <body>
    
    
        // 4번 "Body" 부분을 여기에 붙여 넣는다 
    
    	
        <script type="text/javascript">   // script 태그로 먼저 감싼다 
	    // 5번 "Script" 부분을 여기에 붙여 넣는다 
	</script>
        
    </body>
    
</html>

각각의 슬라이더를 위한 API 메소드(methods) 와 이벤트(events) 목록이 "API Functions"섹션 안에 있다:

레볼루션 슬라이더는 각각의 슬라이더가 자바스크립트 안에서 하나의 객체로 존재할수 있도록 "revapi(슬라이더ID)"형식의 코드를 제공한다.이 코드가 각각의 슬라이더 객체가 되는것이고, 이 객체가 사용할수 있는 메소드와 이벤트의 목록이 아래와 같다. 이 목록의 내용들을 이용해서 사용자는 외부 자바스크립트를 만들수 있고, 또 이 외부 스크립트를 이용해서 다양한 효과를 만들수 있는 것이다.(물론 외부 스크립트는 "revapi"변수가 선언된 이후에 실행되어야만한다)

아래의 API를 이용하는 간단한 예제.

레볼루션 슬라이더 플러그인을 업데이트 하는 가장 쉬운방법은 구매 코드 등록을 한 후에, "Search for Updates" 버튼을 눌러서 업데이트 하는것이다.

기본적인 해결 방법

만약 슬라이더를 만들어 웹페이지에 넣었는데, 슬라이더가 작동을 하지 않는다면 아래를 체크해 본다:

• 웹페이지에 슬라이더를 넣는 방법을 다른 것으로 시도해 본다.
• Troubleshooting settings섹션에 가서 가능성이 있는것을 조정해 본다.
• 워드프레스를 최신 버전으로 업데이트 한다..
• 다른 플러그인이나 테마와의 충돌을 의심해 본다. 다른 테마로 바꿔보고 그래도 문제가 해결되지 않으면, 플러그인을 하나씩 '비활성화'해 본다.
• 페이지의 HTML 소스코드를 확인해서 혹시 jQuery 가 두번 로딩되었는지 확인해 본다.jQuery는 테마뿐만 아니라 플러그인에서도 많이 사용한다. 정상적인 방법을 사용하지 않아, jQuery가 중복로드되어 있는경우 플러그인이 정상적으로 작동하지 않는다.
  
  

  아래의 경우는 jQuery가 세번 로딩되는 경우이다

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="js/jquery-1.9.1.min.js"></script>

자주 묻는 질문

1. "The package could not be installed. No valid plugins were found" 같은 메세지가 보일 경우

   코드캐년에서 다운로드받은 파일을 플러그인 설치시 불러오는것이 아니고, 그 파일압축을 해제 해서 나온 폴더 안에 설치 파일이 있다

   

   압축해제한 폴더 안에 보면 몇가지 문서 파일과 함께 설치파일이 보인다. 이 파일을 설치해야 한다.

   





2. "Revolution Slider Error: Slider with alias not found" 같은 메세지가 보인다.
   
   

   아래와 같은 메세지가 뜨는 에러이다.

   

   먼저 해당슬라이더의 "alias"가 특수문자나 공백이 없는지 살펴보고, 사용한 숏코드가 슬라이더 목록의 숏코드와 일치한는지 확인해 본다.예를 들어 페이지의 숏코드가 아래와 같은데...

   

   실제 슬라이더 목록의 슬라이더 "alias"는 아래와 같다면, 둘의 숏코드 이름이 같지가 않은 것이다. 이럴때는 페이지의 숏코드를 바뀌주면 해결된다(이미지의 예에서는 [rev_slider my-slider-2] 로 바꾼다)

   





3. 슬라이더에 이미지가 나타나지 않는다
   
   

   웹사이트의 로딩속도를 증진시키기 위해서 "Lazy Load" 기능을 사용하는 플러그인들이 있다. (Lazy Load : 웹페이지에 많은 이미지들이 보여져야 한다면, 일단 사용자가 볼수 있는곳의 이미지 부터 보여주고, 나머지는 위치만 차지하고 있다가... 스크롤을 해서 해당영역으로 내려가면 그때 실제 이미지가 나타난다. 현재 이 레볼루션슬라이더 메뉴얼도 같은 방법을 사용한다.) 이 플러그인 들이 레볼루션 슬라이더의 img 태그의 src 속성을 변형 시켜 에러가 발생한다. 이때는 슬라이더 메인 세팅의 Genaral Settings 에서 "Lazy Load" 기능을 "Off" 하면된다.

   




4. 텍스트 레이어에 사전 정의된 스타일이 적용되지않을때 - 동영상 참조 (동영상을 보면 새로운 텍스트에 스타일을 선택해도 적용되지 않는다. jQuery충동 문제인듯... 그럴때는 동영상 후반부 처럼 적용하고 싶은것을 타이핑하면된다.)




5. 슬라이더가 웹사이트에서 보이지 않을때 - 트러블 슈팅의 3번옵션을 변경해 보라




6. 슬라이더가 탭 안에서 원활하게 작동하지 않을 때 - 탭 안에 슬라이더가 있는경우 탭에 가려서 슬라이더가 보이지 않을때도 슬라이더는 작동을 멈추지 않는다. 슬라이더가 변경되는 동안에 다시 탭이 활성화 되는 경우, 슬라이더가 보이지 않거나, 크기에 문제가 생기는 경우가 있다. 그 때 해결하는 방법이다.




7. 메인 메뉴에 마우스를 올려서 펼쳐지는 서브메뉴가 슬라이더에 가려서 보이지 않을 경우




8. 슬라이더 내에 비디오를 넣었을때 크기나 위치를 조정할수 없을때 - 대부분 테마가 비디오 삽입시 사용하는 "FitVids"라는 자바 스크립트를 포함하고 있기때문이다.이 스크립트가 비디오에 추가 div 요소를 생성하고, 이것이 레볼루션 슬라이더와 충돌을 일으킨다. 이럴때의 해결 방법이다.




9. 구매 코드 등록및 자동업데이트 활성화(Purchase Activation) 섹션이 보이지 않을 때 - 대부분 구매시 레볼루션 슬라이더를 포함하고 있는 테마가 그 섹션을 커스텀 CSS로 가려버린 경우다. 이럴 때 가장 쉬운 해결법은 기본테마로 테마를 바꾸면 해당섹션이 보여지고, 이때 등록한후 , 다시 원래 테마로 변경한다.(이때 다시 안보이지만, 이미 등록되었으므로 자동 업데이트및 프리미엄 서비스를 받을수 있다) - 참조




10. HTML5 비디오가 특정 브라우저에서 작동하지 않을 때 - 모든 브라우저 에 맞는 비디오 타입을 등록하고, 해당 브라우저에서 작동해야하는 비디오를 다이렉트로 불러 와도 보여지지 않을때 , 서버가 HTML5 비디오 타입을 지원하지 않는 경우이다. 이 때의 해결 방법이다.




11. 슬라이더 왼쪽에 의도하지 않은 마진/패딩이 들어갈때 - 대부분 사용하는 테마내에서 CSS 값이 슬라이더에 상속되어서 생기는 여백이다. 이때 해결하는 방법이다.




12. 테마펀치社의 FAQ 에서 찾아보기