Divi로 평가를 위한 고유한 호버 오버랩을 만드는 방법

후기는 많은 웹사이트에서 큰 의미가 있습니다. 그들은 전문 지식을 보여주고 방문자는 회사 또는 사람이 얼마나 신뢰할 수 있는지 파악하기 위해 일반적으로 그들을 찾습니다. 그렇기 때문에 웹사이트에서 고객 평가를 시각적으로 표현하는 방식에 대해 생각하는 것이 중요합니다.

Divi를 사용하면 원하는 대로 정확하게 평가를 표시할 수 있습니다. 영감을 주기 위해 호버 오버랩을 사용하여 평가를 표시하는 놀랍고 독특한 방법을 만드는 방법을 보여 드리겠습니다.

가자!

시사

튜토리얼을 시작하기 전에 최종 결과를 살펴보겠습니다.

새 섹션 추가

시작하자! 새 페이지를 추가하거나 기존 페이지를 열고 새 일반 섹션을 추가하십시오.

새 행 추가 1

열 구조

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

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 크기 설정을 변경합니다.

• 이 행을 전체 너비로 만들기: 예
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1

간격

사용자 정의 간격 값도 추가하십시오.

• 상단 패딩: 0px
• 하단 패딩: 0px
• 열 2 왼쪽 패딩: 2vw(데스크톱), 3vw(태블릿 및 휴대전화)
• 열 2 오른쪽 패딩: 11vw(데스크톱), 3vw(태블릿 및 휴대전화)

열 1에 이미지 모듈 추가

이미지 업로드

다양한 모듈을 추가할 시간입니다! 첫 번째 열에서 이미지 모듈로 시작하십시오. 선택한 인물 사진을 업로드합니다.

이미지 정렬

이미지 설정을 열고 이미지 정렬을 변경합니다.

• 이미지 정렬: 왼쪽

사이징

다음으로 크기 설정을 변경합니다.

• 너비: 78%(데스크톱), 70%(태블릿 및 휴대폰)
• 모듈 정렬: 왼쪽

열 1에 마우스 오버랩 텍스트 모듈 추가

콘텐츠 추가

이미지 모듈 바로 아래에 텍스트 모듈을 추가합니다. 그 사람의 세부 정보를 내용 상자에 넣습니다.

기본 배경

배경색을 추가하여 진행합니다.

• 배경색: rgba(255,255,255,0)

호버 배경

호버에 다른 배경색을 추가하십시오.

• 배경색: #0f1bff

기본 텍스트 설정

그런 다음 텍스트 설정을 변경합니다.

• 텍스트 색상: #ffffff
• 텍스트 크기: 0px
• 텍스트 줄 높이: 0px

호버 텍스트 설정

마우스 오버 시 텍스트 설정을 일부 조정합니다.

• 텍스트 크기: 19px
• 텍스트 줄 높이: 2em

기본 제목 텍스트 설정

제목 텍스트 설정도 수정해야 합니다.

• 제목 3 글꼴 두께: 매우 굵게
• 제목 3 글꼴 스타일: 대문자
• 제목 3 텍스트 색상: #ffffff
• 제목 3 텍스트 크기: 0px
• 제목 3 줄 높이: 0em

호버 제목 텍스트 설정

호버에 다른 값을 추가하십시오.

• 제목 3 텍스트 크기: 35px
• 제목 3 줄 높이: 1.1em

간격

그런 다음 간격 설정으로 이동하여 값을 추가합니다.

• 상단 여백: -100px
• 왼쪽 여백: 50px
• 오른쪽 여백: 50px
• 상단 패딩: 40px
• 하단 패딩: 60px

텍스트 방향 변경

텍스트 설정으로 돌아가서 텍스트 방향을 변경하십시오.

• 텍스트 방향: 중앙

기본 상자 그림자

그런 다음 텍스트 모듈에 기본 상자 그림자를 추가합니다. 이 상자 그림자는 전체 디자인의 일부가 됩니다.

• 상자 그림자 수평 위치: 1000px
• 상자 그림자 수직 위치: -400px
• 상자 그림자 흐림 강도: 0px
• 상자 그림자 확산 강도: 250px
• 그림자 색상: rgba(175,175,175,0.13)

호버 박스 그림자

특별한 호버 오버랩 효과를 만들려면 호버 상자 그림자도 추가하십시오.

• 상자 그림자 수평 위치: -73px
• 상자 그림자 수직 위치: -49px
• 상자 그림자 흐림 강도: 0px
• 상자 그림자 확산 강도: 10px
• 그림자 색상: rgba(255,182,12,0.53)

전환

부드러운 전환을 만들려면 고급 탭에서 전환 시간을 변경하세요.

• 전환 시간: 1000ms

2열에 평가 텍스트 모듈 추가

콘텐츠 추가

두 번째 열에서 가장 먼저 필요한 것은 제목 텍스트 모듈입니다. 계속해서 평가의 요약을 추가하십시오.

제목 텍스트 설정

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

• 제목 3 글꼴: Goudy Bookletter 1911
• 제목 3 텍스트 정렬: 왼쪽
• 제목 3 텍스트 크기: 3.5vw(데스크톱), 40px(태블릿), 30px(전화)
• 제목 3 줄 높이: 1.1em

간격

