모바일에서 Divi의 Shop 모듈을 동적 제품 스와이프 카드로 전환

특정 제품에 대한 랜딩 페이지를 구축할 때 새로운 출시 또는 준비 중인 판매인지 여부에 관계없이 어느 시점에서 Shop Module을 사용할 가능성이 높습니다. Divi의 Shop Module을 사용하면 WooCommerce 플러그인에서 제품을 동적으로 가져오고 Divi의 내장 옵션을 사용하여 제품의 스타일을 지정할 수 있습니다. 이제 기본적으로 shop 모듈에는 더 작은 화면 크기에서 모두 두 개의 열로 변환되는 몇 가지 열 구조가 있습니다. 즉, 표시하도록 선택하는 제품이 많을수록 방문 페이지의 다음 부분으로 이동하는 데 더 많은 수직 스크롤이 필요합니다.

현대 웹 디자인에서 방문자의 선호도에 따라 세로 스크롤을 제한하고 항목을 표시하는 데 자주 사용되는 기술은 스와이프 카드를 사용하는 것입니다. 이 튜토리얼에서는 플러그인을 사용하지 않고 Divi Shop 모듈을 더 작은 화면 크기에서 동적 제품 스와이프 카드로 바꾸는 방법을 보여줍니다. 먼저 제품 섹션에서 다양한 요소를 준비하고 소량의 CSS 코드를 사용하여 스와이프 효과를 활성화합니다. 방문자를 압도하지 않고 방문 페이지에 다양한 제품을 표시할 수 있는 좋은 방법입니다. JSON 파일도 무료로 다운로드할 수 있습니다!

시작하겠습니다.

시사

튜토리얼에 들어가기 전에 결과를 간단히 살펴보겠습니다. 태블릿과 모바일에서만 제품 스와이프 카드를 활성화하고 있습니다. 데스크탑에서는 Shop Module 내에서 결정한 열 구조를 유지합니다.

이동하는

데스크탑

제품 스와이프 카드 레이아웃을 무료로 다운로드하세요

무료 제품 스와이프 카드 레이아웃을 사용하려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 ​​금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

1. WooCommerce 및 제품 페이지 설정

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

2. 새 페이지 만들기 및 편지지 방문 페이지 레이아웃 업로드

새 페이지 만들기

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

편지지 방문 페이지 레이아웃 업로드

새 페이지에 들어가면 미리 만들어진 레이아웃으로 이동하여 문구점 방문 페이지 레이아웃을 업로드합니다. 이 특정 레이아웃을 사용하고 있지만 해당 레이아웃 내에 상점 모듈을 추가하거나 찾는 한 원하는 다른 레이아웃을 자유롭게 사용할 수 있습니다.

3. 상점 섹션 수정

Shop 모듈로 섹션 찾기

Stationery Shop 방문 페이지 레이아웃을 사용하여 만든 새 페이지를 아래로 스크롤하면 Shop Module이 있는 섹션이 나타납니다. 이 자습서의 다음 단계에서 이 섹션을 사용합니다.

행 설정

반응형 크기 조정

Shop 모듈이 포함된 행의 행 설정을 열어 시작합니다. 이전에 언급했듯이 데스크톱에서 동일한 디자인을 유지하고 더 작은 화면 크기에서만 제품 스와이프 카드를 활성화할 것입니다. 손쉬운 환경을 만들기 위해 크기 설정에서 너비를 변경하여 행이 화면의 왼쪽과 오른쪽에 닿도록 허용합니다.

• 사용자 지정 거터 너비 사용: 1
• 너비: 80%(데스크톱), 100%(태블릿 및 휴대폰)

시계

또한 가시성 설정을 숨김으로 설정하여 행 컨테이너를 능가하는 항목이 없는지 확인합니다.

• 수평 오버플로: 숨김
• 수직 오버플로: 숨김

상점 모듈 설정

제품 수 및 데스크탑 컬럼 선택 구조 선택

그런 다음 Shop Module 설정을 엽니다. 나중에 추가할 CSS 코드의 변경 사항은 표시하는 제품의 수에 따라 다릅니다. 먼저 8개의 제품이 포함된 Shop Module을 제품 스와이프 카드로 바꾸는 방법을 보여드리겠습니다. 데스크탑용으로 원하는 열 레이아웃을 선택할 수 있습니다.

• 제품 개수: 8
• 열 레이아웃: 4열

반응형 크기 조정

상점 모듈의 크기를 늘리기 위해 디자인 탭에서 크기 설정을 수정합니다. 태블릿과 휴대전화에서만 이 작업을 수행하는 방법에 유의하세요.

• 너비: 100%(데스크톱), 250%(태블릿 및 휴대폰)
• 최대 너비: 100%(데스크톱), 250%(태블릿 및 휴대폰)

