Divi의 새로운 행 정렬 옵션을 창의적으로 사용하는 방법

오늘의 Divi 튜토리얼에서는 Divi의 새로운 행 정렬 옵션을 어떻게 활용할 수 있는지 보여드리겠습니다. 행 정렬 옵션을 다른 기본 제공 디자인 옵션과 결합하여 Divi의 고급 디자인 옵션으로 가능한 것에 대한 아이디어를 제공합니다. 재생성하는 방법을 보여주는 예제에는 추가 코드가 전혀 포함되어 있지 않습니다. 즉, 기술 수준에 관계없이 누구나 이 디자인을 달성할 수 있습니다.

시작하자!

디자인 미리보기

오늘(데스크톱에서) 만들 내용을 간단히 살펴보겠습니다.

다음은 모바일에서 디자인이 어떻게 보일지입니다.

Divi의 새로운 행 정렬 옵션을 창의적으로 사용하는 방법

YouTube 채널 구독

테마 커스터마이저 설정

기본 메뉴 모음

보시다시피 기본 메뉴도 레이아웃과 일치시켰습니다. 기본 메뉴 모음을 수정하려면 WordPress 대시보드 > 모양 > 사용자 정의 > 헤더 및 탐색 > 기본 메뉴 모음 > 다음으로 변경합니다.

• 로고 이미지 숨기기: 활성화
• 메뉴 높이: 30
• 텍스트 크기: 17
• 문자 간격: -1
• 글꼴 스타일: 대문자
• 텍스트 색상: #FFFFFF
• 활성 링크 색상: #FFFFFF
• 배경색: rgba(255, 255, 255, 0)
• 드롭다운 배경색: rgba(255, 255, 255, 0)

영웅 섹션

기본 메뉴를 수정했으면 이제 레이아웃을 시작할 차례입니다. 가장 먼저 해야 할 일은 새 페이지를 추가하고 Visual Builder로 전환한 다음 새 표준 섹션을 추가하는 것입니다. 이 첫 번째 섹션은 영웅 섹션이 될 것이며 다음과 같습니다.

섹션 설정

그라데이션 배경

표준 섹션을 추가했으면 여기에 그라디언트 배경을 추가할 수 있습니다.

• 첫 번째 색상: #9e5555
• 두 번째 색상: #000000
• 그라디언트 유형: 선형
• 기울기 방향: 180deg
• 시작 위치: 50%
• 최종 위치: 50%

행 설정

색상 오버레이

그런 다음 해당 섹션에 1열 행을 추가하고 해당 설정을 엽니다. 가장 먼저 해야 할 일은 색상 오버레이를 추가하는 것입니다. 어두운 회색을 선택하여 이미지를 얼마나 어둡게 할지 선택할 수 있습니다. 여기서는 '#595959'를 사용했습니다.

배경 이미지

다음으로 해야 할 일은 한 열 행에 배경 이미지를 추가하고 색상 오버레이를 적용하는 것입니다. 색상 오버레이와 배경 이미지를 혼합하려면 배경 이미지 혼합으로 '곱하기'를 선택하십시오.

중앙 행 정렬

대부분의 웹 사이트와 마찬가지로 영웅 섹션의 중앙 행 정렬을 선택합니다.

행을 전체 너비로 만들기

또한 행이 전체 너비가 되기를 원하므로 디자인 탭의 크기 조정 하위 범주 내에서 해당 옵션을 활성화할 것입니다.

맞춤 패딩

행 설정에서 마지막으로 해야 할 일은 상단과 하단에 '300px'의 맞춤 패딩을 추가하는 것입니다.

첫 번째 텍스트 모듈

모든 설정이 완료되면 첫 번째 텍스트 모듈을 행에 추가합니다. 콘텐츠 탭에 표시할 텍스트를 선택하고 디자인 탭으로 이동합니다. 디자인 탭에서 다음 설정이 텍스트 하위 범주에 적용되는지 확인합니다.

• 텍스트 글꼴: Arvo
• 텍스트 글꼴 크기: 64(데스크톱), 47(태블릿), 33(전화)
• 텍스트 색상: #FFFFFF
• 텍스트 줄 높이: 1em
• 텍스트 방향: 중앙

두 번째 텍스트 모듈

그런 다음 다른 텍스트 모듈을 추가합니다. 두 번째 텍스트 모듈에는 대신 다음 설정이 포함됩니다.

• 텍스트 글꼴: Lato
• 텍스트 글꼴 크기: 25(데스크톱), 18(태블릿), 16(전화)
• 텍스트 색상: #FFFFFF
• 텍스트 줄 높이: 1.7em
• 텍스트 방향: 중앙

두 번째 섹션

