로딩중...

워드프레스 아바다 테마 퓨전 슬라이더 -Fusion Slider

Home/아바다 테마 사용법/워드프레스 아바다 테마 퓨전 슬라이더 -Fusion Slider




1.기본 설명

슬라이더 (Slider) : 우리 눈에 보이는 사진들이 연속해서 전환되는 효과를 가진, 이미지나 동영상의 집합체 – 컨테이너
슬라이드 (Slide) : 하나의 슬라이더(컨테이너) 속에 들어있는 각각의 이미지한장, 동영상 한개 등 그 구성이 되는 낱장을 말합니다.

2.슬라이더(Slider) 만들기

“관리자 메뉴-퓨젼 슬라이더-슬라이더 추가/편집” 화면으로 갑니다.
워드프레스 아바다 테마 퓨젼 슬라이더_01

슬라이더를 하난 만들기 위해서 아래의 옵션을  입력합니다.

  • 이름(Name) : 현재 작업중인 슬라이더의 이름을 만들어 줍니다.
  • shortcode : 글이나 페이지 작성시 숏코드 안에서 사용되는 이름입니다. 글자와 숫자 하이픈(-)만 사용 가능합니다.
  • 넓이(: 슬라이더의 넓이를 설정합니다. px단위나 % 단위
  • 높이(Height) : 슬라이더의 높이를 설정합니다. px단위
  • 슬라이더 컨텐츠 영역 최대 넓이(Slider Content Max Width) : 컨텐츠 영역의 넓이를 지정합니다. 컨텐츠 영역은 슬라이드 제작시 입력하는 제목,캡션, 버튼등이 나타나는 영역입니다. 픽셀 단위입니다. 예) 850px. 비워두면 사이트 넓이( ‘테마옵션-레이아웃-사이트 넓이’)를 사용합니다.
  • 전체화면 슬라이더(Full Screen Slider) : 체크하면 이 슬라이더가 화면의 상/하단에 꽉 들어차게 됩니다.
  • 스크롤시 패럴랙스 효과(Parallax Scrolling Effect) : 체크하면 스크롤시 슬라이더에 패럴랙스 효과가 나타납니다. 이 효과는 퓨젼 페이지 옵션에서 이 슬라이더를 선택했을 때만 효과가 나타납니다. 페이지 빌더내에서 슬라이더 숏코드로 입력한 슬라이더에는 적용되지 않습니다. 이 옵션을 사용할 경우 슬라이더의 높이가 위에서 지정한 것과 정확하지 않을수 있습니다. 헤더의 높이 만큼 슬라이더의 높이에 마이너스 마진을 주기 때문에 처음 나타날 때 슬라이더의 높이가 줄어 듭니다. 예를 들어 위에서 슬라이더의 높이 500px을 적용하고 이 옵션을 체크한 경우, 현재 사용하는 사이트의 헤더 높이가 75px 이라면 처음 나타나는 슬라이더의 크기는 425px 이 됩니다.
  • 좌/우 전환 화살표 아이콘 표시(Display Navigation Arrows) : 체크하면 슬라이더 위에 마우스를 오버했을 때 좌/우 슬라이드 전환 아이콘이 나타납니다.
  • 좌/우 전환 박스 크기(Navigation Box Size) : 좌/우 전환 아이콘 박스의 크기를 설정합니다.
  • 좌/우 아이콘 크기(Navigation Arrow Size) : 좌/우 아이콘의 폰트 크기를 설정합니다.
  • 페이지 써클 아이콘 표시(Display Pagination Circles) : 체크하면 슬라이더 하단 중앙에 페이지를 표시하는 동그란 아이콘이 표시됩니다.
  • 자동 시작(Autoplay) : 체크하면 슬라이더가 자동으로 시작됩니다.
  • 슬라이드 반복(Slide Loop) : 체크하면 슬라이드가 무한 반복됩니다.
  • 애니메이션 효과(Animation) : 슬라이드가 변경될 때 적용되는 애니메이션 효과를 선택합니다.
  • 슬라이드쇼 속도(Slideshow Speed) : 슬라이드와 슬라이드 사이에 전환 되는 시간 간격을 설정합니다. 1초는 1000 입니다.
  • 애니메이션 속도(Animation Speed) : 슬라이드 전환시 애니메이션시작에서 끝까지 소요되는 시간(슬라이드1장이 등장하는데 걸리는 시간)을 설정합니다. 1초는 1000입니다.
  • 텍스트 반응형 민감도(Responsive Typography Sensitivity) : 디스플레이의 크기 변화에 따른 슬라이더 내 글자 크기의 변화량을 설정합니다.0~2 까지이며 0은 반응 민감도가 없다는 의미이므로 디스플레이의 크기가 변해도 글자의 크기는 항상 같습니다. 2는 민감도가 가장 큰것으로 디스플레이가 작아질수록 글자의 크기가 작아집니다.
  • 최소 폰트 크기 비율(Minimum Font Size Factor) : 위에서 설정한 민감도에 따라 글자 크기는 디스플레이의 크기에 맞춰 아주 작아 질수 있습니다. 이를 방지하기 위해 더이상 작아지지 않는 한계값을 설정하는데 사용하는 인자입니다. 여기서 설정한 값과 ‘테마옵션-타이포그래피-본문 타이포그래피’ 의 본문 타이포그래피의 폰트 사이즈값의 곱하기로 나온 값이 슬라이더 내 글자의 최소 크기가 됩니다.

