Divi로 고정 비디오 슬라이더를 만드는 방법
게시 됨: 2022-03-07고정 비디오 슬라이더는 사용자가 페이지의 콘텐츠를 스크롤하는 동안 간결한 비디오 컬렉션을 최전방에 유지하는 효과적인 방법입니다. 이것은 비디오와 서면 지침을 동시에 활용할 수 있는 튜토리얼이나 레시피에 적합합니다. 이 튜토리얼에서는 Divi로 고정 비디오 슬라이더를 만드는 것이 얼마나 쉬운지 보여줄 것입니다. 그리고 예제 사용 사례의 경우 레시피 페이지에 고정 비디오 슬라이더를 추가할 것입니다.
뛰어들자!
YouTube 채널 구독
엿보기
다음은 이 자습서에서 구축할 디자인을 간략하게 살펴보겠습니다.
무료로 레이아웃 다운로드
이 튜토리얼의 디자인을 손에 넣으려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.
무료로 다운로드
Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 금세 Divi 마스터가 되실 겁니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.
성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!
섹션 레이아웃을 Divi 라이브러리로 가져오려면 Divi 라이브러리로 이동하십시오.
가져오기 버튼을 클릭합니다.
이식성 팝업에서 가져오기 탭을 선택하고 컴퓨터에서 다운로드 파일을 선택합니다.
그런 다음 가져오기 버튼을 클릭합니다.
완료되면 섹션 레이아웃을 Divi Builder에서 사용할 수 있습니다.
튜토리얼로 들어가 볼까요?
Divi로 고정 비디오 슬라이더 만들기
미리 만들어진 레이아웃으로 새 페이지 만들기
미리 만들어진 레이아웃 중 하나를 사용하여 새 페이지를 시작하고 실행하여 자습서를 시작하겠습니다.
방법은 다음과 같습니다.
- 새 페이지를 만들고 제목을 지정합니다.
- Divi Builder를 사용하려면 클릭하십시오(프론트 엔드에 있음).
- 미리 만들어진 레이아웃을 사용하려면 선택하세요.
- 영양사 레시피 페이지 레이아웃을 검색하여 선택하세요.
- 페이지에 레이아웃을 로드하려면 "이 레이아웃 사용" 버튼을 클릭하기만 하면 됩니다.
레이아웃이 페이지에 로드되면 고정 비디오 슬라이더를 페이지에 추가할 준비가 된 것입니다.
고정 비디오 슬라이더의 레이아웃 수정
이 예에서는 두 열 행의 왼쪽 열에 고정 비디오 슬라이더를 추가합니다. 이렇게 하면 사용자가 오른쪽 열의 콘텐츠를 준비하기 위해 스크롤하는 동안 비디오를 계속 볼 수 있습니다. 이러한 유형의 설정은 비디오 및 서면 지침의 이점을 얻을 수 있는 레시피 및 자습서에 적합합니다.
레이아웃을 수정하려면 먼저 "성분" 및 "사용 설명서"가 포함된 페이지의 두 번째 섹션에서 두 번째 행을 찾습니다. 그런 다음 왼쪽 열을 비워 두고 두 개의 텍스트 모듈을 왼쪽 열에서 오른쪽 열 위로 이동합니다.
고정 비디오 슬라이더 모듈 만들기
같은 행의 빈 왼쪽 열에 새 비디오 슬라이더 모듈을 추가합니다.
모의 비디오는 URL 삽입을 사용하여 YouTube 비디오 중 하나를 보여줍니다. 이것이 비디오 슬라이더에 타사 호스팅 비디오를 추가하는 방법입니다. 비디오를 변경하려면 비디오 항목의 설정을 엽니다.
그런 다음 "URL에서 삽입" 작업을 선택합니다. 입력 상자에 새 URL을 붙여넣고 "게시물에 삽입" 버튼을 클릭합니다.
슬라이더에 더 많은 비디오를 추가하려면 "새 비디오 추가" 회색 더하기 아이콘을 클릭하거나 단순히 기존 비디오를 복제할 수 있습니다. 이 예에서는 기존 비디오를 두 번 복제하여 슬라이더에 총 3개의 비디오를 만듭니다.
디자인 탭에서 레이아웃과 일치하도록 축소판 오버레이 색상을 업데이트합니다.
- 썸네일 오버레이 색상: rgba(53,55,82,0.55)
비디오 슬라이더를 "고정"으로 만들기
슬라이더를 "고정" 상태로 만들려면 고급 탭으로 이동하여 다음을 업데이트하십시오.
- 고정 위치: 상단에 고정(데스크톱), 고정하지 않음(태블릿 및 휴대폰)
- 고정 상단 오프셋: 30px(데스크톱), 0px(태블릿 및 휴대폰)
- 하단 고정 제한: 행
이렇게 하면 페이지를 아래로 스크롤하는 동안 브라우저 상단에 도달할 때 비디오 슬라이더가 브라우저 창 상단에 고정됩니다. 그러면 행의 맨 아래에 도달할 때마다 끈적임을 멈춥니다.
결과
기본 동영상의 이미지 오버레이를 사용하는 YouTube 동영상/삽입 관련 문제
YouTube URL을 사용하여 비디오 슬라이더에 여러 비디오를 포함하는 경우 Divi의 기본 제공 옵션인 "메인 비디오에 이미지 오버레이 표시"를 사용하지 않는 것이 가장 좋습니다. 이렇게 하면 비디오 오디오가 고정 상태에서 처음부터 자동 재생되어 다른 간격으로 중복 오디오가 재생됩니다.
mp4 또는 webm 파일 형식의 자체 호스팅 비디오에는 해당되지 않습니다. 자체 호스팅 비디오의 기본 비디오에 이미지 오버레이를 표시할 수 있습니다. 따라서 Divi 비디오 모듈과 함께 Divi의 오버레이 이미지 및 재생 아이콘을 사용하려면 대신 MP4 및 Webm 비디오 파일/URL을 추가해야 합니다.
즉, 비디오 슬라이더에서 YouTube 비디오에 사용자 정의 이미지 오버레이를 계속 추가할 수 있습니다. 그들은 여전히 메인 비디오 아래의 썸네일 컨트롤에 표시됩니다.
전문가 팁: 비디오 시퀀스의 각 단계에 대한 썸네일 이미지 생성
노하우가 있다면 간단하게 각 동영상에 대한 간단한 썸네일을 만들어 단계나 숫자로 정리할 수 있습니다.
오버레이 이미지 예시
다음은 슬라이더에 표시되는 예입니다.
슬라이더에서 자체 호스팅 비디오 사용
슬라이더에서 자체 호스팅 비디오를 사용하려면 비디오 설정을 여십시오.
비디오 추가를 클릭합니다.
라이브러리에서 파일을 선택하거나 비디오에 타사 호스팅 URL을 추가합니다.
항상 각 비디오에 MP4 및 Webm 파일을 추가하는 것이 좋습니다. 이 두 가지가 결합되어 모바일을 포함한 대부분의 웹 브라우저에 대한 지원을 제공합니다.
잊지 마세요. 이미지 오버레이를 추가하여 비디오의 멋진 썸네일 역할을 할 수 있습니다.
오버레이 옵션에서 기본 비디오에 이미지 오버레이를 표시하도록 선택할 수도 있습니다.
최종 결과
다음은 작동 중인 고정 비디오 슬라이더의 또 다른 모습입니다.
마지막 생각들
Divi의 내장된 고정 옵션에 익숙하다면 고정 비디오 슬라이더 모듈을 만드는 것은 매우 간단합니다. 그리고 그 결과는 훌륭한 응용 프로그램이 될 수 있습니다. 자세한 내용은 비디오가 Divi에서도 작동하는 방식을 이해하는 데 도움이 될 것입니다.
또한 숨기기/표시 토글로 고정 비디오를 만드는 방법을 확인하십시오.
댓글로 여러분의 의견을 기다리겠습니다.
건배!