Divi 및 ACF를 사용하여 제품 페이지 템플릿에 대한 동적 제품 혜택 그리드 만들기

제품 페이지를 디자인하는 방식은 방문자의 행동에 즉각적인 영향을 미칩니다. 잘 디자인되고 사용자 정의된 제품 페이지 디자인은 방문자가 귀하의 제품을 구매할지 여부를 더 쉽게 결정할 수 있도록 합니다. 제품 페이지를 더 매력적으로 만드는 방법을 찾고 있다면 이 게시물을 좋아할 것입니다. Divi와 고급 사용자 정의 필드 플러그인을 사용하여 디자인에 동적 제품 혜택 그리드를 포함하는 방법을 보여드리겠습니다. 이점을 위해 필드 그룹을 만드는 것으로 시작하겠습니다. 그런 다음 제품 페이지의 사용자 정의 필드를 채우고 제품 페이지 템플릿에 동적 콘텐츠를 포함합니다. 제품 페이지 템플릿도 무료로 다운로드할 수 있습니다!

시작하겠습니다.

시사

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

데스크탑

이동하는

무료로 제품 페이지 템플릿 다운로드

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

파일 다운로드

무료로 다운로드

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

다운로드

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

1. ACF 플러그인 설치 및 제품 혜택 필드 그룹 추가

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

제품의 백엔드 내에서 다양한 제품 이점을 표시하기 위해 무료 고급 사용자 정의 필드 플러그인을 사용합니다. WordPress 백엔드 > 플러그인 > 새로 추가 > ACF 플러그인 검색 > 설치 > 활성화로 이동합니다 .

사용자 정의 필드로 이동 및 새 필드 그룹 추가

ACF 플러그인을 설치하고 활성화하면 사용자 정의 필드로 이동하여 새 필드 그룹을 추가할 수 있습니다.

필드 그룹 설정

새 필드 그룹에 제목을 지정하고 제품 페이지에만 표시되도록 허용합니다.

• '게시물 유형'은 '제품'과 같습니다.

첫 번째 필드 추가

첫 번째 제품 혜택의 제목에 대한 새 필드를 추가하여 계속하십시오.

• 필드 레이블: 혜택 제목 1
• 필드 유형: 텍스트

나머지 필드에 대해 단계 반복

나머지 제품 혜택 및 설명에 대해서도 동일한 작업을 수행합니다. 이러한 모든 필드에는 할당된 '텍스트' 필드 유형이 필요합니다.

• 혜택 제목 1
• 혜택 설명 1
• 혜택 제목 2
• 혜택 설명 2
• 혜택 제목 3
• 혜택 설명 3
• 혜택 제목 4
• 혜택 설명 4

2. 제품에 제품 혜택 추가

새 제품 열기 또는 추가

필드 그룹 및 필드가 생성되면 개별 수준에서 제품 혜택을 제품에 추가할 수 있습니다. 원하는 제품을 열거나 새 제품을 만드십시오.

제품 혜택 필드 작성

그리고 상품 혜택을 작성해주세요.

3. Divi 테마 빌더 내에서 제품 페이지 템플릿 구축

Divi 테마 빌더로 이동 및 새 템플릿 추가

Divi를 시작할 시간입니다! 새 템플릿을 만들려면 Divi 테마 빌더로 이동하여 '새 템플릿 추가'를 클릭하세요.

모든 제품에 템플릿 사용

우리는 이 템플릿을 모든 제품에 사용하고 있지만 대신 특정 카테고리나 태그가 있는 제품을 자유롭게 선택할 수 있습니다.

템플릿의 본문 템플릿 편집기 입력

그런 다음 '사용자 정의 본문 추가'를 클릭하고 '사용자 정의 본문 작성'을 선택하여 템플릿 본문을 입력합니다.

섹션 #1 수정

배경색

템플릿 편집기에 들어가면 섹션이 표시됩니다. 해당 섹션을 열고 배경색을 검정색으로 변경합니다.

