제품 페이지를 디자인하는 방식은 제품 페이지의 동작에 즉각적인 영향을 미칩니다. 방문자. 잘 디자인되고 개인화된 제품 페이지 디자인은 방문자 그들이 당신의 제품을 사고 싶은지 더 쉽게 결정할 수 있습니다. 제품 페이지를 더욱 매력적으로 만드는 방법을 찾고 있다면 이 튜토리얼이 마음에 드실 것입니다.
Divi 및 Advanced Custom Fields 플러그인을 사용하여 디자인에 동적 제품 혜택 그리드를 포함하는 방법을 보여 드리겠습니다. 혜택을 위한 필드 그룹을 만드는 것부터 시작하겠습니다. 그런 다음 제품 페이지의 사용자 정의 필드를 작성하고 다음을 포함합니다. 내용 제품 페이지 템플릿에서 동적입니다.
가능한 결과
튜토리얼을 시작하기 전에 다양한 화면 크기에서 결과를 빠르게 살펴 보겠습니다.
1. ACF 플러그인 및 제품 혜택 필드 그룹 플러그인 설치
고급 사용자 정의 필드 플러그인 설치
제품 백엔드에 다양한 제품 이점을 표시하기 위해 플러그인을 사용합니다. 무료 고급 사용자 정의 필드. 귀하의 WordPress 백엔드> 플러그인> 새로 추가> ACF 플러그인 찾기> 설치> 활성화 .
맞춤 입력란으로 이동하여 새 입력란 그룹 추가
ACF 플러그인을 설치하고 활성화하면 사용자 정의 필드에 액세스하고 새 필드 그룹을 추가 할 수 있습니다.
필드 그룹 설정
새 필드 그룹에 제목을 지정하고 제품 페이지에만 표시되도록 허용합니다.
- "메시지 유형"은 "제품"과 같습니다.
첫 번째 필드 추가
첫 번째 제품 혜택 제목에 새 필드를 추가하여 계속하십시오.
- 필드 레이블 : 혜택 제목 1
- 필드 유형 : 텍스트
나머지 필드에 대해 단계를 반복하십시오.
제품의 다른 이점과 설명에 대해서도 동일하게 수행하십시오. 이러한 모든 필드에는 "텍스트"필드 유형이 할당되어야합니다.
- 서비스 제목 1
- 혜택 설명 1
- 서비스 제목 2
- 혜택 설명 2
- 서비스 제목 3
- 혜택 설명 3
- 서비스 제목 4
- 혜택 설명 4
2. 제품에 혜택 추가
새 제품을 열거 나 추가하십시오
필드 그룹과 필드가 생성되면 개별 수준에서 제품에 제품 혜택을 추가 할 수 있습니다. 선택한 제품을 열거 나 새 제품을 만듭니다.
제품 혜택 필드를 작성하십시오
그리고 제품의 이점을 실현하십시오.
3. Divi Theme Builder에서 제품 페이지 템플리트 작성
Divi Theme Builder로 이동하여 새 템플릿 추가
Divi로 시작할 시간입니다! 새 템플릿을 만들려면 Divi Theme Builder로 이동하여 "새 템플릿 추가"를 클릭하십시오.
모든 제품에 템플릿 사용
이 템플릿은 모든 제품에 사용되지만 특정 카테고리 또는 라벨이있는 제품을 대신 선택할 수 있습니다.
모델 본문 템플릿 편집기 시작
그런 다음 "사용자 정의 바디 추가"를 클릭하고 "사용자 정의 바디 생성"을 선택하여 모델의 바디를 입력하십시오.
섹션 1 편집
배경색
템플릿 편집기에 들어가면 섹션이 나타납니다. 해당 섹션을 열고 배경색을 검은 색으로 변경하십시오.
- 배경색 : # 000000
간격
섹션의 디자인 탭으로 이동하여 사용자 정의 상단 및 하단 패딩을 추가하십시오.
- 상단 패딩 : 10px
- 하단 패딩 : 10px
새 줄 추가
열 구조
다음 구조를 가진 섹션에 새로운 줄을 추가하여 계속합시다 :
간격
모드를 추가하지 않고 행 설정을 열고 간격을 조정 해 보겠습니다.
- 개인화 된 개골창 사용 : 예
- 거터 폭 : 1
- 너비 : 90 %
- 최대 너비 : 100 %
간격
모든 상단 및 하단 내부 간격을 제거하십시오.
- 높은 내부 여백 : 0px
- 낮은 내부 여백 : 0px
Woo Cart Notice 모듈을 열에 추가하십시오
동적 컨텐츠
이 줄과 섹션에서 필요한 유일한 모듈은 Woo Cart Notice 모듈입니다. 동적 섹션에서 "이 제품"이 선택되어 있는지 확인합니다.
- 제품 :이 제품
색 배경
그런 다음 모듈 설정을 열고 투명한 배경을 사용하십시오.
- 배경색 : rgba (0,0,0,0)
텍스트 설정
"디자인"탭으로 전환하고 텍스트 글꼴을 변경합니다.
- 텍스트 글꼴 : Karla
버튼 설정
스타일 설정을 정의하여 플러그인 설정을 완료하십시오.
- 버튼에 사용자 정의 스타일 사용 : 예
- 버튼 텍스트 크기 : 20px
- 버튼 텍스트 색상 : # 000000
- 버튼 배경 : # ffd623
- 버튼 테두리 너비 : 0px
- 둥근 테두리 버튼 : 0px
- 버튼 글꼴 : Oswald
- 버튼 글꼴 스타일 : Shift
- 높은 내부 여백 : 20px
- 낮은 내부 여백 : 20px
- 왼쪽 내부 여백 : 50px
- 내부 오른쪽 여백 : 50px
섹션 2 추가
그라데이션 배경
이전 섹션 아래에 다른 일반 섹션을 추가하십시오. 그런 다음 설정을 열고 다음과 같이 그라데이션 배경을 사용하십시오.
- 색상 1 : # 000000
- 색상 2 : #ffffff
- 시작 위치 :
- 데스크톱 : 30 %
- 태블릿 : 57 %
- 전화 : 54 %
- 최종 위치 :
- 데스크톱 : 30 %
- 태블릿 : 57 %
- 전화 : 54 %
간격
디자인 탭으로 이동하여 높은 내부 여백을 추가하겠습니다.
- 상단 패딩 : 150px
새 행 추가
열 구조
아래 표시된 것과 동일한 구조로 새 줄을 추가하여 계속합니다.
크기 조정
아직 모드를 추가하지 않고 설정을 열고 다음과 같이 간격을 변경합니다.
- 맞춤형 거터 사용 : 예
- 거터 공간 : 1
- 너비 : 95 %
- 최대 너비 : 2560px
- 라인 정렬 : 중심
간격
내부 마진도 제거 할 예정입니다.
- 상단 패딩 : 0px
주요 요소
그리고 중심을 맞추려면 내용 DeskTop 열에서는 모듈 줄의 기본 요소에 두 줄의 CSS 코드를 사용합니다.
바탕 화면 :
디스플레이 : 플렉스; 정렬 아이템 : 중앙;
태블릿 및 휴대 전화 :
디스플레이 : 블록;
1 열에 Woo Image 모듈 추가
동적 컨텐츠
모듈을 추가 할 시간입니다. 열 1의 Woo Images 모듈부터 시작하겠습니다. "이 제품"이 선택되어 있는지 확인합니다.
- 제품 :이 제품
수직 스크롤 애니메이션 효과
고급 탭의 수평 이동 스크롤 효과를 사용하여 이미지에 미묘한 움직임을 추가합니다.
- 수직 이동 활성화 : 예
- 시작 오프셋 :
- 사무실 : -4
- 태블릿 및 전화 : 0
- 평균 오프셋 : 0
- 끝 오프셋 : 0
- 트리거 모션 효과 : 요소 중간
Woo 제목 모듈을 열 2에 추가
동적 컨텐츠
2열에서 우리에게 필요한 첫 번째 모듈은 Woo 제목 모듈입니다. 상자에서 "이 제품"이 선택되어 있는지 확인하십시오. 내용 동적.
- 제품 :이 제품
제목 텍스트 설정
그런 다음 디자인 탭으로 이동하여 다음과 같이 제목 텍스트 스타일을 지정합니다.
- 제목 글꼴 : Oswald
- 제목 글꼴 스타일 : 대문자
- 제목 텍스트 색상 : # ffd623
- 제목 텍스트 크기 : 80px
간격
왼쪽 및 오른쪽 여백을 추가하여 Woo 제목 모듈을 완성하십시오.
- 왼쪽 여백 : 5 %
- 오른쪽 여백 : 5 %
Woo 설명 모듈을 열 2에 추가
동적 컨텐츠
다음 모듈 인 Woo 설명 모듈로 이동하겠습니다. 이를 위해 다음과 같은 동적 콘텐츠를 사용합니다.
- 제품 :이 제품
- 설명 유형 : 간단한 설명
텍스트 설정
모듈 디자인 탭으로 전환하고 그에 따라 텍스트 설정을 변경합니다.
- 텍스트 글꼴 : Karla
- 텍스트 색상 : #dbdbdb
- 텍스트 크기 : 17 픽셀 (데스크톱 및 태블릿), 15 픽셀 (전화)
- 텍스트 줄 높이 : 1,9 em
크기 조정
그런 다음 다른 화면 크기에서 너비를 변경하십시오.
- 폭 : 59 % (데스크톱), 82 % (태블릿 및 전화)
간격
간격 설정에 사용자 정의 여백 값을 추가하여 Woo 설명 모듈을 완료하십시오.
- 상단 여백 : 50px
- 아래쪽 여백 : 100px
- 왼쪽 여백 : 5 %
- 오른쪽 여백 : 5 %
2 열에 Blurb 모듈 추가
동적 컨텐츠
이 자습서의 첫 번째 부분에서 추가 한 제품 이점을 표시하기 위해 Blurb 모듈을 사용합니다. 첫 번째 Blurb 모듈을 추가하고 제목과 본문에 대해 생성 된 첫 번째 혜택의 동적 내용을 사용하십시오.
- 제목 : Benefit Title 1
- 본문 : 혜택 설명 1
업로드 이미지
다음에 이미지를 업로드하거나 원하는 아이콘을 사용하십시오. 이 자습서의 시작 부분에서 다운로드 할 수있는 다운로드 폴더에서이 자습서 전체에서 사용한 것을 찾을 수 있습니다.
이미지 / 아이콘 설정
모듈의 디자인 탭으로 이동하여 다음과 같이 이미지 / 아이콘 설정을 변경하십시오.
- 이미지 / 아이콘 배치 : 상단
- 이미지 / 아이콘 정렬 : 왼쪽
제목 텍스트 설정
다음으로 제목 텍스트 설정을 수정합니다.
- 제목 글꼴 : Oswald
- 제목 글꼴 스타일 : 대문자
- 제목 텍스트 크기 : 25px
본문 설정
본문 설정과 함께.
- 바디 글꼴 : Karla
- 텍스트 크기 : 17 픽셀 (데스크톱 및 태블릿), 15 픽셀 (전화)
- 바디 라인 높이 : 1,9 em
크기 조정
그런 다음 크기 조정 설정으로 이동하여 너비를 변경하십시오. 기본 너비를 50 % 미만으로 사용하는 것이 중요합니다. 그러면 다음 단계에서 두 개의 Blurb 모듈을 나란히 표시 할 수 있습니다.
- 이미지 너비 : 25 %
- 너비 : 49 %
간격
또한 다양한 화면 크기에서 사용자 지정 패딩 값을 사용하여 Blurb 모듈 주변에 공백을 추가합니다.
- 상단 패딩 : 8 %
- 낮은 패딩 : 8 %
- 왼쪽 패딩 : 8 % (데스크톱 및 태블릿), 2 % (전화)
- 오른쪽 여백 : 8 % (데스크톱 및 태블릿) 2 % (전화)
주요 요소
이제 요약 모듈이 두 단계로 텍스트를 나란히 표시하는지 확인합니다. 먼저 모듈 너비가 50 % 미만인지 확인합니다 (이전 단계에서했던 것처럼). 다음으로 행의 속성을 사용합니다. 고급 섹션의 기본 요소에이 CSS 속성을 추가합니다.
디스플레이 : 인라인 블록;
요약 모듈을 3 번 복제
첫 번째 Blurb 모드를 완료하면 세 번 복제 할 수 있습니다. Blurb 모듈이 그리드에 나타나는 것을 자동으로 알 수 있습니다.
Blurb 모듈 이미지 편집
중복 된 각 Blurb 창에서 이미지를 편집합니다. 이 문서의 시작 부분에서 다운로드했을 수있는 다운로드 폴더에서 찾을 수 있습니다.
Blurb 모듈의 동적 내용 수정
또한 각 중복 Blurb 모듈의 동적 내용을 수정하십시오.
- 제목 : 서비스 제목 (2,3 또는 4)
- 본문 : 장점 설명 (2,3, 4 또는 XNUMX)
Blurb 모듈에 개별적으로 테두리 추가
블 러브 모듈 1 테두리 설정
이제 그리드 디자인을 완료하기 위해 개별 수준에서 Blurb 모듈에 테두리를 추가 할 것입니다. 첫 번째 Blurb 모드를 열고 직선 테두리를 사용하십시오.
- 오른쪽 테두리 너비 : 1px
- 오른쪽 테두리 색상 : # ffd623
또한 첫 번째 Blurb 모듈에 아래쪽 테두리를 추가하십시오.
- 아래쪽 테두리 너비 : 1px
- 하단 테두리 색상 : # 000000
블 러브 모듈 2 테두리 설정
그런 다음 두 번째 Blurb 모듈을 열고 아래쪽 테두리를 사용하십시오.
- 아래쪽 테두리 너비 : 1px
- 하단 테두리 색상 : # 000000
블 러브 모듈 3 테두리 설정
세 번째 Blurb 모듈에 직선 테두리를 추가하여 그리드 디자인을 완성하십시오.
- 오른쪽 테두리 너비 : 1px
- 오른쪽 테두리 색상 : # ffd623
Woo 바구니에 추가 2 열의 모듈
동적 컨텐츠
디자인에 필요한 마지막 모듈은 Woo Add to Cart 모듈입니다. 동적 콘텐츠 영역에서 "이 제품"이 선택되어 있는지 확인합니다.
- 제품 :이 제품
필드 설정
다음 디자인 탭으로 이동하여 필드 설정을 변경합니다.
- 필드 배경 색상 : #ffffff
- 필드 텍스트 색상 : # 000000
- 반올림 된 필드 : 0px (모든 모서리)
- 필드의 아래쪽 테두리 너비 : 1px
- 필드의 아래쪽 테두리 색상 : # 000000
버튼 설정
그런 다음 버튼의 스타일을 적절하게 지정하십시오.
- 버튼에 사용자 정의 스타일 사용 : 예
- 버튼 텍스트 크기 : 20 픽셀
- 버튼 텍스트 색상 : # 000000
- 버튼 배경 색상 : # ffd623
- 버튼 테두리 너비 : 0px
- 버튼 테두리 반경 : 0px
- 버튼 글꼴 : Oswald
- 버튼 글꼴 스타일 : 대문자
- 상단 패딩 : 20px
- 하단 패딩 : 20px
- 왼쪽 패딩 : 50px
- 오른쪽 패딩 : 50px
간격
사용자 정의 여백 값을 추가하여 모듈 매개 변수를 완료하십시오.
- 상단 여백 : 100px
- 왼쪽 여백 : 5 %
3. 테마 생성기의 수정 사항을 저장하고 결과를 미리 봅니다.
제품 페이지 템플리트 디자인을 완료하면 모든 Theme Builder 변경 사항을 저장하고 결과를 제품에 표시 할 수 있습니다!
측량
이제 모든 단계를 수행 했으므로 다양한 화면 크기에서 어떻게 보이는지 마지막으로 살펴 보겠습니다.
마지막 생각
이 기사에서는 다음 Divi 제품 페이지 템플릿으로 창의력을 발휘하는 방법을 보여주었습니다. 특히, 동적 제품 혜택 그리드를 포함하여 제품 페이지에 추가 혜택을 추가하는 방법을 보여 드렸습니다. 이 튜토리얼은 고급 사용자 정의 필드 플러그인과 함께 Divi를 사용하여 만들었습니다. JSON 파일을 무료로 다운로드 할 수도 있습니다! 질문이나 제안이 있으시면 아래 댓글 섹션에 댓글을 남겨주세요.
