주요 내용으로 건너 뛰기

Divi Shop 모듈을 모바일에서 동적 제품 맵으로 변환

Divi : 사용하기 가장 쉬운 WordPress 테마

Elementor로 웹 사이트를 쉽게 만들 수 있습니다

Elementor를 사용하면 전문적인 모양으로 웹 사이트 디자인을 쉽게 만들 수 있습니다. 자신이 할 수있는 일에 대해 비용을 지불하지 마십시오. [무료]

신규 출시이든 준비중인 판매이든 특정 제품에 대한 랜딩 페이지를 만들 때 어느 시점에서 Shop 모듈을 사용할 가능성이 높습니다. Divi의 Shop 모듈을 사용하면 WooCommerce 플러그인에서 제품을 동적으로 추출하고 Divi의 기본 제공 옵션을 사용하여 스타일을 지정할 수 있습니다. 

이제 기본적으로 상점 모듈에는 작은 화면 크기에서 모두 두 개의 열로 변환되는 몇 개의 열 구조가 제공됩니다. 즉, 더 많은 제품을 표시할수록 랜딩 페이지의 다음 부분으로 이동하기 위해 더 많은 수직 스크롤이 필요합니다.

현대 웹 디자인에서 방문자의 선호도에 따라 세로 스크롤 및 표시 요소를 제한하는 데 자주 사용되는 기술은 마그네틱 카드를 사용하는 것입니다. 이 튜토리얼에서는 플러그인을 사용하지 않고 Divi 스토어 모듈을 더 작은 화면 크기의 동적 제품 맵으로 변환하는 방법을 보여줍니다. 

제품 섹션의 다양한 요소를 준비하고 소량의 CSS 코드를 사용하여 스윕 효과를 활성화하는 것으로 시작합니다. 방문자를 압도하지 않으면 서 방문 페이지에서 다양한 제품을 보여줄 수있는 좋은 방법입니다. 

가능한 결과

튜토리얼을 시작하기 전에 결과를 살펴 보겠습니다. 제품의 마그네틱 카드는 태블릿과 모바일에서만 활성화됩니다. 데스크탑에서는 Shop 모듈에서 결정한 열 구조를 유지합니다.

Divi 제품 모듈 상점 애니메이션

1. WooCommerce 및 제품 페이지 구성

이 튜토리얼의 Divi 부분에 들어가기 전에 WooCommerce 플러그인이 웹 사이트에 설치되고 활성화되어 있어야합니다. 아직하지 않은 경우 쇼핑 모듈에 표시 할 제품 수에 따라 여러 제품을 추가합니다.

woocommerce 제품 만들기

2. 새 페이지를 만들고 편지지 페이지 레이아웃을 다운로드하십시오.

새 페이지 만들기

제품이 준비되면 WordPress 백엔드에 새 페이지를 추가합니다. 페이지에 제목을 지정하고 페이지를 게시하고 Divi Visual Builder를 활성화하십시오.

divi 페이지 만들기
새 divi 페이지 만들기

방문 페이지 레이아웃 다운로드

새 페이지 내에서 사전 설정 레이아웃으로 이동하여 편지지 랜딩 페이지 레이아웃을 다운로드합니다. 이 특정 레이아웃을 사용하지만이 레이아웃 내부에 상점 모듈을 추가하거나 찾는 한 원하는 다른 레이아웃을 자유롭게 사용할 수 있습니다.

divi 레이아웃 선택

3. 상점 섹션 수정

상점 모듈이있는 섹션을 찾으십시오.

편지지 홈 페이지 레이아웃을 사용하여 만든 새 페이지로 스크롤하면 상점 모듈이있는 섹션이 나타납니다. 이 자습서의 다음 단계에서이 섹션을 사용합니다.

상점 모듈 찾기

라인 설정

반응적인 사이징

Shop 모듈이 포함 된 행의 행 설정을 열어 시작합니다. 앞서 언급했듯이 데스크탑에 동일한 디자인을 유지하고 더 작은 화면 크기에서만 제품의 마그네틱 카드를 활성화합니다. 

간편한 환경을 만들기 위해 크기 설정에서 너비를 변경하여 행이 화면의 왼쪽과 오른쪽에 닿을 수 있도록합니다.

  • 사용자 지정 거터 너비 사용 : 1
  • 너비 : 80 % (데스크톱), 100 % (태블릿 및 전화)
반응 형 디자인 수정

시계

