Divi 튜토리얼 : Divi에 비디오 모듈을 추가하는 방법

년부터 블레어 Jersyer | Divi

비디오 모듈을 사용하면 Divi에서 페이지에 비디오를 추가하는 것은 간단합니다. 이 모듈을 사용하면 모든 소스의 비디오를 임베드 할 수있을뿐만 아니라 썸네일 이미지와 재생 버튼을 사용자 정의 할 수도 있습니다.

페이지에 비디오 모듈을 추가하는 방법

페이지에 비디오 모듈을 추가하려면 먼저 Divi Builder로 이동해야 합니다. 일단 디비 테마 웹사이트에 설치하면 버튼이 표시됩니다. Divi Builder 사용 새 페이지를 만들 때마다 게시물 편집기 위에 있습니다. 이 버튼을 클릭하여 Divi Builder를 활성화하고 모든 Divi Builder 모듈에 액세스하십시오. 그런 다음 버튼을 클릭하십시오 비주얼 빌더 사용 시각적 모드에서 생성기를 시작합니다. 버튼을 클릭 할 수도 있습니다. 비주얼 빌더 사용 WordPress 대시 보드에 연결된 경우 포 그라운드에서 웹 사이트를 탐색 할 때

제이 빌더

Visual Builder에 들어가면 회색 더하기 버튼을 클릭하여 페이지에 새 모듈을 추가 할 수 있습니다. 새 모듈은 행 내부에만 추가 할 수 있습니다. 새 페이지를 시작하는 경우 먼저 페이지에 행을 추가해야합니다.

video module divi.png

모드 목록에서 비디오 모드를 찾아 클릭하여 페이지에 추가하십시오. 모드 목록을 검색 할 수 있습니다. 즉, "비디오"라는 단어를 입력 한 다음 엔터를 클릭하여 비디오 모드를 자동으로 찾아 추가 할 수 있습니다! 모듈이 추가되면 모듈 옵션 목록이 표시됩니다. 이러한 옵션은 세 가지 주요 그룹으로 구분됩니다. 내용 , 임신 et 고급 .

사용 사례 예 : 랜딩 페이지에 비디오 추가

방문 페이지에 동영상을 추가하는 것은 다음과 같은 좋은 방법입니다. 홍보 귀하의 제품을 구매하고 전환율을 높이세요. 이 예에서는 비디오 모듈을 사용하여 방문 페이지에 비디오를 추가하는 방법을 보여 드리겠습니다. 영상이 들어갈 위치에 빨간색 원을 표시했습니다.

divi exemple.jpg에서 비디오 만들기

Visual Builder를 사용하여 전폭 행 (1 열)이있는 새 섹션을 추가합니다. 행 설정의 디자인 탭에서 "사용자 지정 너비 사용"옵션을 선택합니다. 표시되는 사용자 지정 너비 옵션에 대해 767px의 사용자 지정 너비를 입력합니다. 이렇게하면이 행에 추가 할 비디오 모듈이이 너비를 초과하지 않고 더 큰 화면 크기에서 너무 커집니다.

사용자 정의 너비를 사용하십시오. divi.png

그런 다음 비디오 모듈을 행에 추가합니다. 비디오 모듈 설정의 콘텐츠 탭에서 랜딩 페이지에 포함 할 비디오의 비디오 URL을 입력합니다. 이 예에서는 YouTube 동영상의 URL을 사용하고 있습니다.

divi.png에 비디오를 추가하십시오.

그런 다음 "비디오 생성"버튼을 클릭하여 비디오에 대한 이미지 오버레이 URL을 추가합니다. 이렇게하면 자동으로 비디오에서 프레임을 가져 와서 새 사용자 정의 비디오 아이콘이있는 오버레이 역할을합니다.

오버레이 추가 divi video.jpg

디자인 탭에서 랜딩 페이지와 일치하도록 플레이 아이콘의 색상을 변경합니다.