하나의 슬라이더를 만들었습니다만, 아직 그 속의 내용-슬라이드(Slide)-은 없습니다. 지금 까지 컨테이너를 만들었을 뿐입니다.

3.슬라이드(Slide) 만들기

“관리자 메뉴-퓨젼 슬라이더-슬라이드 추가/편집” 화면으로 가서, “새 슬라이드 추가” 버튼을 누릅니다.
워드프레스 아바다 테마 퓨젼 슬라이더_02

 

새로운 슬라이드(Slide)를 만들기 위해 아래의 옵션을 설정합니다.
워드프레스 아바다 테마 퓨젼 슬라이더_03

  • 배경 타입 : 이미지슬라이드를 만들것인지 , 동영상 슬라이드(직접올린 동영상, 유튜브동영상, 비메오 동영상) 를 만들것인지를 결정합니다. – 다시말하지만 한장입니다. 위의 예제 슬라이더는 첫 장이 동영상입니다.
    • 이미지 : 슬라이드로 이미지 사용을 선택합니다. 어떤 이미지를 사용 할 것인지는 “특성이미지”에서 설정합니다.
      워드프레스 아바다 테마 퓨젼 슬라이더_04
    • 자체 비디오 : 슬라이드로 자체 동영상을 사용하고, 추가 설정으로 “비디오 옵션”이 나타납니다.
      • 동영상 WebM 파일 업로드 : 동영상 컨테이너가 webm 인 파일(확장자가 webm ) 을 올립니다. 브라우저 호환성을 위해 필수 항목이며, 동영상은 16:9 비율이어야 합니다.
        *WebM – 구글이 설계한 동영상 컨테이너이며 Vp8 Video Encoding 과 Vorbis Audio Encoding 를 사용합니다. 파이어폭스 , 프롬, 오페라 에서 지원합니다. (익스플로러 지원 안 합니다.)
      • 동영상 MP4 파일 업로드 : 위에서 올린 동영상과 같은 내용이지만 , 동영상 컨테이너가 MP4 인 파일 (확장자가 mp4)을 올립니다. 브라우저 호환성을 위해 필수 항목이며, 동영상은 16:9 비율이어야 합니다.
        *MP4 – H.264 Video Encoding 과 AAC Audio Encoding을 사용하는 컨테이너로 사파리와 익스플로러9 이상, 크롬 에서 지원합니다.
      • 동영상 OGV 파일 업로드 : 위에서 올린 동영상과 같은 내용이지만, 동영상 컨테이너가 Ogg 인 파일 (확장자 ogv) 을 올립니다. 필수 항목이 아니고 선택 사항 입니다.
        *OGV – Theora Video Encoding 과 Vorbis Audio Encoding 을 사용합니다. 파이어폭스, 크롬, 오페라 브라우저에서 지원합니다.
      • 비디오 미리보기 이미지 : ‘자체 비디오’ 선택시 필수 항목입니다. ‘자체비디오’는 모바일 기기에서는 나타나지 않습니다. 여기에 설정하는 이미지가 모바일 기기와 구버전의 웹브라우저에 대체 이미지로 나타납니다.
      • 비디오 오버레이 색상 : 동영상 오버레이(동영상 앞에 막을 덮어 씌우는 효과) 색상을 설정합니다. 헥사코드입니다. ex: #00ff00
      • 비디오 소리 없음 : “Yes” 하면 동영상 작동시 소리를 무음으로 합니다.
      • 비디오 자동플레이 : “Yes” 하면 동영상이 자동으로 플레이 됩니다.
      • 비디오 반복 : “Yes” 하면 동영상이 계속 반복 됩니다.
      • 비디오 컨트롤 숨기기 : 동영상 컨트롤러가 사라집니다. 이 옵션을 “Yes” 하려면, 위의 자동플레이를 “Yes” 해야 합니다.
    • 유튜브 비디오 : 슬라이드로 유튜브 동영상을 사용하고, 추가 설정으로 “비디오 옵션”이 나타납니다.
      • 유튜브 비디오 ID : 슬라이드에서 사용할 유튜브 동영상의 ID 입니다. ID를 찾으려면 해당 동영상의 공유 주소를 확인합니다. (예:동영상의 주소가 https://www.youtube.com/LOfeCR7KqUs 일 때 ID 는 LOfeCR7KqUs 입니다.)
        워드프레스 아바다 테마 퓨젼 슬라이더_05
      • 비디오 비율 : 동영상이 여기에 입력하는 비율로 재 조정 됩니다. 이것은 동영상에 검은색 막대가 나타나는것을 방지하기 위해서 사용합니다. 예) 16:9 , 4:3 , 16:10 기본값은 16:9
      • 비디오 오버레이 색상 : 동영상 오버레이(동영상 앞에 막을 덮어 씌우는 효과) 색상을 설정합니다. 헥사코드입니다. ex: #00ff00
      • 비디오 소리 없음 : “Yes” 하면 동영상 작동시 소리를 무음으로 합니다.
      • 비디오 자동플레이 : “Yes” 하면 동영상이 자동으로 플레이 됩니다.
      • 비디오 반복 : “Yes” 하면 동영상이 계속 반복 됩니다.
      • 비디오 컨트롤 숨기기 : 동영상 컨트롤러가 사라집니다. 이 옵션을 “Yes” 하려면, 위의 자동플레이를 “Yes” 해야 합니다.
    • 비메오 비디오 : 슬라이드로 비메오 동영상을 사용하고, 추가 설정으로 “비디오 옵션”이 나타납니다.
      • 비메오 비디오 ID : 슬라이드에서 사용할 비메오 동영상의 ID 입니다. ID를 찾으려면 해당 동영상의 공유 주소를 확인합니다. (예:동영상의 주소가 http://vimeo.com/75230326 일 때 ID 는 75230326 입니다.)
        워드프레스 아바다 테마 퓨젼 슬라이더_06
      • 비디오 비율 : 동영상이 여기에 입력하는 비율로 재 조정 됩니다. 이것은 동영상에 검은색 막대가 나타나는것을 방지하기 위해서 사용합니다. 예) 16:9 , 4:3 , 16:10 기본값은 16:9
      • 비디오 오버레이 색상 : 동영상 오버레이(동영상 앞에 막을 덮어 씌우는 효과) 색상을 설정합니다. 헥사코드입니다. ex: #00ff00
      • 비디오 소리 없음 : “Yes” 하면 동영상 작동시 소리를 무음으로 합니다.
      • 비디오 자동플레이 : “Yes” 하면 동영상이 자동으로 플레이 됩니다.
      • 비디오 반복 : “Yes” 하면 동영상이 계속 반복 됩니다.
      • 비디오 컨트롤 숨기기 : 동영상 컨트롤러가 사라집니다. 이 옵션을 “Yes” 하려면, 위의 자동플레이를 “Yes” 해야 합니다.
  • 내용 위치 : 슬라이드 안에 들어갈 내용, 즉 제목과 설명 문구, 버튼의 위치를 선택합니다.
  • 제목 내용 : 슬라이드에 사용할 제목에 해당하는 문구(H2 태그)를 입력합니다. 이 칸은 HTML 과 퓨젼숏코드 사용이 가능합니다.
  • 제목 폰트 사이즈 : 바로 위에서 작성한 제목의 글자 크기 입니다.
  • 제목 색상 : 제목의 글자색을 설정합니다. 헥사코드입니다. 기본 : #fff
  • 제목 배경 : ‘Yes’ 하면 제목을 감싸는 배경을 사용합니다.
  • 제목 배경 색상 : 바로 위에서 제목의 배경이 있음을 선택한경우 배경색을 여기서 설정합니다. 헥사코드입니다.
  • 캡션(Caption) 내용 : 슬라이드에 사용할 캡션(표제,설명문)에 들어갈 내용을 입력합니다. 이 칸은 HTML 과 퓨젼숏코드 사용이 가능합니다.
  • 캡션(Caption) 폰트 사이즈 : 바로 위에서 작성한 캡션의 글자 크기 입니다.
  • 캡션(Caption) 색상 : 캡션의 글자색을 설정합니다. 헥사코드입니다. 기본 : #fff
  • 캡션 배경 : ‘Yes’ 하면 캡션을 감싸는 배경을 사용합니다.
  • 캡션 배경 색상 : 바로 위에서 캡션의 배경이 있음을 선택한경우 배경색을 여기서 설정합니다. 헥사코드입니다.
  • 슬라이드 링크 타입 : 혹시 슬라이드안에 어딘가로 넘어가는 링크를 넣고 싶을 때, 링크를 연결할 방식을 선택합니다. ‘버튼’으로 선택하는 경우는 아래의 버튼 숏코드를 편집해서 사용하거나, 원하는 링크를 만들어 넣으면 됩니다. ‘슬라이드 전체’를 선택하는 경우는 이 슬라이드 전체가 링크가능한 공간이 됩니다.
  • 버튼 1 : 1번 버튼의 모양과 연결될 링크를 설정합니다. 버튼 숏코드의 매개변수들을 교체하여 원하는 버튼 형태로 만들수 있습니다. 예) link=”” 를 link=”http://avada.kr” 로 바꾸면 버튼 클릭시 avada.kr 사이트로 연결됩니다. * 버튼을 사용하지 않고, 기타 HTML 코드를 입력해도 됩니다.
  • 버튼 2 : 2번 버튼의 모양과 연결될 링크를 설정합니다. 버튼 숏코드의 매개변수들을 교체하여 원하는 버튼 형태로 만들수 있습니다. 예) link=”” 를 link=”http://avada.kr” 로 바꾸면 버튼 클릭시 avada.kr 사이트로 연결됩니다. * 버튼을 사용하지 않고, 기타 HTML 코드를 입력해도 됩니다.
  • 슬라이드 링크 : 링크 타입을 ‘슬라이드 전체’로 선택한 경우, 슬라이드를 클릭하면 넘어갈 주소를 적습니다.
  • 연결 링크 새 창으로 열기 : 링크 타입을 ‘슬라이드 전체’로 선택한 경우, 슬라이드를 클릭하면 넘어가는 페이지가 새창에서 열리도록 합니다.

