Divi로 수평적 가격표를 만드는 방법

수평적 가격표는 많은 기능을 가진 제품을 홍보할 수 있는 좋은 방법입니다. 그리고 Divi의 새로운 5열 레이아웃을 사용하면 이 작업을 놀라울 정도로 쉽게 수행할 수 있습니다. 그러나 5개 이상의 열이 있는 레이아웃과 마찬가지로 모바일에서도 잘 보이도록 레이아웃을 반응형으로 만드는 것이 문제입니다. 이 튜토리얼에서는 모든 장치에서 멋지게 보이는 수평적 가격표를 만드는 방법을 보여 드리겠습니다. 또한 수평 가격표를 복제하고 "찾기 및 바꾸기"와 같은 새로운 디자인 기능을 사용하여 클릭 몇 번으로 각 테이블의 색 구성표를 빠르게 변경하는 것이 얼마나 쉬운지 보여드리겠습니다.

시작하자.

엿보기

시작하기

이 튜토리얼에서는 Divi만 있으면 됩니다. 그리고 우리는 Visual Builder를 사용할 것입니다. 테이블을 처음부터 빌드할 것이므로 새 페이지를 만들고 비주얼 빌더를 배포한 다음 "처음부터 레이아웃 빌드" 옵션을 선택해야 합니다.

그런 다음 시작할 준비가 된 것입니다. 하자!

수평 가격표에 대한 5열 행 설정

우선 비주얼 빌더에서 이미 우리를 기다리고 있는 섹션에 5열 레이아웃을 제공하겠습니다.

모듈 추가를 시작하기 전에 상단 또는 하단 패딩 없이 사용자 정의 너비를 갖도록 섹션 설정을 업데이트하겠습니다.

너비: 1200px
단면 정렬: 중앙
맞춤 패딩: 상단 0px, 하단 0px

그런 다음 행 설정으로 이동하여 다음과 같이 행과 세 개의 중간 열에 배경색을 빠르게 지정합니다.

배경색: #00cbc9
2열 배경색: #00cbc9
3열 배경색: #eeeeee
열 4 배경색: #eeeeee

그런 다음 다음과 같이 크기 조정을 업데이트합니다.

이 행을 전체 너비로 만들기: 예
거터 폭: 1
열 높이 균등화: 예

간격을 업데이트하려면 잠시 후에 행 설정으로 돌아가야 하지만 지금은 내용을 위해 각 열에 문구를 추가하기 시작하겠습니다.

콘텐츠 모듈로 열 채우기

제품의 제목

첫 번째 열에서 콘텐츠 상자(텍스트 탭 아래)에 다음 헤더가 있는 텍스트 모듈을 추가합니다.

<h2>Starter</h2>

이것은 당신이 소개하는 계획이나 제품의 제목을 위한 자리 역할을 할 것입니다. 이 예에서 이것은 일종의 "스타터" 계획이 될 것입니다.

그런 다음 다음 디자인 설정을 업데이트합니다.

제목 2 글꼴 스타일: TT
제목 2 텍스트 색상: #ffffff
제목 2 텍스트 크기: 38px
맞춤 패딩(데스크톱): 위쪽 90%, 아래쪽 90%, 왼쪽 10%
맞춤 패딩(태블릿): 상단 30%, 하단 30%

기능 범주 제목에 대한 설명 추가

두 번째 열에 블러브 모듈을 추가합니다. 그런 다음 콘텐츠 상자에서 채우기 텍스트를 삭제하고 제목 텍스트는 그대로 둡니다. 그런 다음 이미지 대신 아이콘을 사용하도록 선택하고 원하는 아이콘으로 아이콘을 업데이트합니다.

디자인 탭으로 이동하여 다음과 같이 나머지 설정을 업데이트합니다.

아이콘 색상: #00cbc9
이미지/아이콘 배치: 왼쪽
제목 텍스트 크기: 16px
맞춤 패딩: 2vw 하단
하단 행 테두리 너비: 4px
하단 테두리 색상: #cccccc