플레이어 아이콘 편집 divi video.jpg

이제 깔끔하게 보이고 디자인과 일치하는 랜딩 페이지 용 비디오가 생겼습니다.

콘텐츠로 최종 디자인 video.jpg

이제 비디오 모드가 작동하는 것을 보았으므로 아래 섹션에서 모든 설정을 살펴보십시오. 모듈 설정의 각 탭에서 찾을 수있는 내용과 각 기능에 대한 설명을 자세히 살펴 보았습니다.

콘텐츠 옵션

매개 변수 모듈 divi.png

비디오의 URL

Divi Video 모듈을 사용하면 두 가지 다른 방법을 사용하여 비디오를 추가 할 수 있습니다. "비디오 다운로드"버튼을 클릭하고 원하는 파일을 선택하여 컴퓨터에서 자신의 비디오 파일을 업로드하거나 Youtube와 같은 타사 비디오 소스의 비디오 URL을 입력 할 수 있습니다. 또는 Vimeo. 브라우저에서 URL을 복사하여 붙여넣고 비디오 URL 필드에 붙여 넣으면 나머지는 Divi가 알아서 처리합니다!

이미지 오버레이 URL

사용자 지정 재생 버튼이있는 표준 비디오 인터페이스에 배치되어 더 선명하고 스타일이 지정된 모양을 만드는 사용자 지정 비디오 축소판 이미지를 설정하려는 경우 이미지 오버레이 필드를 사용하여 설정할 수 있습니다. 이 컨트롤을 사용하면 개인화 된 이미지를 업로드하거나 Divi가 비디오의 URL에서 자동으로 이미지를 생성하도록 할 수 있습니다. Youtube 및 Vimeo와 같은 대부분의 비디오 공급자는이 옵션을 지원합니다. "비디오 생성"버튼을 클릭하기 만하면 나머지는 Divi가 알아서 처리합니다!

관리 라벨

기본적으로 비디오 모듈은 생성기에 '비디오'레이블과 함께 표시됩니다. 관리자 태그를 사용하면 쉽게 식별 할 수 있도록이 태그를 변경할 수 있습니다.

디자인 옵션

아이콘 색상 변경

섹션 디자인 divi.png 디자인

비디오 창에 이미지 오버레이를 지정하는 경우 표시된 비디오에는 비디오 위에 재생 아이콘이 포함됩니다. 페이지의 색상과 일치하도록 여기에서이 아이콘의 색상을 지정할 수 있습니다.

고급 옵션

비디오 모듈 고급 section.png

CSS 식별자 및 클래스

모듈에 CSS ID 또는 클래스를 추가하는 데 사용할 수 있습니다. 그런 다음 스타일 시트 또는 테마 옵션 사용자 정의 CSS 상자에서이를 사용하여 모듈에 사용자 정의 스타일을 적용 할 수 있습니다. CSS ID는 페이지의 특정 영역으로 연결되는 앵커 링크로 타겟팅 될 수도 있습니다.

맞춤 CSS

여기에서 비디오 모듈에 사용자 정의 CSS를 추가 할 수 있습니다.

시계

일부 장치에서 비디오 모듈을 숨기려면 비디오 모듈을 비활성화 할 장치를 선택할 수 있습니다.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”플랫” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DIVI 테마 다운로드 [/vcex_button][/vc_column][vc_column 너비=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” 레이아웃=”확장” align=”center” font_family = ”Raleway” font_weight=”700″ style=”플랫” ​​custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]다운로드 TEMPLATES DIVI[/vcex_버튼][/vc_열][/vc_row]

다른 Divi 자습서

포스터 르 논평

귀하의 이메일 주소는 공개되지 않습니다. 필수 필드는 표시됩니다 *

이 사이트는 원하지 않는 것을 줄이기 위해 Akismet을 사용합니다. 댓글 데이터 사용 방법에 대해 자세히 알아보기.