Divi를 사용하여 열을 가격 책정 계획으로 전환

Divi의 새로운 컬럼 옵션은 우리의 워크플로에 수많은 새로운 디자인 가능성을 가져왔습니다. CSS 코드 한 줄도 건드릴 필요 없이 여러 모듈을 통합하는 데 도움이 됩니다. 이 게시물에서는 Divi의 기본 제공 옵션만 사용하여 열을 가격 책정 계획으로 전환할 것입니다. 또한 열 호버 변환 옵션을 사용하여 멋진 호버 효과를 얻을 수도 있습니다. JSON도 무료로 다운로드할 수 있습니다!

시작하겠습니다.

시사

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

데스크탑

이동하는

컬럼 요금제 레이아웃 무료 다운로드

무료 열 요금제 레이아웃을 사용하려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 ​​금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

재창조를 시작합시다!

YouTube 채널 구독

새 섹션 추가

그라데이션 배경

작업 중인 페이지에 새 일반 섹션을 추가하고 섹션 설정을 엽니다. 배경 설정으로 이동하여 선형 그라데이션 배경을 추가합니다.

• 색상 1: #ededed
• 색상 2: #ffffff
• 시작 위치: 30%
• 최종 위치: 30%

간격

또한 섹션에 상단 및 하단 패딩을 추가하고 있습니다.

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

새 행 추가

열 구조

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

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 고급 탭으로 이동하여 크기 조정 설정을 적절하게 변경합니다.

• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1
• 너비: 80%(데스크톱 및 태블릿), 90%(전화)
• 최대 너비: 1400px(데스크톱), 90%(태블릿), 100%(휴대폰)

열 1 설정

또한 첫 번째 설정부터 시작하여 열 설정을 수정해야 합니다. 열 1 설정을 엽니다.

그라데이션 배경

열 1에 다음 그라데이션 배경을 적용합니다.

• 색상 1: #f7f7f7
• 색상 2: #ffffff
• 그라디언트 유형: 방사형
• 방사형 방향: 하단
• 시작 위치: 31%
• 최종 위치: 31%

국경

열에 '20px' 테두리 반경도 추가합니다.

박스 섀도우

페이지에 깊이를 더하기 위해 미묘한 상자 그림자도 추가합니다.

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

기본 변환 배율

이 게시물의 미리보기에서 알 수 있듯이 열이 약간 변형되었습니다. 변환 설정으로 이동하여 변환 스케일 옵션이 기본 상태에서 '100%'로 유지되는지 확인하십시오.

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

호버 변환 스케일

마우스 오버 시 변환 스케일 값을 수정합니다.

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

기본 변환 번역

또한 변환 번역 설정을 사용하여 데스크톱에서 열을 오른쪽으로 약간 밀고 있습니다. 다음 입력을 추가합니다.

• 하단: 34px(데스크톱), 0px(태블릿 및 휴대폰)
• 오른쪽: 0px

호버 변환 번역

마우스를 가져갈 때 변환 변환 값을 다시 정상으로 가져옵니다.

• 하단: 0px
• 오른쪽: 0px

기본 변환 회전

변환 회전 설정으로 이동하여 왼쪽에 다음 값을 추가합니다.

• 왼쪽: 352deg(데스크탑), 0deg(태블릿 및 휴대폰)

호버 변환 회전

호버에서 값을 '0deg'로 되돌립니다.

• 왼쪽: 0도

오버플로

이 게시물의 뒷부분에서 열 하단에 버튼을 추가할 것입니다. 해당 버튼은 열의 아래쪽 테두리와 겹칩니다. 이를 가능하게 하려면 열의 오버플로를 표시해야 합니다.

• 수평 오버플로: 표시
• 수직 오버플로: 표시

기본 Z 인덱스

다음으로 다양한 화면 크기에서 열의 z 인덱스를 변경합니다. 이렇게 하면 쌓기를 순서대로 유지하는 데 도움이 됩니다.

• Z 인덱스: 9(데스크톱), 11(태블릿 및 휴대폰)

호버 Z 인덱스

마우스를 가져갈 때 열이 다른 열 위에 나타나길 원합니다. 이를 위해 호버링 시 z 인덱스를 증가시킵니다.

• Z 인덱스: 11

전환

또한 전환 설정에서 전환 지속 시간을 늘려 부드러운 전환을 만들고 있습니다.

• 전환 시간: 500ms

