주요 내용으로 건너 뛰기

WooCommerce 제품에 대한 동적 혜택 그리드 생성

Divi : 사용하기 가장 쉬운 WordPress 테마

Elementor로 웹 사이트를 쉽게 만들 수 있습니다

Elementor를 사용하면 전문적인 모양으로 웹 사이트 디자인을 쉽게 만들 수 있습니다. 자신이 할 수있는 일에 대해 비용을 지불하지 마십시오. [무료]

제품 페이지를 디자인하는 방식은 방문자의 행동에 즉각적인 영향을 미칩니다. 잘 제작되고 개인화 된 제품 페이지 디자인은 방문자가 제품 구매 여부를 쉽게 결정할 수 있도록합니다. 제품 페이지를 더욱 매력적으로 만드는 방법을 찾고 있다면이 튜토리얼을 좋아할 것입니다. 

Divi 및 Advanced Custom Fields 플러그인을 사용하여 디자인에 동적 제품 혜택 그리드를 포함하는 방법을 보여 드리겠습니다. 혜택에 대한 필드 그룹을 만드는 것으로 시작합니다. 그런 다음 제품 페이지에서 사용자 정의 필드를 완성하고 제품 페이지 템플릿에 동적 콘텐츠를 포함합니다. 

가능한 결과

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

가능한 결과 divi

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

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

제품 백엔드에 다양한 제품 혜택을 표시하기 위해 무료 고급 사용자 정의 필드 플러그인을 사용할 것입니다. 액세스 WordPress 백엔드> 플러그인> 새로 추가> ACF 플러그인 찾기> 설치> 활성화 .

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

맞춤 입력란으로 이동하여 새 입력란 그룹 추가

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

acf 필드 생성

필드 그룹 설정

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

  • "메시지 유형"은 "제품"과 같습니다.
규칙 추가

첫 번째 필드 추가

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

  • 필드 레이블 : 혜택 제목 1
  • 필드 유형 : 텍스트
AC 필드 추가
Divi 필드 사용자 정의

나머지 필드에 대해 단계를 반복하십시오.

제품의 다른 이점과 설명에 대해서도 동일하게 수행하십시오. 이러한 모든 필드에는 "텍스트"필드 유형이 할당되어야합니다.

  • 서비스 제목 1
  • 혜택 설명 1
  • 서비스 제목 2
  • 혜택 설명 2
  • 서비스 제목 3
  • 혜택 설명 3
  • 서비스 제목 4
  • 혜택 설명 4
acf 필드 구성

2. 제품에 혜택 추가

새 제품을 열거 나 추가하십시오

필드 그룹과 필드가 생성되면 개별 수준에서 제품에 제품 혜택을 추가 할 수 있습니다. 선택한 제품을 열거 나 새 제품을 만듭니다.

Divi 제품 생성

제품 혜택 필드를 작성하십시오

그리고 제품의 이점을 실현하십시오.

divi 장점 필드 작성

3. Divi Theme Builder에서 제품 페이지 템플리트 작성

Divi Theme Builder로 이동하여 새 템플릿 추가

Divi로 시작할 시간입니다! 새 템플릿을 만들려면 Divi Theme Builder로 이동하여 "새 템플릿 추가"를 클릭하십시오.

Divi 테마 빌더

모든 제품에 템플릿 사용

이 템플릿은 모든 제품에 사용되지만 특정 카테고리 또는 라벨이있는 제품을 대신 선택할 수 있습니다.

모든 woocommerce 제품 추가

모델 본문 템플릿 편집기 시작

그런 다음 "사용자 정의 바디 추가"를 클릭하고 "사용자 정의 바디 생성"을 선택하여 모델의 바디를 입력하십시오.

Divi 본문 작성

섹션 1 편집

배경색

템플릿 편집기에 들어가면 섹션이 나타납니다. 해당 섹션을 열고 배경색을 검은 색으로 변경하십시오.

  • 배경색 : # 000000
Divi 섹션 배경 구성

간격

섹션의 디자인 탭으로 이동하여 사용자 정의 상단 및 하단 패딩을 추가하십시오.

  • 상단 패딩 : 10px
  • 하단 패딩 : 10px
Divi 섹션 간격 구성

새 줄 추가

열 구조

다음 구조를 가진 섹션에 새로운 줄을 추가하여 계속합시다 :

라인 모듈 레이아웃 구성

간격

모드를 추가하지 않고 행 설정을 열고 간격을 조정 해 보겠습니다.

  • 개인화 된 개골창 사용 : 예
  • 거터 폭 : 1
  • 너비 : 90 %
  • 최대 너비 : 100 %