이 광고 디자인은 열 2, 3, 4에서 기능 카테고리 제목으로 사용되므로 광고 모듈을 복사하여 두 번째 및 세 번째 열에 붙여넣을 수 있습니다.

지금은 간격이 별로 좋지 않다는 것을 깨달았습니다. 그리고 모듈 수준에서 약간의 간격을 추가하고 싶을 수도 있지만 이 디자인의 경우 열 수준(행 설정 아래)에서 간격 조정을 하는 것이 더 쉽다는 것을 알았습니다. 우리는 나중에 그것을 얻을 것입니다.

기능 설명 목록에 대한 텍스트 모듈 추가

다음 두 번째 열의 문구 아래에 텍스트 모듈을 추가합니다. 그런 다음 콘텐츠 상자에 다음 테이블 html 코드를 추가합니다.

• 기능에 대한 설명은 여기에 있습니다.
• 기능에 대한 설명은 여기에 있습니다.
• 기능에 대한 설명은 여기에 있습니다.
• 기능에 대한 설명은 여기에 있습니다.

정렬되지 않은 목록 스타일 유형: 정사각형
순서 없는 목록 항목 들여쓰기: 4px
맞춤 패딩: 위쪽 20px, 아래쪽 20px, 왼쪽 5%, 오른쪽 5%

이제 광고문안에서 했던 것처럼 텍스트 모듈을 복사하여 열 3과 4의 각 광고문안 모듈 아래에 붙여넣습니다.

마지막 열에 가격 및 버튼 추가

마지막 열(열 5)에서는 가격표 모듈을 사용하여 달러 기호가 있는 가격 책정 텍스트의 디자인을 얻을 것입니다. 이것이 가격표 모듈에서 우리가 정말로 필요로 하는 전부이므로 나머지 내용과 디자인 요소는 제거하고 가격 책정 텍스트와 달러 기호는 남겨두겠습니다. 가격표 모듈에 포함된 버튼을 사용할 수도 있지만 이것은 태블릿에서 반응형 마법을 수행하는 것이 조금 더 어렵습니다(나중에 무슨 말인지 알게 될 것입니다). 그래서 버튼 모듈도 사용할 것입니다.

계속해서 다섯 번째 열에 가격 테이블 모듈을 추가하십시오. 기본적으로 포함된 두 테이블 중 하나의 오른쪽에 있는 휴지통 아이콘을 클릭하여 테이블 중 하나를 삭제합니다.

그런 다음 완전히 투명한 색상 코드를 추가하여 배경색을 제거합니다.

배경색: rgba(255,255,255,0)

그런 다음 다음을 업데이트합니다.

테이블 헤더 배경색: rgba(255,255,255,0)
통화 및 빈도 텍스트 색상: #ffffff
통화 및 빈도 텍스트 크기: 30px
가격 텍스트 색상: #ffffff
테두리 너비: 0px
맞춤 여백(태블릿): -100% 오른쪽
맞춤 여백(스마트폰): 0% 오른쪽
맞춤 패딩: 위쪽 0px, 아래쪽 10px, 왼쪽 0px, 오른쪽 0px

이제 개별 테이블 표시 메뉴의 왼쪽에 있는 톱니바퀴 아이콘을 클릭하여 개별 테이블 설정으로 이동합니다.

이제 Title, Subtitle 및 Content의 기본 콘텐츠를 삭제합니다. 통화 및 가격 텍스트만 남게 됩니다.

지금 나는 당신이 이 시점에서 무슨 생각을 하는지 압니다. 가격 텍스트 아래의 경계선은 어떻게 해야 합니까? 글쎄, 그것에 대한 사용자 정의 CSS의 작은 스니펫이 있습니다. 고급 탭으로 이동하여 가격 상위 입력 상자에 다음 CSS를 추가합니다.

최고 가격:

border: none;

이제 이것이 가격 책정 텍스트 및 통화 기호에 대해서만 가격 책정 테이블을 성공적으로 정리하는 방법입니다!

