Divi의 6열 행 및 뷰포트 장치로 창의력을 발휘하는 방법

게시 됨: 2019-01-11

Divi의 다양한 기둥 구조를 통해 기본적으로 염두에 두고 있는 모든 디자인을 만들 수 있습니다. 열 구조를 원래 형태로 사용하는 것이 가장 간단하지만 6열 행의 디자인 요소를 뷰포트 단위와 결합하여 한 단계 더 나아갈 수도 있습니다.

예를 들어 만들 수 있는 것 중 하나는 콜라주입니다. 이미지 편집 소프트웨어를 전혀 사용할 필요가 없습니다! 또한 각 이미지를 별도의 라이트박스에서 열 수 있습니다. 이 게시물에서는 Divi의 기본 제공 옵션만 사용하여 위의 모든 작업을 수행하는 방법을 보여줍니다.

가자!

시사

튜토리얼을 시작하기 전에 다양한 화면 크기에서 결과를 간단히 살펴보겠습니다.

뷰포트 단위

접근하다

섹션, 행 및 열 사이의 모든 여백 너비를 제거하여 사용자 정의 여백과 패딩을 각 모듈에 수동으로 추가할 수 있습니다(뷰포트 단위 사용)
뷰포트 단위는 디자인 요소의 위치가 모든 데스크탑 화면 크기에서 동일하게 유지되도록 합니다.
전체 콜라주 디자인과 일치하도록 각 디자인 요소의 간격 설정을 개별적으로 조정합니다.
Divi의 반응형 옵션 덕분에 위에서 언급한 설정이 태블릿과 휴대폰에 적용되지 않도록 할 수 있습니다.

만들기 시작하자

백엔드 미리보기

백엔드 관점의 최종 결과는 다음과 같습니다.

뷰포트 단위

새 섹션 추가

가장 먼저 해야 할 일은 새 페이지를 만들거나 기존 페이지를 열고 일반 섹션을 추가하는 것입니다.

뷰포트 단위

새 행 추가

열 구조

다음 열 구조를 사용하여 새 행을 계속 추가합니다.

뷰포트 단위

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 크기 설정을 변경합니다. 이것은 이 튜토리얼의 중요한 단계입니다. 섹션, 행 및 모듈 사이의 모든 기본 여백 및 패딩 값을 제거하여 뷰포트 단위를 사용하여 각각의 모든 디자인 요소에 수동으로 간격을 추가할 수 있습니다.

이 행을 전체 너비로 만들기: 예
사용자 지정 거터 너비 사용: 예
거터 폭: 1

뷰포트 단위

간격

행에 사용자 정의 왼쪽 및 오른쪽 패딩도 추가하십시오.

왼쪽 패딩: 6.5vw
오른쪽 패딩: 6.5vw

뷰포트 단위

6열에 제목 텍스트 모듈 추가

콘텐츠 추가

모듈 추가를 시작할 시간입니다! 6열에 텍스트 모듈이라는 제목을 추가하는 것으로 시작하겠습니다. 원하는 제목 2 사본을 포함시키십시오.

뷰포트 단위

제목 텍스트 설정

그런 다음 디자인 탭으로 이동하여 모듈의 제목 텍스트 설정을 변경합니다.

제목 2 글꼴: Battambang
제목 2 글꼴 두께: 굵게
제목 2 텍스트 크기: 4.2vw(데스크톱), 10vw(태블릿), 8vw(전화)
제목 2 글자 간격: -1px

뷰포트 단위

간격

이 행이 행의 6번째 및 5번째 열과 겹치도록 옆에 몇 가지 사용자 정의 간격 값을 추가합니다.

최고 여백: 10vw
왼쪽 여백: -8vw(데스크톱), 0vw(태블릿 및 전화)
오른쪽 여백: -50vw(태블릿 및 휴대폰)

뷰포트 단위

6열에 설명 텍스트 모듈 추가

콘텐츠 추가

열 6에서 필요한 다음 모듈은 설명 텍스트 모듈입니다. 선택한 콘텐츠를 추가합니다.

뷰포트 단위

간격

그런 다음 간격 설정으로 이동하여 이 모듈도 왼쪽으로 밀어줍니다.

최고 마진: 2vw
왼쪽 여백: -8vw(데스크톱), 0vw(태블릿 및 전화)
오른쪽 여백: -50vw(태블릿), -3vw(전화)

뷰포트 단위

6열에 버튼 모듈 추가

사본 추가

6열에 필요한 다음이자 마지막 모듈은 버튼 모듈입니다. 선택한 사본을 추가하십시오.

뷰포트 단위

버튼 설정

그런 다음 디자인 탭으로 이동하여 버튼 설정을 변경합니다.

버튼에 사용자 정의 스타일 사용: 예
버튼 텍스트 색상: #ffffff
버튼 테두리 너비: 1px
버튼 테두리 색상: #000000
버튼 테두리 반경: 0px
버튼 문자 간격: -2px

뷰포트 단위

간격

그리고 다시 간격 설정에서 사용자 정의 여백 값을 사용하여 이 모듈이 열 5와 6과 겹치도록 해야 합니다.

상단 마진: 2vw(데스크톱), 5vw(태블릿), 10vw(전화)
왼쪽 여백: -8vw(데스크톱), 0vw(태블릿 및 전화)
오른쪽 여백: -50vw(태블릿 및 휴대폰)
왼쪽 패딩: 30px
오른쪽 패딩: 30px

뷰포트 단위

열 1에 이미지 모듈 #1 추가

이미지 크기

다양한 이미지 모듈을 모두 추가할 시간입니다! 다시 만들고 있는 예제는 너비 가 880px이고 높이가 1320인 이미지만 사용하는 경우 100% 반응형입니다. 따라서 처음부터 완전히 동일한 예제를 만들려는 경우 특정 차원 집합이 있는 이미지를 사용해야 합니다. 그러나 모든 종류의 이미지 치수에 대해 이 작업을 수행하려면 전체 디자인에 맞게 각 이미지 모듈의 뷰포트 단위를 수동으로 조정해야 합니다.