Divi 제품 하이라이트: DiviCommerce

DiviCommerce는 온라인 상점 구축을 위해 설계된 Divi용 타사 하위 테마입니다. 여기에는 군중 속에서 눈에 띄는 WooCommerce 상점을 만들기 위한 많은 페이지와 기능이 포함되어 있습니다. 이 게시물에서는 DiviCommerce의 페이지와 기능을 살펴보고 귀하의 요구에 맞는 Divi 하위 테마인지 결정하는 데 도움을 드리겠습니다.

DiviCommmerce 설치

DiviCommerce를 설치하는 것이 직관적이라는 것을 알았습니다. WordPress 테마와 마찬가지로 Divi를 활성 테마로 사용하여 설치하세요. 모양 > 테마 > 새 테마 추가를 선택하세요.

테마 업로드 를 선택하고 파일 선택 을 클릭한 후 컴퓨터에서 DiviCommerce 압축 파일을 선택 하고 지금 설치 를 클릭하세요.

그런 다음 활성화 를 클릭합니다.

마지막으로 DC Demo Import > Easy Demo Import 를 선택하세요.

가져올 파일을 선택하고 데모 콘텐츠 가져오기 를 클릭합니다. 기본 설정을 사용하는 것이 좋습니다.

데모 콘텐츠를 가져오면 데모 콘텐츠 제거 및 기능 가져오기 를 클릭하세요. 이제 귀하의 사이트는 필요한 크기를 표시하는 더미 이미지가 포함된 데모처럼 보입니다. 콘텐츠를 추가하면 사이트를 사용할 수 있습니다.

DiviCommerce 페이지

DiviCommerce에는 다양한 유형의 온라인 상점을 만들 수 있도록 설계된 6개의 홈 페이지를 포함하는 26개의 페이지가 있습니다. 또한 쇼핑 페이지 3개, 제품 페이지 2개, 결제 페이지 2개, 머리글 5개, 바닥글 2개 및 다양한 추가 항목이 포함되어 있습니다. 기능에는 Ajax 제품 필터, 장바구니 팝업, 제품 Ajax 검색, 팝업 양식 및 WooCommerce 변형 견본이 포함됩니다.

레이아웃을 살펴보겠습니다. 더 큰 레이아웃을 더 작은 그룹으로 나누어 다운로드한 하위 테마와 제품 데모의 이미지를 더 쉽게 관리하고 표시할 것입니다.

DiviCommerce 홈 원

히어로 섹션에는 CTA가 포함된 전체 화면 이미지가 표시됩니다.

다음은 신규 도착자를 위한 섹션입니다. 여기에는 제품 카드에 대한 호버 효과가 포함됩니다. 2열 섹션에는 상점으로 연결되는 이미지가 표시됩니다. 이미지에는 Ken Burns 효과가 포함되어 있습니다. 다음은 호버 효과가 있는 또 다른 상점 섹션입니다. 다음은 제품 데모의 상단 부분입니다.

첫 번째 홈 레이아웃의 하단에는 또 다른 전체 화면 CTA, 주요 제품, 고유한 거래 카운트다운, 블로그 및 이미지가 표시됩니다.

DiviCommerce 홈 2

두 번째 홈페이지에는 CTA가 포함된 전체 화면 슬라이더가 표시됩니다.

페이지 상단에는 쇼핑 카테고리에 대한 CTA, 한쪽에는 두 개의 제품이 있고 다른 한쪽에는 CTA가 있는 고유한 상점 섹션, 상점 섹션 및 전체 너비 이메일 가입 양식이 포함되어 있습니다. 모든 제품 카드와 버튼에는 호버 효과가 포함되어 있습니다.

Home Two의 후반부에는 상점 섹션, 전체 화면 배경 이미지 위의 카드에 있는 거래 카운트다운 타이머, 블로그 및 이미지가 표시됩니다.

DiviCommerce 홈 3

Home Three의 상단에는 전체 너비 CTA, 신제품이 포함된 매장 섹션, 카테고리 CTA에 대한 2개 열에 4개의 이미지가 있는 섹션 및 넓은 이메일 양식이 표시됩니다.

레이아웃의 후반부에는 섹션 상점 섹션, 배경 이미지가 있는 블로그 섹션, 고객 이미지가 있는 섹션이 표시됩니다.

DiviCommerce 홈 포

