레볼루션 슬라이더 - PC 모바일 다른 이미지로 적용하는 방법

유료 워드프레스 테마를 설치해서 사용할때 많이 사용되는 플러그인 중에 슬라이더로는 가장 많이 사용하기도 하지만 개인적으로 사용하기 쉽고 좋다고 생각하는 슬라이더 플러그인은 레볼루션 슬라이더 입니다.

 

 

Slider Revolution Responsive WordPress Plugin

보통은 테마에 포함되어 있기도 하지만, 테마에 포함되어 있지 않은 경우에 구매해서 사용할 수  있습니다.

 

정말 많은 기능을 가지고 있지만, 모르면 사용 못하는 기능중에 하나가 PC와 모바일에서 이미지를 다르게 나오도록 하는 기능일 것같습니다. CSS의 @media query를 사용해서 구현할 수도 있지만, 간단하게 구현할 수 있는 방법이 있습니다.

 

이 기능은 최신버전이 아닌 5.3.1.5에서 작성되었습니다. 최신 버전인 6.3에서도 가능하지만 메뉴의 위치만 조금 다르게 되어 있습니다.

 

SLIDER REVOLUTION 설정하기

 

먼저 관리자 > Slider revolution 으로 들어가서 수정할 슬라이더의 편집을 선택합니다.( 마우스 오버하면 나오는 펜슬 아이콘)

 

수정할 슬라이더에 들어오게 되면 하단의 이미지를 선택해 줍니다.

지금 사용하는 슬라이더의 경우는 두개의 이미지가 있습니다. Image1의 경우는 모바일용으로 삽입해 놓은것이고, Image2의 경우는 PC용 이미지로 삽입해 놓은 것 입니다.

먼저 Image2를 PC 에서만 보이도록 하려면 Image2를 선택하고 설정해 주어야 합니다.

 

Image2를 선택하고 상단의 Visibility 메뉴를 선택하면 하단에 Visibility On Devices 에서 원하는 디바이스를 선택 해 줍니다. 지금 선택의 경우는 PC와 태블릿에서만 나오도록 설정 한 것 입니다.

 

 

이번에는 Image1을 선택하고 마찬가지로 Visibility 메뉴를 선택하면 하단에 Visibility On Devices 에서 원하는 디바이스를 선택 해 줍니다. 지금 선택한 디바이스를 보면 태블릿과 모바일 디바이스로 선택되어 있습니다.

 

이렇게 설정을 해 주게 되면 선택한 이미지를 설정한 디바이스 즉, PC와 모바일에서 별도로 설정해서 사용자에게 보여 줄 수 있습니다.