Divi는 다음과 호환되도록 설계되었습니다. WooCommerce. 통합하는 WooCommerce의 최신 버전을 설치해야 합니다. WooCommerce.

WooCommerce는 플러그인입니다. 전자 상거래 가장 좋은 기능과 인터페이스를 갖추고 있으며 최상의 코딩 방법을 따르므로 권장합니다. 플러그인을 활성화하면 WordPress 대시보드에 "WooCommerce" 및 "제품"이라는 두 개의 새로운 섹션이 추가된 것을 볼 수 있습니다. 이 영역을 사용하여 전자 상거래 설정을 조정하고 새 제품을 게시할 수 있습니다. 당신은 찾을 수 있습니다 선적 서류 비치 완전한 여기 WooCommerce에서 .

빌더에는 다양한 WooCommerce 모듈이 포함되어 있지만 빌더 없이도 WooCommerce 자체를 사용할 수 있습니다. 설명서에 언급된 대로 Checkout, Shopping Cart 등에 대한 표준 페이지를 만들 수 있습니다. 우커머스 카테고리에 직접 연결하거나 WooCommerce 단축 코드 Divi 텍스트 모듈에서. 그것은 당신에게 무엇이든 할 수있는 자유를줍니다.

페이지에 상점 모듈을 추가하는 방법

페이지에 상점 모듈을 추가하려면 먼저 Divi Builder로 이동해야 합니다. 일단 디비 테마 웹사이트에 설치하면 버튼이 표시됩니다. Divi Builder 사용 새 페이지를 만들 때마다 게시물 편집기 위에 있습니다. 이 버튼을 클릭하여 Divi Builder를 활성화하고 모든 Divi Builder 모듈에 액세스하십시오. 그런 다음 버튼을 클릭하십시오 비주얼 빌더 사용 시각적 모드에서 생성기를 시작합니다. 버튼을 클릭 할 수도 있습니다. 비주얼 빌더 사용 WordPress 대시 보드에 연결된 경우 포 그라운드에서 웹 사이트를 탐색 할 때

Visual Builder에 들어가면 회색 더하기 버튼을 클릭하여 페이지에 새 모듈을 추가할 수 있습니다. 새 모듈은 라인 내부에만 추가할 수 있습니다. 새 페이지를 시작하는 경우 먼저 페이지에 행을 추가해야 합니다. Divi의 Lines 및 Sections 요소 사용에 대한 훌륭한 자습서가 있습니다.

모듈 목록에서 상점 모듈을 찾아 클릭하여 페이지에 추가하십시오. 모듈 목록은 검색 가능합니다. 즉, "shop"이라는 단어를 입력한 다음 Enter 키를 눌러 자동으로 상점 모듈을 찾아 추가할 수 있습니다! 모듈이 추가되면 모듈 옵션 목록이 표시됩니다. 이러한 옵션은 세 가지 주요 그룹으로 구분됩니다. 내용 , 임신 et 고급 .

사용 사례 예: Shop 모듈을 사용하여 홈페이지에서 최신 제품 소개

이 예에서는 shop 모듈을 사용하여 홈페이지에 최신 제품을 표시하겠습니다.

다음은 네 가지 제품이 제시된 페이지입니다.

시작하자.

비주얼 빌더를 사용하여 전체 너비 행(1열)이 있는 일반 섹션을 추가합니다. 행 매개변수를 변경하여 사용자 지정 거터 너비 2로 전체 너비로 만듭니다.

다음으로 상점 모듈을 라인에 추가하십시오.

다음과 같이 모듈 설정을 업데이트합니다.

콘텐츠 옵션

유형: 최근 제품
제품 수 : 4

디자인 옵션

아이콘 호버 색상: #ea1d63
제목 글꼴: Open Sans
제목 글꼴 크기: 24px
가격 글꼴: Open Without
가격 글꼴 크기: 20px

고급 옵션 (사용자 정의 CSS)

역가 :

텍스트 정렬: 가운데;
배경: #fff;
margin-top: -10px! 중요한;

그랑프리 :

텍스트 정렬: 가운데;
배경: #fff;
패딩 하단: 15px;

그게 다야! 최종 결과는 다음과 같습니다.

콘텐츠 옵션 저장

콘텐츠 탭에서 텍스트, 이미지 및 아이콘과 같은 모듈의 모든 콘텐츠 요소를 찾을 수 있습니다. 제어하는 모든 것 무엇 이 탭에는 모듈에 항상 표시됩니다.

타입

제품 피드에 표시 할 제품 유형을 선택하십시오. 모든 제품을 시간순으로 표시하는 최근 제품, 추천 제품, 판매 제품, 최고 판매 제품 또는 최고 평점 제품 중에서 선택할 수 있습니다.

제품 수

표시 할 제품 수를 정의하십시오. 이 모듈에 표시하려면 제품을 만들어야합니다.

카테고리 포함

포함하려는 카테고리를 선택하십시오.

열 수

