Divi Builder – 동영상 슬라이더 모듈

Divi Builder – 동영상 슬라이더 모듈

Divi를 사용하면 페이지에 동영상 슬라이더를 쉽게 추가할 수 있습니다. 이것은 거의 모든 소스의 비디오 컬렉션을 구성하는 좋은 방법입니다. 동영상 갤러리를 사용하면 동영상 썸네일 이미지와 재생 버튼을 사용자 지정하여 임베드에 명확한 사용자 지정 스타일을 추가할 수도 있습니다.

페이지에 동영상 슬라이더 모듈을 추가하는 방법

페이지에 동영상 슬라이더 모듈을 추가하기 전에 먼저 Divi 빌더로 이동해야 합니다. 웹 사이트에 Divi 테마가 설치되면 새 페이지를 만들 때마다 게시물 편집기 위에 Divi Builder 사용 버튼이 표시됩니다. 이 버튼을 클릭하면 Divi Builder가 활성화되어 모든 Divi Builder 모듈에 액세스 할 수 있습니다. 사용자 화면에서 “시각빌더 활성화 하기” 버튼을 클릭 할 수도 있습니다.

Divi Builder 사용하기

비주얼 빌더(시각 빌더)에 들어가면 회색 더하기 버튼을 클릭하여 페이지에 새 모듈을 추가할 수 있습니다. 새 모듈은 행 내부에만 추가할 수 있습니다. 새 페이지를 시작하는 경우 먼저 페이지에 행을 추가하는 것을 잊지 마십시오. ‘행(Row)’‘섹션(Section)’ 요소를 사용하는 방법에 대한 훌륭한 매뉴얼이 있습니다.

동영상 슬라이더 모듈

모듈 목록에서 동영상 슬라이더 모듈을 찾아 클릭하여 페이지에 추가합니다. 모듈 목록을 검색할 수 있습니다. 즉, “동영상 슬라이더”를 검색해서 추가할 수 있습니다! 모듈이 추가되면 모듈의 옵션 목록이 표시됩니다. 이러한 옵션은 콘텐츠, 디자인 및 고급의 세 가지 주요 그룹으로 구분됩니다.

동영상 슬라이더 옵션

많은 설정을 조정하기 전에 동영상 슬라이더를 동영상으로 채우는 것이 좋습니다. 이렇게 하면 변경 사항이 최종 결과에 미치는 영향을 실제로 확인할 수 있습니다. 새로운 동영상 슬라이드를 추가하려면 “+ 새 동영상 추가”를 클릭해야 합니다.

동영상 추가하기

여기에서 .mp4 또는 Webm 파일을 업로드 할 수 있습니다. YouTube의 동영상 URL을 삽입할 수도 있습니다. 파일을 업로드하거나 YouTube 링크를 추가한 후 오른쪽 하단에 있는 녹색 확인 버튼을 클릭하면 동영상 슬라이더 모듈의 기본 콘텐츠 탭으로 돌아갑니다. 추가하려는 각 동영상에 대해 이 과정을 반복합니다.

동영상 슬라이더 모듈 콘텐츠 설정

오버레이

여기에서 기본 비디오에 동영상 오버레이를 표시하거나 숨기도록 선택할 수 있습니다. 이는 각 동영상 슬라이드에 오버레이를 추가하거나 Divi에서 자동 생성하여 수행할 수 있습니다.

관리자 라벨

이 드롭 다운에서 관리자 화면과 비주얼 빌더의 skeleton view에 표시될 관리 라벨을 추가할 수 있습니다.

동영상 슬라이더 모듈 디자인 설정

동영상 슬라이더 디자인 탭

여기에서 슬라이더 컨트롤 색상을 밝은 색상에서 어두운 색상으로 변경하고 재생 아이콘의 색상을 변경하고 썸네일 오버레이 색상을 조정할 수 있습니다.

동영상 슬라이더 모듈 고급 설정

동영상 슬라이더 고급 탭

동영상 슬라이더 모듈의 고급 탭에서 고유한 CSS ID와 클래스를 추가할 수 있습니다. 또한 사용자 지정 CSS 드롭 다운의 비디오 슬라이더 모듈 내에서 미리 정의된 다양한 (및 미리 선택된) CSS 선택기에 사용자 지정 CSS를 추가할 수 있습니다. 마지막으로 “보이기 여부” 드롭 다운에서 휴대폰, 태블릿 및 데스크톱에서 모듈의 가시성을 조정할 수 있습니다.

개별 동영상 콘텐츠 설정

개별 슬라이드에 대한 특정 설정을 하려면 동영상의 톱니바퀴 아이콘을 클릭하여 고유한 설정을 엽니다.

개별 설정 열기

비디오

위에서 설명한 것처럼 여기에서 비디오 콘텐츠를 추가할 수 있습니다.

오버레이

오버레이 드롭 다운에서 이미지를 업로드하여 비디오 슬라이드를 오버레이 하거나 Divi가 자동으로 생성하도록 선택할 수 있습니다.

개별 동영상 설정

개별 동영상 디자인 설정

개별 동영상 디자인 탭

동영상 슬라이드의 디자인 탭에서 슬라이드 화살표 색상을 밝은 색상에서 어두운 색상으로 변경할 수 있습니다.

사용 사례 예: 온라인 코스 페이지에 튜토리얼 동영상을 보여주기 위해 동영상 슬라이더 추가

이 예에서는 동영상 슬라이더를 사용하여 온라인 코스 페이지에서 동영상을 보여주는 방법을 보여 드리겠습니다.

시작합니다.

비주얼 빌더를 사용하여 섹션과 1열의 행을 추가하십시오. 그런 다음 동영상 슬라이더 모듈을 행에 추가하세요.

동영상 슬라이더 추가

동영상 슬라이더 설정창에서 가장 먼저해야 할 일은 모듈에 첫 번째 비디오를 추가하기 위해 + “새 동영상 추가”를 선택하는 것입니다.

여기서는 요가 영상을 4개를 넣어 보겠습니다.

그리고 다음과 같이 개별 동영상 설정을 업데이트합니다.

컨텐츠 > 동영상: 원하는 동영상

컨텐츠 > 오버레이: 사용 안함(원하는 이미지를 보여주려면 넣어주세요)

디자인 > 슬라이더 콘트롤 색상: 밝은(기본 값)

개별 동영상 설정 아이콘

모든 비디오 및 이미지 오버레이가 추가되면 비디오 슬라이더 설정으로 돌아가서 다음과 같이 옵션을 업데이트 하세요.

컨텐츠 탭

요소 > 화살표 보여주기: 네

요소 > 슬라이더 콘트롤: 썸네일 트랙 사용하기

메인 동영상에 이미지 오버레이 전시 : 네(이미지 오버레이 사용했으면)

디자인 탭

콘트롤 > 슬라이더 콘트롤 색상 : 밝은

플레이 아이콘 색 : 흰색(#ffffff)

동영상 슬라이더 디자인 탭

완성!

동영상 슬라이더 완성

원문: https://www.elegantthemes.com/documentation/divi/video-slider/

코멘트 제출

Don`t copy text!