평생 회원과 새로운 블랙 프라이데이 고객으로 제공되는 독점 방문 페이지 중 하나는 놀라운 소프트웨어 판매 방문 페이지입니다. 이 방문 페이지는 독특한 섹션 구분선과 고품질 모형으로 당신을 놀라게 할 것입니다. 이 기사에서는 Divi의 동적 콘텐츠 기능을 사용하여 동적 가격표를 추가하는 방법을 보여줍니다!

현재 평생 고객이거나 블랙 프라이데이 세일 기간에 새 계정을 구입했거나 업그레이드했다면 지금 이 레이아웃을 다운로드할 수 있습니다.

독점 블랙 프라이데이 소프트웨어 판매 방문 페이지 받기

이 사용 사례를 시작하기 전에 새로운 우아한 테마 회원이 되거나 기존 계정을 업그레이드하거나 이미 평생 회원이 되어 얻을 수 있는 독점적인 블랙 프라이데이 소프트웨어 판매 랜딩 페이지를 손에 넣어야 합니다. 이미 평생 회원이라면 회원 영역에 로그인하여 여기에서 모든 독점 방문 페이지를 다운로드할 수 있습니다. 다른 모든 사람들은 튜토리얼의 나머지 부분을 따라하기 전에 아래 버튼을 사용하여 구매하거나 업그레이드해야 합니다.

사라지기 전에 거래를 신청하세요!

Divi로 동적 가격표를 만드는 방법 사용

이 게시물의 나머지 부분에서는 귀하가 Black Friday 거래를 이용했거나 이미 평생 회원이고 Black Friday Software Sale 방문 페이지에 액세스할 수 있다고 가정합니다.

회원 영역에서 새로운 소프트웨어 판매 랜딩 페이지를 다운로드하고 나면 아래 비디오를 시청하여 설정이 얼마나 쉬운지 확인할 수 있습니다. 또한 이 자습서를 따라 사이트를 추가 사용자 지정에 사용할 수 있도록 준비하는 것이 좋습니다.

이 사용 사례 게시물에서는 Divi와 무료 고급 사용자 정의 필드 플러그인을 사용하여 동적 가격표를 만드는 방법을 보여 드리겠습니다. 구독 가격을 자주 변경하는 고객이 있고 고객이 Divi에 액세스하지 않고 직접 변경할 수 있도록 하려는 경우 동적 가격 테이블을 만드는 것이 좋습니다. 이렇게 하면 특정 패키지의 가격, 설명 및 회원 등급을 변경할 수 있는 동시에 페이지 자체에서 아무 것도 엉망이 되지 않도록 하는 데 도움이 됩니다.

시사

본격적으로 살펴보기 전에 최종 결과를 간단히 살펴보겠습니다.

시작하자!

고급 사용자 정의 필드 플러그인 설치

가장 먼저 해야 할 일은 플러그인 > 새로 추가 > 플러그인 검색 및 설치 로 이동하여 WordPress 웹사이트에 고급 사용자 정의 필드 플러그인을 설치하는 것 입니다.

새 필드 그룹 만들기

플러그인을 활성화하면 시작할 수 있습니다. 새 필드 그룹을 추가합니다.

이름 + 위치

새 필드 그룹에 이름을 지정합니다. 자습서의 이 부분이 끝나면 세 개의 필드 그룹(가격표 수와 동일)이 있으므로 이름을 올바르게 지정했는지 확인하십시오. 이 필드 그룹의 위치 설정도 변경하십시오.

회원 등급 필드 추가

필드 추가를 시작할 시간입니다! 총 3개가 필요합니다. 다음 설정을 사용하여 멤버십 수준 필드를 추가합니다.

• 필드 레이블: 멤버십 레벨 1
• 필드 이름: Membership_level_1
• 필드 유형: 선택
• 선택사항: 선택사항 추가

멤버십 설명 필드 추가

멤버십 설명 필드를 추가하여 계속하십시오.

• 필드 레이블: 멤버십 설명 1
• 필드 이름: Membership_description_1
• 필드 유형: 텍스트

가격 필드 추가

마지막으로 필요한 필드는 가격 필드입니다.

• 필드 레이블: 가격 1
• 필드 이름: price_1
• 필드 유형: 텍스트

필드 그룹을 두 번 복제하고 이름과 필드를 가격 테이블 번호로 조정

하나의 필드 그룹은 우리 페이지의 하나의 가격표와 같습니다. 이제 첫 번째 작업을 완료했으므로 두 번 복제하여 페이지의 가격 테이블 수와 일치하는 필드 그룹이 충분한지 확인할 수 있습니다.