또한 가시성 설정을 숨김으로 설정하여 행 컨테이너를 넘어서는 것이 없도록합니다.

Divi : 모든 시간의 최고의 WordPress 테마!

901.000 다운로드Divi는 세계에서 가장 인기있는 WordPress 테마입니다. 그것은 완전하고, 사용하기 쉽고 62 무료 템플릿 이상을 제공합니다. [추천]

  • 수평 오버플로 : 숨겨진
  • 수직 오버플로 : 숨겨진
Divi 가시성 구성

상점 모듈 설정

제품 수와 원하는 사무실 컬럼 구조를 선택하십시오

다음으로 Shop 모듈 설정을 엽니 다. CSS 코드 (나중에 추가)에 대한 변경 사항은 표시되는 제품 수에 따라 다릅니다. 

8 개의 제품이 포함 된 상점 모듈을 제품 카드로 바꾸는 방법부터 시작하겠습니다. 데스크탑에 대해 원하는 열 레이아웃을 선택할 수 있습니다.

  • 제품 수 : 8
  • 열 레이아웃 : 4 열
divi 열 디자인 수정

반응적인 사이징

상점 모듈의 크기를 늘리기 위해 디자인 탭에서 크기 매개 변수를 변경합니다. 이 작업은 태블릿과 휴대폰에만 적용됩니다.

  • 너비 : 100 % (데스크톱), 250 % (태블릿 및 전화)
  • 최대 너비 : 100 % (데스크), 250 % (태블릿 및 전화)
반응 형 디자인 구성

CSS 클래스

또한 스토어 모듈에 CSS 클래스를 추가합니다. 나중에 CSS 코드를 추가 할 때이 CSS 클래스 만 전달하는 Shop 모듈을 변환 할 수 있습니다. 즉, 다른 Shop 모듈이 일반 상태로 나타나도록하려면이 CSS 클래스를 생략하면 그렇게 할 수 있습니다.

  • CSS 클래스 : 제품 스 와이프 카드
속성 css 모듈 저장소 divi 변경

반응성 오버플로

다양한 화면 크기에서 가시성 설정을 변경하여 선 설정을 보완합니다. 설정에서 볼 수 있듯이 작은 화면 크기에서만 스크롤 효과가 발생하기를 원합니다.

  • 가로 오버플로 : 숨겨진 (데스크), 스크롤 (태블릿 및 전화)
  • 수직 오버플로 : 숨겨진
오버플로 구성

상점 모듈 아래에 코드 모듈 추가

Shop 모듈을 수정 한 후에 바로 아래에 코드 모듈을 추가 할 수 있습니다.

divi shop 모듈 아래에 코드 모듈 추가

모듈에 CSS 코드 추가

다음 CSS 코드는 8 개 제품의 상점 모듈을 반응성 자기 카드로 자동 변환합니다.

<style> @media all and (max-width: 980px) { .product-swipe-cards ul.products {display: grid !important;grid-template-columns: repeat(8, 8.8%) !important;grid-column-gap: 0.7%;} .product-swipe-cards .woocommerce ul.products::before {content: none;display: block;} .product-swipe-cards.et_pb_shop ul.products li.product {width: 100% !important;} .product-swipe-cards .woocommerce {width: 255% !important;margin-left: 5%;} .product-swipe-cards::-webkit-scrollbar {display: none;} .product-swipe-cards {-ms-overflow-style: none;} } </style>

코드 css divi 추가

다른 제품 계정과 일치

이제 상점 모듈에 더 적은 (또는 더 많은) 제품을 추가하려는 경우 코드가 두 곳에서 약간 변경됩니다. 이 두 위치는 원하는 결과와 일치하도록 수동으로 변경해야합니다. 예를 들어 샵 모듈의 제품 수를 '4'로 변경해 보겠습니다.

  • 제품 수 : 4
다른 제품 계정과 일치

코드로 돌아 오면 두 가지를 변경해야합니다. 먼저 그리드 템플릿의 열을 수정해야합니다. 8 대신 4 (제품 수와 같은 수)를 사용합니다. 또한 제품 시트에서 이러한 제품이 차지하는 비율을 늘리고 있습니다 (제품이 많을수록 공간이 적음).

그리드-템플릿-컬럼 : 반복 (4, 14 %)! 중요;

그런 다음 제품이 놓이는 컨테이너의 너비도 변경합니다. 4 개 제품의 경우 이는 150 %입니다. 이 값은 고정되어 있지 않으며 그리드 모델의 열과 컨테이너 너비 사이의 조화를 재생하고 찾아서 얻습니다. 