몇 가지 사용자 정의 간격 값을 추가하여 계속하십시오.

• 상단 여백: 7vw(데스크톱), 100px(태블릿), 50px(전화)

2열에 설명 텍스트 모듈 추가

콘텐츠 추가

제목 텍스트 모듈 바로 아래에 전체 평가가 있는 다른 텍스트 모듈을 추가하십시오.

텍스트 설정

평가를 추가한 후 텍스트 설정을 변경하십시오.

• 텍스트 줄 높이: 2.2em
• 텍스트 방향: 왼쪽

간격

사용자 정의 상단 여백도 추가하십시오.

• 상단 여백: 4vw(데스크톱), 50px(태블릿 및 휴대폰)

새 행 추가

열 구조

이제 첫 번째 행을 완료했으므로 다음 열 구조를 사용하여 두 번째 행을 추가해 보겠습니다.

사이징

행 설정을 열고 크기 설정을 변경합니다.

• 이 행을 전체 너비로 만들기: 예
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1

간격

다음에 몇 가지 사용자 정의 간격 값을 추가하십시오.

• 상단 여백: 100px
• 상단 패딩: 0px
• 하단 패딩: 0px
• 열 1 왼쪽 패딩: 11vw(데스크톱), 3vw(태블릿 및 휴대전화)
• 열 1 오른쪽 패딩: 2vw(데스크톱), 3vw(태블릿 및 휴대전화)

이전 행의 텍스트 모듈 복제 및 열 1에 배치

이전 행으로 돌아가서 2열에 있는 두 모듈을 모두 복제합니다. 복제한 후에는 새 행의 첫 번째 열에 복제물을 배치합니다.

텍스트 방향 변경

두 모듈의 텍스트 방향을 변경합니다.

• 텍스트 방향: 오른쪽

2열에 이미지 모듈 추가

이미지 업로드

다음으로 두 번째 열에 Image Module을 추가하고 새 세로 이미지를 업로드합니다.

이미지 정렬

모듈의 이미지 정렬을 변경합니다.

• 이미지 정렬: 오른쪽

사이징

크기 설정을 변경하여 계속하십시오.

• 너비: 78%(데스크톱), 70%(태블릿 및 휴대폰)
• 모듈 정렬: 오른쪽

간격

사용자 정의 간격 값도 추가하십시오.

• 상단 여백: 50px(태블릿 및 휴대폰)

2열에 마우스 오버랩 텍스트 모듈 추가

콘텐츠 추가

이 디자인을 마무리하는 데 필요한 마지막 모듈은 이미지 모듈 아래의 텍스트 모듈입니다. 내용 상자에 사람의 세부 정보를 추가합니다.

기본 배경

그런 다음 모듈에 배경 이미지를 추가합니다.

• 배경색: rgba(255,255,255,0)

호버 배경

마우스 오버 시 배경색을 변경합니다.

• 배경색: #690cff

기본 텍스트 설정

다음으로 텍스트 설정을 변경합니다.

• 텍스트 색상: #ffffff
• 텍스트 크기: 0px
• 텍스트 줄 높이: 0px
• 텍스트 방향: 중앙

호버 텍스트 설정

호버에서 약간의 조정을 수행하십시오.

• 텍스트 크기: 19px
• 텍스트 줄 높이: 2em

기본 제목 텍스트 설정

제목 텍스트 설정도 변경하십시오.

• 제목 3 글꼴 두께: 매우 굵게
• 제목 3 텍스트 색상: #ffffff
• 제목 3 텍스트 크기: 0px
• 제목 3 줄 높이: 0em

호버 제목 텍스트 설정

호버에 약간의 조정이 있습니다.

• 제목 3 텍스트 크기: 35px
• 제목 3 줄 높이: 1.1em

간격

간격 설정으로 이동하여 계속해서 사용자 정의 값을 추가하십시오.

• 상단 여백: -80px
• 왼쪽 여백: 50px
• 오른쪽 여백: 50px
• 상단 패딩: 40px
• 하단 패딩: 60px

기본 상자 그림자

텍스트 모듈에 기본 상자 그림자를 추가합니다.

• 상자 그림자 수평 위치: -1000px
• 상자 그림자 수직 위치: -420px
• 상자 그림자 흐림 강도: 0px
• 상자 그림자 확산 강도: 250px
• 그림자 색상: rgba(175,175,175,0.13)

호버 박스 그림자

그리고 호버에서 상자 그림자를 변경하십시오.

• 상자 그림자 수평 위치: -73px
• 상자 그림자 수직 위치: -49px
• 상자 그림자 흐림 강도: 0px
• 상자 그림자 확산 강도: 10px
• 그림자 색상: rgba(12,255,238,0.53)

전환

마지막으로 전환 지속 시간을 변경하여 부드러운 전환을 만듭니다.

• 전환 시간: 1000ms

시사

이제 모든 단계를 거쳤으므로 최종 결과를 최종적으로 살펴보겠습니다!

마지막 생각들

이 게시물이 호버 오버랩을 사용하여 멋진 평가 섹션을 만드는 데 영감을 주었기를 바랍니다! 코드를 작성하거나 파악하는 데 많은 시간을 할애하지 않고도 웹사이트에 또 다른 차원을 추가하는 데 정말 도움이 됩니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!