Divi 플러그인 하이라이트: Divi BodyCommerce

Divi BodyCommerce는 제품 페이지에서 체크아웃 페이지 및 그 사이의 모든 것에 이르기까지 상점 디자인을 제어할 수 있는 Divi용 타사 플러그인입니다. 전환을 염두에 두고 설계되었으며 Divi Builder를 사용하여 매장 디자인을 완전히 제어할 수 있습니다.

플러그인이 이것만큼 많은 모듈과 기능을 제공하면 사용하기에 압도적인 경향이 있습니다. 그러나 모든 것이 따라하기 쉽고 내가 본 플러그인에 대한 것보다 더 많은 단계별 비디오가 있으므로 이 문제는 문제가 되지 않았습니다. 이 기사에서 우리는 Divi BodyCommerce를 살펴보고 그것이 무엇을 할 수 있고 얼마나 사용하기 쉬운지 알아볼 것입니다.

Divi BodyCommerce 설치 및 설정

정상적으로 플러그인을 업로드하고 활성화합니다. 라이선스를 활성화하려면 대시보드 메뉴에서 Divi 엔진 > BodyCommerce 라이선스 로 이동합니다.

대시보드 메뉴에서 BodyCommerce 를 클릭하면 설정이 열립니다. 이것은 WooCommerce에서 볼 것으로 예상되는 것과 같은 종류의 설정입니다. 여기에서 페이지를 선택할 수 있습니다. 이 페이지에 대한 레이아웃을 만든 후에는 이 설정 페이지로 이동하여 선택하십시오. 페이지를 전체 너비로 설정하고 각 카테고리에 대해 다른 제품 템플릿을 갖도록 선택할 수도 있습니다.

Divi BodyCommerce 모듈

53개의 새로운 모듈이 Divi Builder에 추가되었습니다. 이것들은 제품 페이지, 계정 페이지, 아카이브 페이지, 장바구니 등 WooCommerce 스토어의 모든 측면을 디자인하는 데 필요한 모든 요소입니다. 색상으로 구분되어 놓칠 수 없습니다. 색상은 실제로 모듈의 용도를 보여줍니다. 예를 들어 빨간색 모듈은 제품 페이지용입니다. 일부는 그라디언트를 사용하여 두 가지 유형의 페이지에서 작동함을 보여줍니다. 이 이미지는 처음 24개의 모듈을 보여줍니다.

다음은 29개의 모듈입니다. 모듈은 상향 판매, 교차 판매, 슬라이더, 관련 제품, 회전 목마, 갤러리, 공유, 탭, 이동 경로 등과 같은 페이지 요소를 추가합니다. 루프는 상점 페이지를 구축하기 위한 제품 목록을 생성합니다. 여기에는 예상되는 콘텐츠, 디자인 및 고급 탭과 옵션이 포함됩니다.

주 – 페이지가 로드되지 않으면 해당 페이지에서 작동하도록 설계되지 않은 모듈을 해당 페이지에서 사용하고 있지 않은지 확인하십시오. 일부 모듈은 전역적이며 모든 페이지에서 작동하지만 다른 모듈은 특정 유형의 페이지용입니다. 예를 들어 루프 페이지에서는 제품 페이지 모듈을 사용할 수 없습니다.

페이지 생성 및 할당

페이지를 만들고 해당 카테고리의 기본값으로 설정하는 방법을 살펴보겠습니다. 먼저 Divi 라이브러리에서 레이아웃을 생성합니다.

다음으로 대시보드 메뉴에서 Divi Engine > BodyCommerce 로 이동합니다. 만들고 있는 페이지 유형에 대한 탭을 선택한 다음 해당 페이지에 대한 레이아웃을 선택합니다. 원하는 만큼 레이아웃을 만들고 다양한 유형의 페이지와 개별 범주에 사용할 수 있습니다.

Divi BodyCommerce 예제

다음은 내가 만든 몇 가지 예입니다. 이것은 이 플러그인으로 수행할 수 있는 작업의 작은 샘플일 뿐입니다.

Divi BodyCommerce 스토어 페이지

상점 페이지의 경우 방금 제품 루프 아카이브 페이지 모듈을 추가했습니다.

다음은 기본 설정이 있는 페이지입니다. 각 요소는 Divi Builder로 조정할 수 있습니다.

여기가 Tea Shop 레이아웃 안에 있습니다. 제한을 제외한 기본 설정입니다. 6개의 상품을 보여주도록 설정했습니다.

일부 요소를 라이브로 조정할 수 있습니다.

판매 배지와 버튼에 녹색 배경을 추가하고 6열을 표시하도록 레이아웃을 설정하고 제품에 상자 그림자를 추가하고 녹색 오버레이를 추가했습니다. 레이아웃 옵션의 수에 깊은 인상을 받았습니다.

