Divi의 Toggle 모듈을 창의적으로 사용하여 가격 책정 계획을 보여주는 방법

웹 사이트에서 가격 책정 계획을 보여줄 때 여러 차례 전환하여 절대적으로 놀랍고 매력적인 가격 책정 페이지 또는 섹션을 만들 수 있습니다. Divi로 웹사이트를 구축할 때 가격표 모듈을 사용하게 될 것입니다. 이 모듈을 사용하면 가격표를 빠르게 추가하고 원하는 대로 스타일을 지정할 수 있습니다. 그러나 페이지의 이 특정 섹션에 더 많은 상호 작용을 추가하려는 경우 토글 모듈을 사용하여 클릭 시 요금제를 표시할 수도 있습니다. 이는 상태를 유지하고 다른 두 개를 닫음으로써 특정 가격 책정 계획을 강조 표시하는 좋은 방법입니다.

이 튜토리얼에서는 Divi의 토글 모듈을 사용하여 멋진 토글 가격표 디자인을 만드는 방법을 단계별로 보여줍니다. 접근 방식을 취하면 구축하는 모든 종류의 웹 사이트에 대해 클릭 한 번으로 모든 종류의 토글 가격 책정 계획을 만들 수 있습니다.

가자!

시사

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

만들기 시작합시다!

YouTube 채널 구독

새 섹션 추가

간격

Divi의 Visual Builder를 사용하여 새 페이지를 생성하거나 기존 페이지를 엽니다. 페이지에 새 섹션을 추가하고 섹션 설정을 열고 사용자 지정 위쪽 및 아래쪽 패딩을 추가하여 섹션의 위쪽과 아래쪽에 공간을 만듭니다.

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

행 #1 추가

열 구조

섹션 간격 설정 수정이 완료되면 다음 열 구조를 사용하여 새 행을 추가할 수 있습니다.

텍스트 모듈 추가

콘텐츠 추가

행을 변경할 필요가 없으므로 즉시 텍스트 모듈을 추가하십시오. 모듈의 콘텐츠 상자에 선택한 일부 H2 콘텐츠를 입력합니다.

제목 텍스트 설정

디자인 탭으로 이동하여 제목 텍스트 설정을 변경하여 계속하십시오.

• 제목 2 글꼴: Didact Gothic
• 제목 2 글꼴 두께: 일반
• 제목 2 텍스트 정렬: 가운데
• 제목 2 텍스트 색상: #000000
• 제목 2 텍스트 크기: 40px
• 제목 2 글자 간격: -1px

디바이더 모듈 추가

시계

이전 단계에서 추가 및 수정한 텍스트 모듈 바로 아래에 구분선 모듈을 추가합니다. 디바이더 모듈의 '디바이더 표시' 옵션이 활성화되어 있는지 확인하십시오.

• 디바이더 표시: 예

색상

계속해서 디자인 탭으로 이동하여 구분선 색상을 변경합니다.

• 색상: #000000

사이징

크기 설정에서 모듈의 너비도 변경하십시오.

• 폭: 39%
• 모듈 정렬: 중앙

간격

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

• 하단 여백: 50px

행 #2 추가

열 구조

첫 번째 행과 해당 모듈 수정을 완료했습니다. 다음 열 구조를 사용하여 새 행을 추가할 시간입니다.

열 1 그라데이션 배경

아직 모듈을 추가하지 않고 행 설정을 열고 열 1에 그라데이션 배경을 추가합니다.

• 색상 1: #00fff2
• 색상 2: rgba(255,255,255,0)
• 열 1 그라디언트 유형: 방사형
• 열 1 방사형 방향: 오른쪽 하단
• 열 1 시작 위치: 30%
• 열 1 끝 위치: 30%

2열 그라데이션 배경

두 번째 열에도 동일한 작업을 수행합니다.

• 색상 1: #fce96f
• 색상 2: rgba(255,255,255,0)
• 열 2 그라디언트 유형: 방사형
• 열 2 방사형 방향: 오른쪽 상단
• 열 2 시작 위치: 40%
• 열 2 끝 위치: 40%

열 3 그라데이션 배경

마찬가지로 다음 설정을 사용하여 세 번째 열에 그라데이션 배경을 추가합니다.

• 색상 1: #a659ff
• 색상 2: rgba(255,255,255,0)
• 3열 그라디언트 유형: 방사형
• 열 3 방사형 방향: 하단
• 열 3 시작 위치: 30%
• 열 2 끝 위치: 30%

사이징

그라디언트 배경 추가가 완료되면 디자인 탭으로 이동하여 크기 설정을 변경합니다.

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

열 1에 토글 모듈 추가

콘텐츠 추가

다양한 요금제를 만들 시간입니다! 첫 번째 열에 새 Toggle 모듈을 추가하고 제목을 입력합니다. 콘텐츠 상자의 다른 요소에 스타일을 지정하기 위해 몇 가지 추가 HTML 태그를 사용했습니다. 계속해서 다음 줄을 복사하여 콘텐츠 상자의 텍스트 탭에 추가합니다.

<p>&nbsp;</p>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
<p>&nbsp;</p>
<p><span><span style="font-size: 50px; font-weight: bold;">$30</span>/mo</span></p>
<p>&nbsp;</p>
<p><a href="#" style="font-weight: bold; color: #ffffff; background-color: #000000; padding: 15px 40px 15px 40px;">Buy now</a></p>
<p>&nbsp;</p>

상태

토글 모듈의 상태를 열거나 닫을지 여부를 선택할 수 있습니다. 튜토리얼의 나머지 부분에서 변경한 사항을 모두 보려면 다양한 디자인 설정을 모두 수정할 때까지 '열림' 상태를 유지하는 것이 좋습니다.

배경색

계속해서 Toggle Module의 배경 설정으로 이동하여 흰색 배경색을 추가합니다.

• 배경색: #ffffff

아이콘 설정

다음 디자인 탭에서 아이콘 색상을 변경합니다.

• 아이콘 색상: #000000

토글 설정

그리고 토글 설정에서도 Open Toggle Background Color를 수정합니다.

• 열기 토글 배경색: rgba(255,255,255,0)

제목 텍스트 설정

그런 다음 제목 텍스트 설정을 일부 변경합니다.

• 제목 글꼴: Didact Gothic
• 제목 글꼴 두께: 굵게
• 제목 텍스트 색상: #000000
• 제목 텍스트 크기: 3.5vw(데스크톱), 60px(태블릿), 40px(전화)

본문 설정

본문 설정도 수정합니다.

• 본문 글꼴: Didact Gothic
• 본문 텍스트 정렬: 왼쪽
• 본문 색상: #000000
• 본문 텍스트 크기: 18px
• 바디 라인 높이: 1.5em

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

열 1에서 토글 모듈 수정을 완료했으면 계속해서 두 번 복제하고 나머지 두 열에 복제본을 배치할 수 있습니다.

사본 변경

복제본의 모든 복사본을 변경하고 완료되었는지 확인하십시오!

시사

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

마지막 생각들

이 튜토리얼에서는 Divi의 Toggle Module을 사용하여 웹사이트에서 가격 책정 계획을 보여주는 창의적인 접근 방식을 보여주었습니다. 이것은 방문자와 상호 작용하고 디자인 스타일을 향상시키는 좋은 방법입니다. 하나는 열려 있고 다른 두 옵션은 닫혀 있어 섹션에서 특정 가격 책정 계획을 더 쉽게 강조 표시할 수 있습니다. 구축 중인 모든 종류의 웹 사이트에 이 접근 방식을 사용할 수 있습니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!