• 배경색: #000000

간격

섹션의 디자인 탭으로 이동하여 사용자 지정 상단 및 하단 패딩을 추가합니다.

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

새 행 추가

열 구조

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

사이징

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

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

간격

다음으로 모든 기본 상단 및 하단 패딩을 제거합니다.

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

열에 Woo Cart 알림 모듈 추가

동적 콘텐츠

이 행과 섹션에서 필요한 유일한 모듈은 Woo Cart Notice 모듈입니다. 동적 콘텐츠 영역에서 '이 제품'이 선택되어 있는지 확인하십시오.

• 제품: 이 제품

배경색

그런 다음 모듈의 설정을 열고 완전히 투명한 배경색을 사용합니다.

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

텍스트 설정

디자인 탭으로 이동하여 다음 텍스트 설정에서 텍스트 글꼴을 변경합니다.

• 텍스트 글꼴: Karla

버튼 설정

버튼의 스타일을 적절하게 지정하여 모듈 설정을 완료합니다.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 20px
• 버튼 텍스트 색상: #000000
• 버튼 배경색: #ffd623
• 버튼 테두리 너비: 0px
• 버튼 테두리 반경: 0px

• 버튼 글꼴: Oswald
• 버튼 글꼴 스타일: 대문자

• 상단 패딩: 20px
• 하단 패딩: 20px
• 왼쪽 패딩: 50px
• 오른쪽 패딩: 50px

섹션 #2 추가

그라데이션 배경

이전 섹션 바로 아래에 다른 일반 섹션을 추가하고 섹션 설정을 열고 반응형 그라디언트 배경을 사용합니다.

• 색상 1: #000000
• 색상 2: #ffffff
• 시작 위치:
  • 데스크탑: 30%
  • 태블릿: 57%
  • 전화: 54%
• 종료 위치:
  • 데스크탑: 30%
  • 태블릿: 57%
  • 전화: 54%

간격

섹션의 디자인 탭으로 이동하여 상단 패딩을 추가합니다.

• 상단 패딩: 150px

새 행 추가

열 구조

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

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 다음과 같이 크기 설정을 수정합니다.

• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1
• 폭: 95%
• 최대 너비: 2560px
• 행 정렬: 가운데

간격

행의 기본 상단 패딩도 제거합니다.

• 상단 패딩: 0px

주요 요소

열 콘텐츠를 데스크탑의 중앙에 배치하기 위해 행의 기본 요소에 두 줄의 CSS 코드를 사용합니다.

데스크탑:

display: flex;
align-items: center;

태블릿 및 전화:

display: block;

열 1에 Woo 이미지 모듈 추가

동적 콘텐츠

열 1의 Woo Images 모듈부터 시작하여 모듈을 추가할 시간입니다. 동적 콘텐츠 영역에서 '이 제품'이 선택되어 있는지 확인합니다.

• 제품: 이 제품

수직 모션 스크롤 효과

고급 탭에서 수평 모션 스크롤 효과를 사용하여 이미지에 미묘한 모션을 추가하고 있습니다.

• 수직 모션 활성화: 예
• 시작 오프셋:
  • 데스크탑: -4
  • 태블릿 및 전화: 0
• 중간 오프셋: 0
• 끝 오프셋: 0
• 모션 효과 트리거: 요소의 중간

열 2에 Woo 제목 모듈 추가

동적 콘텐츠

2열에서 우리가 필요로 하는 첫 번째 모듈은 Woo Title 모듈입니다. 동적 콘텐츠 영역에서 '이 제품'이 선택되어 있는지 확인하십시오.

• 제품: 이 제품

제목 텍스트 설정

그런 다음 디자인 탭으로 이동하여 다음과 같이 제목 텍스트의 스타일을 지정합니다.

• 제목 글꼴: Oswald
• 제목 글꼴 스타일: 대문자
• 제목 텍스트 색상: #ffd623
• 제목 텍스트 크기: 80px

