Divi로 Woo 제품 페이지를 위한 반응형 블록 디자인을 만드는 방법

게시 됨: 2019-11-02

이제 Divi에서 woo 모듈을 사용할 수 있으므로 유일한 한계는 상상력입니다. 모든 동적 woo 모듈은 빌더 내부의 다른 모든 모듈과 마찬가지로 사용자 정의할 수 있습니다. 이 게시물에서는 제품 페이지에 대한 크리에이티브 블록 디자인을 다시 만드는 방법을 보여줍니다. 동적 모듈은 어두운 배경에서 눈에 띄는 크리에이티브 세트로 그룹화됩니다. JSON 파일도 무료로 다운로드할 수 있습니다!

시작하겠습니다.

시사

시작하기 전에 다양한 화면 크기에 따른 디자인을 살펴보겠습니다.

데스크탑

이동하는

반응형 블록 디자인 무료 다운로드

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

파일 다운로드

무료로 다운로드

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

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

YouTube 채널 구독

1. WooCommerce 제품 추가/열기

제품 세부 정보

기존 제품을 열거나 새 제품을 만듭니다. 이 블록 스타일 디자인을 다시 만들려면 다음 정보를 입력해야 합니다.

제목
설명
가격
범주
속성
나타난 그림

속성 탭은 woo 추가 정보 모듈에 대한 정보를 가져오는 곳입니다. 이 정보를 추가하려면 속성 탭을 클릭하고 다음과 같이 세 가지 사용자 정의 속성을 만듭니다.

속성:
- 용량: 250ml / 2티컵
- 자료: 순수한 구리
- 상태: 정상적인 마모

추천 이미지는 디자인의 색상과 배경색이 같아야 합니다.

Divi Builder 활성화 및 페이지 설정 수정

모든 제품 세부 정보가 입력되면 Divi Builder를 활성화하십시오. 페이지 레이아웃을 '전체 너비'로 변경합니다.

비주얼 빌더로 전환

Visual Builder로 전환하여 계속하십시오.

기본 제품 섹션 삭제

사용자 정의 제품 페이지를 만들고 있으므로 기본 woo 제품 섹션을 삭제하십시오.

2. 반응형 블록 디자인 재현

새 섹션 추가

배경

디자인을 다시 만드는 첫 번째 단계는 새 섹션을 추가하는 것입니다. 다양한 화면 크기에 그라데이션 배경을 추가합니다.

배경: 그라데이션
색상 1: 라이트 그레이 #f2f6f5
색상 2: 거의 블랙 #313131
방향:
- 데스크탑: 90%
- 태블릿 + 전화: 180%
시작 + 완료:
- 데스크탑: 50%
- 태블릿: 40%
- 전화: 30%

사이징

섹션의 크기 설정을 조정합니다.

폭: 100%
최대 너비: 100%

간격

기본 상단 및 하단 패딩도 제거하십시오.

상단 + 하단 패딩: 0vw

시계

마지막으로 섹션의 오버플로를 조정합니다.

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

행 #1 추가

열 구조

섹션을 설정한 후 첫 번째 행을 하나의 열로 추가합니다.

사이징

디자인 탭에서 다양한 화면 크기에 맞게 크기를 조정합니다.

너비:
- 데스크탑: 50%
- 태블릿 + 전화: 100%
최대 너비: 100%
행 정렬: 왼쪽

시계

마지막으로 수평 및 수직 오버플로를 표시로 설정합니다.

수평 + 가시적 오버플로: 가시적

Woo Breadcrumb 추가

콘텐츠

첫 번째 모듈인 woo 이동 경로 모듈을 추가합니다. '이 상품'을 선택합니다.

제품: 이 제품

텍스트

디자인 탭에서 다음과 같이 텍스트의 스타일을 지정합니다.

텍스트 글꼴: 피닉스
텍스트 색상: 브라운 #594239
텍스트 크기:
- 데스크탑: 1vw
- 태블릿: 2vw
- 전화: 3vw

간격

다양한 화면 크기에 대해 일부 간격 값을 추가합니다.

최고 마진: 3vw
왼쪽 여백:
- 데스크탑: 10vw
- 태블릿 + 전화: 20vw

우 이미지 추가

콘텐츠 추가

이제 Woo Image 모듈로 제품 이미지를 추가할 차례입니다. 콘텐츠 탭에서 '이 제품'을 선택합니다.

제품: 이 제품

사이징

모듈의 크기를 조정하여 계속하십시오.

폭: 100%

시계

마지막으로 오버플로를 숨깁니다.

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

행 #2 추가

열 구조

두 개의 열이 있는 두 번째 행을 추가합니다.

사이징

