Divi 제품 페이지 템플릿 내부에 Woo 갤러리 이미지를 수직으로 쌓는 방법

기본적으로 WooCommerce 제품에 갤러리 이미지를 추가하면 제품 페이지 디자인 프론트엔드의 제품 추천 이미지 아래에 가로로 표시됩니다. 일부 특정 디자인에서는 이러한 woo 갤러리 이미지를 세로로 쌓는 것이 예를 들어 전체 화면 제품 페이지 디자인에서 더 편리할 수 있습니다. Divi의 테마 빌더로 만든 제품 페이지 템플릿 안에 woo 갤러리 이미지를 세로로 빠르게 쌓는 방법을 찾고 있다면 이 튜토리얼을 좋아할 것입니다. 가는 방법을 차근차근 알려드리겠습니다. 우리는 당신이 무료로 다운로드할 수 있는 최소한의 제품 페이지 템플릿과 함께 이 접근 방식을 함께할 것입니다! 이 튜토리얼은 1:1 비율의 이미지를 사용하는 제품 페이지에서 가장 잘 작동합니다.

시작하겠습니다.

시사

튜토리얼을 시작하기 전에 다양한 화면 크기에 따른 결과를 간단히 살펴보겠습니다.

데스크탑

이동하는

무료로 제품 페이지 템플릿 다운로드

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

파일 다운로드

무료로 다운로드

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

다운로드

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

Divi 테마 빌더 내에서 제품 페이지 템플릿 구축

Divi 테마 빌더로 이동 및 새 템플릿 추가

Divi 테마 빌더로 이동하여 '새 템플릿 추가'를 클릭하여 시작합니다.

모든 제품에 템플릿 사용

이 템플릿은 모든 제품에 사용되지만 원하는 대로 조건을 자유롭게 수정할 수 있습니다.

템플릿의 본문 템플릿 편집기 입력

템플릿을 생성했으면 '사용자 정의 본문 추가'를 클릭하고 템플릿 편집기로 리디렉션될 '사용자 정의 본문 빌드'를 선택하여 계속하십시오.

카테고리 페이지 템플릿 본문 작성 시작

섹션 #1 수정

배경색

템플릿 편집기 안에 섹션이 있습니다. 해당 섹션을 열고 흰색 배경색을 추가합니다.

• 배경색: #ffffff

간격

디자인 탭으로 이동하여 다음으로 모든 기본 상단 및 하단 패딩을 제거합니다.

• 상단 패딩: 0px
• 하단 패딩: 0px

새 행 추가

열 구조

다음 열 구조를 사용하여 새 행을 계속 추가합니다.

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 디자인 탭으로 이동하여 그에 따라 크기 설정을 변경합니다.

• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1
• 열 높이 균등화: 예
• 폭: 95%
• 최대 너비: 2560px
• 행 정렬: 가운데

간격

더 작은 화면 크기에서도 사용자 정의 상단 및 하단 패딩을 사용할 것입니다.

• 상단 패딩: 100px(태블릿 및 휴대폰 전용)
• 하단 패딩: 100px(태블릿 및 휴대폰 전용)

주요 요소 CSS

데스크탑에서 열 콘텐츠를 정렬하기 위해 행의 기본 요소에 두 줄의 CSS 코드를 사용합니다. 태블릿과 휴대전화에서 display 속성을 다시 가져올 것입니다.

데스크탑:

display: flex;
align-items: center;

태블릿 및 전화:

display: block;

2열 그라데이션 배경

일반 행 설정이 완료되면 두 번째 열의 설정을 열고 방사형 그라데이션 배경을 적용합니다.

• 색상 1: #f7f2ef
• 색상 2: rgba(255,255,255,0)
• 그라디언트 유형: 방사형
• 방사형 방향: 중심
• 시작 위치: 20%
• 최종 위치: 20%

열 2 간격

열의 디자인 탭으로 이동하여 다양한 화면 크기에서 사용자 정의 패딩 값을 변경합니다.

• 상단 패딩: 30%(데스크톱), 10%(태블릿 및 휴대폰)
• 하단 패딩: 10%
• 왼쪽 패딩: 5%
• 오른쪽 패딩: 5%

열 1에 Woo 이미지 모듈 추가

동적 콘텐츠

모듈을 추가할 시간입니다! 열 1에서 필요한 첫 번째 모듈은 Woo Images 모듈입니다. 이 튜토리얼은 추천 이미지와 갤러리 이미지를 1:1 비율로 사용하는 경우 가장 잘 작동합니다. 그렇게 하면 다음 단계에서 이미지를 원으로 바꿀 수 있습니다. Woo 이미지 모듈을 추가했으면 동적 콘텐츠가 '이 제품'으로 설정되었는지 확인합니다.

• 제품: 이 제품

