Divi의 비디오 슬라이더 모듈로 재생 목록 페이지를 만드는 방법

재생 목록 페이지는 사용자가 쉽게 액세스할 수 있는 방식으로 유사한 콘텐츠를 표시하는 효과적인 방법입니다. Divi 비디오 슬라이더 모듈은 코스 및 튜토리얼과 같은 비디오 콘텐츠로 재생 목록 페이지를 구축하는 좋은 방법입니다. 이 기사에서는 여러 섹션과 여러 지원 모듈을 사용하여 Divi의 비디오 슬라이더 모듈로 재생 목록 페이지를 만드는 방법을 살펴보겠습니다.

시작하자.

재생 목록 페이지 미리보기

먼저 빌드할 내용을 살펴보겠습니다.

데스크탑

핸드폰

재생 목록 페이지 만들기

우리 페이지에는 각각 두 개의 행이 있는 세 개의 섹션이 있습니다. 각 섹션에는 5개의 모듈이 있습니다. 첫 번째 섹션을 만든 후에는 두 번 복사하고 변경하여 두 번째 및 세 번째 섹션을 만듭니다.

첫 번째 섹션과 행은 기본 스타일을 사용합니다. 저는 Divi 내에서 사용할 수 있는 무료 Print Shop Layout Pack의 스타일링 대기열을 사용하고 있습니다. 따라하기 쉽도록 와이어프레임 보기로 페이지를 만들고 데스크탑 보기로 스타일을 지정하겠습니다.

전체 너비 행

먼저 새 페이지 를 만들고 Visual Builder 를 활성화하고 전체 너비 행을 추가합니다 .

2/3 1/3 행

이 행 아래 에 2/3, 1/3 행을 추가합니다 .

비디오 슬라이더 제목 텍스트 모듈 추가

전체 너비 행에 텍스트 모듈 을 추가합니다.

비디오 슬라이더 모듈 추가

다음으로 2/3, 1/3 행의 왼쪽 열에 Video Slider 모듈 을 추가합니다.

비디오 슬라이더 설명 제목 텍스트 모듈 추가

다음으로, 비디오 슬라이더 모듈 아래에 텍스트 모듈 을 추가하십시오. 이것은 설명을 소개하는 데 사용됩니다.

비디오 슬라이더 설명 텍스트 모듈 추가

다음으로 설명을 포함할 텍스트 모듈 을 추가합니다. 이것은 설명 제목 모듈 아래에 있습니다.

사람 모듈 추가

마지막으로 2/3, 1/3 행의 오른쪽 열에 Person 모듈 을 추가합니다.

비디오 재생 목록 페이지 스타일 지정

이제 귀하의 페이지가 내 페이지처럼 보일 것입니다. 이것은 와이어프레임 보기입니다. 이제 모듈의 스타일을 지정할 차례입니다. 데스크탑 보기로 전환하겠습니다. 페이지를 구축한 방식 때문에 내 페이지에는 기본 콘텐츠가 표시되지 않습니다.

재생 목록 페이지 스타일 지정 비디오 슬라이더 제목 텍스트 모듈

첫 번째 텍스트 모듈에 대한 설정 을 엽니다.

텍스트 수준 을 제목 2로 변경하고 본문 내용에 Pillar One: Divi Fundamentals(또는 귀하의 제목)라는 제목 을 추가합니다.

• 텍스트 수준: H2
• 본문 내용: 첫 번째 기둥: Divi 기초

다음으로 디자인 탭으로 이동합니다. H2 제목 텍스트를 선택하고 글꼴을 Oswald로 변경합니다. Style을 TT로, Alignment를 Center로, Color를 #000645로 설정합니다.

• 표제 수준: H2
• 글꼴: 오스왈드
• 스타일: TT
• 정렬: 중앙
• 색상: #000645

그런 다음 글꼴 크기를 데스크탑의 경우 46px, 태블릿의 경우 32px, 전화의 경우 20px로 설정합니다. Letter Spacing 을 1px로, Line Height 를 1.4em으로 변경합니다. 모듈의 설정을 닫습니다.

• 글꼴 크기: 데스크탑 46px, 태블릿 32px, 전화 20px
• 문자 간격: 1px
• 줄 높이: 1.4em

재생 목록 페이지 스타일 지정 비디오 슬라이더 모듈

다음으로 콘텐츠를 추가하고 비디오 슬라이더 모듈 의 스타일을 지정합니다. 모듈 위로 마우스를 가져간 다음 톱니바퀴 아이콘을 클릭하여 설정 을 엽니다.