간격

약간의 왼쪽 및 오른쪽 여백을 추가하여 Woo Title 모듈을 완성합니다.

• 왼쪽 여백: 5%
• 오른쪽 마진: 5%

열 2에 Woo 설명 모듈 추가

동적 콘텐츠

Woo 설명 모듈인 다음 모듈로 넘어갑니다. 다음과 같은 동적 콘텐츠를 사용하고 있습니다.

• 제품: 이 제품
• 설명 유형: 간단한 설명

텍스트 설정

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

• 텍스트 글꼴: Karla
• 텍스트 색상: #dbdbdb
• 텍스트 크기: 17px(데스크톱 및 태블릿), 15px(전화)
• 텍스트 줄 높이: 1.9em

사이징

그런 다음 다양한 화면 크기에서 너비를 수정합니다.

• 너비: 59%(데스크톱), 82%(태블릿 및 휴대폰)

간격

간격 설정에서 몇 가지 사용자 정의 여백 값을 추가하여 Woo 설명 모듈을 완료하십시오.

• 상단 여백: 50px
• 하단 여백: 100px
• 왼쪽 여백: 5%
• 오른쪽 마진: 5%

열 2에 Blurb 모듈 추가

동적 콘텐츠

이 자습서의 첫 번째 부분에서 추가한 제품 이점을 표시하기 위해 Blurb 모듈을 사용합니다. 첫 번째 Blurb 모듈을 추가하고 제목과 본문에 첫 번째 제품 혜택의 동적 콘텐츠를 사용합니다.

• 제목: 혜택 제목 1
• 본문: 혜택 설명 1

이미지 업로드

다음 이미지를 업로드하거나 원하는 아이콘을 사용하세요. 이 자습서의 시작 부분에서 다운로드할 수 있었던 다운로드 폴더에서 이 자습서 전체에서 사용한 항목을 찾을 수 있습니다.

이미지/아이콘 설정

모듈의 디자인 탭으로 이동하여 다음과 같이 이미지/아이콘 설정을 변경합니다.

• 이미지/아이콘 배치: 상단
• 이미지/아이콘 정렬: 왼쪽

제목 텍스트 설정

다음에 제목 텍스트 설정을 수정합니다.

• 제목 글꼴: Oswald
• 제목 글꼴 스타일: 대문자
• 제목 텍스트 크기: 25px

본문 설정

본문 설정과 함께.

• 본문 글꼴: Karla
• 본문 텍스트 크기: 17px(데스크톱 및 태블릿), 15px(전화)
• 바디 라인 높이: 1.9em

사이징

그런 다음 크기 설정으로 이동하여 너비를 수정합니다. 50% 미만의 기본 너비를 사용하는 것이 중요합니다. 이렇게 하면 다음 단계에서 두 개의 Blurb 모듈을 나란히 표시할 수 있습니다.

• 이미지 너비: 25%
• 폭: 49%

간격

또한 다양한 화면 크기에서 사용자 정의 패딩 값을 사용하여 Blurb 모듈 주위에 약간의 공백을 추가합니다.

• 탑 패딩: 8%
• 하단 패딩: 8%
• 왼쪽 패딩: 8%(데스크톱 및 태블릿), 2%(전화)
• 오른쪽 패딩: 8%(데스크톱 및 태블릿) 2%(전화)

주요 요소

이제 두 개의 Blurb 모듈이 나란히 표시되도록 하려면 두 가지 중요한 단계가 있습니다. 첫 번째는 모듈의 너비가 50% 미만인지 확인하는 것입니다(이전 단계 중 하나에서 했던 것처럼). 두 번째는 인라인 디스플레이 속성을 사용하는 것입니다. 고급 탭에서 Blurb 모듈의 기본 요소에 이 CSS 속성을 추가합니다.

display: inline-block;

Blurb 모듈을 세 번 복제

