avada-fusion-slider

[워드프레스] 아바다(AVADA)에서 Fusion Slider를 설정하는 방법

아바다 테마에 포함된 슬라이더 플러그인

가장 많은 판매를 기록하고 있는 인기 유료 테마인 아바다(Avada)는 기본적으로 제공되는 Fusion Slider외에 Revolution Slider(레볼루션 슬라이더)Layer Slider(레이어 슬라이더)를 번들로 제공하여 사용자가 익숙한 슬라이더 플러그인을 사용하도록 배려하고 있습니다.

레볼루션 슬라이더가 많이 사용되지만 이 플러그인은 작년 초에 심각한 보안 문제로 뉴스 기사까지 난 적이 있습니다(“워드프레스 사이트 해킹하는 방법” 참고). 이처럼 보안 문제 때문에 개인적으로는 가급적이면 레볼루션 슬라이더를 사용하지 않고 있습니다.

아바다에서 기본적으로 제공하는 Fusion Slider는 레볼루션 슬라이더처럼 다이내믹한 슬라이드를 만들기에는 미흡하지만 기본적인 효과의 슬라이더를 만드는데 손색이 없습니다.

아바다를 설치하고 나면 알림판의 왼쪽 패널에 Fusion Slider 메뉴가 추가됩니다.

fusion-slider-menu

Slider와 Slide라는 용어가 사용되고 있습니다. 슬라이드들을 모아 놓은 것이 슬라이더로 이해하면 쉬울 듯 합니다. 개별 슬라이드를 만들고, 하나 혹은 여러 개의 슬라이드를 특정 “슬라이더”에 지정할 수 있습니다. 그러면 해당 슬라이더를 실행하면 포함된 슬라이드들이 지정된 순서대로 실행됩니다.

새 슬라이드 만들기/기존 슬라이드 편집하기

구체적으로 “Add or Edit Slides(슬라이드 추가 또는 편집)“를 클릭하면 슬라이드 목록이 나오고, 편집을 원하는 슬라이드를 클릭하면 개별 슬라이드의 콘텐츠를 수정할 수 있습니다. 아니면 “Add New Slide(새 슬라이드 추가)“를 클릭하여 하나 만들면 됩니다.

아바다 슬라이드 목록

위와 같이 슬라이드 목록 화면이 표시되면, 수정을 원하는 해당 슬라이드 위에 마우스를 올리면 편집할 수 있는 메뉴가 표시됩니다.

edit-a-slide

예를 들어, “Contact Us“의 아래에 있는 “편집“을 클릭하면 Edit Slide 화면이 표시됩니다.

워드프레스 아바다 Fusion Slider

왼쪽의 Slide Option 부분이 슬라이드의 콘텐츠를 지정하는 부분입니다. 처음 시작하는 경우 데모를 올려서 Fusion 슬라이드가 어떻게 구성되었는지 확인하는 것이 좋습니다. 데모에서 제공하는 슬라이드를 살펴보면 대략적으로 어떻게 작동하는지 이해할 수 있습니다.

예를 들어, Heading Area의 경우 다음과 같이 추가할 수 있습니다.

GET IN TOUCH
[separator style_type="single" top_margin="20" bottom_margin="10" sep_color="rgba(255,255,255,.3)" border_size="" icon="" icon_circle="" icon_circle_color="" width="170px" alignment="center" class="" id=""]

그리고 Caption Area는 다음과 같은 코드를 입력할 수 있습니다.

<span style="font-weight: 400;">Our team of experts are ready to hear from you</span>

문구와 서식은 적절히 조정하도록 합니다. 나머지 옵션도 적절히 설정하도록 합니다.

그리고 위의 화면에서 오른쪽의 “Fusion Sliders” 부분에서 원하는 슬라이더를 선택하도록 합니다. 슬라이더가 없는 경우 알림판의 Fusion Slider > Add/Edit Sliders에서 새로운 Slider를 만드는 것도 가능합니다.

슬라이더 추가 또는 편집하기

Add or Edit Sliders“를 클릭하면 다음과 같은 화면이 표시됩니다.

fusion-slider-sliders

왼쪽의 Add Sider 부분에서 적절한 설정하고 맨 아래의 “Add Slider” 버튼을 누르면 새로운 슬라이더가 오른쪽에 추가됩니다. 옵션은 적절히 설정하도록 합니다. 예를 들어, Full Screen Slider를 체크하면 화면을 꽉 채우는 슬라이더가 만들어집니다.

오른쪽의 목록에 슬라이더 목록이 표시되고, 카운트는 각 슬라이더에 포함된 슬라이드 개수를 표시합니다. 가령, 위의 News 슬라이더에는 2개의 슬라이드가 포함되어 있습니다.

슬라이더를 편집하려면 원하는 슬라이더 위에 마우스를 올려놓으면 “편집” 링크가 표시됩니다. “편집“을 누르면 왼쪽의 Add Slider 부분의 옵션과 동일한 옵션이 표시됩니다.

페이지에서 슬라이더 설정

특정 슬라이더를 페이지에 추가할 수 있습니다. 개별 페이지 편집 화면에서 맨 아래에 보면 “Fusion Page Option“이 있습니다.

아바다 퓨젼 페이지 옵션 설정

위와 같이 “Slider Type“에서 “Fusion Slider“를 선택하고, “Select Fusion Slider“에서 원하는 슬라이더 이름을 선택하면 됩니다.

슬라이드 순서 지정

Fusion Slider > Re-Order에서 슬라이드들의 순서를 변경할 수 있습니다.

슬라이드 순서 지정 (아바다)

여러 개의 슬라이드가 슬라이더에 포함되는 경우, 해당 슬라이더에서 슬라이드들이 표시되는 순서는 여기에서 지정한 순서를 따릅니다.

마치며

Fusion Slider는 사용이 비교적 쉬운 편입니다. 위에서도 언급했듯이 처음에는 데모를 올려서 슬라이드와 슬라이더가 어떻게 구성되어 있는지를 분석해보면 많은 도움이 됩니다.

그리고 아바다에서 제공하는 아바다 퓨전 슬라이더 설명 동영상도 참고해보시기 바랍니다.

참고:



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.