줄 모듈 간격 설정

간격

모든 상단 및 하단 내부 간격을 제거하십시오.

Divi : 모든 시간의 최고의 WordPress 테마!

901.000 다운로드Divi는 세계에서 가장 인기있는 WordPress 테마입니다. 그것은 완전하고, 사용하기 쉽고 62 무료 템플릿 이상을 제공합니다. [추천]

  • 높은 내부 여백 : 0px
  • 낮은 내부 여백 : 0px
Divi 라인 모듈 간격 설정

Woo Cart Notice 모듈을 열에 추가하십시오

동적 컨텐츠

이 줄과 섹션에서 필요한 유일한 모듈은 Woo Cart Notice 모듈입니다. 동적 섹션에서 "이 제품"이 선택되어 있는지 확인합니다.

  • 제품 :이 제품
설정 woo cart 알림 모듈 divi

색 배경

그런 다음 모듈 설정을 열고 투명한 배경을 사용하십시오.

  • 배경색 : rgba (0,0,0,0)
Woo Cart 모듈 Divi 설정

텍스트 설정

"디자인"탭으로 전환하고 텍스트 글꼴을 변경합니다.

  • 텍스트 글꼴 : Karla
Divi 모듈 글꼴 설정

버튼 설정

스타일 설정을 정의하여 플러그인 설정을 완료하십시오.

  • 버튼에 사용자 정의 스타일 사용 : 예
  • 버튼 텍스트 크기 : 20px
  • 버튼 텍스트 색상 : # 000000
  • 버튼 배경 : # ffd623
  • 버튼 테두리 너비 : 0px
  • 둥근 테두리 버튼 : 0px
우 카트 알림 모듈 색상 설정
  • 버튼 글꼴 : Oswald
  • 버튼 글꼴 스타일 : Shift
우 카트 공지 모듈 색상 디자인 조정
  • 높은 내부 여백 : 20px
  • 낮은 내부 여백 : 20px
  • 왼쪽 내부 여백 : 50px
  • 내부 오른쪽 여백 : 50px
구성 설계 모듈 우 카트 고지

섹션 2 추가

그라데이션 배경

이전 섹션 아래에 다른 일반 섹션을 추가하십시오. 그런 다음 설정을 열고 다음과 같이 그라데이션 배경을 사용하십시오.

  • 색상 1 : # 000000
  • 색상 2 : #ffffff
  • 시작 위치 :
    • 데스크톱 : 30 %
    • 태블릿 : 57 %
    • 전화 : 54 %
  • 최종 위치 :
    • 데스크톱 : 30 %
    • 태블릿 : 57 %
    • 전화 : 54 %
Divi 라인 모듈 후면 조정

간격

디자인 탭으로 이동하여 높은 내부 여백을 추가하겠습니다.

  • 상단 패딩 : 150px
Divi 라인 모듈 간격 구성

새 행 추가

열 구조

아래 표시된 것과 동일한 구조로 새 줄을 추가하여 계속합니다.

Divi 선 스타일 구성

크기 조정

아직 모드를 추가하지 않고 설정을 열고 다음과 같이 간격을 변경합니다.

  • 맞춤형 거터 사용 : 예
  • 거터 공간 : 1
  • 너비 : 95 %
  • 최대 너비 : 2560px
  • 라인 정렬 : 중심
거터 구성 divi 모듈

간격

내부 마진도 제거 할 예정입니다.

  • 상단 패딩 : 0px
Divi 모듈 간격 구성

주요 요소

열의 내용을 Desktop의 중앙에 맞추기 위해 행 모듈의 기본 요소에 두 줄의 CSS 코드를 사용합니다.

바탕 화면 :

디스플레이 : 플렉스; 정렬 아이템 : 중앙;

태블릿 및 휴대 전화 :

디스플레이 : 블록;
Divi 라인 모듈 스타일 설정

1 열에 Woo Image 모듈 추가

동적 컨텐츠

모듈을 추가 할 시간입니다. 열 1의 Woo Images 모듈부터 시작하겠습니다. "이 제품"이 선택되어 있는지 확인합니다.

  • 제품 :이 제품
Woocommerce 제품 이미지 모듈 설정

수직 스크롤 애니메이션 효과

고급 탭의 수평 이동 스크롤 효과를 사용하여 이미지에 미묘한 움직임을 추가합니다.

  • 수직 이동 활성화 : 예
  • 시작 오프셋 :
    • 사무실 : -4
    • 태블릿 및 전화 : 0
  • 평균 오프셋 : 0
  • 끝 오프셋 : 0
  • 트리거 모션 효과 : 요소 중간