각 옵션을 설정 한 후 마지막으로 이 슬라이드(낱장)가 사용 될 슬라이더(컨테이너)를 선택 해 줘야 합니다.
“퓨젼 슬라이더” 메타 박스에서 원하는 슬라이더를 선택 해 줍니다.
워드프레스 아바다 테마 퓨젼 슬라이더_07

공개하기를 누릅니다.

4.퓨젼 슬라이더 사용하기

만들어진 슬라이더는 글/페이지/포트폴리오에서 컨텐츠를 제작 할 때 이용 할 수 있습니다.

페이지의 상단에 대표 슬라이더로 설정하기

새로운 글 작성시 편집화면의 가장 하단 “퓨젼 페이지 옵션-슬라이더-슬라이더타입”을 “퓨젼 슬라이더”로 선택하면, 바로 아래에 사용가능한 퓨젼슬라이더 목록이 나타납니다. 여기에서 원하는 슬라이더를 선택합니다.
워드프레스 아바다 테마 퓨젼 슬라이더_08
선택한 슬라이더는 페이지의 상단에 나타납니다.

 

 

 

컨텐츠의 일부분으로 퓨젼 슬라이더 표시하기

에디터에서 “퓨젼 빌더 엘리먼트-퓨젼슬라이더” 엘리먼트로 원하는 퓨젼 슬라이더를 원하는 크기로 표시 할 수 있습니다.
워드프레스 아바다 테마 퓨젼 슬라이더_09