버튼의 경우 가격 테이블 모듈 아래에 버튼 모듈을 추가하고 다음을 업데이트합니다.

버튼 정렬: 중앙
텍스트 색상: 라이트
맞춤 여백(태블릿): -100% 오른쪽
맞춤 여백(스마트폰): 0% 오른쪽

사용자 정의 마진은 태블릿에서 전체 너비 모듈을 얻기 위해 가격표 모듈에 추가한 마진과 일치합니다. 태블릿의 5열 레이아웃은 2열 레이아웃의 왼쪽에 5번째 열을 배치하기 때문에 모듈을 오른쪽으로 -100% 당기면 모듈이 행의 전체 너비가 됩니다.

화살표 디자인 및 반응형 열 간격 추가

그라디언트를 레이어링하여 화살표 추가

첫 번째 열에 화살표 디자인 효과를 만들기 위해 두 개의 그라디언트 배경을 레이어링합니다. 열 수준에서 첫 번째 그라데이션 배경이 추가됩니다. 나중에 모듈 수준에서 다음 항목을 추가할 것입니다.

그라디언트 배경을 추가하려면 행 설정으로 이동하여 다음을 추가합니다.

열 1 그라데이션 배경 왼쪽 색상: rgba(255,255,255,0)
1열 그라디언트 배경 오른쪽 색상: #eeeeee(2열의 배경색과 일치해야 함)
기울기 방향: -245deg
시작 위치: 75%
최종 위치: 0%

설정을 저장하고 1열의 텍스트 모듈 설정으로 건너뜁니다. 여기에 배경 그라디언트의 두 번째 레이어를 추가하여 화살표를 완성합니다. 다음을 업데이트합니다.

열 1 그라데이션 배경 왼쪽 색상: #eeeeee
열 1 그라데이션 배경 오른쪽 색상: rgba(255,255,255,0)
기울기 방향: 245deg
시작 위치: 25%
최종 위치: 0%

값이 서로 동일하게 반대임을 알 수 있습니다. 예를 들어 색상 순서가 변경되었고 245deg가 음수에서 양수로 변경되었으며 75%는 이제 25%(차이)입니다. 이것이 화살표 포인트의 측면이 완벽하게 대칭이 되도록 하는 방법입니다.

행과 열 간격두기

행 설정으로 돌아가서 다음을 업데이트하여 행과 열의 간격을 조정해 보겠습니다.

맞춤 패딩: 위쪽 0px, 아래쪽 0px, 왼쪽 0px, 오른쪽 0px
사용자 지정 2 패딩: 위쪽 5%, 아래쪽 5%, 왼쪽 2%, 오른쪽 2%
사용자 지정 3 패딩: 위쪽 5%, 아래쪽 5%, 왼쪽 2%, 오른쪽 2%
사용자 지정 4 패딩: 위쪽 5%, 아래쪽 5%, 왼쪽 2%, 오른쪽 2%
사용자 정의 5 패딩: 상단 10%, 하단 10%

내가 2 여백 너비를 사용하지 않고 끝낸 이유가 궁금할 것입니다. 글쎄요, 모든 장치에서 가독성을 높이기 위해 가능한 한 텍스트가 포함된 열의 공간을 최대화하고 싶었기 때문입니다. 공간의 모든 작은 부분을 절약할 수 있습니다. 이것이 열 사이의 여백이 왼쪽 및 오른쪽 패딩 백분율로 생성되는 이유입니다.

새 테이블 및 색 구성표에 대한 테이블 복제

분명히, 사용자가 비교할 수 있는 여러 개의 수평적 가격표를 원할 것입니다. 두 번째 가격 테이블을 생성하려면 생성한 첫 번째 테이블이 포함된 전체 섹션을 복제합니다.

그런 다음 행 설정을 열고 배경색 위로 마우스를 가져간 다음 찾기 및 바꾸기를 클릭합니다.

