Divi에서 제품 페이지를 만들 때 아코디언 모듈을 사용하여 동적 콘텐츠를 사용하여 제품 정보를 표시 할 수 있습니다. 이렇게하면 페이지의 귀중한 공간을 보존하면서 제품 페이지에 고유 한 디자인을 제공 할 수 있습니다.
이 자습서에서는 Divi의 동적 콘텐츠 기능을 사용하여 제품 정보 아코디언을 만드는 방법과 Divi Visual Builder를 사용하여 아코디언 (및 해당 콘텐츠)을 디자인하는 방법을 보여줍니다.
시작하자.
측량
다음은이 튜토리얼에서 빌드 할 디자인의 미리보기입니다.
동일한 결과를 얻으려면이 학습서에 설명 된대로 제품 구성이 있어야합니다.
출발
시작하려면 다음을 수행해야합니다.
- 아직 설치하지 않았다면 설치하고 활성화하십시오. 디비 테마 설치(또는 사용하지 않는 경우 Divi Builder 플러그인 디비 테마).
- 플러그인 설치 및 활성화 WooCommerce. 구성하는 경우 WooCommerce 처음으로 상점을 준비하려면 기본 설정 마법사를 실행해야 합니다. 완료되면 새 제품을 추가할 준비가 된 것입니다.
- 아래와 같이 새 제품을 만듭니다.
샘플 제품 설정
이 자습서의 샘플 제품을 구성하려면 제품> 새로 추가로 이동하십시오. 제품에 "마사지 (단일 세션)"라는 제목을 지정하고 클릭하여 Divi Builder를 사용합니다.
그런 다음 다음 제품 페이지 설정 및 제품 정보를 업데이트하십시오.
1. Divi Page Settings 아래에서 No Sidebar 레이아웃을 선택하십시오.
2. 제품 카테고리 추가 / 선택
3. 제품 이미지 추가
4. 설명의 내용을 추가하십시오.
5. 아래의 데이터 상품의 상품 유형을 가변 상품으로 변경합니다.
6. 다음 값을 사용하여 "Type"이라는 속성을 추가합니다. Swedish | 핫 스톤 | 아로마 테라피 | 깊은 조직. "변형에 사용됨"을 선택해야합니다.
7. 그런 다음 변형 탭에서 données 제품의 드롭다운 항목을 사용하여 모든 속성에서 변형을 만듭니다.
8. 드롭 다운 메뉴에서 "정가 설정"을 선택하여 세 변수의 정가를 설정하십시오.
9. 대화 상자에서 "50"값을 입력하고 확인을 선택하십시오.
10. 완료되면 제품을 저장하거나 공개하십시오.
이제 사용자 정의 제품 아코디언으로 레이아웃 디자인을 시작할 준비가되었습니다.
Divi에서 동적 콘텐츠로 제품 정보 아코디언 생성
기본 제품 레이아웃은 다양한 Woo 모듈을 사용하여 제품 정보를 표시합니다. 이 예에서는 아코디언을 사용하여 제품에 대한 세 가지 주요 정보 (제품 설명, 추가 제품 정보 및 제품 리뷰)를 표시하려고합니다. 이 세 가지 콘텐츠는 현재 woo tabs 모듈에 표시됩니다. 우리가해야 할 일은 woo tabs 모듈을 제거하고 동적 콘텐츠를 통해 소개 된 것과 동일한 정보가있는 아코디언 모듈로 교체하는 것입니다.
방법은 다음과 같습니다.
먼저, 시각적 생성기를 배포하기 위해 프런트 엔드 시스템에서 Divi를 클릭하여 사용합니다. 그런 다음 Woo Tabs 모듈을 제거하십시오.
그런 다음 새 아코디언 모듈을 추가하여 탭을 교체하십시오.
아코디언 설정 팝업 창에서 첫 번째 아코디언의 기어 아이콘을 클릭하여 개별 아코디언 설정을 엽니 다.
제목 "제품 정보"를 입력하십시오.
다음으로, 본문 내용 입력 상자 위로 마우스를 가져 가서 동적 내용 아이콘을 클릭합니다.
동적 컨텐츠 목록에서 "제품 설명"을 선택하십시오.
백엔드에서 제품에 대해 정의한 제품에 대한 자세한 설명이 표시됩니다.
첫 번째 아코디언 컨텐츠가 배치되면 두 번째 아코디언 설정을 열고 다음을 업데이트하십시오.
- 제목 : 사양
그런 다음 동적 컨텐츠 "추가 제품 정보"를 본문에 추가하십시오.
두 번째 아코디언 컨텐츠가 준비되면 새 아코디언 요소를 추가하고 다음과 같이 아코디언 설정을 업데이트하십시오.
- 제목 : 추가 정보
그런 다음 동적 콘텐츠 "제품 리뷰"를 본문에 추가하여 제품 리뷰의 항목 / 콘텐츠를 포함합니다.
참고 : 라이브 페이지에서 콘텐츠를 보려면 하나 이상의 제품 리뷰를 추가했는지 확인하십시오.
Divi와 제품 설계 및 콘텐츠 계약
이제 제품 정보 아코디언에 제품 정보를 표시하는 동적 콘텐츠가 있으므로 기본 제공 아코디언 모듈의 설정을 사용하여 사용자 지정할 준비가되었습니다.
아코디언 모듈 설정을 열고 다음을 업데이트하십시오.
- 아이콘 색상 : # ff9375
- 아이콘 글꼴 크기 사용 : 예
- 아이콘 글꼴 크기 : 26px
- 배경 색상 전환 : #ffffff
- 열린 텍스트 제목 색상 : #ff9375
- 텍스트 제목 : #222222
- 타이틀 글꼴 : Lato
- 제목 글꼴 : Bold
- 제목 글꼴 스타일 : TT
- 텍스트 제목 크기 : 20px
- 제목의 글자 공간 : 0.2em
- 제목 줄의 높이 : 2em
- 바디 폰트 : Lato
- 본문 텍스트 크기 : 16px
- 본체 높이 : 1.8em
- 링크 텍스트 색상 : #ff9375
스타 등급과 같이 각 아코디언에 대한 동적 콘텐츠에있는 모든 링크를 대상으로합니다.
- 순서가없는 목록의 텍스트 색상 : # ff9375
- 순서가없는 목록 스타일 유형 : 원
- 정렬되지 않은 목록 항목 들여 쓰기 : 5 %
- 테두리의 너비 : 0px
- 상단 테두리의 너비 : 1px
- 상단 테두리의 색상 : #222222
마지막 단계에서는 작은 CSS 추출을 추가하여 아코디언 스케일 사이의 기본 여백을 추출해 보겠습니다.
고급 탭에서 다음 CSS를 Toggle 요소에 추가합니다.
margin-bottom: 0px;
이제 제품 정보 아코디언의 최종 디자인을 살펴 보겠습니다.
레이아웃의 최종 조정
아코디언 디자인에 맞게 레이아웃을 몇 가지 조정할 수 있습니다. 예를 들어, 각 모듈의 글꼴을 Lato로 조정하고, 변수 드롭 다운 목록 주위에 사용자 지정 테두리 및 테두리 반경을 추가하고, 그에게 어울립니다.
완료되면 다음이 최종 결과입니다.
위의 무료 다운로드로이 디자인을 포함했습니다. 직접 확인하시기 바랍니다. 동일한 결과를 얻으려면이 자습서에 설명 된 제품 구성이 있어야합니다.
참고: 대부분의 항목에 대한 기본 색상 WooCommerce Divi의 제품 색상은 테마 사용자 정의 설정의 보조 색상 값에서 상속됩니다. woo에 의해 색상 모듈이 업데이트되면 이 보조 색상을 업데이트하는 것이 더 쉬울 수 있습니다.
마지막 생각
우리가 배운 것처럼 Woo Mods는 동적 제품 정보를 추출하는 데 사용할 수있는 유일한 것이 아닙니다. Product Information Accordion은 Divi 모듈을 사용하여 고유하고 간결한 방식으로 제품 정보를 표시하는 방법을 보여주는 좋은 예입니다. 제품 페이지를위한 새롭고 흥미로운 아코디언 디자인을 자유롭게 탐색하십시오. 물론 아코디언 대신 여러 로커 모듈을 사용하여 유사한 결과를 얻을 수 있습니다.