2열 설정

두 번째 칼럼으로! 계속해서 열 설정을 엽니다.

그라데이션 배경

다음 그라데이션 배경 설정을 적용합니다.

• 색상 1: #fff200
• 색상 2: #ffffff
• 그라디언트 유형: 방사형
• 방사형 방향: 하단
• 시작 위치: 31%
• 최종 위치: 31%

국경

다음에 테두리 반경의 '20px'를 추가합니다.

박스 섀도우

미묘한 상자 그림자와 함께.

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

기본 변환 배율

두 번째 열은 주요 요금제입니다. 이것이 눈에 띄지 않게 하기 위해 변환 배율 설정에서 열의 크기를 늘릴 것입니다.

• 하단: 112%(데스크톱), 100%(태블릿 및 휴대폰)
• 오른쪽: 112%(데스크톱), 100%(태블릿 및 휴대폰)

호버 변환 스케일

마우스 오버 시 변환 스케일 값을 수정합니다.

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

오버플로

다음으로 수평 및 수직 오버플로를 변경합니다.

• 수평 오버플로: 표시
• 수직 오버플로: 표시

기본 Z 인덱스

그런 다음 가시성 설정으로 이동하여 열의 z 인덱스를 늘립니다.

• Z 인덱스: 10

호버 Z 인덱스

호버에서 z 인덱스를 수정합니다.

• Z 인덱스: 12

전환

그리고 전환 설정에서 전환 지속 시간을 늘립니다.

• 전환 시간: 500ms

3열 설정

세번째이자 마지막 칼럼으로! 열 설정을 엽니다.

그라데이션 배경

배경 설정으로 이동하여 다음 그라데이션 배경을 추가합니다.

• 색상 1: #f7f7f7
• 색상 2: #ffffff
• 그라디언트 유형: 방사형
• 방사형 방향: 하단
• 시작 위치: 31%
• 최종 위치: 31%

국경

다음에 '20px' 테두리 반경을 추가합니다.

박스 섀도우

미묘한 상자 그림자와 함께.

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

기본 변환 배율

컬럼을 변환할 시간입니다! 기본 변환 스케일 값이 '100%'로 유지되는지 확인하십시오.

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

호버 변환 스케일

마우스를 가져갈 때 이 값을 수정합니다.

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

기본 변환 번역

또한 일부 사용자 지정 변환 번역 값을 적용하여 데스크톱의 왼쪽으로 열을 밀어넣고 있습니다.

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

호버 변환 번역

마우스를 가져갈 때 값을 '0px'로 되돌립니다.

• 하단: 0px
• 오른쪽: 0px

기본 변환 회전

기본 상태에서 열을 회전하여 계속합니다.

• 왼쪽: 8deg(데스크탑), 0deg(태블릿 및 휴대폰)

호버 변환 회전

마우스를 가져갈 때 왼쪽 변환 회전 값을 다시 '0px'로 변경합니다.

• 왼쪽: 0도

오버플로

다음에 오버플로가 표시되는지 확인합니다.

• 수평 오버플로: 표시
• 수직 오버플로: 표시

기본 Z 인덱스

그런 다음 가시성 설정으로 이동하여 기본 z 인덱스가 9인지 확인합니다.

• Z 인덱스: 9

호버 Z 인덱스

호버에서 z 인덱스를 수정합니다.

• Z 인덱스: 11

전환

그리고 전환 설정에서 전환 지속 시간을 늘립니다.

• 전환 시간: 500ms

열 1에 Blurb 모듈 추가

제목 추가

첫 번째 열에 모듈을 추가할 시간입니다! 새 Blurb 모듈을 추가하고 제목을 삽입하십시오.

아이콘 선택

다음 아이콘을 선택합니다.

아이콘 설정

디자인 탭으로 이동하여 그에 따라 아이콘 설정을 변경합니다.

• 아이콘 색상: #000000
• 아이콘 배치: 상단
• 아이콘 글꼴 크기 사용: 예
• 아이콘 글꼴 크기: 50px

제목 설정

다음으로 제목 텍스트 설정을 변경합니다.

• 제목 글꼴: Poppins
• 제목 텍스트 정렬: 가운데
• 제목 텍스트 색상: #000000
• 제목 텍스트 크기: 27px

간격

그리고 상단 여백도 추가하십시오.

• 상단 여백: 80px

열 1에 분배기 모듈 추가

시계

