디바이더 모듈을 사용하여 Divi의 변환 옵션으로 배경 모양 만들기

매주 다음 프로젝트에 사용할 수 있는 새로운 무료 Divi 레이아웃 팩을 제공합니다. 레이아웃 팩 중 하나의 경우 웹사이트를 한 단계 업그레이드하는 데 도움이 되는 사용 사례도 공유합니다.

이번 주에는 진행 중인 Divi 디자인 이니셔티브의 일환으로 Divider Module을 사용하여 Divi의 변환 옵션과 Paralegal Layout Pack으로 배경 모양을 만드는 방법을 보여 드리겠습니다. 디바이더 모듈은 매우 다양하며 페이지의 전반적인 디자인을 향상시킬 수 있습니다. 특히 Paralegal Layout Pack과 일치하는 몇 가지 예를 다시 만들지만 Divi로 구축하는 모든 종류의 웹 사이트에 이 기술을 사용할 수 있습니다.

가자!

시사

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

데스크탑

이동하는

Paralegal Layout Pack의 방문 페이지를 사용하여 새 페이지 만들기

새 페이지를 만들고 Paralegal Layout Pack의 방문 페이지를 여기에 업로드하십시오.

예제 #1 다시 만들기

섹션 오버플로

첫 번째 예제를 만들어 봅시다! 영웅 섹션 설정을 열고 디자인 탭으로 이동합니다. 여기서 우리는 섹션 컨테이너를 능가하는 것이 없는지 확인하고 싶습니다. 그렇게 하기 위해 우리는 메인 요소에 CSS 코드 한 줄을 추가할 것입니다.

overflow: hidden;

2열에 디바이더 모듈 추가

시계

그런 다음 전문 섹션의 두 번째 열에 Divider Module을 추가합니다. '표시 구분선' 옵션이 활성화되어 있는지 확인하십시오.

• 디바이더 표시: 예

배경색

레이아웃 팩의 색상 팔레트에 있는 색상을 구분선의 배경색으로 사용할 것입니다.

• 배경색: #d94144

색상

그런 다음 디자인 탭으로 이동하여 구분선의 색상도 변경합니다.

• 색상: #f3f1f2

스타일

스타일 설정으로 이동하여 구분선 스타일을 수정합니다.

• 디바이더 스타일: 점선

사이징

크기 설정도 가지고 놀아보세요. 이 분할기 모듈을 원하는 대로 만들 수 있지만 이 게시물의 미리 보기에 표시된 대로 정확하게 표시하려면 다음 설정을 사용하세요.

• 디바이더 무게: 4px
• 높이: 0px

간격

이제 사용자 지정 여백 및 패딩 값을 사용하여 Divider Module의 위치와 크기를 변경하겠습니다. 모든 것이 반응을 유지하도록 다양한 화면 크기에 따라 값을 수정해야 합니다.

• 상단 여백: -30vw(데스크톱), -100vw(태블릿 및 휴대폰)
• 왼쪽 여백: -100vw(데스크톱), -138vw(태블릿), -300vw(전화)
• 상단 패딩: 0px
• 하단 패딩: 1.3vw(데스크톱), 2.2vw(태블릿), 3vw(전화)

변환

변환 스케일

모듈을 변환할 시간입니다! 변환 설정에서 가장 먼저 할 일은 다음 변환 스케일 값을 추가하여 구분선 크기를 늘리는 것입니다.

• 하단: 153%
• 오른쪽: 500%

변환 회전

변환 회전 설정에서 Divider Module도 회전합니다. 알 수 있듯이 Divider Module은 이 튜토리얼의 시작 부분에 추가한 CSS 코드 한 줄 덕분에 섹션을 능가하지 않습니다.

• 왼쪽: 348deg

예제 #2 다시 만들기

섹션 오버플로

다음 예제로 넘어갑니다! 다시 말하지만, 섹션의 주요 요소에 CSS 코드 한 줄을 추가하여 섹션 컨테이너를 능가하는 것이 없도록 하고 싶습니다.

overflow: hidden;

섹션 끝에 새 행 추가

열 구조

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

간격

행이 차지하는 크기를 줄이기 위해 간격 설정에서 기본 상단 및 하단 패딩을 제거합니다.

• 상단 패딩: 0px
• 하단 패딩: 0px

디바이더 모듈 추가

시계

디바이더 모듈을 추가하고 스타일을 지정할 시간입니다! '표시 구분선' 옵션이 활성화되어 있는지 확인하십시오.

• 디바이더 표시: 예

배경색

다시, 레이아웃 팩의 색상 팔레트에 있는 색상 중 하나를 배경색으로 사용하고 있습니다.

• 배경색: #d94144

색상