CSS 클래스

우리는 또한 상점 모듈에 CSS 클래스를 추가할 것입니다. 나중에 CSS 코드를 추가할 때 이 CSS 클래스만 전달하는 Shop Module을 변환할 수 있습니다. 즉, 다른 Shop Module을 정상 상태로 표시하려면 이 CSS 클래스를 생략하면 그렇게 할 수 있습니다.

• CSS 클래스: 제품 스와이프 카드

반응형 오버플로

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

• 수평 오버플로: 숨김(데스크톱), 스크롤(태블릿 및 휴대폰)
• 수직 오버플로: 숨김

Shop 모듈 아래에 코드 모듈 추가

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

모듈에 CSS 코드 추가

다음 CSS 코드는 8개 제품 Shop Module을 자동으로 반응형 제품 스와이프 카드로 전환합니다.

<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>

서로 다른 제품 수 일치

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

• 제품 수: 4

코드로 돌아가면 두 가지 변경 사항이 필요합니다. 먼저 그리드 템플릿 열을 변경해야 합니다. 8 대신 4(제품 수와 동일한 수)를 사용하고 있습니다. 또한 이러한 제품이 제품 스와이프 카드에서 차지하는 비율도 늘리고 있습니다(제품이 많을수록 공간이 적음).

grid-template-columns: repeat(4, 14%) !important;

그런 다음 제품이 들어 있는 컨테이너의 너비도 수정합니다. 제품이 4개인 경우 이 값은 150%입니다. 이 값은 고정되어 있지 않으며, 그리드 템플릿 열과 컨테이너 너비 사이의 조화를 찾아내서 얻을 수 있습니다. 올바른 균형을 찾으려면 Visual Builder 내에서 모바일 보기로 전환하고 이러한 변경 결과를 보면서 값을 신중하게 조정하십시오.

width: 150% !important;

스크롤 스냅 추가

제품 스와이프 카드 디자인에서 사용자 경험을 한 단계 더 발전시키려면 스크롤 스냅도 추가할 수 있습니다. 스크롤 스냅은 방문자가 새 제품의 시작 부분으로 스냅하여 스크롤하는 데 도움이 됩니다. 즉, 스와이프가 정확할 필요는 없으며 한 지점에서 스크롤 스냅이 인계받아 수평 스크롤 메커니즘 내에서 위치를 조정합니다. 제품 스와이프 카드에서 스크롤 스냅을 활성화하려면 CSS 코드에서 개별적으로 각 제품에 한 줄의 CSS 코드를 추가합니다(아래 인쇄 화면 참조).

scroll-snap-align: start

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

scroll-snap-type: x mandatory

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

전체 행을 한 번 복제

첫 번째 제품 스와이프 카드 세트를 완료하면 전체 행을 한 번 복제할 수 있습니다.

중복 행의 코드 모듈 삭제

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

원하는 만큼 복제 행 복제

그리고 랜딩 페이지에 표시하려는 제품 스와이프 카드 세트 수에 따라 필요한 만큼 복제 행을 복제하세요!

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

제품 스와이프 카드 추가가 완료되면 Visual Builder를 종료하기 전에 페이지를 저장하면 완료됩니다!

시사

이제 모든 단계를 거쳤으므로 다양한 화면 크기에 따른 결과를 최종적으로 살펴보겠습니다.

이동하는

데스크탑

마지막 생각들

이 게시물에서는 내장된 Divi Shop 모듈을 더 작은 화면 크기에서 제품 스와이프 카드로 바꾸는 방법을 보여주었습니다. 데스크탑에서는 Shop Module에 할당된 원래 열 구조를 유지했습니다. 제품 스와이프 카드를 사용하면 방문자를 세로 스크롤로 압도하지 않고 가로 스와이프 메커니즘에 끝없는 제품을 추가할 수 있습니다.

사용자 행동에 초점을 맞추고 더 작은 화면 크기에서 다양한 항목에 더 쉽게 액세스할 수 있도록 하기 때문에 현대 웹 디자인에서 자주 사용되는 추세입니다. 원하는 모든 페이지에서 이러한 제품 스와이프 카드를 사용할 수 있지만 구축하는 제품 방문 페이지에 특히 편리합니다. 레이아웃의 JSON 파일도 무료로 다운로드할 수 있었습니다! 질문이나 제안 사항이 있으면 아래의 댓글 섹션에 자유롭게 의견을 남겨주세요.

Divi에 대해 자세히 알아보고 더 많은 무료 Divi를 받고 싶다면 이메일 뉴스레터와 YouTube 채널을 구독하세요. 그러면 항상 이 무료 콘텐츠를 가장 먼저 알고 혜택을 받을 수 있습니다.