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