디자인 탭으로 이동하여 구분선 색상도 변경합니다.

• 색상: #f3f1f2

사이징

우리는 크기 설정도 가지고 놀고 있습니다.

• 디바이더 무게: 10px
• 높이: 0px

간격

그리고 다양한 화면 크기에서 수정할 사용자 지정 패딩을 사용하여 원하는 정확한 모양을 만들 것입니다.

• 탑 패딩: 2vw
• 하단 패딩: 2.5vw(데스크톱), 3vw(태블릿), 3.9vw(전화)

변환

변환 스케일

변신할 시간! 가장 먼저 할 일은 Divider 모듈의 크기를 조정하는 것입니다. 섹션의 시작이나 끝에 공백이 없는지 확인하기 위해 이 작업을 수행합니다. 디바이더 모듈을 너무 많이 확장하는 것에 대해 걱정하지 마십시오. 섹션을 초과하는 모든 것은 디자인에 표시되지 않습니다.

• 하단: 153%
• 오른쪽: 153%(데스크톱), 250%(태블릿), 500%(전화)

변환 번역

그런 다음 Divider Module의 위치도 변경하여 오른쪽에 표시되도록 합니다. 이 값을 다른 화면 크기와 일치시켜야 합니다.

• 하단: 25vw(데스크톱), 27vw(태블릿 및 휴대폰)
• 오른쪽: 0px(데스크톱), -32vw(태블릿 및 휴대폰)

변환 회전

마지막으로 변환 회전 설정을 가지고 놀면서 수평 구분선을 수직 구분선으로 바꿀 것입니다.

• 왼쪽: 270deg

예제 #3 다시 만들기

섹션 오버플로

다음이자 마지막 예제로! 다시 말하지만, 섹션의 주요 요소에 CSS 코드 한 줄을 추가하여 섹션 컨테이너를 능가하는 것이 없는지 확인하십시오.

overflow: hidden;

섹션 시작에 새 행 추가

열 구조

섹션 상단에 새 행을 추가하여 계속하십시오. 행이 맨 위에 배치되어 나중에 튜토리얼에서 그 아래의 내용과 겹치지 않도록 하는 것이 중요합니다.

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 열이 화면의 전체 너비를 차지하도록 합니다.

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

디바이더 모듈 추가

시계

다음에 디바이더 모듈을 추가하십시오. '표시 구분선' 옵션이 활성화되어 있는지 확인하십시오.

• 디바이더 표시: 예

배경색

배경 설정으로 이동하여 원하는 배경색을 추가합니다.

• 배경색: #d94144

색상

구분선 색상도 수정합니다.

• 색상: #f3f1f2

스타일

그리고 스타일 설정에서 구분선 스타일을 변경합니다.

• 디바이더 스타일: 점선

사이징

그런 다음 크기 설정으로 이동하여 몇 가지를 변경합니다.

• 디바이더 무게: 4px
• 높이: 0px

간격

그리고 간격 설정에서 위쪽 및 아래쪽 패딩을 사용하여 원하는 모양을 만듭니다.

• 탑 패딩: 3vw
• 하단 패딩: 3vw

박스 섀도우

또한 구분선에 미묘한 상자 그림자를 주어 페이지에 깊이를 더할 것입니다.

• 상자 그림자 흐림 강도: 80px
• 그림자 색상: rgba(0,0,0,0.3)

변환

변환 스케일

이제 구분선의 스타일을 지정했으므로 변환을 시작할 수 있습니다. 가장 먼저 할 일은 변환 스케일 설정에서 디바이더 모듈의 크기를 늘리는 것입니다.

• 하단: 140%
• 오른쪽: 140%

변환 번역

그런 다음 변환 번역 설정으로 이동하여 디바이더 모듈의 위치를 ​​변경합니다. 섹션의 상단에 행을 배치하면 그 아래에 있는 행보다 낮은 z-인덱스를 유지하는 데 도움이 되며, 이렇게 해서 아름다운 겹침이 만들어집니다!

• 하단: 4vw
• 오른쪽: 16vw(데스크톱), 26vw(태블릿), 35vw(전화)

시사

이제 모든 단계를 거쳤으므로 다양한 화면 크기에 따른 결과를 최종적으로 살펴보겠습니다.

데스크탑

이동하는

마지막 생각들

이 게시물에서는 Divider Module과 Divi의 새로운 변형 옵션을 사용하여 배경 모양을 만들고 페이지의 전체적인 모양과 느낌을 향상시키는 방법을 보여 드렸습니다. 이 튜토리얼은 진행 중인 Divi 디자인 이니셔티브의 일부로 매주 디자인 도구 상자에 추가 기능을 추가하려고 합니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!