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

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

지금까지 그리드 레이아웃을 즐기시기 바랍니다. 오늘의 레이아웃은 시리즈의 4번이며 내가 가장 좋아하는 것 중 하나입니다(그리고 가장 빠르게 구현함). Divi를 사용하여 구축하는 것이 쉽고 재미있을 뿐만 아니라 사이트의 색 구성표에 맞게 사용자 정의할 수도 있습니다. 배경 그라디언트 옵션은 대각선으로 구분된 두 가지 톤 색상을 만드는 데 사용된 이 디자인의 주요 기능입니다. 간격은 또한 비디오를 쉽게 인식할 수 있도록 하기 위한 것입니다. 틀림없이, 이 디자인은 우리가 일반적으로 "그리드"라고 부르는 범위를 벗어날 수 있지만 잠재력을 보게 될 것이라고 생각합니다.

자 이제 시작하겠습니다. 비디오 모듈과 몇 가지 사용자 정의 배경 요소를 사용하여 이 격자 디자인을 구축하는 것이 얼마나 쉬운지 보여 드리겠습니다.

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

개념 및 영감

나는 튜토리얼이나 코스와 같은 것에 사용할 비디오의 작은 배치를 구성하는 멋지고 깨끗한 레이아웃을 찾고 있었습니다. 이것은 배경 그라디언트를 가지고 놀고자 하는 나의 충동적인 열망과 결합하여 이것이 나왔습니다. 나는 그것을 좋아하면 좋겠.

시작하자.

Divi로 디자인 구현하기

YouTube 채널 구독

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

다음으로 열에 텍스트 모듈 을 추가합니다 . 이것은 페이지 섹션의 제목이나 헤드라인 역할을 합니다.

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

콘텐츠 옵션
내용: [제목 텍스트 입력]

디자인 옵션

텍스트 색상: 라이트
텍스트 글꼴: Arimo
텍스트 글꼴 크기: 56px
텍스트 문자 간격: 1px
텍스트 줄 높이: 1em

설정 저장

흰색 배경에 흰색 텍스트가 있기 때문에 아직 아무것도 볼 수 없지만 괜찮습니다. 계속해서 섹션 배경 그라디언트를 추가해 보겠습니다. 섹션 설정으로 이동하여 콘텐츠 섹션에서 다음 옵션을 업데이트합니다.

배경 그라데이션 색상: #121212, #ffffff
그라디언트 유형: 선형
기울기 방향: 198deg
시작 위치: 45%
최종 위치: 45%

다음으로 방금 추가한 행에 대한 행 설정을 다음과 같이 업데이트합니다.

디자인 옵션

이 행을 전체 너비로 만들기: 예
사용자 지정 거터 너비 사용: 예
거터 폭: 4
열 높이 균등화: 예
맞춤 패딩: 위쪽 1%, 오른쪽 5%, 아래쪽 5%, 왼쪽 5%

설정 저장

이제 방금 생성한 행 바로 아래에 ⅔ ⅓(2열) 구조의 다른 행을 추가합니다.

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

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

콘텐츠 옵션

동영상 MP4/URL: [동영상 URL 입력]
이미지 오버레이 URL: [오버레이 이미지 URL 입력]

설정 저장

다음으로, 방금 생성한 비디오 모듈을 두 번 복제(또는 복사)하고 두 개의 복제 비디오를 오른쪽 열에 쌓이도록 드래그(또는 붙여넣기)합니다.

올바른 URL과 표지 이미지를 포함하도록 동영상 콘텐츠를 업데이트합니다.

계속해서 오른쪽 열에 있는 두 개의 비디오 모듈 아래에 Blurb 모듈을 추가하십시오. 이것은 이 그리드 내의 비디오에 대한 설명으로 사용될 수 있습니다.

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

콘텐츠 옵션

제목: [제목 입력]
내용: [내용 또는 설명 입력]

디자인 옵션

텍스트 색상: 라이트

설정 저장

이제 방금 만든 비디오가 있는 행의 행 설정을 다음과 같이 편집합니다.

콘텐츠 옵션

배경 그라데이션 색상: #4999c1, #121212
그라디언트 유형: 선형
기울기 방향: 198deg
시작 위치: 45%
최종 위치: 45%

디자인 옵션

이 행을 전체 너비로 만들기: 예
사용자 지정 거터 너비 사용: 예
거터 폭: 4
열 높이 균등화: 예
맞춤 패딩: 위쪽 5%, 오른쪽 5%, 아래쪽 5%, 왼쪽 5%

엄청난! 첫 번째 섹션을 완료했습니다. 거의 다 끝났습니다. 지금까지의 진행 상황을 확인하십시오.

다음 섹션을 생성하려면 섹션 복제 버튼을 클릭하여 방금 만든 섹션 전체를 복제합니다.

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

콘텐츠 옵션

배경 그라데이션 색상: #ffffff, #121212(이 색상은 첫 번째 섹션의 반대 순서입니다)

다음으로 복제된 섹션의 텍스트 모듈 설정을 다음과 같이 업데이트합니다.

디자인 옵션

텍스트 텍스트 색상: #333333

설정 저장

이 섹션을 완료하려면 다음을 사용하여 비디오가 포함된 행 설정을 업데이트하십시오.

콘텐츠 옵션

배경 그라디언트 색상: #121212, #4999c1(기본적으로 첫 번째 섹션의 반대 순서가 되도록 색상 순서를 전환함)

설정 저장

이제 두 번째 섹션을 추가한 후 결과를 확인해 보겠습니다...

아직 눈치채지 못했다면 이 두 섹션이 이미 생성되어 있으므로 계속해서 더 많은 섹션을 쉽게 추가할 수 있습니다. 좋은 측정을 위해 섹션을 하나 더 만들어 보겠습니다. 섹션 배경색이 아래쪽에 검은색이므로 위쪽에 검은색 배경색으로 다음 섹션을 시작하려고 합니다. 즉, 상단의 첫 번째 섹션을 복제하고 두 번째 섹션 아래의 페이지 하단으로 드래그해야 합니다. 이렇게 하면 페이지 전체에서 디자인의 연속성이 유지됩니다.

세 번째 섹션이 추가된 후의 모습은 다음과 같습니다.

그게 다야! 모두 완료되었습니다.

반응?

이 레이아웃은 실제로 수정 없이 모바일에서 훨씬 더 잘 보입니다. 확인 해봐!

추가 사용자 정의

여러 섹션으로 이 그리드 레이아웃을 구축한 후 다음 프로젝트의 테마에 맞게 색상을 변경하는 것이 얼마나 쉬운지 이미 눈치채셨을 것입니다. 섹션과 행의 배경 그라데이션 색상을 변경하기만 하면 됩니다.

디자인을 더 조정하고 싶다면 그라데이션 색상에 반투명도를 추가하여 배경을 노출시키는 것이 좋습니다. 또는 그라디언트 색상 중 하나를 완전히 제거하고 어떻게 보이는지 확인하십시오. 다음은 단 하나의 그라디언트 색상을 변경하여 수행할 수 있는 작업에 대한 몇 가지 예입니다...

왼쪽 열의 그리드에 비디오 슬라이더 모듈을 추가할 수도 있습니다.

다가오는…

다음은 시리즈의 마지막 비디오 그리드 레이아웃입니다. 이것은 미묘한 프레임 요소로 사물을 멋지고 깨끗하게 유지하거나 각 비디오를 돋보이게 만드는 독특한 방식으로 색상을 사용하는 옵션을 제공합니다.

그때까지 댓글로 여러분의 의견을 기다리겠습니다.

즐기다!