최고의 WordPress 테마 및 플러그인을 찾고 계십니까?

Envato에서 최고의 플러그인과 WordPress 테마를 다운로드하고 쉽게 웹 사이트를 만드십시오. 이미 49.720.000 다운로드 이상. [EXCLUSIVE]

올바른 균형을 찾으려면 Visual Builder 내에서 모바일보기로 전환하고 변경 결과를 확인하면서 신중하게 값을 조정하십시오.

width: 150%!important;

추가 divi css 코드 추가

스크롤에 스냅 추가

스 와이프 카드 디자인에서 사용자 경험을 한 단계 더 높이고 싶다면 스크롤 스냅을 추가 할 수도 있습니다. 스크롤 캡처를 사용하면 방문자가 신제품의 시작 부분을보고 스크롤 할 수 있습니다.

 이는 스캔이 정확할 필요가 없다는 것을 의미하며, 스크롤 슬램이 어느 시점에서 인계되어 사이드 스크롤 메커니즘 내부의 위치를 ​​조정하는 디스플레이를 표시합니다. 

제품의 스 와이프 카드에서 스크롤 캡처를 활성화하려면 CSS 코드에서 각 제품에 개별적으로 CSS 코드 줄을 추가합니다 (아래 인쇄 화면 참조).

스크롤 스냅 정렬 : 시작

다음 CSS 코드 줄을 추가하여 상점 모듈에서 스크롤 캡처를 활성화 할 것입니다.

스크롤 스냅 유형 : x 필수

CSS 코드 사용자 지정

워크샵 모듈을 재사용하여 다른 카테고리 표시

전체 라인을 한 번 복제

첫 번째 마그네틱 카드 세트를 완료하면 전체 라인을 한 번 복제 할 수 있습니다.

divi 워크샵 모듈 재사용

중복 행에서 코드 모듈 제거

상점 모듈에 이전 CSS 클래스와 동일한 CSS 클래스가 포함되어 있으면 코드 모듈이 수행합니다. 계속해서 중복 라인에서 코드 모듈을 제거하십시오.

divi 코드 모듈 복제

원하는만큼 복제 라인을 복제하십시오

랜딩 페이지에 표시하려는 스 와이프 카드 세트 수에 따라 필요한만큼 복제 라인을 복제하십시오!

필요한만큼 모듈 복제
중복 된 divi 모듈

4. 모바일 장치에서 페이지 변경 사항 저장 및 결과보기

제품 스 와이프 카드 추가가 완료되면 Visual Builder를 종료하기 전에 페이지를 저장하고 완료되었는지 확인하십시오!

모바일 장치에서 데모 미리보기

측량

이제 모든 단계를 수행 했으므로 다양한 화면 크기에서 어떻게 보이는지 마지막으로 살펴 보겠습니다.

온라인 상점을 쉽게 만들 수 있습니다.

무료 WooCommerce를 다운로드하십시오. 전자 상거래 플러그인은 WordPress에서 실제 제품과 디지털 제품을 판매하는 플러그인입니다. [추천]

Divi 제품 모듈 상점 애니메이션

마지막 생각

이 기사에서는 통합 Divi Shop 모듈을 더 작은 화면 크기에서 제품 마그네틱 카드로 바꾸는 방법을 보여주었습니다. 데스크톱에서는 Shop 모듈에 할당 된 원래 열 구조를 유지했습니다. 

제품 스 와이프 맵을 사용하면 수직 스크롤 방문자를 압도하지 않고 수평 스 와이프 메커니즘에 끝없는 제품을 추가 할 수 있습니다.

이는 사용자 행동에 초점을 맞추고 작은 화면에서 다양한 요소에 쉽게 액세스 할 수 있도록 해주기 때문에 현대 웹 사이트 디자인에서 자주 사용되는 추세입니다.

 이러한 제품 시트는 모든 페이지에서 사용할 수 있지만 특히 만드는 모든 제품 랜딩 페이지에 유용합니다. 레이아웃 JSON 파일도 무료로 다운로드 할 수있었습니다! 

질문이나 제안이 있으시면 아래 댓글 섹션에 댓글을 남겨주세요.

이 문서에는 메모의 0을 포함

코멘트를 남겨주세요

귀하의 이메일 주소는 공개되지 않습니다. 필수 필드는 표시됩니다 *

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

맨 위로
0 주식
짹짹
레지스터