네 번째 홈 페이지에는 두 개의 이미지가 있는 고유한 영웅 섹션이 포함되어 있습니다. 하나가 다른 것보다 길고 텍스트와 CTA가 두 이미지와 겹칩니다. 또한 카드 하단에 제목이 있는 카테고리 이미지와 상점 섹션도 포함되어 있습니다.

레이아웃의 후반부에는 두 개의 큰 카테고리 CTA, 상점 섹션, 카운트다운 타이머가 있는 거래 섹션, 배경 이미지가 있는 블로그가 표시됩니다.

DiviCommerce 홈 파이브

다섯 번째 홈 페이지에는 오른쪽에 CTA가 있는 전체 화면 히어로 섹션이 표시됩니다. 여기에는 5개의 작은 이미지와 3개의 큰 이미지가 포함된 넓은 카테고리 이미지 섹션이 있습니다. 세 개의 상점 섹션에는 새로운 제품, 판매 중인 제품, 베스트셀러가 표시됩니다. 이 레이아웃에는 전체 너비 이메일 양식과 고객 이미지도 포함됩니다.

DiviCommerce 홈 식스

여섯 번째 홈페이지가 가장 독특하다. 영웅 섹션에 판매 카운트다운 타이머가 표시됩니다. 각 상점 섹션은 섹션 왼쪽에 큰 텍스트로 제목을 배치합니다. 그 다음에는 이미지와 서로 겹치는 제목과 버튼을 포함하는 두 개의 이미지 CTA가 옵니다. 또 다른 카테고리 섹션에는 마우스를 올리면 사라지는 상자 그림자가 있는 이미지가 포함되어 있습니다. 이 레이아웃에는 이메일 양식과 고객 이미지도 포함됩니다.

DiviCommerce Shop One

첫 번째 쇼핑 페이지에는 페이지 제목이 포함된 전체 너비 이미지가 표시되고, 그 뒤에 정렬 필터가 있는 4개 열의 제품과 왼쪽 사이드바가 표시됩니다. 사이드바에는 카테고리, 크기 및 색상 옵션이 포함되어 있습니다. 제품을 가리키면 상자 그림자가 표시됩니다.

DiviCommerce 매장 2

Shop Two는 전체 너비 이미지를 포함하고 제품을 단일 열에 배치하며 사용자가 상점 섹션 위에 카테고리, 크기 및 색상별로 필터링할 수 있는 흥미로운 제품 필터를 추가합니다. 또한 정렬 필터가 포함되어 있으며 페이지 하단에 페이지 매김이 추가됩니다. 마우스를 올리면 필터가 열립니다.

DiviCommerce 매장 3

Shop Three에는 전체 너비 이미지가 포함되어 있지 않습니다. 이미지와 함께 페이지 상단에 상점 카테고리를 배치합니다. 상점 섹션에는 사이드바, 필터, 호버 효과 및 페이지 매기기가 포함되어 있습니다.

제품 페이지 1

첫 번째 제품 페이지의 왼쪽에는 큰 추천 이미지가 표시되고 오른쪽에는 제품 옵션이 표시됩니다. 스크롤해도 제품 옵션은 그대로 유지됩니다. 페이지 상단의 이동 경로는 고객이 탐색 구조에서 어디에 있는지 보여줍니다.

특집 이미지 다음에는 썸네일 이미지 세트와 또 다른 큰 이미지가 있습니다. 큰 이미지가 제품 옵션 영역에 도달하면 옵션이 페이지와 함께 스크롤됩니다.

다음은 설명 및 배송 정보와 리뷰 섹션입니다.

마지막으로 고객이 직접 리뷰를 추가할 수 있는 섹션이 있습니다.

제품 페이지 2

두 번째 제품 페이지는 첫 번째 디자인을 따르지만 토글의 제품 옵션 영역에 설명 및 배송 정보를 추가합니다.

페이지 하단에는 고객이 관심을 가질 만한 제품 섹션이 추가됩니다. 제품 카드에는 마우스를 올리면 상자 그림자가 추가됩니다.

장바구니 팝업

장바구니에 상품을 담으면 장바구니 팝업이 나타납니다. 여기에는 쿠폰 코드를 추가하는 필드, 유사한 제품이 있는 슬라이더 및 결제 버튼이 포함되어 있습니다.

장바구니 페이지

DiviCommerce에는 스타일이 지정된 장바구니 페이지가 포함되어 있습니다. 장바구니 정보에는 상자 그림자가 포함됩니다. 버튼은 하위 테마의 디자인과 일치하도록 빨간색입니다.

