Divi를 사용하여 Hover에 열 콘텐츠를 표시하는 방법(무료 다운로드!)

최신 Divi 게시물 중 하나에서 숨겨진 행 콘텐츠를 가리켜서 표시하는 방법을 보여주었습니다. 오늘은 동일한 유형의 접근 방식을 사용하여 대신 열 콘텐츠를 표시하는 방법을 보여 드리겠습니다. 우리가 처리할 접근 방식은 비슷하며 데스크탑에서 멋진 호버 효과가 있는 모든 종류의 디자인을 만들 수 있지만 호버 옵션이 없는 작은 화면 크기에서도 잘 작동합니다.

이 튜토리얼이 여러분이 구축하는 웹사이트를 위한 모든 종류의 인터랙티브 디자인을 만드는 데 영감을 주기를 바랍니다! 게시물이 끝나면 JSON 파일을 다운로드하고 필요에 맞게 조정할 수 있습니다.

가자!

시사

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

데스크탑

아래 GIF에서 알 수 있듯이 호버 시 열 콘텐츠를 표시하는 부드러운 호버 전환이 있습니다.

이동하는

반면에 더 작은 화면 크기에서는 마우스를 가져갈 필요 없이 열 콘텐츠가 이미 표시됩니다.

재창조를 시작합시다!

YouTube 채널 구독

새 일반 섹션 추가

간격

새 페이지나 기존 페이지를 열고 일반 섹션을 추가합니다. 섹션 설정을 열고 간격 설정에서 상단 및 하단 맞춤 패딩을 추가합니다.

• 탑 패딩: 10vw
• 하단 패딩: 15vw

새 행 추가

열 구조

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

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 크기 설정을 약간 변경합니다. 이러한 설정을 사용하면 행이 화면의 전체 너비를 차지할 수 있으며 열 사이의 모든 공간을 제거하는 데도 도움이 됩니다.

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

간격

다음 행의 간격 설정으로 이동합니다. 여기에서는 사용자 지정 패딩 값을 추가하여 이전 단계에서 제거한 공간을 대체할 것입니다.

• 왼쪽 패딩: 8vw
• 오른쪽 패딩: 8vw
• 열 1 오른쪽 패딩: 2vw
• 열 2 왼쪽 패딩: 1vw
• 열 2 오른쪽 패딩: 1vw
• 열 3 왼쪽 패딩: 2vw

열 1에 텍스트 모듈 #1 추가

콘텐츠 추가

모듈 추가를 시작할 시간입니다! 열 1의 텍스트 모듈로 시작합니다. 선택한 H3 콘텐츠를 추가합니다.

H3 텍스트 설정

그런 다음 제목 텍스트 설정으로 이동하여 H3 콘텐츠의 모양을 일부 변경합니다.

• 제목 3 글꼴: Didact Gothic
• 제목 3 글꼴 두께: 굵게
• 제목 3 텍스트 정렬: 가운데
• 제목 3 텍스트 색상: #3567ff
• 제목 3 텍스트 크기: 1.2vw(데스크톱), 20px(태블릿 및 휴대폰)

간격

다음으로 텍스트 모듈에 몇 가지 사용자 정의 간격 값을 추가합니다.

• 하단 여백: 4vw
• 탑 패딩: 4vw
• 하단 패딩: 4vw

박스 섀도우

그리고 모듈에 미묘한 상자 그림자를 줍니다.

• 상자 그림자 수직 위치: 36px
• 상자 그림자 흐림 강도: 60px
• 그림자 색상: rgba(0,0,0,0.06)

열 1에 텍스트 모듈 #2 추가

콘텐츠 추가

이전 모듈 바로 아래에 다른 텍스트 모듈을 추가하여 계속하십시오. 선택한 단락 내용을 추가합니다.

텍스트 설정

그런 다음 디자인 탭으로 이동하여 텍스트 설정을 일부 변경합니다.

• 텍스트 글꼴: Open Sans
• 텍스트 크기: 0.8vw(데스크톱), 14px(태블릿 및 휴대폰)
• 텍스트 문자 간격: -0.05vw
• 텍스트 줄 높이: 2.2em
• 텍스트 방향: 양쪽 맞춤
• 텍스트 색상: 어두운

간격

간격 설정에서 사용자 정의 여백 및 패딩 값도 사용하십시오.

• 하단 여백: 3vw
• 탑 패딩: 2vw
• 하단 패딩: 2vw
• 왼쪽 패딩: 4vw
• 오른쪽 패딩: 4vw

국경

다음 설정을 사용하여 모듈에 왼쪽 및 오른쪽 테두리를 추가합니다.

• 오른쪽 테두리 너비: 1px
• 오른쪽 테두리 색상: #e5e5e5

열 1에 버튼 모듈 추가

사본 추가

첫 번째 열에서 필요한 다음 모듈은 버튼 모듈입니다. 원하는 사본을 추가하십시오.

조정

그런 다음 디자인 탭으로 이동하여 버튼 정렬을 가운데로 변경합니다.

• 버튼 정렬: 중앙

버튼 설정

계속해서 버튼 설정을 열고 우리가 달성하고자 하는 전체 디자인과 일치하도록 버튼의 모양을 변경합니다.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 1vw(데스크톱), 15px(태블릿 및 전화)
• 버튼 텍스트 색상: #000000
• 버튼 테두리 너비: 1px
• 버튼 테두리 색상: #dddddd
• 버튼 테두리 반경: 0px
• 버튼 문자 간격: -0.05vw
• 글꼴 두께: 굵게
• 글꼴 스타일: 대문자