열 1에 코드 모듈 추가

CSS 코드 추가

Woo Images Module 바로 아래에 Code Module을 추가할 것입니다. 이 코드 모듈에 삽입한 CSS 코드는 열 왼쪽에 woo 갤러리 이미지를 세로로 쌓는 데 도움이 됩니다.

<style>

.single-product div.product .woocommerce-product-gallery .flex-viewport{
width: 80% !important;
float: right;
border-radius: 100vw;
}

.woocommerce-product-gallery__image.flex-active-slide {
width: 12.5% !important;
}

.single-product div.product .woocommerce-product-gallery .flex-viewport img {
width: 100%;
}

.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav {
width: 15% !important;
float: left;
}

.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li {
width: 100%;
float: none;
}

.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li img {
border-radius: 100vw;
}

</style>

열 2에 Woo 제목 모듈 추가

동적 콘텐츠

다음 열로 넘어갑니다. 거기에서 우리가 필요로 하는 첫 번째 모듈은 Woo Title 모듈입니다.

• 제품: 이 제품

제목 텍스트 설정

모듈의 디자인 탭으로 이동하여 다음과 같이 제목 텍스트 설정을 변경합니다.

• 제목 글꼴: PT Sans
• 제목 글꼴 두께: 굵게
• 제목 텍스트 색상: #000000
• 제목 텍스트 크기: 84px(데스크톱), 60px(태블릿), 45px(전화)

열 2에 Woo 설명 모듈 추가

동적 콘텐츠

Woo 설명 모듈인 다음 모듈로 넘어갑니다.

• 제품: 이 제품
• 설명 유형: 간단한 설명

텍스트 설정

이에 따라 모듈의 텍스트 설정을 수정합니다.

• 텍스트 글꼴: Karla
• 텍스트 크기: 17px(데스크톱 및 태블릿), 15px(전화)
• 텍스트 줄 높이: 1.9em

간격

상단 및 하단 여백을 추가하여 모듈 설정을 완료합니다.

• 최고 마진: 5%
• 하단 마진: 5%

열 2에 Woo Price 모듈 추가

동적 콘텐츠

Woo 설명 모듈 바로 아래에 Woo Price 모듈을 추가합니다.

• 제품: 이 제품

가격 텍스트 설정

모듈의 디자인 탭으로 이동하여 다음과 같이 가격 텍스트 설정을 수정합니다.

• 가격 글꼴: PT Sans
• 가격 글꼴 두께: 굵게
• 가격 텍스트 색상: #ce8654
• 가격 텍스트 크기: 27px

열 2에 장바구니 모듈에 Woo 추가 추가

동적 콘텐츠

이 튜토리얼을 완료하는 데 필요한 다음이자 마지막 모듈은 Woo Add to Cart 모듈입니다.

• 제품: 이 제품

필드 설정

디자인 탭으로 이동하여 다음과 같이 필드 설정을 변경합니다.

• 필드 배경색: #ffffff
• 필드 텍스트 색상: #000000
• Fields 글꼴: Open Sans

• 모든 모서리: 0px
• 필드 하단 테두리 너비: 1px
• 필드 하단 테두리 색상: #ce8654

버튼 설정

그런 다음 버튼 설정에서 버튼의 스타일을 지정합니다.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 색상: #ffffff
• 버튼 배경색: #0a0201
• 버튼 테두리 너비: 0px
• 버튼 테두리 반경: 100px

• 버튼 글꼴: PT Sans
• 버튼 글꼴 두께: 굵게

• 버튼 상단 패딩: 20px
• 버튼 하단 패딩: 20px
• 버튼 왼쪽 패딩: 50px
• 버튼 오른쪽 패딩: 50px

간격

그리고 Woo 카트에 추가 모듈에 상단 여백을 추가하여 모듈 설정과 이 튜토리얼을 완료하십시오. 제품 페이지 템플릿 수정을 완료했으면 제품 페이지에서 결과를 보기 전에 모든 테마 빌더 변경 사항을 저장했는지 확인하십시오!

• 최고 마진: 5%

시사

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

데스크탑

이동하는

마지막 생각들

이 게시물에서 우리는 Divi의 테마 빌더와 WooCommerce 모듈을 사용하여 구축한 제품 페이지로 창의력을 발휘하는 방법을 보여주었습니다. 더 구체적으로, 우리는 woo 갤러리 이미지를 세로로 쌓는 방법을 보여 주었습니다. 이 접근 방식은 전체 화면 제품 페이지 디자인과 잘 어울리지만 구축하는 모든 종류의 제품 페이지 템플릿에 유용할 수 있습니다. JSON 파일도 무료로 다운로드할 수 있었습니다! 질문이나 제안 사항이 있으면 아래의 댓글 섹션에 자유롭게 의견을 남겨주세요.

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