그룹 내의 모든 필드 수 변경

생성한 각 동적 필드는 Visual Builder에 표시됩니다. 어떤 정보에 연결하는지 확인하려면 복제된 필드 그룹과 해당 필드에 다른 번호를 지정하십시오.

Divi의 소프트웨어 판매 방문 페이지를 사용하여 새 페이지 만들기

이 자습서의 다음 부분에서는 소프트웨어 판매 방문 페이지에 동적 가격표를 추가합니다. 이 레이아웃을 사용하여 새 페이지를 만듭니다.

페이지에 동적 콘텐츠 추가

이 페이지의 백엔드로 다시 전환하고 각 가격표에 동적 콘텐츠를 추가하십시오.

페이지의 가격표 아래에 새 행 추가

열 구조

계속해서 Visual Builder를 활성화하고 여기에 새 행을 추가하십시오.

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 크기 설정을 변경합니다.

• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1

간격

그런 다음 간격 설정으로 이동하여 사용자 지정 여백을 추가합니다.

• 상단 여백: 100px
• 하단 여백: 100px

열 1에 CTA 모듈 추가

Title Field를 Membership Level 1 Dynamic Content에 연결

열 1에서 필요한 첫 번째 모듈은 행동 유도 모듈입니다. 제목 필드를 이 자습서의 이전 부분에서 만든 Membership Level 1 필드에 연결합니다.

Content Box와 멤버십 설명 연결 1 Dynamic Content

마찬가지로 콘텐츠 상자를 Membership Description 1에 연결합니다.

배경색

그런 다음 배경 설정으로 이동하여 CTA 모듈의 배경색을 변경합니다.

• 배경색: #ffffff

배경 이미지

미묘한 배경 이미지도 추가하십시오. 소프트웨어 판매 방문 페이지를 업로드한 후 미디어 라이브러리에서 다음 배경 이미지를 찾을 수 있습니다.

• 배경 이미지: software-sale-13.png

텍스트 설정

계속해서 텍스트 설정으로 이동하여 모듈의 텍스트 방향을 변경하십시오.

• 텍스트 방향: 왼쪽

제목 텍스트 설정

랜딩 페이지의 디자인 스타일에 맞게 제목 텍스트 설정도 일부 변경합니다.

• 제목 글꼴: Rubik
• 제목 글꼴 두께: Light
• 제목 텍스트 색상: #4258ff
• 제목 텍스트 크기: 40px
• 제목 줄 높이: 1.3em

본문 설정

본문 설정도 마찬가지입니다.

• 본문 글꼴: Rubik
• 본문 글꼴 두께: 중간
• 본문 텍스트 색상: rgba(0,0,0,0.34)
• 본문 텍스트 크기: 15px
• 바디 라인 높이: 1.8em

간격

다음에 상단 패딩을 추가하십시오.

• 상단 패딩: 60px

국경

그리고 모듈의 각 상단 모서리에 '8px'를 추가합니다.

박스 섀도우

마지막으로 페이지에 깊이를 만들기 위해 미묘한 상자 그림자를 추가합니다.

• 상자 그림자 수직 위치: 50px
• 상자 그림자 흐림 강도: 100px
• 그림자 색상: rgba(66,88,255,0.2)

열 1에 텍스트 모듈 추가

콘텐츠 상자를 가격 1 동적 콘텐츠에 연결

1열의 클릭 유도문안 모듈 바로 아래에 텍스트 모듈을 추가하세요. 이 모듈의 콘텐츠 상자를 가격 1 동적 콘텐츠에 연결합니다.

배경색

이 모듈의 배경색을 변경하여 계속하십시오.

• 배경색: #ffffff

텍스트 설정

텍스트 설정도 수정합니다.

• 텍스트 글꼴: Rubik
• 텍스트 글꼴 두께: 가벼움
• 텍스트 색상: #4258ff
• 텍스트 크기: 70px
• 텍스트 줄 높이: 1em

간격

다음으로 몇 가지 사용자 정의 패딩 값을 추가합니다.

• 하단 패딩: 60px
• 왼쪽 패딩: 40px

국경

테두리 설정으로 이동하여 양쪽 하단 모서리에 '8px'를 추가하여 계속 진행합니다.

박스 섀도우

마지막으로 이 텍스트 모듈에 상자 그림자도 부여합니다.

• 상자 그림자 수직 위치: 80px
• 상자 그림자 흐림 강도: 100px
• 그림자 색상: rgba(66,88,255,0.2)