이것은 블로그 스타일 레이아웃입니다. 더 긴 제품 설명이 있으면 좋을 것입니다.

Divi BodyCommerce 제품 페이지

Divi 라이브러리에서 제품 페이지 레이아웃을 만들고 BodyCommerce 설정에서 기본 레이아웃으로 선택했습니다. 이것은 모듈이 무엇을 할 수 있는지에 대한 아이디어를 얻기 위한 기본 레이아웃입니다.

간단하지만 시작하기 좋은 곳입니다. 제품의 제목, 갤러리 및 슬라이더를 보여줍니다.

나는 무작위로 몇 개의 제품 페이지와 글로벌 모듈을 더 던졌다.

BodyCommerce로 할 수 있는 일을 보여주기 시작했습니다. 이 페이지에서 Divi를 해봅시다.

다음은 Divi Builder로 몇 가지 간단한 조정입니다. 내가 한 일은 섹션과 행에 배경을 추가하고 버튼과 검색 필드의 테두리를 조정한 것뿐입니다.

여기에서는 관련 제품에 대한 새 행을 추가하고 검색 모듈을 해당 행으로 이동했습니다. 상품의 레이아웃도 변경하고 상품 이미지도 갤러리로 변경했습니다. 세로 스크롤로 설정했습니다. WooCommerce 데모에 이 제품에 대한 더 많은 이미지가 있으면 왼쪽의 세로 열에 표시됩니다. 이것은 제품 페이지에서 수행할 수 있는 조정 수준의 표면을 긁는 것일 뿐입니다.

Divi BodyCommerce 장바구니

Bakery 레이아웃의 연락처 페이지를 사용하여 장바구니 페이지를 만들고 있습니다. Cart Products 및 Cart Totals 모듈을 사용하고 있습니다. Visual Builder에서 볼 때 콘텐츠를 표시하지 않지만 Visual Builder에서 계속 빌드할 수 있습니다. 모듈은 교차 판매와 같은 많은 다른 기능을 제공합니다.

다음은 기본 설정을 사용하는 장바구니입니다. 단일 2열 레이아웃에 두 개의 모듈이 있습니다.

다음은 몇 가지 변경 후 장바구니 페이지입니다. 단일 열 레이아웃으로 변경하고 오른쪽과 왼쪽에 약간의 간격을 추가하고 레이아웃에서 배경색을 추가하고 레이아웃에 맞게 버튼 색상과 텍스트 색상을 변경하고 상자 그림자를 추가했습니다.

Divi BodyCommerce 문서

설명서는 개발자 웹 사이트에서 서면 형식으로 제공되며 YouTube에서는 일련의 비디오와 함께 제공됩니다. 둘 다 포함되어 있어서 좋아요. 링크는 Divi 엔진 대시보드 메뉴에서 제공됩니다. 개발자 웹사이트에서 기능 중 하나를 클릭하여 비디오를 볼 수도 있습니다. 이것은 필요한 비디오를 찾는 흥미로운 구조를 만듭니다. 실제로 보고 싶었던 영상을 찾은 방법입니다.

디비 바디커머스 가격

BodyCommerce에는 선택할 수 있는 세 가지 라이선스가 있습니다.

• 1개 사이트 – £24
• 5개 사이트 – £50
• 무제한 사이트 – £96

개발자 웹사이트에서 BodyCommerce를 구입할 수 있습니다.

마무리 생각

Divi BodyCommerce는 WooCommerce 제품 및 페이지 디자인에 대한 인상적인 수준의 제어를 제공합니다. 나는 그것이 무엇을 할 수 있는지 거의 건드리지 않았습니다. 로그인 화면, 배지, 계정 페이지, 감사 페이지, 양식, 검색 페이지 등을 사용자 지정할 수도 있습니다. 이메일 템플릿, 사용자 정의 아이콘, 견본 및 장바구니용 AJAX도 포함됩니다. 카테고리별로 다른 레이아웃을 만들 수 있어서 좋아요.

모듈과 레이아웃은 사용하기 쉬웠습니다. 나는 내 예제를 만들기 위해 개발자 페이지의 비디오를 따라갔습니다. 동영상은 상세하고 따라하기 쉬웠습니다. 내가 원하는 유형의 페이지를 만드는 데 문제가 없었습니다.

BodyCommerce는 내가 지금까지 본 어떤 WooCommerce/Divi 플러그인보다 더 많은 도구와 사용자 정의를 제공합니다. Divi와 함께 WooCommerce를 사용하고 WooCommerce 페이지를 사용자 정의하려는 경우 BodyCommerce가 쉬운 선택입니다.

우리는 당신의 의견을 듣고 싶습니다. Divi 및 WooCommerce용 BodyCommerce를 사용해 보셨습니까? 의견에 대해 어떻게 생각하는지 알려주십시오.

Letters-Shmetters/Shutterstock.com을 통한 주요 이미지