Divi의 비디오 모듈로 멋진 그리드 레이아웃을 만드는 방법(2부)

Divi의 비디오 모듈로 멋진 그리드 레이아웃을 만드는 방법 미니시리즈 2/5에 오신 것을 환영합니다. 이 시리즈에서는 Divi Visual Builder를 사용하여 처음부터 놀라운 그리드 레이아웃을 만드는 방법을 안내합니다. 그리고 이것이 너무 복잡할까 걱정된다면 다시 생각해보세요! 이러한 모든 레이아웃은 추가 코드 없이 Visual Builder를 사용하여 만들고 스타일을 지정할 수 있습니다.

우리는 시리즈의 2부로 만들었습니다! 그리고 저는 이러한 레이아웃을 구축하는 것을 정말 즐기고 있다고 말해야 합니다. 오늘은 제품 페이지 또는 랜딩 페이지의 기능 섹션과 유사한 동영상의 격자 레이아웃을 만드는 방법을 보여 드리겠습니다. 이 레이아웃은 1/2 1/2 열 행의 시퀀스로 구성되며 각 행에는 비디오가 포함되고 두 열 각각에는 해당 설명이 포함됩니다. 그런 다음 다음 섹션에서는 비디오와 설명의 순서를 왼쪽에서 오른쪽으로, 오른쪽에서 왼쪽으로 번갈아 가며 진행합니다. 각 행은 페이지의 전체 너비로 늘어나고 각 열은 동일한 수직 높이를 유지하므로 레이아웃은 모든 화면 크기에서 멋지게 보입니다.

비디오 모듈을 사용하여 비디오를 추가하고 광고 문구 모듈을 사용하여 비디오에 인접한 제목 및 설명 섹션으로 사용할 것입니다. 이 시리즈의 모든 레이아웃과 마찬가지로 이 레이아웃도 Divi를 사용하여 구현하기가 놀라울 정도로 쉽습니다.

최종 결과는 다음과 같습니다.

개념 및 영감

이 개념은 전혀 새로운 것이 아닙니다. 나는 실제로 사용자에게 친숙하기 때문에 이 레이아웃을 만들도록 영감을 받았습니다. 많은 웹사이트는 제품이나 서비스의 기능을 보여주기 위해 유사한 레이아웃을 사용합니다. 그것은 더 큰 콘텐츠 영역을 허용하여 텍스트와 비디오를 위한 눈에 띄는 이미지를 위한 훌륭한 네거티브 공간을 생성한다고 생각합니다.

이것은 비디오를 사용하여 제품 기능을 홍보하지만 다른 용도로도 많이 사용하는 회사에 적합합니다. 다음 프로젝트에 이 디자인을 활용하시기 바랍니다.

시작하자.

Divi로 디자인 구현하기

YouTube 채널 구독

먼저 1/2 1/2(2열) 구조의 일반 섹션을 추가합니다.

다음으로 왼쪽 열에 비디오 모듈을 추가합니다.

다음과 같이 비디오 설정을 업데이트하십시오.

콘텐츠 옵션

동영상 MP4/URL: [동영상 URL 입력]
이미지 오버레이 URL: [동영상용 맞춤 이미지를 업로드하거나 동영상에서 자동으로 생성]

디자인 옵션

재생 아이콘 색상: rgba(255,255,255,0.87)

설정 저장

다음으로 방금 만든 비디오 모듈에 바로 인접한 오른쪽 열에 Blurb 모듈을 추가합니다.

다음과 같이 Blurb 설정을 업데이트합니다.

콘텐츠 옵션:

제목: [동영상 제목 입력]
내용: [동영상 설명 입력]
링크: [원하는 경우 다른 페이지로 연결되는 링크 URL을 입력할 수 있습니다.]
아이콘 사용: 예
아이콘: [아이콘 선택]

디자인 옵션:

아이콘 색상: #666666
텍스트 색상: 라이트
텍스트 방향: 중앙
헤더 글꼴: Roboto
헤더 글꼴 크기: 52px
헤더 문자 간격: 1px
본문 글꼴: Open Sans
본문 글꼴 크기: 20px
본문 색상: #dddddd
데스크탑의 사용자 정의 패딩: 상단 5%(설명에 있는 텍스트의 양에 따라 조정해야 할 수 있음)
태블릿 및 스마트폰의 맞춤 패딩: 상단 20px, 하단 20px

고급 옵션

