Divi에서 고유한 열 레이아웃을 생성하기 위해 모듈을 확장하는 방법

Divi Builder로 디자인하는 모든 새 페이지는 다양한 열 레이아웃을 사용하여 구성됩니다. Divi에는 1열에서 6열에 이르는 각 행에 대한 기본 제공 열 레이아웃이 포함되어 있습니다. 그러나 때때로 더 독특한 레이아웃을 위해 이러한 열을 조정해야 할 필요를 느낄 수 있습니다. 오늘은 그렇게 하는 창의적인 방법을 보여 드리겠습니다.

이 튜토리얼에서는 두 개 이상의 열을 차지하도록 음수 여백을 사용하여 모듈을 확장할 수 있는 간단한 디자인 기술을 보여 드리겠습니다. 이 기술을 사용하면 불가능하다고 생각했을 수 있는 고유한 사용자 정의 레이아웃을 디자인할 수 있습니다.

시작하자.

엿보기

우리가 무엇을 만들 것인지 더 잘 이해하기 위해 이 기술을 사용하는 디자인의 전후 버전이 있습니다.

전에

이것은 모듈을 다른 열로 확장하기 위해 사용자 정의 여백을 사용하지 않는 레이아웃 디자인입니다.

후에

숫자 "01", "03", "05"로 표시된 2개의 이미지 모듈과 3개의 텍스트 모듈을 확장한 레이아웃입니다.

변경 사항은 미묘하지만 모듈이 인접한 열을 차지하도록 확장된 것을 볼 수 있습니다. 그리고 이것을 달성하기 위해 필요한 유일한 것은 -100%의 간단한 여백 설정입니다.

그리고 태블릿에서의 결과는 훨씬 더 흥미진진합니다.

개념 이해하기

기본적으로 각 Divi 모듈의 너비는 100%이며, 이는 열에 배치하는 각 모듈이 해당 모듈이 있는 열의 전체 너비에 걸쳐 있음을 의미합니다. 여백 너비는 Divi가 각 열 사이의 공간을 결정하는 데 사용하는 것입니다. 따라서 이 튜토리얼에서는 여백을 없애기 위해 여백 너비를 1로 설정하는 것이 중요합니다.

다음은 여백 너비가 1로 설정된 행에서 각 모듈이 열의 전체 너비에 걸쳐 있는 방법을 보여줍니다.

이제 모듈에 음수 여백(왼쪽 또는 오른쪽)을 추가하면 해당 모듈을 쉽게 확장하여 둘 이상의 열을 차지할 수 있습니다. 이를 통해 고려하지 않았을 수 있는 페이지에 대한 사용자 정의 열 레이아웃을 만들 수 있습니다.

이 그림에서 열 5의 모듈에 -100% 왼쪽 여백을 추가하면 모듈이 왼쪽으로 확장되어 열 5와 열 4를 모두 차지함을 알 수 있습니다.

그리고 6열 레이아웃을 사용하는 이점 중 하나는 디자인이 태블릿에 잘 보존된다는 것입니다.

또한 열이 왼쪽에서 오른쪽으로 정렬되는 방식 때문에 일반적으로 모듈을 왼쪽으로 확장하여 콘텐츠가 열 뒤에 숨겨지지 않도록 해야 합니다. 배경색 세트가 있는 경우 특히 그렇습니다. 따라서 열 뒤에 숨겨져 있는 모듈 콘텐츠 문제가 발생하면 아마도 모듈을 잘못된 방향으로 확장하고 있는 것입니다.

6열 레이아웃을 사용하는 이유는 무엇입니까?

이 디자인 기법에 6열 레이아웃을 사용하는 세 가지 주요 이유가 있습니다. 첫 번째 이유는 작업할 열이 더 많기 때문입니다. 두 번째 이유는 6열 레이아웃이 태블릿에서 3열 레이아웃으로 변환되어 디자인 요소가 정말 잘 보존되기 때문입니다. 세 번째 이유는 열이 모바일에서 순서를 유지하므로 열 배경색이 동일하게 유지되기 때문입니다. 그리드 레이아웃에 유용합니다.