첫 번째 Blurb 모듈을 완료하면 세 번 복제할 수 있습니다. Blurb 모듈이 그리드에 표시되는 것을 자동으로 알 수 있습니다.

Blurb 모듈 이미지 수정

각 복제 Blurb 모듈의 이미지를 변경합니다. 이 게시물의 시작 부분에서 다운로드할 수 있었던 다운로드 폴더에서 이러한 파일을 찾을 수 있습니다.

Blurb 모듈 동적 콘텐츠 수정

각 복제 Blurb 모듈에 대한 동적 콘텐츠도 변경합니다.

• 제목: 혜택 제목(2,3 또는 4)
• 본문: 혜택 설명(2,3 또는 4)

Blurb 모듈에 개별적으로 테두리 추가

Blurb 모듈 1 테두리 설정

이제 그리드 디자인을 완성하기 위해 개별 수준의 Blurb 모듈에 테두리를 추가합니다. 첫 번째 Blurb 모듈을 열고 오른쪽 테두리를 사용합니다.

• 오른쪽 테두리 너비: 1px
• 오른쪽 테두리 색상: #ffd623

첫 번째 Blurb 모듈에도 하단 테두리를 추가합니다.

• 하단 테두리 너비: 1px
• 하단 테두리 색상: #000000

Blurb 모듈 2 테두리 설정

그런 다음 두 번째 Blurb 모듈을 열고 아래쪽 테두리를 사용합니다.

• 하단 테두리 너비: 1px
• 하단 테두리 색상: #000000

Blurb 모듈 3 테두리 설정

세 번째 Blurb 모듈에 오른쪽 테두리를 추가하여 그리드 디자인을 완성합니다.

• 오른쪽 테두리 너비: 1px
• 오른쪽 테두리 색상: #ffd623

열 2에 장바구니 모듈에 Woo 추가 추가

동적 콘텐츠

디자인에 필요한 마지막 모듈은 장바구니에 추가 모듈입니다. 동적 콘텐츠 영역에서 '이 제품'이 선택되어 있는지 확인하십시오.

• 제품: 이 제품

필드 설정

다음 디자인 탭으로 이동하여 필드 설정을 변경합니다.

• 필드 배경색: #ffffff
• 필드 텍스트 색상: #000000

• 모서리가 둥근 필드: 0px(모든 모서리)
• 필드 하단 테두리 너비: 1px
• 필드 하단 테두리 색상: #000000

버튼 설정

그런 다음 그에 따라 버튼의 스타일을 지정합니다.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 20px
• 버튼 텍스트 색상: #000000
• 버튼 배경색: #ffd623
• 버튼 테두리 너비: 0px
• 버튼 테두리 반경: 0px

• 버튼 글꼴: Oswald
• 버튼 글꼴 스타일: 대문자

• 상단 패딩: 20px
• 하단 패딩: 20px
• 왼쪽 패딩: 50px
• 오른쪽 패딩: 50px

간격

그리고 사용자 정의 여백 값을 추가하여 모듈 설정을 완료합니다.

• 상단 여백: 100px
• 왼쪽 여백: 5%

3. 테마 빌더 변경 사항 저장 및 결과 미리보기

제품 페이지 템플릿 디자인을 완료하면 모든 테마 빌더 변경 사항을 저장하고 제품에서 결과를 볼 수 있습니다!

시사

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

데스크탑

이동하는

마지막 생각들

이 게시물에서는 다음 Divi 제품 페이지 템플릿으로 창의력을 발휘하는 방법을 보여주었습니다. 보다 구체적으로 말하면 동적 제품 혜택 그리드를 포함하여 제품 페이지에 추가 인센티브를 추가하는 방법을 보여 주었습니다. 고급 사용자 정의 필드 플러그인과 함께 Divi를 사용하여 이 튜토리얼을 만들었습니다. JSON 파일도 무료로 다운로드할 수 있었습니다! 질문이나 제안 사항이 있으면 아래의 댓글 섹션에 자유롭게 의견을 남겨주세요.

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