멋진 Divi 웹사이트 영웅 섹션에서 제품 카테고리를 강조하는 방법
게시 됨: 2019-01-20전자 상거래 웹사이트에 익숙하다면 의심할 여지 없이 제품 카테고리에도 익숙할 것입니다. 제품 카테고리는 웹사이트에서 가장 강력한 페이지가 될 수 있습니다. 그렇기 때문에 간단하고 우아한 방식으로 쉽게 찾고 강조 표시하는 것이 중요합니다. Divi의 내장 옵션을 사용하면 다양한 방향으로 디자인을 할 수 있습니다. 이 자습서에서는 영웅 섹션에서 제품 카테고리를 강조 표시하는 방법을 보여 드리겠습니다. 우리는 디자인 예제를 처음부터 만들 것이며, 자신만의 독창적인 방식으로 제품 카테고리를 강조하는 데 영감을 주기를 바랍니다!
시작하겠습니다.
시사
튜토리얼을 시작하기 전에 다양한 화면 크기에서 결과를 간단히 살펴보겠습니다.
만들기 시작합시다!
YouTube 채널 구독
새 섹션 추가
그라데이션 배경
페이지에 새 섹션을 추가하여 시작하십시오. 이 섹션의 설정을 열고 그라디언트 배경을 추가하십시오.
- 색상 1: #ffffff
- 색상 2: #757f1e
- 그라디언트 유형: 선형
- 기울기 방향: 90deg
- 시작 위치: 50%
- 최종 위치: 50%
간격
그런 다음 디자인 탭으로 이동하여 섹션에 사용자 지정 위쪽 및 아래쪽 패딩을 추가합니다.
- 상단 패딩: 130px
- 하단 패딩: 130px
행 #1 추가
열 구조
다음 열 구조를 사용하여 새 행을 계속 추가합니다.
열 1 배경색
아직 모듈을 추가하지 않고 행 설정을 열고 첫 번째 열에 배경색을 추가하십시오.
- 열 1 배경색: rgba(0,0,0,0.19)
열 1 배경 이미지
혼합 모드와 함께 첫 번째 열에 배경 이미지를 추가합니다.
- 열 1 배경 이미지 위치: 하단 중앙
- 열 1 배경 이미지 반복: 반복 없음
- 열 1 배경 이미지 혼합: 곱하기
2열 배경색
두 번째 열에는 흰색 배경색만 필요합니다.
- 2열 배경색: #ffffff
사이징
계속해서 행 설정의 디자인 탭으로 이동하여 크기 설정을 변경합니다.
- 사용자 정의 너비 사용: 예
- 단위: PX
- 사용자 정의 너비: 2000px
- 사용자 지정 거터 너비 사용: 예
- 거터 폭: 1
- 열 높이 균등화: 예
간격
행의 기본 사용자 지정 패딩도 모두 제거합니다.
- 상단 패딩: 0px
- 하단 패딩: 0px
박스 섀도우
그리고 미묘한 상자 그림자를 추가하십시오.
- 상자 그림자 흐림 강도: 80px
열 2에 텍스트 모듈 추가
콘텐츠 추가
모듈 추가를 시작할 시간입니다! 두 번째 열에 필요한 첫 번째 모듈은 제목 텍스트 모듈입니다. 선택한 콘텐츠를 추가합니다.
제목 텍스트 설정
그런 다음 제목 텍스트 설정으로 이동하여 몇 가지를 변경합니다.
- 제목 글꼴 두께: 매우 굵게
- 제목 텍스트 크기: 60px(데스크톱 및 태블릿), 50px(전화)
- 제목 문자 간격: -4px
- 표제 라인 높이: 0.8em
간격
사용자 정의 여백 및 패딩 값도 추가하십시오.
- 최고 마진: 17vw
- 왼쪽 패딩: 2vw(데스크톱), 4vw(태블릿), 5vw(전화)
2열에 디바이더 모듈 추가
시계
두 번째 열에 필요한 두 번째이자 마지막 모듈은 Divider 모듈입니다. 구분선 표시 옵션이 활성화되어 있는지 확인하십시오.
- 디바이더 표시: 예
색상
다음으로 구분선의 색상을 변경합니다.
- 색상: #757f1e
스타일
스타일 설정에서도 구분선 스타일을 수정합니다.
- 디바이더 스타일: 더블
사이징
그리고 모듈의 크기 설정에서 Divider Weight를 증가시킵니다.
- 디바이더 무게: 6px
간격
마지막으로 Divider Module에 사용자 지정 위쪽 및 아래쪽 여백을 추가합니다.
- 최고 마진: 2vw
- 하단 여백: 15vw
행 #2 추가
열 구조
두 번째 줄로! 다음 열 구조를 선택하십시오.
열 1 배경색
행 설정을 열고 첫 번째 열에 배경색을 추가합니다.
- 열 1 배경색: #212121
사이징
그런 다음 디자인 탭으로 이동하여 행 크기를 조정합니다.
- 사용자 정의 너비 사용: 예
- 단위: PX
- 사용자 정의 너비: 2000px
- 사용자 지정 거터 너비 사용: 예
- 거터 폭: 1
간격
상단 및 하단 패딩에 '0px'를 추가하여 행의 모든 맞춤 패딩도 제거합니다.
- 상단 패딩: 0px
- 하단 패딩: 0px
박스 섀도우
마지막으로 행에 미묘한 상자 그림자를 제공하십시오.
- 상자 그림자 흐림 강도: 80px
열 1에 텍스트 모듈 #1 추가
콘텐츠 추가
첫 번째 모듈은 텍스트 모듈입니다. 선택한 내용이 있는 첫 번째 열에 하나를 추가합니다.
텍스트 설정
디자인 탭으로 이동하여 텍스트 설정을 변경하여 계속 진행합니다.
- 텍스트 글꼴 두께: 가벼움
- 텍스트 색상: #ffffff
- 텍스트 크기: 18px(데스크톱), 15px(태블릿), 12px(전화)
- 텍스트 줄 높이: 1em
- 텍스트 방향: 왼쪽
- 텍스트 색상: 라이트
제목 텍스트 설정
제목 텍스트 설정도 수정합니다.
- 제목 3 텍스트 색상: #ffffff
- 제목 3 텍스트 크기: 25px(데스크톱), 20px(태블릿), 18px(전화)
- 제목 3 글자 간격: -1px
간격
간격 설정에서도 사용자 정의 패딩 값을 추가하십시오.
- 상단 패딩: 30px
- 하단 패딩: 30px
- 왼쪽 패딩: 50px
- 오른쪽 패딩: 50px
열 2에 텍스트 모듈 #2 추가
콘텐츠 추가
계속해서 두 번째 열에 다른 텍스트 모듈을 추가합니다. 원하는 콘텐츠를 추가하고 링크 설정에서 제품 카테고리 페이지도 링크하십시오.
기본 배경색
그런 다음 배경 설정으로 이동하여 배경색을 추가합니다.
- 배경색: #eaeaea
호버 배경색
마우스를 가져갈 때 이 배경색을 변경합니다.
- 배경색: #ffbb00
기본 텍스트 설정
다음 디자인 탭에서 텍스트 설정을 변경합니다.
- 텍스트 글꼴 두께: 매우 굵게
- 텍스트 글꼴 스타일: 대문자
- 텍스트 색상: #333333
- 텍스트 크기: 16px
- 텍스트 문자 간격: -1px
- 텍스트 방향: 중앙
호버 텍스트 설정
호버에서 이러한 설정을 수정합니다.
- 텍스트 색상: #ffffff
- 텍스트 크기: 20px
기본 간격
또한 일부 기본 간격 값을 적용하고 있습니다.
- 상단 패딩: 45px
- 하단 패딩: 45px
- 왼쪽 패딩: 5px
- 오른쪽 패딩: 5px
호버 간격
호버에서 변경할 항목입니다.
- 상단 여백: -50px
- 왼쪽 여백: -20px
- 상단 패딩: 70px
- 하단 패딩: 70px
- 왼쪽 패딩: 5px
- 오른쪽 패딩: 5px
기본 상자 그림자
계속해서 상자 그림자 설정을 열고 완전히 투명한 상자 그림자를 추가합니다.
- 상자 그림자 흐림 강도: 80px
- 그림자 색상: rgba(255,255,255,0)
호버 박스 그림자
호버에서 완전히 투명한 상자 그림자 색상을 변경하여 표시하십시오.
- 그림자 색상: rgba(0,0,0,0.34)
텍스트 모듈 #2를 두 번 복제하고 나머지 열에 배치
열 2에서 텍스트 모듈 수정을 완료했으면 계속해서 모듈을 두 번 복제하고 행의 나머지 두 열에 복제본을 배치할 수 있습니다.
첫 번째 복제 변경
콘텐츠 변경
세 번째 열에서 첫 번째 복제본을 열고 제품 카테고리의 콘텐츠와 링크를 변경합니다.
배경색 변경
이 모듈의 배경색도 변경하십시오.
- 배경색: #dddddd
두 번째 중복 변경
콘텐츠 변경
4열에서 두 번째 복제본의 내용도 변경합니다.
배경색 변경
배경색과 함께.
- 배경색: #c6c6c6
행 #1의 2열에 더 작은 화면 크기를 위한 이미지 모듈 추가
이미지 업로드
마지막으로 작은 화면 크기에 맞게 모든 것을 최적화하기 위해 첫 번째 행의 두 번째 열에 이미지 모듈도 추가할 것입니다.
시계
이 모듈을 모듈의 고급 탭에서 바탕 화면에 숨겨 더 작은 화면 크기에서만 표시되도록 합니다.
시사
이제 모든 단계를 거쳤으므로 다양한 화면 크기에서 결과를 최종적으로 살펴보겠습니다.
마지막 생각들
이 게시물에서는 웹사이트의 주요 제품 카테고리를 집중 조명하는 멋진 디자인 예제를 다시 만들었습니다. 이 튜토리얼을 통해 자신만의 디자인을 만들 수 있기를 바랍니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!