Divi 이미지 모듈 조정

Woo 제목 모듈을 열 2에 추가

동적 컨텐츠

2 열에서 우리에게 필요한 첫 번째 모드는 Woo 타이틀 모드입니다. 동적 콘텐츠 영역에서 "이 제품"이 선택되어 있는지 확인합니다.

  • 제품 :이 제품
제품 혜택 표

제목 텍스트 설정

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

  • 제목 글꼴 : Oswald
  • 제목 글꼴 스타일 : 대문자
  • 제목 텍스트 색상 : # ffd623
  • 제목 텍스트 크기 : 80px
Divi 타이틀 모듈 디자인 조정

간격

왼쪽 및 오른쪽 여백을 추가하여 Woo 제목 모듈을 완성하십시오.

최고의 WordPress 테마 및 플러그인을 찾고 계십니까?

Envato에서 최고의 플러그인과 WordPress 테마를 다운로드하고 쉽게 웹 사이트를 만드십시오. 이미 49.720.000 다운로드 이상. [EXCLUSIVE]

  • 왼쪽 여백 : 5 %
  • 오른쪽 여백 : 5 %
Divi 타이틀 모듈 설정

Woo 설명 모듈을 열 2에 추가

동적 컨텐츠

다음 모듈 인 Woo 설명 모듈로 이동하겠습니다. 이를 위해 다음과 같은 동적 콘텐츠를 사용합니다.

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

텍스트 설정

모듈 디자인 탭으로 전환하고 그에 따라 텍스트 설정을 변경합니다.

  • 텍스트 글꼴 : Karla
  • 텍스트 색상 : #dbdbdb
  • 텍스트 크기 : 17 픽셀 (데스크톱 및 태블릿), 15 픽셀 (전화)
  • 텍스트 줄 높이 : 1,9 em
색상 조정 모듈 설명 divi

크기 조정

그런 다음 다른 화면 크기에서 너비를 변경하십시오.

  • 폭 : 59 % (데스크톱), 82 % (태블릿 및 전화)
Divi 요약 모듈 너비 조정

간격

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

  • 상단 여백 : 50px
  • 아래쪽 여백 : 100px
  • 왼쪽 여백 : 5 %
  • 오른쪽 여백 : 5 %
Divi 제품 설명 모듈

2 열에 Blurb 모듈 추가

동적 컨텐츠

이 자습서의 첫 번째 부분에서 추가 한 제품 이점을 표시하기 위해 Blurb 모듈을 사용합니다. 첫 번째 Blurb 모듈을 추가하고 제목과 본문에 대해 생성 된 첫 번째 혜택의 동적 내용을 사용하십시오.

  • 제목 : Benefit Title 1
  • 본문 : 혜택 설명 1
Divi 요약 모듈 텍스트 설정

업로드 이미지

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

이미지 모듈 요약 divi 구성

이미지 / 아이콘 설정

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

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

제목 텍스트 설정

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

  • 제목 글꼴 : Oswald
  • 제목 글꼴 스타일 : 대문자
  • 제목 텍스트 크기 : 25px
divi 요약 모듈 글꼴 구성

본문 설정

본문 설정과 함께.

  • 바디 글꼴 : Karla
  • 텍스트 크기 : 17 픽셀 (데스크톱 및 태블릿), 15 픽셀 (전화)
  • 바디 라인 높이 : 1,9 em
텍스트 모듈 요약 div 구성

크기 조정

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

  • 이미지 너비 : 25 %
  • 너비 : 49 %
divi 요약 모듈 크기 구성

간격

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

  • 상단 패딩 : 8 %
  • 낮은 패딩 : 8 %
  • 왼쪽 패딩 : 8 % (데스크톱 및 태블릿), 2 % (전화)
  • 오른쪽 여백 : 8 % (데스크톱 및 태블릿) 2 % (전화)
divi 요약 모듈 간격 구성

주요 요소

이제 요약 모듈이 두 단계로 텍스트를 나란히 표시하는지 확인합니다. 먼저 모듈 너비가 50 % 미만인지 확인합니다 (이전 단계에서했던 것처럼). 다음으로 행의 속성을 사용합니다. 고급 섹션의 기본 요소에이 CSS 속성을 추가합니다.

디스플레이 : 인라인 블록;
CSS 코드 DIVI 모듈 추가

요약 모듈을 3 번 복제

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

제품명 divi 섹션

Blurb 모듈 이미지 편집

