Divi로 일본의 미적 영감을 받은 제품 페이지 템플릿을 만드는 방법
게시 됨: 2019-11-21온라인 상점을 위한 깨끗하고 미니멀한 제품 페이지 디자인을 찾고 계십니까? 오늘은 일본의 미학에서 영감을 받은 디자인을 가지고 왔습니다. 이것은 최소한의 일본 잡지 및 웹 사이트의 일반적인 스타일입니다. 그것은 텍스트를 읽기 쉽고 제품을보고 산만하지 않도록합니다. 아래 자습서를 따라 자신의 제품에 대한 이 템플릿을 다시 만드십시오. 템플릿 JSON 파일도 무료로 다운로드할 수 있습니다!
시작하겠습니다.
시사
시작하기 전에 다양한 장치에서 디자인이 어떻게 보이는지 살펴보겠습니다.
데스크탑
이동하는
무료로 제품 페이지 템플릿 다운로드
무료 제품 페이지 템플릿을 사용하려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.
무료로 다운로드
Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.
성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!
1. 우커머스 제품 추가/열기
제품 데이터
새로운 WooCommerce 제품을 열거나 만듭니다. 이 일본의 미적 영감을 받은 제품 디자인을 재현하려면 다음 세부 정보를 입력해야 합니다.
- 제목: 서예 세트
- 설명: 아름다운 레터링 아트를 만드는 데 필요한 모든 도구가 포함된 일본 서예 세트. 검정 인도 잉크, 말총 브러시, 암석 추, 혼합 그릇, 일본 가위 및 번짐 없는 종이.
- 가격: 31
- 카테고리: 미술 용품
- 추천 이미지: 제품의 가로 이미지입니다.
- 갤러리: 같은 크기의 가로 이미지 4개
- 속성: 아래 참조
속성 탭에는 woo 추가 정보 모듈에 대한 정보가 있습니다. 이 정보를 추가하려면 속성 탭을 선택하고 다음과 같이 하나의 사용자 정의 속성을 만듭니다.
- 포함된 항목:
- 1 브러시
- 1그릇
- 잉크병 1개
- 1 쌍 가위
- 1 리버 스톤
- 1 종이 뭉치
Divi Builder 활성화 및 페이지 설정 수정
모든 제품 데이터가 준비되면 Divi Builder를 활성화하고 페이지 레이아웃을 '전체 너비'로 변경합니다.
비주얼 빌더로 전환
이제 비주얼 빌더로 전환하십시오. '프론트 엔드에서 빌드'라는 버튼을 클릭합니다.
기본 제품 섹션 삭제
이 제품 페이지를 처음부터 디자인하고 싶기 때문에 전체 기본 섹션을 삭제하십시오. 이렇게 하면 작업할 빈 캔버스가 제공됩니다.
2. 일본식 디자인을 재현
새 섹션 추가
일본의 에스테틱 상품 페이지를 재창조해 봅시다! 새 일반 섹션을 추가합니다.
배경
섹션 설정을 열고 배경색을 변경합니다.
- 배경색: 매우 밝은 회색 #f2f2f2
사이징
다음으로 크기를 조정합니다.
- 폭: 100%
- 최대 너비: 100%
간격
그런 다음 간격 값은 다음과 같습니다.
- 탑 패딩:
- 데스크탑: 0vw
- 태블릿 + 전화: 2vw
- 하단 패딩:
- 데스크탑 + 태블릿: 2vw
첫 번째 행 추가
열 구조
새 행을 추가하고 다음 열 구조를 선택합니다.
사이징
모듈을 추가하기 전에 다음과 같이 행의 크기 설정을 조정하십시오.
- 너비:
- 데스크탑: 80%
- 태블릿 + 전화: 63%
간격
또한 간격 값을 조정합니다.
- 상단 + 하단 여백: 0vw
- 상단 + 하단 패딩: 0vw
Woo Breadcrumb 모듈 추가
콘텐츠
이제 첫 번째 모듈을 추가합니다. 우 빵 부스러기.
- 제품: 이 제품
텍스트
디자인 탭에서 다음과 같이 텍스트 스타일을 지정합니다.
- 글꼴: Duru Sans
- 글꼴 스타일: TT
- 색상: 블랙 #000000
- 크기:
- 데스크탑: 0.7vw
- 태블릿: 1.5vw
- 전화: 1.7vw
- 문자 간격: 2px
사이징
그런 다음 크기를 조정합니다.
- 폭: 100%
간격
마지막으로 간격을 조정합니다.
- 최고 여백:
- 데스크탑: 3em
- 태블릿 + 전화 : 0em
- 하단 여백:
- 데스크탑 + 태블릿: 1em
- 전화: 0em
- 상단 + 하단 패딩: 1em
- 왼쪽 패딩: 2em
두 번째 행 추가
열 구조
다음 열 구조를 사용하여 두 번째 행을 추가합니다.
사이징
행 설정을 열고 다양한 화면 크기에서 너비를 변경합니다.
- 너비:
- 데스크탑: 80%
- 태블릿 + 전화: 65%
간격
간격도 조정합니다.
- 탑 패딩: 0vw
열 1 + 2 설정
배경
열 설정을 계속합니다. 1열과 2열 모두 스타일이 동일합니다. 배경으로 시작합니다.
- 색상: 흰색 #ffffff
국경
그리고 두 열에도 테두리 스타일을 추가합니다.
- 테두리 스타일: 네 면 모두
- 테두리 너비: 4px
- 색상: #333333
열 1에 Woo 이미지 모듈 추가
콘텐츠
모듈 추가를 시작할 시간입니다! 1열에 woo 이미지 모듈이 필요합니다.
- 제품: 이 제품
집단
다음과 같이 요소 탭에서 토글을 조정합니다.
- 추천 이미지: 켜짐
- 갤러리 이미지 보기: 끄기
- 판매 배지 표시: 끄기
열 1에 Woo 제목 모듈 추가
콘텐츠
이미지 아래에 woo 제목 모듈을 추가합니다. 콘텐츠를 선택합니다.
- 제품: 이 제품
제목 텍스트
디자인 탭에서 텍스트의 스타일을 지정합니다.
- 제목 제목 수준: H1
- H1 글꼴: Droid Sans
- H1 글꼴 스타일: TT
- H1 색상: 베리 다크 그레이 #333333
- 문자 간격: 5px
- 줄 높이: 1em
간격
그런 다음 간격 값을 조정합니다.
- 최고 여백:
- 태블릿 + 전화: 0vw
- 탑 패딩: 0vw
- 하단 패딩:
- 데스크탑: 1.5vw
- 태블릿: 3.5vw
- 전화: 6vw
- 왼쪽 패딩:
- 데스크탑: 2vw
- 태블릿 + 전화: 5vw
- 오른쪽 패딩:
- 데스크탑 + 태블릿: 0vw
국경
테두리를 추가하여 모듈의 설정을 완료합니다.
- 테두리 스타일: 하단 테두리
- 너비: 4px
- 색상: 베리 다크 그레이 #333333
열 1에 Woo 설명 모듈 추가
콘텐츠
계속해서 woo 설명 모듈을 추가하십시오. 내용 및 설명 유형을 선택합니다.
- 제품: 이 제품
- 설명 유형: 설명
텍스트
그런 다음 다음과 같이 텍스트의 스타일을 지정합니다.
- 글꼴: Duru Sans
- 글꼴 스타일: TT
- 색상: 베리 다크 그레이 #333333
- 크기:
- 데스크탑: 0.8vw
- 태블릿: 1.4vw
- 전화: 1.8vw
- 문자 간격: 3px
- 줄 높이: 2em
간격
다양한 화면 크기에 맞춤 패딩을 추가하여 모듈 설정을 완료합니다.
- 상단 + 하단 패딩: 0vw
- 왼쪽 + 오른쪽 패딩:
- 데스크탑: 2vw
- 태블릿 + 전화: 5vw
열 1에 Woo Price 모듈 추가
콘텐츠
다음으로 열에 woo price 모듈을 추가하고 제품을 선택합니다.
- 제품: 이 제품
가격 텍스트
다음과 같이 가격 텍스트의 스타일을 지정합니다.
- 글꼴: Duru Sans
- 색상: 베리 다크 그레이 #333333
- 크기:
- 데스크탑: 1.5vw
- 태블릿: 3.2vw
- 전화: 4vw
- 문자 간격: 3px
- 줄 높이: 1em
간격
간격 설정도 조정합니다.
- 하단 여백:
- 데스크탑: 1vw
- 태블릿: 3vw
- 전화: 4vw
- 탑 패딩:
- 데스크탑: 1vw
- 태블릿: 3.3vw
- 전화: 5vw
- 하단 패딩: 0vw
- 왼쪽 패딩:
- 태블릿 + 전화: 5vw
- 오른쪽 패딩:
- 데스크탑: 2vw
- 태블릿 + 전화: 3vw
국경
마지막으로 테두리를 추가합니다.
- 테두리 스타일: 위쪽 테두리
- 테두리 너비: 4px
- 색상: 베리 다크 그레이 #333333
열 1에 장바구니 모듈에 Woo 추가 추가
콘텐츠
가격 아래에 장바구니에 담기 모듈을 추가하고 제품을 선택합니다.
- 제품: 이 제품
집단
다음과 같이 요소를 전환합니다.
- 수량 필드 표시: 꺼짐
- 재고 표시: ON
배경
배경색도 추가합니다.
- 배경색: 매우 어두운 회색 #333333
단추
디자인 탭에서 다음과 같이 버튼의 스타일을 지정합니다.
- 텍스트 크기:
- 데스크탑: 1vw
- 태블릿: 2.6vw
- 전화: 3.1vw
- 색상: 흰색 #ffffff
- 테두리 너비: 0px
- 문자 간격: 3px
- 글꼴: Duru Sans
- 글꼴: TT
간격
다음으로 간격을 조정합니다.
- 상단 + 하단 패딩: 0.5vw
- 왼쪽 패딩: 1vw
국경
마지막으로 테두리를 추가합니다.
- 테두리 스타일: 위쪽 테두리
- 너비: 4px
- 색상: 베리 다크 그레이 #333333
열 2에 Woo 추가 정보 모듈 추가
콘텐츠
두 번째 열로 이동하여 추가 정보 모듈을 추가합니다. 제품을 선택합니다.
- 제품: 이 제품
집단
다음과 같이 요소 설정을 전환합니다.
- 제목 표시: 켜짐
텍스트
디자인 탭에서 텍스트의 스타일을 지정합니다.
- 글꼴: Duru Sans
- 글꼴 스타일: I + TT
- 색상: 베리 다크 그레이 #333333
- 크기:
- 데스크탑: 0.7vw
- 태블릿: 1.5vw
- 전화: 2.4vw
- 문자 간격: 2px
- 라인 높이: 1.5em
제목 텍스트
다음 제목 텍스트의 스타일을 지정합니다.
- 글꼴: Duru Sans
- 글꼴 스타일: TT
- 색상: 베리 다크 그레이 #333333
- 크기:
- 데스크탑: 1vw
- 태블릿: 2vw
- 전화: 2.2vw
- 문자 간격: 3px
- 라인 높이: 1.5em
속성 텍스트
속성 텍스트의 스타일도 지정하는 것을 잊지 마십시오.
- 글꼴: Duru Sans
- 글꼴 스타일: TT
- 색상: 베리 다크 그레이 #333333
- 크기:
- 데스크탑: 0.7vw
- 태블릿: 2vw
- 전화: 2.4vw
- 문자 간격: 2px
간격
그런 다음 간격을 조정합니다.
- 탑 패딩:
- 데스크탑: 1vw
- 태블릿 + 전화: 3vw
- 하단 패딩:
- 데스크탑 + 태블릿: 1vw
- 왼쪽 패딩:
- 데스크탑: 2vw
- 태블릿 + 전화: 5vw
- 오른쪽 패딩:
- 전화: 3vw
열 2에 Woo Gallery 모듈 추가
콘텐츠
디자인을 완료하는 데 필요한 마지막 모듈은 woo 갤러리 모듈입니다. 제품을 선택합니다.
- 제품: 이 제품
형세
디자인 탭으로 이동하여 레이아웃을 변경합니다.
- 레이아웃: 슬라이더
간격
그런 다음 간격 설정을 다음과 같이 조정합니다.
- 최고 여백:
- 데스크탑: -2vw
- 태블릿: -4vw
- 전화: -6vw
- 탑 패딩: 0vw
국경
마지막으로 테두리를 추가합니다.
- 테두리 스타일: 위쪽 테두리
- 너비: 4px
- 색상: 베리 다크 그레이 #333333
3. Divi 테마 빌더용 템플릿으로 변환
Divi 라이브러리에 저장
이제 디자인을 완료했으므로 제품 페이지 레이아웃을 Divi 라이브러리에 저장할 차례입니다. 제품 레이아웃에 대한 카테고리가 없으면 새로 만드십시오.
- 다른 이름으로 저장: 레이아웃
- 이름: 일본식 제품 마스터
- 카테고리: 제품 레이아웃.
Divi 테마 빌더를 열고 새 템플릿 만들기
모든 제품 페이지에서 이 디자인을 사용하려면 테마 빌더에서 템플릿을 만들어야 합니다. 테마 빌더 페이지 내에서 새 템플릿을 추가합니다. 드롭다운 메뉴에서 '모든 제품'을 선택합니다. 일부 제품에만 이 디자인을 사용하려면 설정을 조정할 수 있습니다.
Divi 라이브러리에서 사용자 정의 바디 추가
'사용자 정의 본문 추가'를 클릭하고 드롭 메뉴에서 '라이브러리에서 추가'를 선택합니다.
저장된 레이아웃에서 레이아웃 찾기 및 적용
레이아웃 창에서 저장된 레이아웃을 클릭하고 방금 생성한 레이아웃을 찾습니다.
테마 빌더에 변경 사항 저장
테마 빌더에 변경 사항을 저장하는 것을 잊지 마십시오.
시사
이제 템플릿이 웹사이트의 모든 제품에 적용됩니다. 다양한 화면 크기에 따른 결과를 최종적으로 살펴보겠습니다.
데스크탑
이동하는
랩입니다!
이 게시물에서 우리는 일본의 미적 영감을 받은 제품 페이지를 만드는 방법을 보여주었습니다. 스타일은 깨끗하고 미니멀하며 섬세하거나 수제 제품을 선보이는 데 적합합니다. 또한 Divi 테마 빌더를 사용하여 레이아웃을 템플릿으로 바꾸는 방법도 보여주었습니다. 새로운 Divi + WooCommerce 프로젝트로 이 디자인을 시도하고 생각을 알려주세요.