Divi를 사용하여 호버 탭에서 기능을 표시하는 방법

웹 페이지에서 기능 및/또는 제품을 선보일 새롭고 창의적인 방법을 찾고 계십니까? 그렇다면 이 게시물에서 Divi의 기본 제공 옵션만 사용하여 호버 탭에 기능을 표시하는 방법을 보여주기 때문에 계속 읽으십시오. 이 접근 방식을 통해 얻을 수 있는 가능성은 무한하며 확실히 Divi를 더 깊은 수준에서 이해할 수 있게 해줍니다. 탭 호버 효과는 호버 친화적인 데스크탑 환경에서만 발생합니다. 더 작은 화면 크기에서 호버 탭을 볼 때 기능은 원래 형식으로 나열됩니다.

가자!

시사

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

데스크탑

이동하는

만들기 시작합시다!

YouTube 채널 구독

새 섹션 추가

그라데이션 배경

새 페이지를 추가하거나 기존 페이지를 열고 새 섹션을 추가하십시오. 섹션 설정을 열고 섹션에 그라데이션 배경을 추가합니다. 위의 인쇄 화면에서 볼 수 있듯이 그라디언트 배경을 사용하여 호버 탭의 왼쪽 부분을 덮습니다.

• 색상 1: #f2f2f2
• 색상 2: #ffffff
• 기울기 방향: 87deg
• 시작 위치: 20%
• 최종 위치: 20%

간격

그런 다음 두 옵션에 '0px'를 추가하여 섹션의 사용자 지정 상단 및 하단 패딩을 제거합니다.

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

새 행 추가

열 구조

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

배경색

아직 모듈을 추가하지 않고 행 설정을 열고 배경색을 변경하십시오.

• 배경색: #ffffff

행 정렬

행 정렬도 수정합니다.

• 행 정렬: 왼쪽

기본 크기 조정

그리고 크기 설정도 변경합니다.

• 사용자 정의 너비 사용: 예
• 단위: PX
• 맞춤 너비: 400px
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1

호버 크기 조정

마우스 오버 시 크기 조정 설정에서 사용자 정의 너비 옵션을 수정합니다. 이렇게 하면 마우스를 가져가면 행이 확장됩니다.

• 사용자 정의 너비: 2000px

간격

그런 다음 간격 설정으로 이동하여 기본 상단 및 하단 패딩 값을 제거합니다.

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

기본 테두리

행의 오른쪽 상단 모서리에 '20px'를 추가하고 행에 왼쪽 테두리도 추가합니다.

• 왼쪽 테두리 너비: 20px
• 왼쪽 테두리 색상: #6d44ff

호버 테두리

대신 '0px'를 추가하여 마우스를 가져갈 때 '20px' 오른쪽 상단의 둥근 모서리를 제거합니다.

기본 상자 그림자

마지막으로 미묘한 상자 그림자를 추가하십시오.

• 상자 그림자 흐림 강도: 80px
• 상자 그림자 확산 강도: -10px
• 그림자 색상: rgba(0,0,0,0.11)

호버 박스 그림자

그리고 마우스 오버 시 그림자 색상을 완전히 투명한 색상으로 수정합니다.

• 그림자 색상: rgba(255,255,255,0)

행에 Blurb 모듈 추가

콘텐츠 추가

이제 모든 행 설정 수정이 완료되었으므로 열에 Blurb 모듈을 추가할 수 있습니다. 원하는 다른 모듈을 자유롭게 사용하십시오. 모듈을 추가했으면 원하는 콘텐츠를 추가합니다.

아이콘 선택

다음으로 원하는 아이콘을 선택합니다.

아이콘 설정

아이콘 설정에서 아이콘의 모양을 변경합니다.

• 아이콘 색상: #5323ff
• 아이콘 배치: 상단
• 아이콘 글꼴 크기 사용: 예
• 아이콘 글꼴 크기: 54px

기본 제목 텍스트 설정

다음으로 제목 텍스트 설정을 수정합니다.

• 제목 글꼴: Poppins
• 제목 텍스트 정렬: 가운데
• 제목 텍스트 색상: #5323ff
• 제목 텍스트 크기: 25px
• 제목 문자 간격: -1px
• 제목 줄 높이: 1em

호버 제목 텍스트 설정

마우스를 가져갈 때 제목 줄 높이를 수정합니다.

• 제목 줄 높이: 1.5em

