Divi의 열 및 변환 옵션으로 겹치는 열을 만드는 방법

최신 Divi 업데이트 중 하나에서 빌더의 열에 몇 가지 놀라운 컨트롤을 추가했습니다. 이제 열 겹침을 만드는 것이 그 어느 때보다 쉬워졌습니다. 이 자습서에서는 Divi의 열 및 변환 설정을 사용하여 세 개의 겹치는 열이 있는 평가 섹션을 만드는 방법을 보여줍니다.

이 디자인에는 풍부한 주황색 #ff8300, 따뜻한 노란색 #ffd400 및 눈에 띄는 파란색 그라데이션 #0c99c1의 세 가지 색상을 사용합니다. 이 겹치는 기둥 디자인을 웹 사이트 프로젝트에 즉시 적용할 수 있습니다.

시작하자.

시사

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

데스크탑

이동하는

1. 새 일반 섹션 + 3열 행 만들기

가장 먼저 해야 할 일은 3열 행이 있는 일반 섹션을 만드는 것입니다.

섹션 간격 조정

섹션의 위쪽 및 아래쪽 패딩을 늘립니다.

• 탑 패딩: 4vw
• 하단 패딩: 16vw

행의 크기 및 간격 조정

행 설정을 열고 그에 따라 크기 설정을 변경합니다.

• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1
• 폭: 100%
• 최대 너비: 100%

그런 다음 간격 설정을 수정합니다.

• 하단 패딩: 0px
• 왼쪽 패딩: 11vw
• 오른쪽 패딩: 8vw

그라데이션 배경 추가

다음에 그라디언트 배경을 추가합니다.

• 배경 스타일: 그라데이션
• 첫 번째 색상: 흰색 #ffffff
• 두 번째 색상: 주황색 #ff8300
• 그라디언트 유형: 선형
• 기울기 방향: 180도
• 시작 위치: 35%
• 최종 위치: 35%

2. 스타일 열

열에 모듈을 추가하기 전에 각 열의 스타일, 간격 및 변환 설정을 개별적으로 변경합니다.

열 1

열 스타일 지정의 첫 번째 단계는 둥근 모서리와 상자 그림자입니다.

• 테두리: 모든 둥근 모서리에 20px
• 상자 그림자: 첫 번째 상자 그림자 옵션
• 상자 그림자 수직 위치: 0px
• 상자 그림자 흐림 강도: 80px
• 그림자 색상: rgba(0,0,0,0.3)
• 상자 그림자 위치: 외부

* 변환 설정을 추가하기 전에 이 항목 스타일을 복사하여 2열과 3열에 붙여넣습니다.

1열 설정을 다시 열고 디자인 탭으로 이동합니다. 변환 설정을 사용하여 첫 번째 열이 두 번째 열과 겹치도록 합니다. 잊어 버린 경우를 대비하여 x 축은 수평이고 y 축은 수직입니다.

• 변환 번역:
  • 데스크탑: x축 = 3vw. y축 = 14.2vw
  • 태블릿 및 전화: x축 = -14vw. y축 = 16vw
• 가시성: Z 인덱스 10

2열

두 번째 칼럼으로! 이전 단계 중 하나에서 추가한 상자 그림자로 이동하여 상자 그림자 흐림 강도를 높입니다.

• 상자 그림자 흐림 강도: 50px

열 2에 몇 가지 사용자 정의 간격 값을 추가하여 계속하십시오.

• 탑 패딩:
  • 데스크탑 = 3vw
  • 태블릿 + 전화 = 5vw
• 하단 패딩:
  • 데스크탑 = 5vw
  • 태블릿 + 전화 = 7vw
• 왼쪽 패딩:
  • 데스크탑 = 2vw
  • 태블릿 + 전화 = 4vw
• 오른쪽 패딩:
  • 데스크탑 = 2vw
  • 태블릿 + 전화 = 4vw