상점 모듈에 표시 할 열 수를 선택하십시오. 4 열의 행에는 1 개의 열을 사용해야합니다. 행 공간의 3/3를 차지하는 열에는 4 개의 열을 사용해야합니다. 열 2는 조명 공간의 1/2을 차지하는 열에 사용되어야합니다. 행 공간의 1/4 열에 하나의 열을 사용해야합니다.

재정렬

제품 주문 방법을 선택하십시오. 기본적으로 정렬, 인기도, 평점, 날짜, 낮은 가격순, 높은 가격순, 높은 가격순, 최신순, 최신 순순으로 정렬을 선택합니다.

관리 라벨

쉽게 식별 할 수 있도록 생성자의 모듈 레이블이 변경됩니다. Visual Builder에서 WireFrame보기를 사용하면 이러한 레이블이 Divi Builder 인터페이스의 모듈 블록에 나타납니다.

워크샵 디자인 옵션

디자인 탭에서 글꼴, 색상, 크기 및 간격과 같은 모듈에 대한 모든 스타일 옵션을 찾을 수 있습니다. 모듈의 모양을 변경하는 데 사용할 탭입니다. 각 Divi 모듈에는 무엇이든 변경하는 데 사용할 수있는 긴 디자인 설정 목록이 있습니다.

오버레이 아이콘

쇼핑 모듈의 항목 위로 마우스를 가져 가면 오버레이 아이콘이 나타납니다. 이 설정에서 색상 선택기를 사용하여이 아이콘에 사용되는 색상을 조정할 수 있습니다.

오버레이의 색상

상점 모듈의 항목 위로 마우스를 가져 가면 이미지 상단과 상점 제목 텍스트 및 아이콘 아래에 오버레이 색상이 나타납니다. 기본적으로 반투명 흰색이 사용됩니다. 다른 색상을 사용하려면이 설정에서 색상 선택기를 사용하여 색상을 조정할 수 있습니다.

선택기 아이콘

여기에서 방문자가 모듈의 상점 항목을 가리킬 때 표시 할 사용자 정의 아이콘을 선택할 수 있습니다.

판매 배지의 색상

상품이 판매 중이면 상품 이미지에 판매 배지가 표시됩니다. 이 설정을 사용하면 배지 배경에 사용되는 색상을 조정할 수 있습니다.

제목 글꼴

드롭 다운 메뉴에서 원하는 글꼴을 선택하여 제목 텍스트의 글꼴을 변경할 수 있습니다. Divi는 Google Fonts에서 제공하는 수십 가지 훌륭한 글꼴을 제공합니다. 기본적으로 Divi는 페이지의 모든 텍스트에 Open Sans 글꼴을 사용합니다. 굵게, 기울임 꼴, 대문자 및 밑줄 옵션을 사용하여 텍스트 스타일을 사용자 지정할 수도 있습니다.

제목 글자 크기

여기에서 제목 텍스트의 크기를 조정할 수 있습니다. 범위 슬라이더를 드래그하여 텍스트 크기를 늘리거나 줄이거 나 슬라이더 오른쪽의 입력 필드에 원하는 텍스트 크기 값을 직접 입력 할 수 있습니다. 입력 필드는 다양한 측정 단위를 지원하므로 크기 값에 따라 "px"또는 "em"을 입력하여 단위 유형을 변경할 수 있습니다.

제목 텍스트 색상

기본적으로 Divi의 모든 텍스트 색상은 흰색 또는 진한 회색으로 나타납니다. 제목의 텍스트 색상을 변경하려면이 옵션을 사용하여 색상 선택기에서 원하는 색상을 선택합니다.

제목 글자의 간격

문자 간격은 각 문자 사이의 간격에 영향을줍니다. 제목 텍스트에서 각 문자 사이의 간격을 늘리려면 범위 슬라이더를 사용하여 간격을 조정하거나 슬라이더 오른쪽의 입력 필드에 원하는 간격 크기를 입력합니다. 입력 필드는 다양한 측정 단위를 지원하므로 크기 값에 따라 "px"또는 "em"을 입력하여 단위 유형을 변경할 수 있습니다.

제목 줄의 높이

줄 높이는 제목 텍스트의 각 줄 사이의 간격에 영향을줍니다. 각 줄 사이의 간격을 늘리려면 범위 슬라이더를 사용하여 간격을 조정하거나 입력 필드에 원하는 간격 크기를 입력하십시오. 커서 오른쪽에 있습니다. 입력 필드는 다양한 측정 단위를 지원하므로 크기 값에 따라 "px"또는 "em"을 입력하여 단위 유형을 변경할 수 있습니다.

가격 정책

드롭 다운 메뉴에서 원하는 글꼴을 선택하여 가격 텍스트의 글꼴을 변경할 수 있습니다. Divi에는 Google Fonts에서 제공하는 수십 가지 훌륭한 글꼴이 함께 제공됩니다. 기본적으로 Divi는 페이지의 모든 텍스트에 Open Sans 글꼴을 사용합니다. 굵게, 기울임 꼴, 대문자 및 밑줄 옵션을 사용하여 텍스트 스타일을 사용자 지정할 수도 있습니다.

가격 글꼴 크기