결제 페이지 1

두 개의 결제 페이지가 있습니다. 첫 번째 결제 페이지입니다. 결제 양식 오른쪽에 주문 및 결제 정보가 표시됩니다. 두 번째 결제 페이지에서는 이 정보를 양식 아래에 배치하고 회사 정보를 양식 오른쪽에 배치합니다.

회사 소개

회사 소개 페이지에는 눈에 띄는 각도 이미지가 표시됩니다. 이 페이지에는 전체 너비 이미지, 여러 텍스트 영역 및 두 개의 큰 이미지도 포함되어 있습니다.

문의하기

문의처 페이지에는 광고문과 함께 연락처 정보가 표시되고, 문의 양식이 표시되며, FAQ 토글이 표시되고, 전체 너비 지도가 포함되어 있습니다.

DiviCommerce 헤더

DiviCommerce에는 5개의 헤더가 포함되어 있습니다. 여기에는 사용, 삭제 또는 다른 헤더로 교체할 수 있는 여러 섹션이 포함됩니다.

헤더 1

첫 번째 헤더는 상단에 판매 표시줄을 추가하고 오른쪽에는 검색, 계정 로그인 및 팝업 장바구니 링크를 포함합니다. 왼쪽에는 로고와 메뉴가 있습니다.

헤더 2

헤더 2는 상단 표시줄에 검색창을 배치합니다. 장바구니와 메뉴가 서로 바뀌었습니다.

헤더 3

세 번째 헤더는 중앙과 하단의 새 막대에 메뉴를 배치하고 검색을 중앙으로 이동합니다.

헤더 4

네 번째 헤더는 로고와 메뉴의 중앙에 위치하며 검색은 왼쪽에, 카트는 오른쪽에 배치됩니다.

헤더 5

마지막으로 다섯 번째 헤더는 검색 상자를 상단 표시줄에 배치하고 로고와 메뉴를 왼쪽으로 이동하며 장바구니를 오른쪽에 배치합니다.

DiviCommerce 바닥글

DiviCommerce에는 두 개의 바닥글이 포함되어 있습니다. 둘 다 전자상거래에 적합합니다.

바닥글 1

첫 번째 바닥글에는 두 개의 섹션이 포함되어 있습니다. 첫 번째 섹션에는 텍스트로 제공되는 정보에 대한 설명이 포함되어 있습니다. 두 번째 섹션에는 로고용 이미지 모듈, 소셜 미디어 팔로우 모듈, 정보 및 링크용 텍스트 모듈이 포함되어 있습니다.

바닥글 2

두 번째 바닥글은 상단 섹션을 이메일 양식으로 대체합니다. 두 번째 섹션에서는 소셜 미디어 팔로우 버튼을 해당 열의 오른쪽으로 이동합니다.

DiviCommerce 팝업

DiviCommerce에는 Divi Builder로 만든 팝업과 Popup Maker라는 플러그인이 포함되어 있습니다. 팝업 자체에는 한쪽에는 가입 CTA가 있고 다른 쪽에는 이미지가 있는 이메일 양식이 표시됩니다. 오버레이와 닫기 버튼이 포함되어 있습니다.

DiviCommerce 검색

Ajax 검색에는 입력하는 카테고리와 제품이 나열됩니다. 검색 속도가 빠르고 결과가 열려 있으므로 고객은 결과에 있는 아무 항목이나 클릭할 수 있습니다.

DiviCommerce 구입처

DiviCommerce는 Divi Marketplace에서 25달러에 구입할 수 있습니다. 여기에는 1년 지원 및 업데이트, 무제한 웹사이트 사용, 30일 환불 보장이 포함됩니다.

DiviCommerce에 대한 생각 끝내기

이것이 Divi의 DiviCommerce 하위 테마에 대한 우리의 모습입니다. 이 하위 테마에는 모든 유형의 WooCommerce 상점을 구축할 수 있는 많은 페이지와 레이아웃이 포함되어 있습니다. 하위 테마가 포함된 5개의 추가 플러그인에는 카트, 팝업, 필터 등 흥미로운 기능이 많이 추가되어 있습니다. Ajax 기능은 빠릅니다. 웹사이트에 우아하고 유용한 도구를 많이 제공하고 다른 웹사이트보다 돋보입니다.

우리는 당신의 의견을 듣고 싶습니다. DiviCommerce 하위 테마를 사용해 보셨나요? 의견을 통해 이에 대해 어떻게 생각하는지 알려주세요.