이 디자인은 1/2 1/6 1/6 1/6 열 레이아웃 및 1/6 1/6 1/6 1/2 열 레이아웃에서도 작동합니다. 둘 다 태블릿에서도 3개의 열을 보존하기 때문입니다.

디자인 구현

이 디자인 기법이 어떻게 작동하는지 보여주기 위해 제품을 소개하기 위한 간단한 그리드 레이아웃을 만드는 과정을 안내해 드리겠습니다. 그런 다음 모듈을 다른 열로 확장하여 사용자 지정 레이아웃 디자인을 만드는 방법을 보여 드리겠습니다.

섹션 및 행 설정

시작하려면 새 페이지를 만들고 시각적 빌더를 배포하세요. 그런 다음 "처음부터 빌드"를 선택합니다. 그런 다음 첫 번째 섹션에 1/2 1/6 1/6 1/6 열 레이아웃을 추가합니다.

그런 다음 다음과 같이 행 설정을 업데이트합니다.

배경색: #222831
거터 폭: 1
열 높이 균등화: 예
맞춤 여백: 위쪽 0px, 아래쪽 0px
맞춤 패딩: 상단 0px, 하단 0px

설정을 저장합니다.

이 디자인의 세 행 모두가 이러한 행 설정을 공유하기 때문입니다. 계속해서 행을 복제하여 두 번째 행을 만듭니다. 그런 다음 두 번째 행을 6열 레이아웃으로 변경합니다.

세 번째 행을 만들려면 두 번째 행을 복제하기만 하면 됩니다.

행 1에 모듈 추가

맨 위 첫 번째 행의 첫 번째 열에 다음 설정으로 텍스트 모듈을 추가합니다.

텍스트 색상: 라이트
텍스트 텍스트 크기: 16px
맞춤 패딩: 상단 2vw, 하단 2vw, 왼쪽 2vw, 오른쪽 2vw

첫 번째 행의 두 번째 열에 다음 설정으로 블러브 모듈을 추가합니다.

제목: [제목 입력]
내용: [삭제]
아이콘: [아이콘 선택]
아이콘 색상: #eeeeee
아이콘 글꼴 크기: 50px
텍스트 색상: 라이트
텍스트 방향: 중앙
맞춤 패딩: 3vw 상단, 2vw 하단

설정 저장

세 번째 열에 이미지를 추가합니다.

마지막 열에서는 이미지 모듈을 확장하여 해당 열도 채울 수 있도록 비워두고 싶습니다. 그러나 모바일에서 쌓을 때 열이 활성화되도록 완전히 비워두고 싶지는 않습니다. 따라서 가장 간단한 방법은 분할기 모듈을 추가하고 분할기를 표시하지 않도록 선택하는 것입니다. 그런 다음 스마트 폰용 구분선을 숨길 수 있습니다.

다음과 같이 구분선 설정을 업데이트합니다.

디바이더 표시: 아니오
비활성화: 전화

행 2 및 3에 모듈 추가

이제 행 2로 이동하겠습니다. 첫 번째 열에 첫 번째 행의 두 번째 열에서 만든 블러브 모듈을 복사하여 붙여넣습니다. 그런 다음 아이콘과 제목 텍스트를 검정색으로 변경합니다.

그런 다음 다음을 사용하여 두 번째 열에 텍스트 모듈을 추가합니다.

콘텐츠:

<h2>Product</h2>
01

텍스트 텍스트 색상: #ffffff
텍스트 텍스트 크기: 50px
텍스트 줄 높이: 1em
텍스트 방향: 오른쪽
제목 2 텍스트 정렬: 왼쪽
제목 2 텍스트 색상: #ffffff
제목 2 줄 높이: 3em
맞춤 패딩: 상단 2vw, 하단 2vw, 왼쪽 2vw, 오른쪽 2vw

다음 방금 생성한 텍스트 모듈을 복사하여 4열과 6열에 붙여넣습니다.