영웅 섹션이 완료되면 두 번째 섹션으로 넘어갈 수 있습니다. 이 섹션에서는 아름다운 효과를 만들기 위해 사용자 지정 여백 및 열 배경과 함께 가운데 정렬 대신 올바른 행 정렬을 사용합니다. 이 섹션에서 데스크톱 버전과 태블릿/휴대폰 버전의 두 가지 행 버전을 만들어야 합니다. 이렇게 하면 디자인이 다양한 화면에서 멋지게 보일 것입니다.

섹션 설정

그라데이션 배경

두 번째 섹션을 추가한 후 다음 그라디언트 배경을 추가합니다.

• 첫 번째 색상: #000000
• 두 번째 색상: #d6d6d6
• 그라디언트 유형: 선형
• 기울기 방향: 184deg
• 시작 위치: 20%
• 최종 위치: 20%

바탕 화면 행 추가

그런 다음 첫 번째 2열 행을 추가할 수 있습니다. 이 행은 데스크톱 버전이 됩니다. 운 좋게도 태블릿/모바일 버전에서도 대부분을 재사용할 수 있습니다.

행 설정

열 배경

콘텐츠 탭 내에서 두 번째 열의 배경색으로 '#FFFFFF'를 추가합니다.

오른쪽 행 정렬

디자인 탭으로 이동하여 오른쪽 행 정렬을 선택합니다.

행을 전체 너비로 만들기

그런 다음 크기 조정 하위 범주를 열고 '이 행을 전체 너비로 만들기' 옵션을 활성화합니다.

맞춤 패딩

행 설정에서 마지막으로 해야 할 일은 행에 '300px'의 상단 패딩을 추가하고 두 번째 열에 다음 패딩을 추가하는 것입니다.

• 상단: 35px
• 오른쪽: 35px
• 하단: 150px
• 왼쪽: 35px

열 1

첫 번째 분배기 모듈

첫 번째 열에서는 Divider 모듈을 추가하는 것으로 시작하겠습니다. 콘텐츠 탭의 가시성 하위 범주 내에서 '분리자 표시' 옵션을 활성화합니다.

디자인 탭으로 이동하여 구분선 색상으로 '#FFFFFF'를 선택합니다.

그런 다음 스타일 하위 범주 내에서 구분선 스타일로 '단색'을 선택하고 구분선 위치로 '상단'을 선택합니다.

Divider Module의 Design 탭에서 마지막으로 해야 할 일은 Sizing 하위 범주를 다음과 같이 조정하는 것입니다.

• 분배기 무게: 3
• 높이: 0px
• 폭: 20%
• 모듈 정렬: 오른쪽

첫 번째 텍스트 모듈

Divider 모듈 바로 아래에 첫 번째 텍스트 모듈을 추가하고 디자인 탭의 텍스트 하위 범주 내에서 다음 설정을 사용합니다.

• 텍스트 글꼴: Arvo
• 텍스트 글꼴 크기: 30px
• 텍스트 색상: #000000
• 텍스트 줄 높이: 1.6em
• 텍스트 방향: 중앙

클론 퍼스트 디바이더 모듈 및 변경 정렬

우리가 만든 Divider 모듈을 복제하고 첫 번째 텍스트 모듈 바로 아래에 배치합니다. 변경해야 하는 유일한 것은 사이징 하위 범주의 모듈 정렬입니다. 오른쪽에 두는 대신 왼쪽을 선택하십시오.

두 번째 텍스트 모듈

첫 번째 열에 마지막으로 추가해야 하는 것은 다음 설정이 있는 또 다른 텍스트 모듈입니다.

• 텍스트 글꼴: Lato
• 텍스트 글꼴 크기: 14
• 텍스트 줄 높이: 1.7em
• 텍스트 방향: 중앙

2열

이미지 모듈

두 번째 열에 추가해야 하는 첫 번째 항목은 디자인 탭의 간격 하위 범주 내에서 다음 설정이 있는 이미지 모듈입니다.

• 이미지 아래 공간 표시: 예
• 상단 여백: -300px
• 왼쪽: -80px

텍스트 모듈

그런 다음 이미지 모듈 바로 아래에 텍스트 모듈을 추가하고 디자인 탭의 텍스트 하위 범주에서 다음 설정을 선택합니다.

• 텍스트 글꼴: Lato
• 텍스트 글꼴 크기: 14
• 텍스트 줄 높이: 1.7em
• 텍스트 방향: 중앙

소셜 미디어 팔로우 모듈

두 번째 열에 마지막으로 추가해야 하는 것은 소셜 미디어 팔로우 모듈입니다. 소셜 아이콘을 원하는 만큼 추가하고 디자인 탭에서 항목 정렬로 '중앙'을 선택했는지 확인합니다.

태블릿 및 휴대전화에서 비활성화

모든 작업이 완료되면 전화 및 태블릿에서 행을 비활성화할 수 있습니다.

모바일 행 추가

데스크톱 행 복제