여기에서 가격 텍스트의 크기를 조정할 수 있습니다. 범위 슬라이더를 드래그하여 텍스트 크기를 늘리거나 줄이거 나 슬라이더 오른쪽에있는 입력 필드에 원하는 텍스트 크기 값을 직접 입력 할 수 있습니다. 입력 필드는 다양한 측정 단위를 지원합니다. 즉, 크기 값에 따라 "px"또는 "em"을 입력하여 단위 유형을 변경할 수 있습니다.

가격 텍스트 색상

기본적으로 Divi의 모든 텍스트 색상은 흰색 또는 진한 회색으로 나타납니다. 가격 텍스트의 색상을 변경하려면이 옵션을 사용하여 색상 선택기에서 원하는 색상을 선택하십시오.

가격 편지의 간격

문자 간격은 각 문자 사이의 간격에 영향을줍니다. 가격 텍스트에서 각 문자 사이의 간격을 늘리려면 범위 슬라이더를 사용하여 간격을 조정하거나 슬라이더 오른쪽의 입력 필드에 원하는 간격 크기를 입력하십시오. 입력 필드는 다양한 측정 단위를 지원합니다. 즉, 크기 값에 따라 "px"또는 "em"을 입력하여 단위 유형을 변경할 수 있습니다.

가격 라인의 높이

행 높이는 가격 책정 텍스트의 각 행 사이의 공간에 영향을줍니다. 각 행 사이의 공간을 늘리려면 범위 슬라이더를 사용하여 공간을 조정하거나 입력 필드에 원하는 간격 크기를 입력하십시오. 커서 오른쪽에 있습니다. 입력 필드는 다양한 측정 단위를 지원합니다. 즉, 크기 값에 따라 "px"또는 "em"을 입력하여 단위 유형을 변경할 수 있습니다.

가게의 고급 옵션

고급 탭에는 사용자 정의 CSS 및 HTML 속성과 같이 숙련 된 웹 디자이너가 유용하다고 생각할 수있는 옵션이 있습니다. 여기에서 모듈의 여러 요소에 사용자 정의 CSS를 적용 할 수 있습니다. 또한 사용자 정의 CSS 클래스 및 ID를 모듈에 적용 할 수 있으며 이는 하위 테마의 style.css 파일에서 모듈을 사용자 정의하는 데 사용할 수 있습니다.

CSS ID

이 모듈에 사용할 선택적 CSS ID를 입력하십시오. ID를 사용하여 사용자 정의 CSS 스타일을 만들거나 페이지의 특정 섹션에 연결할 수 있습니다.

CSS 클래스

이 모듈에 사용할 선택적 CSS 클래스를 입력하십시오. CSS 클래스를 사용하여 사용자 지정 CSS 스타일을 만들 수 있습니다. 공백으로 구분하여 여러 클래스를 추가 할 수 있습니다. 이러한 클래스는 Divi 하위 테마 또는 Divi 테마 옵션 또는 Divi Builder 페이지 설정을 사용하여 페이지 또는 웹 사이트에 추가하는 사용자 정의 CSS 스타일 시트에서 사용할 수 있습니다.

맞춤 CSS

사용자 정의 CSS는 모듈 및 모듈의 내부에 적용 할 수도 있습니다. 사용자 정의 CSS 섹션에는 사용자 정의 CSS 스타일 시트를 각 요소에 직접 추가 할 수있는 텍스트 필드가 있습니다. 이러한 설정의 CSS 항목은 이미 스타일 태그로 래핑되어 있습니다. 따라서 세미콜론으로 구분 된 CSS 규칙을 입력하십시오.

시계

이 옵션을 사용하면 모듈이 표시되는 장치를 제어 할 수 있습니다. 태블릿, 스마트 폰 또는 데스크톱에서 개별적으로 모듈을 비활성화하도록 선택할 수 있습니다. 다른 장치에서 다른 모드를 사용하거나 페이지에서 특정 요소를 제거하여 모바일 디자인을 단순화하려는 경우 유용합니다.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target ="blank "layout =" 확장된 "align ="center "font_family =" Raleway "font_weight = 700 ″ 스타일 = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DIVI 테마 다운로드 [/ vcex_button] [/ width_column] [»vc_column] » 1/2 ″] [vcex_button URL = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" 대상 = "빈" 레이아웃 = "확장" 정렬 = "중앙" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] 템플릿 다운로드 DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

다른 Divi 자습서

유사 상품

1 코멘트

프레데릭 1년 2019월 17일 오전 42시 XNUMX분

친애하는 베일,

귀하의 기여에 감사드립니다.
스토어 모듈에 대한 질문이 있으며 답변 해 주시면 매우 기쁩니다.
그리고 개별적으로 선택한 제품이 내 상점 모듈에 표시되기를 원합니다. 나는 이것이“스타 제품”을 채택함으로써 달성 될 수 있다고 생각했다. 하지만이 옵션을 선택한 후 모듈에 대해 원하는 제품을 선택하는 방법을 찾을 수 없습니다. 내가 뭔가를 놓치고 있습니까? 설명이 있습니까?

진심으로, Frederik
답변

포스터 르 논평 답장을 취소

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

Divi 튜토리얼 : 상점 모듈 사용 방법