간격

Button Module의 간격 값도 가지고 놀아보세요.

• 하단 여백: 100px(태블릿 및 휴대폰)
• 상단 패딩: 0.8vw(데스크톱), 10px(태블릿 및 휴대폰)
• 하단 패딩: 0.8vw(데스크톱), 10px(태블릿 및 휴대폰)
• 왼쪽 패딩: 3.5vw(데스크톱), 50px(태블릿 및 휴대폰)
• 오른쪽 패딩: 3.5vw(데스크톱), 50px(태블릿 및 휴대폰)

열 1의 모듈을 두 번 복제하고 나머지 열에 중복 배치

3개의 다른 모듈을 열 1에 추가한 후에는 각 모듈을 두 번 복제할 수 있습니다. 나머지 두 열에 복제본을 배치하여 각 열에서 동일한 디자인을 얻습니다.

열 2에서 텍스트 모듈 #1의 텍스트 색상 변경

2열에서 첫 번째 텍스트 모듈을 열고 텍스트 색상을 변경합니다.

• 제목 3 텍스트 색상: #6d28c1

열 3에서 텍스트 모듈 #1의 텍스트 색상 변경

세 번째 열의 첫 번째 텍스트 모듈에 대해 동일한 작업을 수행합니다.

• 제목 3 텍스트 색상: #15668e

열 1에 오버레이 텍스트 모듈 추가

콘텐츠 추가

이제 필요한 모든 열 콘텐츠가 있으므로 가리키기 전에 콘텐츠를 숨길 겹치는 요소를 추가할 수 있습니다. 이를 달성하기 위해 다른 텍스트 모듈을 사용할 것입니다. 계속해서 첫 번째 열에 다른 것을 추가하십시오. 이것이 열의 마지막 모듈인지 확인하십시오. 원하는 콘텐츠를 추가하세요.

그라데이션 배경

모듈에 그라데이션 배경을 추가하여 계속합니다.

• 색상 1: #6a30ff
• 색상 2: #3567ff
• 기울기 방향: 124deg

텍스트 설정

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

• 텍스트 글꼴: Didact Gothic
• 텍스트 색상: #ffffff
• 텍스트 크기: 2vw
• 텍스트 방향: 중앙

간격

그리고 몇 가지 사용자 정의 패딩 값을 추가하여 모듈에서 모양을 만듭니다. 또한 이 모듈과 열 콘텐츠 사이에 겹침을 만들기 위해 약간의 음수 위쪽 여백을 추가하고 있습니다. 텍스트 모듈 뒤에 숨긴 콘텐츠는 클릭할 수 없습니다. 그렇기 때문에 이 예의 버튼과 같은 클릭 유도문안이 마우스 오버 없이 표시되도록 유지하는 것이 중요합니다.

• 최고 여백: -38vw
• 탑 패딩: 15vw
• 하단 패딩: 15vw

국경

다음으로 텍스트 모듈에 둥근 모서리를 추가합니다.

박스 섀도우

미묘한 상자 그림자와 함께.

• 상자 그림자 흐림 강도: 40px
• 그림자 색상: rgba(0,0,0,0.16)

기본 필터

그런 다음 필터 설정으로 이동하여 불투명도가 기본적으로 '100%'인지 확인합니다.

• 불투명도: 100%

호버 필터

마우스 오버 시 불투명도를 '0%'로 변경합니다. 이렇게 하면 모듈이 사라지고 모든 열 콘텐츠가 대신 표시됩니다.

• 불투명도: 0%

맞춤 CSS

텍스트 모듈이 모든 열 콘텐츠 상단에 유지되도록 하려면 텍스트 모듈의 고급 탭에 두 줄의 CSS 코드를 추가합니다.

z-index: 99;
position: relative

시계

그리고 태블릿과 전화에서 전체 모듈을 숨깁니다. 이 게시물의 시작 부분에서 언급했듯이 방문자가 좋은 사용자 경험을 가질 수 있도록 모든 열 콘텐츠를 더 작은 화면 크기로 표시하고 있습니다.

오버레이 텍스트 모듈을 두 번 복제하고 나머지 열에 중복 배치

오버레이 텍스트 모듈 수정을 완료했으면 계속해서 두 번 복제하십시오. 나머지 두 열에 복제본을 각각 배치합니다.

열 2에서 오버레이 텍스트 모듈의 그라데이션 배경 변경

첫 번째 복제본의 그라데이션 배경색을 변경합니다.

• 색상 1: #d530ff
• 색상 2: #6d28c1

열 3에서 오버레이 텍스트 모듈의 그라데이션 배경 변경

그리고 두 번째 복제에 대해서도 동일한 작업을 수행합니다.

• 색상 1: #41ff30
• 색상 2: #15668e

무료로 섹션 다운로드

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

파일 다운로드

무료로 다운로드

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

다운로드

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

시사

데스크탑

이동하는

마지막 생각들

이 게시물에서는 마우스 오버 시 열 콘텐츠를 표시하는 방법을 보여주었습니다. 추가 수준의 상호 작용을 추가하기 위해 만드는 모든 종류의 웹 사이트에 이 접근 방식을 사용할 수 있습니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!