버튼 모듈을 열 1로 드래그

첫 번째 열에 필요한 마지막 모듈은 버튼 모듈입니다. 이전 행에서 찾을 수 있는 버튼 모듈 중 하나를 복제하여 1열에 배치합니다.

간격 변경

버튼 모듈의 설정을 열고 사용자 정의 여백을 추가하십시오.

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

열 1의 모든 모듈을 복제하고 나머지 열에 배치

시간을 절약하기 위해 열 1에 있는 세 개의 모듈을 모두 두 번 복제하고 행의 나머지 열에 복제본을 배치합니다.

2열의 모듈 수정

CTA 모듈

제목 필드를 멤버십 레벨 2 동적 콘텐츠에 연결

두 번째 열의 CTA 모듈부터 시작하여 복제본을 수정해야 합니다. 제목 필드를 Membership Level 2 동적 콘텐츠에 연결합니다.

멤버십 설명 2에 콘텐츠 상자 연결 동적 콘텐츠

콘텐츠 상자에 대해서도 동일한 작업을 수행합니다.

그라데이션 배경 추가

다음으로 모듈에 그라데이션 배경을 추가합니다.

• 색상 1: #6959ff
• 색상 2: #c1bfff
• 기울기 방향: 15deg
• 시작 위치: 22%
• 최종 위치: 95%

제목 텍스트 색상 변경

제목 텍스트 색상도 변경합니다.

• 제목 텍스트 색상: #ffffff

본문 텍스트 색상 변경

본문 색상도 마찬가지입니다.

• 본문 색상: #ffffff

간격 변경

이 특정 가격표를 집중 조명하기 위해 간격 값도 가지고 놀 것입니다.

• 상단 여백: -50px(데스크톱), 0px(태블릿 및 휴대폰)
• 상단 패딩: 100px

텍스트 모듈

콘텐츠 상자를 가격 2 동적 콘텐츠에 연결

계속해서 2열의 텍스트 모듈을 열고 콘텐츠 상자를 Price 2 동적 콘텐츠에 연결합니다.

배경색 변경

다음으로 이 모듈의 배경색을 변경합니다.

• 배경색: #6959ff

텍스트 색상 변경

그리고 텍스트 색상을 흰색으로 변경합니다.

• 텍스트 색상: #ffffff

간격 변경

마지막으로 간격 설정에서 사용자 정의 패딩 값을 변경하십시오.

• 하단 패딩: 120px
• 왼쪽 패딩: 40px

3열의 모듈 수정

CTA 모듈

제목 필드를 멤버십 레벨 3 동적 콘텐츠에 연결

3열의 모듈도 변경해야 합니다. 제목 필드를 멤버십 레벨 3 동적 콘텐츠에 연결합니다.

Content Box를 멤버십 설명에 연결 3 Dynamic Content

콘텐츠 상자도 마찬가지입니다.

그라데이션 배경 추가

그런 다음 모듈에 그라데이션 배경을 추가합니다.

• 색상 1: #c87cff
• 색상 2: #ffbcf8
• 기울기 방향: 18deg
• 시작 위치: 22%
• 최종 위치: 95%

제목 텍스트 색상 변경

제목 텍스트 색상을 흰색으로 변경합니다.

• 제목 텍스트 색상: #ffffff

본문 텍스트 색상 변경

본문 색상에 대해서도 동일한 작업을 수행합니다.

• 본문 색상: #ffffff

텍스트 모듈

콘텐츠 상자를 가격 3 동적 콘텐츠에 연결

계속해서 3열에서 텍스트 모듈을 열고 여기에서도 동적 콘텐츠를 변경합니다.

배경색 변경

다음에 다른 배경색을 추가합니다.

• 배경색: #c87cff

텍스트 색상 변경

마지막으로 텍스트 색상을 흰색으로 변경하면 완료됩니다! 이제 페이지에 3개의 완전히 동적인 가격표가 있습니다!

• 텍스트 색상: #ffffff

마지막 생각들

이 사용 사례는 블랙 프라이데이 고객 및 평생 회원과 6개의 무료 한정판 방문 페이지를 공유하는 블랙 프라이데이 거래의 일부입니다. 이 기간 동안 강력한 커뮤니티에 가입하고 회원이 되면 다음을 얻을 수 있습니다.

• 모든 제품 25% 할인
• 6개의 랜딩 페이지 모두 무료
• 멋진 테마 및 플러그인에 대한 액세스
• 보너스 상품

지금 기회를 잡고 회원이 되십시오!