"내"에서 "이 섹션"을 선택합니다.
"너비 바꾸기"에서 색상을 추가합니다. #f84f51
그런 다음 섹션에서 찾은 모든 값 바꾸기 확인란을 선택합니다(배경색뿐만 아니라).

그런 다음 바꾸기를 클릭하고 마법이 일어나는 것을 지켜보십시오. 이것은 이전 색상의 모든 인스턴스를 새 색상으로 변경하는 빠르고 쉬운 방법입니다.

변경 사항을 저장하기 위해 종료하기 전에 행 설정을 저장하는 것을 잊지 마십시오.

이제 새로운 색 구성표가 있는 새 테이블이 생겼습니다.

이 프로세스를 다시 반복하여 #bdc958 색상의 다른 테이블을 추가합니다.

추천 테이블 만들기

테이블 중 하나를 눈에 띄게 보이게 하려면 테이블이 있는 섹션에 상자 그림자를 추가하고 열 배경 및 그라디언트에 사용되는 회색을 멋진 흰색으로 변경할 수 있습니다.

이렇게 하려면 두 번째 섹션(가운데)에 대한 섹션 설정으로 이동하여 다음을 업데이트합니다.

박스 섀도우: 스크린샷 참조
상자 그림자 수직 위치: 0px
상자 그림자 흐림 강도: 80px

회색 배경색을 바꾸려면 행 설정으로 이동하여 2열 배경색(#eeeeee)을 찾으세요. 그것을 마우스 오른쪽 버튼으로 클릭하고 "찾기 및 바꾸기"를 클릭하십시오. 다음을 업데이트합니다.

"내"에서 "이 섹션"을 선택합니다.
"너비 바꾸기"에서 색상 추가: #ffffff
그런 다음 섹션에서 찾은 모든 값 바꾸기 확인란을 선택합니다(배경색뿐만 아니라).
그런 다음 "바꾸기"를 클릭하십시오.

찾기 및 바꾸기를 사용하여 글꼴 테스트

테이블 전체에 다른 글꼴을 사용하려는 경우 "찾기 및 바꾸기" 기능을 사용하여 다른 글꼴을 쉽게 테스트할 수 있습니다. 이 프로세스를 원활하게 만들기 위해 의도적으로 모든 모듈의 기본 글꼴을 그대로 두었습니다. 전체 테이블 페이지의 글꼴을 변경하려면 테이블 섹션의 첫 번째 열에 있는 텍스트 모듈의 설정을 열기만 하면 됩니다(실제로 페이지의 기본 글꼴을 사용하는 모든 모듈일 수 있음). 그런 다음 사용 중인 제목 2 글꼴을 마우스 오른쪽 버튼으로 클릭하고 "찾기 및 바꾸기"를 선택합니다. 그런 다음 다음을 업데이트합니다.

"내부"에서 "이 페이지"를 유지합니다.
"너비 바꾸기"에서 글꼴을 선택합니다(Roboto Condensed 사용).
그런 다음 섹션에서 찾은 모든 값 바꾸기 확인란을 선택합니다(또는 모든 h2 글꼴을 바꾸기 위해 선택할 수 없음).
그런 다음 "바꾸기"를 클릭하십시오.

이제 전체 페이지에서 모든 글꼴이 변경되었습니다.

그게 다야! 이제 수평적 가격표가 완성되었습니다.

결과를 확인해보자.

태블릿과 스마트폰의 5열 조정도 아름답게 작동합니다.

마지막 생각들

Visual Builder에서 사용할 수 있는 강력한 디자인 기능과 함께 Divi의 5개 열 레이아웃을 사용하면 아름다운 수평 가격표를 만들 수 있습니다. 찾기 및 바꾸기를 사용하여 전체 색상과 글꼴을 조정하면 시간을 크게 절약할 수 있어 디자인 프로세스가 더욱 향상됩니다. 튜토리얼이 유익하고 영감을 주기를 바랍니다.

댓글로 여러분의 의견을 기다리겠습니다.

건배!