두 번째 열을 변환할 시간입니다! 두 번째 열은 데스크톱용으로 그대로 유지되지만 더 작은 화면에서 일부 사용자 지정 변형 설정을 적용해야 합니다. 계속해서 변환 번역 탭을 조정하십시오. 또한 Z 인덱스를 9로 늘릴 것입니다.

• 변환 번역:
  • 태블릿 및 전화: x축 = 9vw. y축 = 13vw
• 가시성: Z 인덱스 9

3열

세 번째 칼럼으로! 이미 존재하는 상자 그림자의 상자 그림자 흐림 강도를 높입니다.

• 상자 그림자 흐림 강도: 50px

다음에 배경 설정을 열고 파란색 그라데이션 배경을 추가합니다.

• 배경: 그라데이션
• 그라디언트 색상 1: #0c99c1
• 그라디언트 색상 2: rgba(5,0,78,0.72)
• 그라디언트 유형: 선형
• 기울기 방향: 220도
• 시작 위치: 0%
• 최종 위치: 100%

이제 간격을 추가해 보겠습니다.

• 탑 패딩:
  • 데스크탑 = 3vw
  • 태블릿 + 전화 = 10vw
• 하단 패딩:
  • 데스크탑 = 3vw
  • 태블릿 + 전화 = 7vw
• 왼쪽 패딩:
  • 데스크탑 = 1.5vw
  • 태블릿 + 전화 = 10vw
• 오른쪽 패딩:
  • 데스크탑 = 1.5vw
  • 태블릿 + 전화 = 10vw

마지막으로 변환 번역 설정을 변경하여 세 번째 열이 두 번째 열과 겹치게 만들 것입니다.

• 변환 번역:
  • 데스크탑: x축 = -10vw. y축 = 14.2vw
  • 태블릿: x축 = -14vw. y축 = 9vw
  • 전화: x축 = -14vw. y축 = 11vw
• 가시성: Z 인덱스 9

다음은 모듈을 추가하기 전에 열의 미리보기입니다.

3. 열에 모듈 추가 및 스타일 지정

이제 각 열에 모듈을 추가해 보겠습니다!

열 1

1열에서는 이미지 모듈과 텍스트 모듈을 삽입합니다. 먼저 이미지 모듈을 추가하십시오.

1. 이미지 모듈 추가

고객의 사진을 삽입하고 다음과 같이 스타일을 지정합니다.

• 정렬: 왼쪽
• 강제 전폭: 예

이미지에 아래쪽 테두리도 추가합니다.

• 하단 테두리 색상: 노란색 #ffd400
• 하단 테두리 너비: 9px
• 테두리 스타일: 단색

2. 텍스트 모듈 추가

이미지 모듈 바로 아래에 새 텍스트 모듈을 추가하고 클라이언트의 이름과 위치를 삽입합니다.

• 이름: 제목 4
• 위치: 단락

콘텐츠를 추가한 후 텍스트 설정의 스타일을 지정합니다.

• 텍스트 글꼴: Nunito Sans
• 텍스트 글꼴 두께: 일반
• 텍스트 정렬: 가운데
• 텍스트 색상: 블랙 #000000
• 텍스트 크기:
  • 데스크탑 = 0.8vw
  • 태블릿 = 1.8vw
  • 전화 = 2.8vw

제목 텍스트 설정으로 이동하여 다음 변경 사항을 적용합니다.

• 제목 텍스트: H4
• 제목 4 글꼴: Poppins
• 제목 4 글꼴 두께: 굵게
• 제목 4 텍스트 색상: 검정 #000000
• 제목 4 텍스트 크기:
  • 데스크탑 = 1vw
  • 태블릿 = 3vw
  • 전화 = 4vw

간격 설정도 변경합니다.

• 최고 여백:
  • 데스크탑 = 1.5vw
  • 태블릿 = 3vw
  • 전화 = 7vw
• 하단 여백:
  • 데스크탑 = 1.5vw
  • 태블릿 = 3vw
  • 전화 = 7vw

두 모듈을 모두 완료하면 열이 다음과 같이 표시됩니다.

2열