14 댓글

  1. 독도사랑 2018/03/05 - 09:18 - 답글쓰기

    퓨전 슬라이더를 만들고 PC에서는 잘리는 현상이 없는데 휴대폰으로 볼 때는 좌.우가 조금씩 잘려서 내용이 제대로 보이지 않는데
    휴대폰에서도 전체가 보이게 하려면 어떻게 해야 되나요?

  2. 김영민 2017/08/27 - 21:58 - 답글쓰기

    비디오 자동플레이 YES 하고 해도 , 비디오 컨트롤 숨기기 옵션이 안보이네요,
    그래서 메인슬라이더에 비디오 컨트롤이 살아있어서 보기 싫으네요.
    왜 제관리페이지에서는 비디오 컨트롤 숨기기 옵션이 안보일까요? 희한하네요,,ㅡㅜ

  3. 김석중 2017/07/06 - 10:33 - 답글쓰기

    비메오 동영상 을 아바다 퓨전슬라이더 에서 사용하는데 자동플레이가 크롬,사파리,엣지 다 되는데 익스플로어 만 자동 재생이 안되네요~~
    방법이 있을까요??

  4. 마영희 2017/06/08 - 14:12 - 답글쓰기

    슬라이더를 만들어서 적용시키려고 슬라이더 타입을 정하고 만들어진 슬라이더를 찾아서 저장을 누르면 저장이 되지 않습니다
    무엇이 문제 일까요

    • 이명성 2017/06/12 - 19:36 - 답글쓰기

      미안하지만…
      정확하게 어떤 상황인지 제가 이해가 잘 가지 않습니다… ^^;;

  5. Jong Wook Kim 2016/11/30 - 09:06 - 답글쓰기

    아바다 테마https://avada.theme-fusion.com/church/
    여기 테마에 퓨전슬라이드 동영상 넣었는데…
    노출이 안되는데… 이유를 모르겠네요…
    동영상 아이디를 넣었는데도… 노출이 안됩니다.

    • 이명성 2016/11/30 - 19:12 - 답글쓰기

      글쎄요…
      슬라이더가 잘 만들어 졌다면…
      그리고 그 슬라이더를 퓨젼 슬라이더 엘리먼트를 이용해서 또는 페이지 슬라이더를 이용해서 잘 넣었다면…
      보여지지 않을 리가 없을 텐데…
      이상하군요.

      계속 노력해도 안돼시면
      contact@wpbox.kr
      로 계정 정보를 메일 주세요.

      한번 들어가 봐도 된다면요 ^^

  6. 김종욱 2016/11/30 - 09:02 - 답글쓰기

    퓨전슬라이더에서 동영상을 넣으면 나오지가 않는데… 동영상 ID를 넣었는데도 안나오는 부분은 어디에서 뭐가 잘못된건지…
    ㅜㅜ

  7. 박민 2016/11/04 - 22:26 - 답글쓰기

    아바다 테마를 구입하고, 데모를 이용하여 Fusion Slider 사용하여 웹을 제작하고 있습니다.
    글의 제목과 같이 Slide 상에서 헤딩과 캡션 사이의 줄간이 넓은것 같아서 줄이고 싶은데..

    기초적인 코딩 지식도 없고, 일단 시작했던 터라.. 어떻게 손을 봐야할지 감이 안옵니다.

    또한 텍스트 역시, 좌측 패딩을 더 주고 싶은데.. 옵션을 찾을 수가 없네요.
    답답한 마음에 이곳에 여쭙습니다.

    늘 감사합니다.^^

  8. 2016/10/05 - 12:21 - 답글쓰기

    Youtube 동영상을 넣었습니다.
    그런데 상단에 블랙바가 나오네요.
    옵션에서 Video Aspect Ratio란에 설명을 읽어보면 비율을 넣으면 blackbar가 생성되지 않는다는것 같은데
    비율을 넣었는데도 블랙바가 나오네요.
    원본 동영상 비율 비례한 비율을 넣어야 하나요?

  9. 한진수 2016/06/15 - 15:08 - 답글쓰기

    아바다 테마 세팅중인데요 이런 사이트가 있어서 너무 반갑고 감사합니다.
    제가 궁금한건 퓨전슬라이드 백그라운드를 비메오로 돌리는데요 동영상 홈페이지 로딩되고 바로 시작되지 않고 마우스로 클릭을 해야 구동이 됩니다. 똑같은 동영상을 레볼루션 슬라이더 플러그인에 사용하면 슬라이드 시작과 동시에 구동이 되거든요.

    여기저기 설정을 바꿔봐도 똑같은 상황인데요

    혹 도움을 주실수 있으신지요

    • 이명성 2016/06/19 - 02:18 - 답글쓰기

      퓨젼슬라이드 편집화면에 중간쯤
      Autoplay Video 옵션을 yes 하면
      동영상이 자동플레이 됩니다.

  10. martino 2016/03/11 - 11:54 - 답글쓰기

    퓨전슬라이더 노술순서 제어는 어디서 하는지요?

    • 이명성 2016/03/11 - 23:09 - 답글쓰기

      슬라이드를 작성하면 리스트가 꼭 포스트(글)을 작성한 것처럼 시간의 역순으로 나타납니다.(가장 최근에 작성한 슬라이드가 가장위에) 이 것이 슬라이’더’에 나타나는 순서입니다.
      원하는 슬라이’드’의 편집화면의 오른쪽 상단 ‘공개모듈’에서 공개된 시간을 변경하여 순서를 바꿔주면 됩니다.

댓글 쓰기