중복 된 각 Blurb 창에서 이미지를 편집합니다. 이 문서의 시작 부분에서 다운로드했을 수있는 다운로드 폴더에서 찾을 수 있습니다.

Divi 요약 모듈 이미지

Blurb 모듈의 동적 내용 수정

또한 각 중복 Blurb 모듈의 동적 내용을 수정하십시오.

  • 제목 : 서비스 제목 (2,3 또는 4)
  • 본문 : 장점 설명 (2,3, 4 또는 XNUMX)
Divi 요약 모듈 규칙

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

블 러브 모듈 1 테두리 설정

이제 그리드 디자인을 완료하기 위해 개별 수준에서 Blurb 모듈에 테두리를 추가 할 것입니다. 첫 번째 Blurb 모드를 열고 직선 테두리를 사용하십시오.

  • 오른쪽 테두리 너비 : 1px
  • 오른쪽 테두리 색상 : # ffd623
둥근 테두리 구성 divi 요약 모듈

또한 첫 번째 Blurb 모듈에 아래쪽 테두리를 추가하십시오.

  • 아래쪽 테두리 너비 : 1px
  • 하단 테두리 색상 : # 000000
divi 하단 여백 구성
블 러브 모듈 2 테두리 설정

그런 다음 두 번째 Blurb 모듈을 열고 아래쪽 테두리를 사용하십시오.

  • 아래쪽 테두리 너비 : 1px
  • 하단 테두리 색상 : # 000000
구성 테두리 모듈 요약 divi
블 러브 모듈 3 테두리 설정

세 번째 Blurb 모듈에 직선 테두리를 추가하여 그리드 디자인을 완성하십시오.

온라인 상점을 쉽게 만들 수 있습니다.

무료 WooCommerce를 다운로드하십시오. 전자 상거래 플러그인은 WordPress에서 실제 제품과 디지털 제품을 판매하는 플러그인입니다. [추천]

  • 오른쪽 테두리 너비 : 1px
  • 오른쪽 테두리 색상 : # ffd623
제품 혜택 표

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

동적 컨텐츠

디자인에 필요한 마지막 모듈은 Woo Add to Cart 모듈입니다. 동적 콘텐츠 영역에서 "이 제품"이 선택되어 있는지 확인합니다.

  • 제품 :이 제품
카드 divi 모듈 설정에 추가

필드 설정

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

  • 필드 배경 색상 : #ffffff
  • 필드 텍스트 색상 : # 000000
스타일 색상 모듈 구성 장바구니에 담기 divi
  • 반올림 된 필드 : 0px (모든 모서리)
  • 필드의 아래쪽 테두리 너비 : 1px
  • 필드의 아래쪽 테두리 색상 : # 000000
분할 섹션 간격 구성

버튼 설정

그런 다음 버튼의 스타일을 적절하게 지정하십시오.

  • 버튼에 사용자 정의 스타일 사용 : 예
  • 버튼 텍스트 크기 : 20 픽셀
  • 버튼 텍스트 색상 : # 000000
  • 버튼 배경 색상 : # ffd623
  • 버튼 테두리 너비 : 0px
  • 버튼 테두리 반경 : 0px
divi 버튼 디자인 구성
  • 버튼 글꼴 : Oswald
  • 버튼 글꼴 스타일 : 대문자
divi 버튼 구성
  • 상단 패딩 : 20px
  • 하단 패딩 : 20px
  • 왼쪽 패딩 : 50px
  • 오른쪽 패딩 : 50px
divi 모듈 크기 구성

간격

사용자 정의 여백 값을 추가하여 모듈 매개 변수를 완료하십시오.

  • 상단 여백 : 100px
  • 왼쪽 여백 : 5 %
divi 간격 구성

3. 테마 생성기의 수정 사항을 저장하고 결과를 미리 봅니다.

제품 페이지 템플리트 디자인을 완료하면 모든 Theme Builder 변경 사항을 저장하고 결과를 제품에 표시 할 수 있습니다!

divi 디자인 저장
divi 수정 사항 저장

측량

이제 모든 단계를 수행 했으므로 다양한 화면 크기에서 어떻게 보이는지 마지막으로 살펴 보겠습니다.

데모 결과

마지막 생각

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

이 문서에는 메모의 0을 포함

코멘트를 남겨주세요

귀하의 이메일 주소는 공개되지 않습니다. 필수 필드는 표시됩니다 *

이 사이트는 원하지 않는 것을 줄이기 위해 Akismet을 사용합니다. 댓글 데이터 사용 방법에 대해 자세히 알아보기.

맨 위로
0 주식
짹짹
레지스터