2열에는 텍스트, 안내문, 구분선 모듈이 필요합니다. 첫 번째 텍스트 모듈은 열의 오른쪽 상단 모서리에 각진 배너처럼 보이는 모듈입니다. 우리는 이 효과를 얻기 위해 변형 옵션을 사용할 것입니다.

1. 텍스트 모듈을 추가합니다.

새 텍스트 모듈을 추가하고 콘텐츠 상자에 'Testimonial'이라는 단어를 추가합니다.

모듈에 노란색 배경을 추가합니다.

• 배경색: 노란색 #ffd400

디자인 탭으로 이동하여 그에 따라 텍스트 및 간격 설정을 변경합니다.

• 텍스트 글꼴: Poppins
• 텍스트 글꼴 두께: 굵게
• 텍스트 정렬: 가운데
• 텍스트 색상: 흰색 #ffffff
• 텍스트 크기: 23px
• 오른쪽 여백: -50px
• 왼쪽 여백: -50px
• 상단 패딩: 15px
• 하단 패딩: 15px

마지막으로 변환 설정을 다음과 같이 조정합니다.

• 변환 번역:
  • 데스크탑 = x축의 17vw
  • 태블릿 = x축에서 24vw, y축에서 1vw
  • 전화 = x축에서 20vw, y축에서 1vw
• 변환 회전: 첫 번째 축에서 32도

2. Blurb 모듈을 추가합니다.

첫 번째 모듈을 완료했다면 이제 말풍선 모듈을 추가할 차례입니다.

블러브 모듈은 고객의 평가가 표시되는 곳입니다. 먼저 + 아이콘을 클릭하여 모듈을 추가하고 블러브를 선택합니다.

그런 다음 내용을 삽입하고 아이콘을 선택하고 다음과 같이 아이콘의 스타일을 지정합니다.

• 아이콘 사용: 예, 별
• 아이콘 색상: 노란색 #ffd400
• 아이콘 배치: 왼쪽
• 아이콘 글꼴 크기 사용: 예, 48px

H4 수준에서 제목 텍스트의 스타일을 지정하여 계속하십시오.

• 제목 텍스트: H4
• 제목 글꼴: Poppins
• 제목 글꼴 두께: 굵게
• 제목 글꼴 색상: 검정 #ffffff

• 제목 텍스트 크기:
  • 데스크탑 = 1.2vw
  • 태블릿 = 2.3vw
  • 전화 = 3.3vw
• 제목 줄 높이:
  • 데스크탑 = 2vw
  • 태블릿 = 3.4vw
  • 전화 = 4.6vw

이에 따라 본문 설정의 스타일을 지정합니다.

• 본문 글꼴: Nunito Sans
• 본문 무게: 반 굵게
• 본문 색상: 검정 #000000
• 본문 텍스트 크기:
  • 데스크탑 = 0.7vw
  • 태블릿 = 1.6vw
  • 전화 = 2.4vw
• 바디 라인 높이:
  • 데스크탑 = 1.6vw
  • 태블릿 = 4vw
  • 전화 = 5vw

광고문안의 너비가 열보다 작기를 원하며 이를 위해 너비, 여백 및 패딩 값을 조정합니다.

먼저 광고 문구의 너비를 조정합니다.

• 콘텐츠 너비: 100%
• 너비:
  • 데스크탑 = 58.4%
  • 태블릿 + 전화 = 90%

그런 다음 간격 설정:

• 최고 마진: 3vw
• 하단 여백: 3vw
• 오른쪽 여백: -24vw
• 왼쪽 패딩: 0px
• 오른쪽 패딩: 4px

3. 디바이더 추가

이 칼럼에서 우리가 필요로 하는 마지막 모듈은 디바이더 모듈입니다. 구분선에 다음 변경 사항을 적용합니다.

• 구분선 참조: 예
• 디바이더 색상: 블랙 #oooooo
• 디바이더 무게: 1px

거의 다 왔어! 지금까지의 결과는 다음과 같습니다.

3열