행 3의 3열, 5열, 6열에 동일한 텍스트 모듈을 붙여넣을 수도 있습니다. 그런 다음 인라인 편집기를 사용하여 각 텍스트 모듈의 번호를 변경하여 이러한 모듈이 어떻게 쌓이는지 확인할 수 있습니다. 나중에 모바일.

3행의 2열에 다른 이미지를 추가합니다.

그런 다음 행 1에서 만든 구분선을 복사하여 붙여넣어 구분선으로 섹션 전체의 빈 열을 모두 채웁니다.

이 시점에서 레이아웃은 다음과 같아야 합니다(빈 사각형은 구분선 모듈을 나타냄).

모듈을 다른 열로 확장하기 위해 음수 여백 추가

이 시점에서 음수 마진을 사용하여 모듈 확장을 시작할 수 있습니다. 이 과정은 매우 간단합니다.

첫 번째 행의 이미지에 대한 이미지 모듈 설정을 엽니다. 이미지를 오른쪽으로 확장하고 싶기 때문에 -100% 오른쪽 여백을 추가할 것입니다.

다음으로 2행, 3열의 텍스트 모듈에 -100% 왼쪽 여백을 추가합니다.

이제 모듈 스타일을 복사하여 2행 6열의 텍스트 모듈과 3행 5열의 텍스트 모듈에 붙여넣습니다.

남은 것은 3행, 2열의 이미지를 확장하는 것입니다. 사용자 지정 여백이 -100% Left인 이미지 모듈을 업데이트합니다.

열에 배경색 추가하기

디자인의 마지막 단계는 열에 배경색을 추가하는 것입니다. 첫 번째(상단) 행에 다음을 추가합니다.

열 1 배경색: #393e46

두 번째 행에 다음을 추가합니다.

열 1 배경색: #eeeeee
4열 배경색: #7971ea
열 5 배경색: #393e46
열 6 배경색: #393e46

마지막 행에 다음을 추가합니다.

3열 배경색: #7971ea
6열 배경색: #7971ea

그것이 데스크탑 디자인을 위한 것입니다. 이제 모바일에서 잘 보이는지 확인하겠습니다.

스마트폰 디스플레이의 레이아웃 조정

지금 당장은 현재 레이아웃이 데스크톱과 태블릿에서 멋지게 보이지만 우리가 추가한 마이너스 마진은 스마트폰에서 조정해야 합니다.

일반적으로 스마트폰에서 마이너스 마진을 수정하고 싶다면 스마트폰 장치의 모듈 설정에서 왼쪽 마진을 0%로 설정하면 됩니다. 그러나 너비가 479px에서 767px 사이인 화면 크기에는 여전히 조정이 필요합니다. 이 때문에 스마트폰에서 음수 여백을 수정하는 가장 좋은 방법은 맞춤 CSS 스니펫으로 수정하는 것입니다.

페이지 설정으로 이동하여 고급 탭에서 다음 사용자 정의 CSS를 추가하십시오.

/** Fixes negative margins on smartphone**/

@media only screen and (max-width: 479px){
.et_pb_module {
    margin-left: 0%!important;
    margin-right: 0%!important;
}
}

이 CSS 스니펫이 하는 일은 화면 크기가 너비가 479px 이하일 때마다 모든 모듈의 오른쪽 및 왼쪽 여백을 0%로 설정하는 것입니다. 이것은 문제를 멋지게 해결합니다!

이제 최종 디자인을 확인해 보겠습니다.

마지막 생각들

모듈을 확장하기 위해 음수 여백을 사용하면 많은 CSS에 의존하여 Divi의 기본 열 레이아웃을 변경할 필요 없이 데스크탑 및 태블릿에서 고유한 레이아웃 디자인을 얻을 수 있는 편리한 방법이 될 수 있습니다. 이 디자인 기법에서 내가 가장 좋아하는 것 중 하나는 태블릿에서 레이아웃이 얼마나 아름답게 보이는지입니다. 다음 프로젝트에 도움이 되길 바랍니다. 무엇이든 항상 Divi를 더 깊이 이해하는 데 도움이 됩니다.

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

건배!