분할기 모듈인 두 번째 모듈로 이동합니다. '표시 구분선' 옵션이 활성화되어 있는지 확인하십시오.

• 디바이더 표시: 예

선

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

• 선 색상: #000000

사이징

크기 설정도 수정합니다.

• 디바이더 무게: 6px
• 폭: 14%
• 모듈 정렬: 중앙
• 높이: 0px

간격

마지막으로 상단 여백을 추가합니다.

• 상단 여백: 50px

열 1에 텍스트 모듈 #1 추가

콘텐츠 추가

계속해서 Divider Module 바로 아래에 Text Module을 추가하고 원하는 내용을 삽입하십시오.

텍스트 설정

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

• 텍스트 글꼴: Poppins
• 텍스트 글꼴 두께: 가벼움
• 텍스트 정렬: 가운데
• 텍스트 색상: #4f4f4f
• 텍스트 줄 높이: 2.3em

간격

사용자 정의 여백 및 패딩 값도 추가하십시오.

• 상단 여백: 50px
• 상단 패딩: 10px
• 하단 패딩: 10px

열 1에 텍스트 모듈 #2 추가

콘텐츠 추가

이전 텍스트 모듈 바로 아래에 다른 텍스트 모듈이 필요합니다. 원하는 콘텐츠를 입력하세요.

텍스트 설정

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

• 텍스트 글꼴: Poppins
• 텍스트 글꼴 두께: 무거움
• 텍스트 정렬: 가운데
• 텍스트 색상: #000000
• 텍스트 크기: 47px
• 텍스트 줄 높이: 1em

간격

사용자 정의 상단 및 하단 여백도 추가하십시오.

• 상단 여백: 50px
• 하단 여백: 80px

열 1에 버튼 모듈 추가

사본 추가

열 1에서 필요한 다음이자 마지막 모듈은 버튼 모듈입니다. 원하는 사본을 입력하십시오.

조정

디자인 탭으로 이동하여 버튼 정렬을 가운데로 변경합니다.

• 버튼 정렬: 중앙

버튼 설정

버튼에도 스타일을 적용합니다.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 17px
• 버튼 텍스트 색상: #000000
• 버튼 배경색: #FFFFFF
• 버튼 테두리 너비: 0px
• 버튼 테두리 반경: 100px
• 버튼 글꼴: Poppins
• 버튼 글꼴 두께: 굵게

간격

또한 몇 가지 사용자 지정 여백 및 패딩 값을 추가합니다.

• 상단 여백: 50px
• 하단 여백: -40px
• 상단 패딩: 23px
• 하단 패딩: 23px
• 왼쪽 패딩: 70px
• 오른쪽 패딩: 70px

박스 섀도우

그리고 버튼 모듈에 미묘한 상자 그림자를 주어 마무리하겠습니다.

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

모든 모듈을 두 번 복제하고 나머지 열에 중복 배치

열 1의 모든 모듈을 완료했으면 두 번 복제하고 행의 나머지 두 열에 복제본을 배치할 수 있습니다.

광고 문구 아이콘 및 제목 변경

각 복제본의 광고 아이콘과 제목을 변경해야 합니다.

텍스트 모듈 콘텐츠 변경

텍스트 모듈 콘텐츠와 함께.

변경 버튼 #2

마지막으로 2열의 버튼을 열고 버튼 설정을 변경합니다. 이 단계를 완료하면 완료됩니다!

• 버튼 텍스트 색상: #FFFFFF
• 버튼 배경색: #8300E9

시사

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

데스크탑

이동하는

마지막 생각들

이 게시물에서는 Divi의 새로운 열 옵션을 사용하여 열을 요금제로 바꾸는 방법을 보여 드렸습니다. CSS 코드를 한 줄도 건드릴 필요 없이 요금제를 사용자 정의할 수 있습니다! 이 튜토리얼은 새로운 컬럼 옵션이 다양한 모듈을 아름다운 디자인으로 통합하는 데 어떻게 도움이 되는지 보여주기 위한 것입니다. 질문이나 제안 사항이 있으면 아래 댓글 섹션에 자유롭게 남겨주세요!

Divi에 대해 자세히 알아보고 더 많은 무료 Divi를 받고 싶다면 이메일 뉴스레터와 YouTube 채널을 구독하세요. 그러면 항상 이 무료 콘텐츠를 가장 먼저 알고 혜택을 받을 수 있습니다.