기본 본문 텍스트 설정

그런 다음 본문 텍스트 설정으로 이동하여 몇 가지를 변경합니다. 여기에는 텍스트 크기를 '0px'로 변경하는 작업이 포함됩니다. 이것은 우리가 호버에만 본문 텍스트를 표시하는 데 도움이 될 것입니다.

• 본문 글꼴: Poppins
• 본문 글꼴 두께: Light
• 본문 정렬: 가운데
• 본문 색상: #000000
• 본문 텍스트 크기: 0px(데스크톱), 15px(태블릿 및 휴대폰)
• 바디 라인 높이: 2.2em

호버 본문 텍스트 설정

마우스 오버 시 본문 텍스트가 표시되도록 하려면 마우스 오버 시 텍스트 크기를 변경하십시오.

• 본문 텍스트 크기: 15px

기본 간격

모듈에 숨을 쉴 수 있는 공간을 제공하기 위해 모듈에 사용자 지정 상단 및 하단 패딩을 추가합니다.

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

호버 간격

마우스를 가져갈 때 간격 설정을 수정합니다. 행과 Blurb 모듈 모두에 호버 옵션을 적용하고 있기 때문에 Visual Builder를 종료하기 전에는 최종 결과를 볼 수 없습니다.

• 상단 패딩: 80px
• 하단 패딩: 80px
• 왼쪽 패딩: 20vw
• 오른쪽 패딩: 20vw

행 3회 복제

첫 번째 행과 해당 Blurb 모듈 수정이 완료되면 원하는 만큼 행을 복제할 수 있습니다.

행 변경 및 블러브 모듈 #2

행 간격 변경

첫 번째 복제본을 열고 사용자 정의 왼쪽 여백을 추가하십시오. 이를 통해 이 게시물의 미리보기에서 확인할 수 있는 계단 효과를 만들 수 있습니다.

• 왼쪽 여백: 6vw

행 테두리 색상 변경

행의 왼쪽 테두리 색상도 변경합니다.

• 왼쪽 테두리 색상: #00ffcc

광고문안 콘텐츠 및 아이콘 변경

그런 다음 Blurb 모듈을 열고 아이콘을 변경합니다.

Blurb 모듈 아이콘 색상 변경

아이콘 색상과 함께.

• 아이콘 색상: #00eda6

제목 텍스트 색상 변경

그리고 제목 텍스트 색상입니다.

• 제목 텍스트 색상: #00eda6

행 변경 및 블러브 모듈 #3

행 간격 변경

두 번째 복제본에도 사용자 정의 왼쪽 여백을 추가하십시오.

• 왼쪽 여백: 12vw

행 테두리 색상 변경

왼쪽 행 테두리 색상을 변경합니다.

• 왼쪽 테두리 색상:#afebff

광고문안 콘텐츠 및 아이콘 변경

광고 아이콘 및 콘텐츠와 함께.

Blurb 모듈 아이콘 색상 변경

아이콘 색상도 수정합니다.

• 아이콘 색상: #68d9ff

제목 텍스트 색상 변경

그리고 제목 텍스트 색상도.

• 제목 텍스트 색상: #68d9ff

행 변경 및 블러브 모듈 #4

행 간격 변경

다음과 마지막 복제에! 행에 사용자 정의 왼쪽 여백을 추가하십시오.

• 왼쪽 여백: 18vw

행 테두리 색상 변경

행의 왼쪽 테두리 색상도 변경합니다.

• 왼쪽 테두리 색상: #dd87cf

광고문안 콘텐츠 및 아이콘 변경

행에서 Blurb 모듈을 열고 모듈의 아이콘과 내용을 변경합니다.

Blurb 모듈 아이콘 색상 변경

아이콘 색상과 함께.

• 아이콘 색상: #dd6aca

제목 텍스트 색상 변경

제목 텍스트 색상도 마찬가지입니다.

• 제목 텍스트 색상: #dd6aca

시사

이제 자습서를 살펴보았으므로 다양한 화면 크기에서 결과를 최종적으로 살펴보겠습니다.

데스크탑

이동하는

마지막 생각들

이 게시물에서는 Divi의 기본 제공 옵션을 사용하여 호버 탭을 만드는 방법만 보여주었습니다. 이 접근 방식은 기능이나 제품에 대한 콘텐츠를 대화식으로 공유하는 데 도움이 됩니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!