먼저 크기를 조정합니다.

거터 폭: 1
너비:
- 데스크탑: 53%
- 태블릿 + 전화: 53%
최대 너비: 100%
정렬: 오른쪽

간격

그런 다음 간격 값.

최고 여백:
- 데스크탑: -47vw
- 태블릿 + 전화: 0vw
왼쪽 여백:
- 태블릿: -5vw
- 전화: -8vw
하단 패딩:
- 데스크탑 + 태블릿: 4.1vw
왼쪽 패딩:
- 데스크탑: 0vw
- 태블릿: 16vw
- 전화: 12vw
오른쪽 패딩:
- 데스크탑: 0vw
- 태블릿: 0vw

맞춤 CSS

고급 탭에서 사용자 정의 CSS를 추가하십시오.

주요 요소 CSS:
- 디스플레이: 플렉스;

display: flex;

시계

마지막으로 오버플로를 표시로 설정합니다.

수평 + 수직 오버플로: 가시적

열 1 설정

간격

모듈을 추가하기 전에 열 1의 간격 값을 조정하십시오.

왼쪽 패딩: 4vw
오른쪽 패딩: 0vw

2열 설정

간격

열 2 간격 값도 조정하십시오.

탑 패딩:
- 데스크탑: 7vw
- 태블릿: 17vw
- 전화: 28vw
오른쪽 패딩:
- 데스크탑 + 태블릿: 15vw

열 1에 텍스트 모듈 추가

콘텐츠 추가

이제 모듈을 추가할 차례입니다. 텍스트 모듈로 시작하십시오. 제품에 대한 설명 콘텐츠를 삽입합니다.

텍스트

그런 다음 텍스트에 스타일을 지정합니다.

글꼴: 피닉스
색상: #f2eed0
크기:
- 데스크탑: 1.3vw
- 태블릿: 2.6vw
- 전화: 3.8vw
문자 간격: 1px
정렬: 중앙

사이징

다양한 화면 크기에 맞게 모듈의 크기를 조정합니다.

너비:
- 데스크탑: 50%
- 태블릿: 60%
- 전화: 80%

간격

또한 다음과 같이 간격 값을 조정합니다.

상단 + 하단 패딩: 1vw
왼쪽 + 오른쪽 패딩: 1vw

국경

이에 따라 모듈에 테두리를 추가합니다.

테두리 스타일: 위쪽 + 왼쪽 + 오른쪽
테두리 너비:
- 위 + 왼쪽 + 오른쪽: 2px
테두리 색상:
- 위 + 왼쪽 + 오른쪽: 크림 #f2eed0

열 1에 Woo 제목 추가

콘텐츠 추가

이제 woo 제목 모듈을 추가하고 콘텐츠 탭에서 '이 제품'을 선택하십시오.

제품: 이 제품

배경

모듈의 스타일을 지정하려면 어두운 주황색 배경을 추가합니다.

배경색
색상: 구리 오렌지 #d66b00

제목 텍스트

그런 다음 제목 텍스트 설정을 수정합니다.

제목 제목 수준: H1
글꼴: 피닉스
색상: 크림 #f2eed0
크기:
- 데스크탑: 2.9vw
- 태블릿: 7.8vw
- 전화: 13.9vw
H1 문자 간격: 1px

사이징

또한 모듈의 크기를 조정합니다.

폭: 100%

간격

그런 다음 패딩 값을 추가합니다.

상단 + 하단 패딩:
- 데스크탑: 2vw
- 태블릿: 3vw
- 전화:4vw
왼쪽 + 오른쪽 패딩:
- 데스크탑: 2vw
- 태블릿: 3vw
- 전화:4vw

국경

마지막으로 다음과 같이 테두리를 추가합니다.

테두리 스타일: 위쪽 + 왼쪽 + 오른쪽
테두리 너비:
- 위 + 왼쪽 + 오른쪽: 2px
테두리 색상:
- 위 + 왼쪽 + 오른쪽: 크림 #f2eed0

열 1에 Woo 설명 제목 추가

콘텐츠 추가

제목 아래에 woo 설명 모듈을 추가합니다. 콘텐츠 탭에서 '이 제품'을 선택합니다.

제품: 이 제품
설명 유형: 설명

텍스트

그런 다음 텍스트에 스타일을 지정합니다.

글꼴: Open Sans
색상: 크림 #f2eed0
크기:
- 데스크탑: 08vw
- 태블릿: 2vw
- 전화: 3vw

사이징

또한 크기를 조정하십시오.

폭: 100%

간격

마찬가지로 간격을 조정합니다.