이미지/아이콘 애니메이션: 오른쪽에서 왼쪽으로(화살표 아이콘과 결합된 이 애니메이션은 왼쪽에 있는 비디오에 더 많은 관심을 끌 것입니다.

설정 저장

계속하기 전에 배경 이미지를 섹션에 추가하십시오. 섹션 설정(파란색 영역)으로 이동하여 다음을 업데이트합니다.

콘텐츠 옵션:

배경 이미지: [배경 이미지 입력(내 이미지는 2000 x 2200)]

시차 효과 사용: 예
시차 방법: 진정한 시차

디자인 옵션:

맞춤 패딩: 상단 0px, 하단 0px

설정 저장
다음으로 다음 업데이트로 행 설정을 편집합니다.

콘텐츠 옵션

2열 배경색: rgba(0,0,0,0.69)

디자인 옵션

이 행을 전체 너비로 만들기: 예
사용자 지정 거터 너비 사용: 예
거터 폭: 1
열 높이 균등화: 예
맞춤 패딩: 상단 0px, 하단 0px
사용자 지정 여백: 0px 상단, 0px 하단
열 1 맞춤 패딩: 위쪽 0px, 아래쪽 0px
2열 맞춤 패딩: 위쪽 0px, 아래쪽 0px

이제 상황이 시작됩니다. 배경 이미지가 있고 첫 번째 행을 만들었습니다. 이제 해당 행을 복제할 준비가 되었습니다. 비주얼 빌더 내의 행 메뉴 모음에서 복제 아이콘을 클릭하십시오.

방금 복제한 새 행에서 비디오 모듈을 오른쪽 열로 드래그하고 블러브 모듈을 왼쪽 열로 드래그합니다.

이제 새 비디오 URL과 새 표지 이미지를 포함하도록 비디오 모듈의 콘텐츠를 업데이트하기만 하면 됩니다. Blurb 모듈의 경우 동영상에 해당하는 헤더와 콘텐츠를 업데이트해야 합니다. 또한 광고 문구 아이콘을 오른쪽을 가리키는 화살표로 조정하고(내가 사용한 것과 동일한 아이콘을 사용한 경우) 이미지/아이콘 애니메이션을 "왼쪽에서 오른쪽으로"로 전환해야 합니다.

다음으로 첫 번째 열의 배경을 설정하기 위해 복제된 행 설정을 업데이트해야 합니다. 행 설정으로 이동하여 콘텐츠 탭 에서 다음을 업데이트합니다.

열 1 배경색: rgba(0,0,0,0.69)
2열 배경색: 없음

우리는 진전을 이루고 있습니다. 이제 처음 두 행이 어떻게 생겼는지 봅시다...

다음 두 행에 대해 복제 프로세스를 반복하고 내용을 업데이트합니다. 행이 많을수록 섹션 배경 이미지가 콘텐츠 길이에 맞게 늘어나야 한다는 점을 기억하십시오.

이 예에서는 2개의 행을 더 추가하여 총 4개의 행이 되도록 했습니다. 최종 결과를 확인하세요.

라이트 버전 만들기

이전의 어두운 비디오 그리드 디자인을 밝은 버전으로 변경하려면 몇 가지 디자인 옵션을 업데이트하기만 하면 됩니다.

이러한 편집의 경우 와이어프레임 보기를 사용하는 것이 조금 더 쉬울 수 있습니다.

다음과 같이 섹션 설정을 업데이트합니다.

콘텐츠 옵션

배경 이미지: [밝은 배경 이미지 입력]

다음과 같이 첫 번째 행 설정을 업데이트합니다.

콘텐츠 옵션

2열 배경색: rgba(255,255,255,0.68)

다음과 같이 첫 번째 행 Blurb 모듈 설정을 업데이트합니다.

디자인 옵션

아이콘 색상: #333333
텍스트 색상: 어두운
헤더 텍스트 색상: #444444
본문 글꼴: Roboto
본문 색상: #666666

다음과 같이 두 번째 행 설정을 업데이트합니다.

콘텐츠 옵션

1열 배경색: rgba(255,255,255,0.45)

오른쪽 클릭 옵션을 사용하여 첫 번째 행의 블러 모듈 디자인을 복사하고 두 번째 행의 블러 모듈에 붙여넣습니다.

그게 다야! 최종 결과를 확인하세요.

반응?

이것은 더 작은 화면 크기에서 작동하는 방식과 관련하여 약간 까다롭습니다. 기본 스택 순서는 왼쪽 열을 오른쪽 열 위에 놓기 때문에 이 레이아웃의 결과는 약간 혼란스럽습니다. Divi의 열 스택 순서를 변경하는 방법에 대한 이전 게시물에서 이 문제를 해결하는 방법을 배울 수 있습니다.

다가오는…

다음 그리드는 당신을 놀라게 할 것입니다. 반투명한 배경색과 그라디언트를 사용하면 자신의 사이트에 매우 쉽게 어울리는 디자인을 할 수 있습니다. 미리보기를 확인하세요…

지금까지 시리즈를 즐기시기 바랍니다. 댓글로 여러분의 의견을 기다리겠습니다.

건배!