데스크톱 버전을 이미 만들었으므로 모바일 버전을 훨씬 빠르게 만들 수 있습니다. 바탕 화면 행을 복제하고 다음 단계를 따릅니다.

열 전환

두 열에 있는 모듈을 전환하여 시작하십시오.

열 배경색

그런 다음 두 번째 열의 배경색을 제거하고 대신 첫 번째 열에 배치합니다.

열 패딩

두 번째 열에 Custom Padding이 있는 대신 첫 번째 열에 있어야 합니다. 게다가 하단 패딩은 '150px'가 아닌 '35px' 상단, 우측, 좌측 패딩과 같습니다.

가운데 행 정렬 사용

그런 다음 행 정렬도 '중앙'으로 변경해야 합니다.

데스크탑에서 비활성화

마지막으로 데스크톱에서 행이 비활성화되어 있는지 확인하십시오.

세 번째 섹션

세 번째 섹션은 두 번째 섹션과 매우 유사합니다. 이 섹션을 만드는 것은 두 번째 섹션의 대부분의 설정을 인계받고 약간의 조정을 할 수 있기 때문에 쉬울 것입니다. 모든 단계를 완료하면 다음 결과를 확인할 수 있습니다.

섹션 설정

그라데이션 배경

새 표준 섹션을 추가하고 다음 그라데이션 배경을 사용합니다.

• 첫 번째 색상: #d6d6d6
• 두 번째 색상: #9e5555
• 그라디언트 유형: 선형
• 기울기 방향: 184deg
• 시작 위치: 30%
• 최종 위치: 30%

맞춤 여백

그런 다음 '-200px'의 사용자 정의 여백도 추가하십시오.

데스크탑 행

세 번째 섹션에 대해 동일한 작업 방식으로 계산합니다. 데스크톱 및 태블릿/전화 버전을 만들 것입니다.

두 번째 섹션의 데스크톱 행 복제

이전 섹션의 Desktop 행을 복제하여 시작합니다. 대부분의 설정은 동일하며 변경해야 할 사항에 대해 살펴보겠습니다.

열 전환

변경해야 할 사항 중 하나는 두 열에 있는 모듈을 전환하는 것입니다.

열 배경색

그런 다음 두 번째 열 배경색도 제거하고 첫 번째 열 배경색으로 '#000000'을 추가해야 합니다.

열 패딩

Column 2 Custom Padding을 삭제하고 첫 번째 열의 위쪽, 오른쪽, 아래쪽 및 왼쪽 맞춤 패딩에 '35px'를 사용합니다.

왼쪽 행 정렬 사용

또한 행 정렬을 오른쪽에서 왼쪽으로 변경합니다.

이미지 모듈 사용자 정의 여백

이미지 모듈의 간격 하위 범주에도 약간의 변경이 필요합니다.

• 상단: -150px
• 오른쪽: -80px

첫 번째 분배기 모듈 사용자 지정 여백

다음으로, 두 번째 열 내의 첫 번째 Divider 모듈에 '200px'의 상단 여백을 추가합니다.

반대 색상 사용

당신이 알 수 있듯이; 색상의 사용은 두 번째 섹션의 반대입니다. 모든 글꼴 색상을 '#FFFFFF'로 변경하고 구분선 색상을 '#000000'으로 변경합니다.

태블릿 및 휴대전화에서 비활성화

태블릿과 휴대폰에서 행이 이미 비활성화되어 있지만(복제 때문에) 확인하려는 경우 가시성 하위 범주로 이동할 수 있습니다.

모바일 행

이전 데스크톱 행 복제

모바일 버전의 경우 방금 생성한 데스크톱 행을 복제하고 이 게시물의 다음 부분에 따라 변경합니다.

가운데 행 정렬 사용

행 설정을 열고 행 정렬을 가운데로 변경하십시오.

이미지 모듈 사용자 정의 여백

또 다른 작업은 이미지 모듈의 상단 여백을 '-20%'로 변경하는 것입니다.

데스크탑에서 비활성화

마지막으로 이 마지막 행이 데스크탑에서 비활성화되어 있는지 확인하십시오.

결과

이 튜토리얼을 단계별로 따르면 데스크탑에서 다음과 같은 결과를 얻을 수 있습니다.

모바일에서 다음 결과:

마지막 생각들

이 게시물에서는 Divi Builder 내에서 행의 다양한 정렬 옵션을 창의적으로 사용하는 방법을 보여주었습니다. 사람들은 함으로써 가장 많이 배웁니다. 그래서 만드는 방법을 단계별로 보여 주는 예제를 제공했습니다. 질문이나 제안 사항이 있는 경우 아래 댓글 섹션에 자유롭게 댓글을 남겨주세요.

중요한 발표, 유용한 팁 또는 Divi 공짜를 절대 놓치지 않도록 이메일 뉴스레터와 YouTube 채널을 구독하세요!