새 비디오 추가 를 클릭합니다.

비디오를 추가하고 하위 모듈을 닫습니다.

첫 번째 섹션에 대한 모든 비디오를 추가할 때까지 프로세스를 계속합니다. 기본 설정을 사용하고 있지만 슬라이더 트랙 대신 점 탐색을 사용하고 비디오의 기본 추천 이미지를 표시하지 않으려면 오버레이를 활성화할 수도 있습니다.

재생 목록 페이지 스타일 지정 비디오 슬라이더 설명 제목 텍스트 모듈

그런 다음 비디오 슬라이더 바로 아래에 있는 텍스트 모듈 에 대한 설정 을 엽니다. 이것은 설명의 제목으로 사용됩니다.

본문 텍스트 를 제목 3으로 변경하고 본문 내용 영역에 이 시리즈에 대한 텍스트 를 입력합니다.

• 텍스트 수준: 제목 3
• 내용: 이 시리즈에 대해

다음으로 디자인 탭으로 이동합니다. 제목 텍스트 H3을 선택하고 글꼴을 Oswald로, 스타일을 TT로, 정렬을 왼쪽으로, 색상을 #000645로 변경합니다. 모듈의 설정을 닫습니다.

• 제목 텍스트: H3
• 글꼴: 오스왈드
• 스타일: TT
• 정렬: 왼쪽
• 색상: #000645

재생 목록 페이지 스타일 지정 비디오 슬라이더 설명 텍스트 모듈

다음으로 다음 텍스트 모듈 에 대한 설정 을 엽니다. 여기에는 비디오 시리즈에 대한 설명이 포함됩니다.

본문 내용 영역에 시리즈에 대한 설명 을 입력합니다.

• 내용: 비디오 설명

그런 다음 디자인 탭으로 이동하여 텍스트 정렬까지 아래로 스크롤합니다. 정렬을 왼쪽으로 설정합니다. 나머지 설정은 기본값으로 두겠습니다. 모듈의 설정을 닫습니다.

• 정렬: 왼쪽

재생 목록 페이지 사람 모듈 스타일 지정

마지막으로 Person 모듈 에 대한 설정 을 엽니다.

일반 탭의 텍스트 아래에서 이름 필드에 사람의 이름을 입력하고 위치 필드에 강사를 입력합니다. 원하는 소셜 미디어 링크를 입력합니다. 이 튜토리얼에서는 공백으로 둡니다.

• 이름: 사람의 이름
• 직위: 강사

콘텐츠 영역까지 아래로 스크롤하여 강사에 대한 설명 을 추가합니다. 이미지 아래에서 미디어 라이브러리의 이미지 를 선택합니다.

• 내용: 설명
• 이미지: 사람의 이미지

제목 텍스트

디자인 탭으로 이동하여 제목 텍스트로 스크롤합니다. H4 제목 수준을 선택합니다. Font를 Oswald로, Weight를 Semi Bold로, Style을 TT로, Color를 #000645로 설정합니다. Size를 20px로, Spacing을 1px로, Line Height를 1.5em으로 설정합니다.

• H4
• 오스왈드
• 반 굵게
• TT
• #000645
• 20픽셀
• 간격 1px
• 라인 높이 1.5em

위치 텍스트

마지막으로 텍스트 위치 까지 아래로 스크롤합니다. 글꼴로 Oswald를 선택하고 두께를 Semi Bold로 설정합니다. Style을 TT로, Color를 #8f9ca4로, Size를 15px, Line Spacing을 1px, Line Height를 1.5em으로 설정합니다. 모듈의 설정을 닫습니다.

• 글꼴: 오스왈드
• 무게: 반 굵게
• 스타일: TT
• 색상: #8f9ca4
• 크기: 15px
• 간격: 1px
• 줄 높이: 2em

재생 목록 페이지의 섹션 복제

이제 섹션이 원하는 방식으로 디자인되고 스타일이 지정되었으므로 설정 위로 마우스를 가져간 다음 2개의 복제본을 만듭니다 .

재생 목록 페이지 두 번째 섹션 스타일 지정

두 번째 섹션에서는 배경색을 변경하여 다른 섹션과 구별되도록 합니다. 우리는 또한 모듈의 내용을 변경할 것입니다.

섹션 설정

그런 다음 두 번째 섹션 의 설정 을 엽니다.

배경 까지 아래로 스크롤하고 색상을 #f9f7f4로 설정합니다. 설정을 닫습니다.