상단 + 하단 패딩:
- 데스크탑: 2vw
- 태블릿 + 전화: 3vw
왼쪽 + 오른쪽 패딩:
- 데스크탑: 2vw
- 태블릿 + 전화: 3vw

국경

다른 모듈과 마찬가지로 테두리를 추가합니다.

테두리 스타일: 네 테두리 모두
너비: 2px
색상: 크림 #f2eed0

열 2에 Woo 추가 정보 추가

콘텐츠 추가

이제 woo 추가 정보 모듈을 사용하여 사용자 정의 속성을 추가할 차례입니다. 콘텐츠 탭에서 '이 제품'을 선택합니다.

제품: 이 제품

텍스트

다음과 같이 텍스트 설정을 변경합니다.

글꼴: Open Sans
스타일: 기울임꼴
색상: 크림 #f2eed0
크기:
- 데스크탑: 0.6vw
- 태블릿: 1.6vw
- 전화: 2.2vw

속성 텍스트

그런 다음 그에 따라 속성 텍스트의 스타일을 지정합니다.

글꼴: 피닉스
색상: 크림 #f2eed0
크기:
- 데스크탑: 1.1vw
- 태블릿: 2vw
- 전화: 3vw
간격: 1px

사이징

또한 크기를 조정하십시오.

폭: 100%

국경

그리고 마지막으로 테두리를 추가합니다.

테두리 스타일: 위쪽 + 오른쪽 + 아래쪽
테두리 너비:
- 위 + 오른쪽 + 아래: 2px
테두리 색상:
- 위 + 오른쪽 + 아래: 크림 #f2eed0

행 #3 추가

열 구조

두 개의 열이 있는 세 번째 행을 추가합니다.

사이징

모듈을 추가하기 전에 다양한 화면 크기에 맞게 행의 크기를 조정하십시오.

너비:
- 데스크탑: 50%
- 태블릿: 87%
- 전화: 93%
정렬: 오른쪽

심

또한 패딩을 조정합니다.

하단 패딩: 12vw

열 1 설정

간격

첫 번째 열의 패딩을 조정하여 계속합니다.

왼쪽 패딩:
- 데스크탑: 5vw
- 태블릿 + 전화:12vw

열 1에 Woo Price 추가

콘텐츠 추가

이제 woo price 모듈을 사용하여 제품의 가격을 추가합니다. 콘텐츠 탭에서 '이 제품'을 선택합니다.

제품: 이 제품

가격 텍스트

그런 다음 그에 따라 텍스트의 스타일을 지정합니다.

글꼴: 피닉스
색상: 크림 #f2eed0
크기:
- 데스크탑: 1.5vw
- 태블릿: 3.5vw
- 전화: 5vw

사이징

또한 모듈의 크기를 조정합니다.

너비:
- 데스크탑: 39%
- 태블릿: 45%
- 전화: 54%

간격

간격도 조정합니다.

탑 패딩:
- 데스크탑: 1vw
- 태블릿: 2vw
- 전화: 3v2
하단 패딩:
- 데스크탑: 1vw
- 태블릿 + 전화: 2vw
왼쪽 패딩:
- 데스크탑: 1vw
- 태블릿 + 전화: 2vw
오른쪽 패딩:
- 태블릿 + 전화: 2vw

국경

마지막으로 테두리를 추가합니다.

테두리 스타일: 네 면 모두
너비: 2px
색상: 크림 #f2eed0

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

콘텐츠 추가

마지막 모듈은 장바구니에 추가 모듈입니다. 콘텐츠 탭에서 '이 제품'을 선택합니다.

버튼 스타일

다음과 같이 버튼의 스타일을 지정합니다.

사용자 정의 스타일: 예
버튼 텍스트 크기:
- 데스크탑: 1.3vw
- 태블릿: 3.5vw
- 전화: 5vw
텍스트 색상: 크림 #f2eed0
배경 색상: 구리 오렌지 #d66b00

버튼 패딩

그런 다음 버튼에 패딩 값을 추가합니다.

상단 + 하단 패딩: 0.5vw
왼쪽 + 오른쪽 패딩: 1.5vw

사이징

마지막으로 모듈의 크기를 조정하면 끝입니다!

폭: 100%

시사

다양한 화면 크기에 따른 결과를 최종적으로 살펴보겠습니다.

데스크탑

이동하는

랩입니다

그게 다야! 콘텐츠가 이 튜토리얼의 콘텐츠보다 길거나 짧으면 블록의 간격을 방해할 수 있습니다. 컴포지션에 더 잘 맞도록 열 설정을 조정하기만 하면 됩니다. 이 튜토리얼이 더 놀라운 Divi 디자인을 만드는 데 영감을 주기를 바랍니다. 질문이 있으면 의견에 알려주십시오.