세번째이자 마지막 칼럼으로! 이 열을 사용하여 클릭 유도문안을 표시하고 있습니다. 우리는 세 개의 모듈을 사용하고 있습니다. 텍스트 모듈, 디바이더 모듈 및 버튼 모듈.

1. 텍스트 모듈 추가

이 열에 가장 먼저 추가할 것은 텍스트 모듈입니다.

H3에 제목을 추가하고 내용 상자에 약간의 단락 텍스트를 추가합니다.

계속해서 그에 따라 텍스트 설정의 스타일을 지정하십시오.

• 텍스트 글꼴: Nunito Sans
• 텍스트 글꼴 두께: 일반
• 텍스트 글꼴 색상: 흰색 #ffffff
• 텍스트 글꼴 크기:
  • 데스크탑 = 0.8vw
  • 태블릿=- 2vw
  • 전화 = 2.6vw
• 텍스트 줄 높이:
  • 데스크탑 = 1.5vw
  • 태블릿 = 4vw
  • 전화 = 5vw

제목 텍스트 설정의 스타일을 지정하여 텍스트 모듈을 완성합니다.

• 제목 텍스트: H3
• 제목 3 글꼴: Poppins
• 제목 3 글꼴 두께: 굵게
• 제목 3 텍스트 색상: 흰색 #ffffff
• 제목 3 텍스트 크기:
  • 데스크탑 = 1.1vw
  • 태블릿 = 3vw
  • 전화 = 4vw
• 제목 3 줄 높이:
  • 데스크탑 = 1.5vw
  • 태블릿 = 3vw
  • 전화 = 4.5vw

2. 디바이더 모듈 추가

계속해서 3열에 구분선 모듈을 추가합니다. 구분선 스타일을 지정하기 위해 2열에서 찾을 수 있는 구분선 스타일을 복사하여 붙여넣습니다.

디바이더 설정을 열고 색상을 검정색에서 흰색으로 변경합니다. 상단 및 하단 패딩도 추가하십시오.

• 디바이더 색상: 흰색 #ffffff
• 상단 패딩: 40px
• 하단 패딩: 20px

3. 버튼 모듈 추가

버튼 모듈인 마지막 모듈로 이동합니다. 원하는 사본을 추가하십시오.

디자인 탭으로 이동하여 다음과 같이 버튼의 스타일을 지정합니다.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기:
  • 데스크탑 = 0.8vw
  • 태블릿 = 2.4vw
  • 전화 = 3vw
• 버튼 텍스트 색상: 흰색 #ffffff

• 버튼 배경색: 그라데이션
• 그라디언트 색상 1: 노란색 #ffd400
• 그라디언트 색상 2: 주황색 #ff8300
• 그라디언트 유형: 선형
• 기울기 방향: 202deg.

• 버튼 테두리 너비: 0px
• 버튼 문자 간격: 1px
• 버튼 글꼴: Nunito Sans
• 버튼 글꼴 두께: Heavy
• 버튼 글꼴 스타일: TT

모든 화면 크기에서 버튼이 보기 좋게 보이도록 하기 위해 다음과 같이 버튼의 패딩을 조정합니다.

데스크탑

• 탑 패딩: 1vw
• 하단 패딩: 1vw
• 오른쪽 패딩: 3vw
• 왼쪽 패딩: 3vw

태블릿

• 탑 패딩: 2vw
• 하단 패딩: 2vw
• 오른쪽 패딩: 6vw
• 왼쪽 패딩: 6vw

핸드폰

• 탑 패딩: 3vw
• 하단 패딩: 3vw
• 오른쪽 패딩: 8vw
• 왼쪽 패딩: 8vw

시사

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

데스크탑

이동하는

마무리

이 겹치는 3열 빌드는 평가용으로 훌륭해 보이지만 다른 놀라운 작업을 위해 구현할 수 있다고 확신합니다. 이것이 향후 프로젝트에서 열 변환 및 겹침 옵션을 사용하는 데 영감을 주기를 바랍니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!