• 배경색: #f9f7f4

두 번째 비디오 슬라이더 제목 텍스트 모듈

두 번째 섹션의 제목 을 열고 두 번째 비디오 세트를 반영하도록 변경합니다. 저는 이 섹션을 두 번째 기둥: Divi 모듈이라고 부릅니다. 설정을 닫습니다.

• 내용: 두 번째 기둥: Divi 모듈

두 번째 비디오 슬라이더 모듈

두 번째 섹션의 비디오 슬라이더 모듈 에 대한 설정 을 엽니다. 비디오를 두 번째 섹션의 비디오로 교체하십시오. 설정을 닫습니다.

• 하위 모듈: 비디오 선택

두 번째 비디오 슬라이더 설명 제목 텍스트 모듈

이 제목은 그대로 유지되므로 변경할 필요가 없습니다.

두 번째 비디오 슬라이더 설명 텍스트 모듈

다음으로, 두 번째 비디오 설명이 있는 텍스트 모듈 을 열고 두 번째 비디오 세트에 대한 설명을 작성하십시오 .

• 본문 내용: 동영상 설명

2인칭 모듈

다른 강사가 두 번째 비디오 세트를 가르치는 경우 두 번째 사람 모듈 을 열고 이름을 바꿉니다. 또한 사용 중인 경우 소셜 미디어 URL을 변경하거나 추가합니다.

• 이름: 강사 이름

그런 다음 본문 내용 및 이미지 영역으로 스크롤하여 사람의 설명과 이미지를 바꿉니다.

• 본문 내용: 사람의 설명
• 이미지: 사람의 이미지

세 번째 섹션 스타일 지정

세 번째 섹션에서는 모듈의 내용을 변경합니다. 이 섹션에서는 기본 설정을 사용하므로 첫 번째 제목으로 넘어갈 수 있습니다.

세 번째 비디오 슬라이더 제목 텍스트 모듈

제목 텍스트 모듈 을 열고 이 비디오 세트와 일치하도록 제목을 변경합니다. 모듈의 설정을 닫습니다.

• 본문 내용: 세 번째 기둥: Divi 레이아웃

세 번째 비디오 슬라이더 모듈

세 번째 비디오 슬라이더 모듈 을 열고 비디오를 이 세트의 비디오로 바꿉니다. 원하는 경우 Amin 레이블을 변경하고 모듈 설정을 닫습니다.

• 새 비디오 추가: 각 비디오 교체

세 번째 비디오 슬라이더 설명 텍스트 모듈

세 번째 섹션의 비디오 설명에 대한 텍스트 모듈 을 엽니다. 이 비디오 세트에 대한 설명 을 작성하십시오. 텍스트 모듈의 설정을 닫습니다.

• 본문 내용: 비디오 설명

3인칭 모듈

마지막으로 이 섹션의 사람 모듈 을 열고 첫 번째 비디오 세트와 다른 경우 이름을 바꿉니다. 두 번째 세트와 동일한 사람이면 해당 모듈을 복사하여 이 열에 붙여넣고 이 모듈을 삭제하면 됩니다. 사용 중인 경우 소셜 네트워크 링크를 변경하거나 추가합니다.

• 이름: 강사 이름

본문 내용 및 이미지 영역까지 아래로 스크롤하여 이 사람의 정보와 일치하도록 바꿉니다. 모듈을 닫고 페이지를 저장 한 다음 Visual Builder를 종료 합니다.

• 본문 내용: 사람의 설명
• 이미지: 사람의 이미지

재생 목록 페이지 결과

다음은 데스크톱과 휴대폰에서 재생 목록 페이지가 어떻게 보이는지 보여줍니다.

데스크탑

핸드폰

마무리 생각

Divi의 Video Slider 모듈로 재생 목록 페이지를 만드는 방법을 살펴보았습니다. 간단한 프로세스이며 첫 번째 섹션의 스타일을 지정하고 나면 복제본을 생성하면 두 번째 및 세 번째 섹션을 훨씬 쉽게 생성할 수 있습니다. 내용만 변경하면 끝입니다. Divi의 비디오 슬라이더 모듈은 비디오가 있는 모든 재생 목록 페이지에 탁월한 선택입니다.

우리는 당신의 의견을 듣고 싶습니다. Divi의 비디오 슬라이더 모듈로 재생 목록 페이지를 구축하셨습니까? 의견에 귀하의 경험에 대해 알려주십시오.