Divi의 비디오 모듈로 멋진 그리드 레이아웃을 만드는 방법(3부)
게시 됨: 2017-06-22Divi의 비디오 모듈로 멋진 그리드 레이아웃을 만드는 방법 미니시리즈의 3/5 게시물에 오신 것을 환영합니다. 이 시리즈에서는 Divi Visual Builder를 사용하여 처음부터 놀라운 그리드 레이아웃을 만드는 방법을 안내합니다. 그리고 이것이 너무 복잡할까 걱정된다면 다시 생각해보세요! 이러한 모든 레이아웃은 추가 코드 없이 Visual Builder를 사용하여 만들고 스타일을 지정할 수 있습니다.
시리즈 3부에 오신 것을 환영합니다! 나는 이것이 당신을 조금 놀라게 할 것 같은 느낌이 듭니다. 오늘은 반투명 배경색과 그라디언트를 사용하여 여러 테두리 색상 변형을 만드는 방법을 보여 드리겠습니다. 마지막으로 몇 번의 클릭으로 색 구성표를 완전히 변경할 수 있는 방법을 보여 드리겠습니다. 이 레이아웃은 2개의 1/4 1/2 1/4 열 구조 행과 1/4 1/4 1/4 1/4 열 구조 행의 조합으로 구성됩니다.
비디오 모듈을 사용하여 비디오를 추가하고 광고 문구 모듈을 사용하여 그리드 중간에 제목 및 설명 섹션으로 사용할 것입니다. 이 시리즈의 모든 레이아웃과 마찬가지로 이 레이아웃도 Divi를 사용하여 쉽게 구현할 수 있습니다.
최종 결과는 다음과 같습니다.
개념 및 영감
사실, 원래 레이아웃 아이디어는 인기 있는 사이트 giphy.com에서 작은 gif로 둘러싸인 가운데 열에 더 큰 기능의 gif를 표시하는 방식에서 나왔습니다. 이 아이디어가 비디오 그리드 레이아웃에 적합하다고 생각했습니다. 이렇게 하면 주변의 다른 비디오와 함께 더 큰 비디오를 표시할 수 있기 때문입니다. 그러나 나는 주변의 giphy 이미지의 석조 스타일에 신경 쓰지 않았기 때문에 이 포스트에서는 모든 것을 더 대칭적으로 만들기 위해 짝수 기둥 접근 방식을 사용했습니다.
레이아웃 외에도 Divi의 반투명 배경 기능을 좀 더 탐색하여 독특한 것을 만들고 싶었습니다.
시작하자.
Divi로 디자인 구현하기
먼저 1/4 1/2 1/4(2열) 구조의 일반 섹션을 추가합니다. 
다음으로 첫 번째 열에 비디오 모듈을 추가합니다.
다음과 같이 비디오 설정을 업데이트하십시오.
콘텐츠 옵션
동영상 MP4/URL: [동영상 URL 입력]
이미지 오버레이 URL: [동영상용 맞춤 이미지를 업로드하거나 동영상에서 자동으로 생성]
설정 저장
그런 다음 비디오 모듈 바로 아래에 디바이더 모듈을 추가합니다.
디바이더 설정에서
이제 많은 비디오를 추가할 것이므로 방금 만든 비디오 모듈을 복제하고 올바른 위치로 드래그하는 것이 더 쉽습니다. 그런 다음 나중에 돌아가서 비디오 URL과 표지 이미지를 변경할 수 있습니다.
먼저 방금 만든 비디오 모듈을 복제하고 첫 번째 열의 구분선 모듈 아래로 드래그합니다.
그런 다음 첫 번째 열 요소(비디오, 구분선 및 비디오)를 계속 복제하고 맨 오른쪽 열로 드래그할 수 있습니다. 그런 다음 비디오 모듈 중 하나를 복제하고 중앙 열로 드래그할 수 있습니다. 모든 비디오 콘텐츠를 업데이트하면 다음과 같이 표시되어야 합니다.
계속하기 전에 섹션과 행 열에 배경색을 추가하십시오. 섹션 설정(파란색 영역)으로 이동하여 다음을 업데이트합니다.
콘텐츠 옵션
배경색: #333333
디자인 옵션:
맞춤 패딩: 상단 0px, 하단 0px
설정 저장
이제 다음 업데이트로 행 설정을 편집하십시오.
콘텐츠 옵션:
배경 그라데이션 색상: rgba(255,255,255,0.58) 및 #b684e8
기울기 방향: 360deg
열 1 배경색: rgba(0,0,0,0.69)
2열 배경색: rgba(255,255,255,0.45)
열 1 배경색: rgba(0,0,0,0.85)
디자인 옵션
이 행을 전체 너비로 만들기: 예
사용자 지정 거터 너비 사용: 예
거터 폭: 1
열 높이 균등화: 예
맞춤 패딩: 상단 0px, 하단 0px
사용자 지정 여백: 0px 상단, 0px 하단
열 1 맞춤 패딩: 상단 20픽셀, 오른쪽 20픽셀, 하단 20픽셀, 왼쪽 20픽셀
2열 맞춤 패딩: 상단 20픽셀, 오른쪽 20픽셀, 하단 20픽셀, 왼쪽 20픽셀
3열 맞춤 패딩: 상단 20픽셀, 오른쪽 20픽셀, 하단 20픽셀, 왼쪽 20픽셀
설정 저장
이제 두 번째 행을 추가할 차례입니다. 계속해서 첫 번째 행 아래에 다른 1/4 1/2 1/4(3열) 구조 행을 추가하십시오.
행 설정에 대한 옵션 설정을 먼저 시작하려면 오른쪽 클릭 기능을 사용하여 첫 번째 행의 스타일을 복사하고 두 번째 행에 붙여넣습니다.
이제 행 설정의 경우 다음과 같이 콘텐츠 옵션만 업데이트하면 됩니다.
배경 그라디언트: 없음(복사한 그라디언트 지우기)
열 1 배경색: rgba(0,0,0,0.69)
열 2 배경색: rgba(0,0,0,0.0) – 없음 또는 투명과 동일합니다.
3열 배경색: rgba(0,0,0,0.35)
이제 행 설정이 완료되었으므로 비디오 모듈을 복사하여 첫 번째(맨 왼쪽)와 세 번째 행(맨 오른쪽)으로 드래그(또는 복사하여 붙여넣기)합니다. 그런 다음 비디오 콘텐츠를 업데이트합니다.
중간 열에 대해 블러브 모듈을 추가하고 다음과 같이 설정을 업데이트합니다.
콘텐츠 옵션
제목: [페이지 또는 동영상의 제목 입력]
내용: [동영상 또는 페이지의 내용 또는 설명 입력]
디자인 옵션
텍스트 색상: 라이트
텍스트 방향: 중앙
헤더 글꼴: PT Sans
헤더 글꼴 크기: 52px
헤더 문자 간격: 1px
본문 글꼴: PT Sans
본문 글꼴 크기: 20px
이제 드디어 마지막 줄을 만들 시간입니다. 물론 필요한 경우 더 추가할 수 있습니다.
계속해서 이전 행 아래에 1/4 1/4 1/4 1/4(4열) 구조 행을 추가합니다.
이전과 마찬가지로 이전 행의 디자인을 복사하여 현재 행에 붙여넣으면 디자인을 조금 더 빨리 시작할 수 있습니다.
그런 다음 다음과 같이 행 설정을 업데이트합니다.
콘텐츠 옵션
열 1 배경색: rgba(0,0,0,0.34)
2열 배경색: rgba(0,0,0,0.69)
3열 배경색: rgba(0,0,0,0.34)
4열 배경색: rgba(0,0,0,0.69)
디자인 옵션
4열 맞춤 패딩: 20px 20px 20px 20px
설정 저장
다음으로 비디오 모듈을 4개의 열 각각에 복제하거나 복사합니다. 모든 비디오 콘텐츠를 업데이트하면 완료됩니다!
새로운 그리드 레이아웃을 확인하십시오…
라이트 버전 만들기
이전의 어두운 비디오 그리드 디자인을 밝은 버전으로 변경하려면 몇 가지 디자인 옵션을 업데이트하기만 하면 됩니다.
다음과 같이 섹션 설정을 업데이트합니다.
콘텐츠 옵션:
배경색: rgba(0,0,0,0.12)
다음과 같이 모든 행 설정을 업데이트합니다.
기본적으로 세 개의 행 설정으로 돌아가서 배경색이 사용되는 곳마다 흰색 팔레트 옵션을 클릭하기만 하면 됩니다. 이렇게 하면 모든 어두운 반투명 어두운 배경이 반투명 밝은 배경으로 바뀝니다.
다음과 같이 Blurb 모듈 설정을 업데이트합니다.
디자인 옵션
텍스트 색상: 어두운
그렇게 할 것입니다! 라이트 버전을 확인하세요.
섹션 배경 옵션으로 쉽게 디자인 변경
그리드는 반투명 배경으로 만들어졌기 때문에 섹션 배경색, 그라데이션 또는 이미지를 쉽게 변경하여 사이트와 완벽하게 일치하는 신선한 모양과 느낌을 사이트에 제공할 수 있습니다.
섹션 설정에 배경 이미지를 추가할 때의 차이점을 살펴보세요.
사이트를 일치시키는 또 다른 방법은 첫 번째 행에 추가한 배경 그라디언트의 색상을 일치시키는 것입니다.
다가오는…
이 시리즈의 다음 포스트는 완전히 다른 느낌이 될 것입니다. 이것은 모든 것을 깨끗하고 단순하게 유지하는 것입니다. 그리고 몇 가지 배경 그라디언트 트릭.
그때까지 댓글로 여러분의 의견을 기다리겠습니다.
즐기다!