Divi 행을 수평 및 수직 호버 탭으로 변환하는 방법

탭은 웹사이트의 간결한 영역에서 중요한 정보를 사용할 수 있도록 하는 데 확실히 유용합니다. 이렇게 하면 사용자가 긴 페이지 콘텐츠를 스크롤할 필요가 줄어듭니다. Divi의 탭 모듈은 사용하기 쉽고 클릭 시 간단한 콘텐츠를 전환하는 데 적합합니다.

그러나 이 튜토리얼에서는 전체 Divi 행을 호버 탭으로 변환하는 방법을 보여 드리겠습니다. 또한 가로 및 세로 탭을 모두 만드는 방법도 보여 드리겠습니다. 이렇게 하면 각 탭 콘텐츠 영역에 대해 여러 모듈이 있는 완전한 행 레이아웃을 디자인할 수 있는 Divi의 기능이 해제됩니다. 플러그인이 필요하지 않습니다!

시작하자.

엿보기

다음은 이 튜토리얼에서 함께 만들 수평 및 수직 호버 탭에 대한 간략한 설명입니다.

Divi Rows Hover 탭 레이아웃을 무료로 다운로드하십시오

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

파일 다운로드

무료로 다운로드

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

다운로드

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

레이아웃을 페이지로 가져오려면 zip 파일을 추출하고 json 파일을 Divi Builder로 드래그하기만 하면 됩니다.

튜토리얼로 들어가 볼까요?

YouTube 채널 구독

시작하는 데 필요한 것

시작하려면 다음 설정이 필요합니다.

1. Divi 테마가 설치되고 활성화되었습니다.
2. 프론트 엔드에서 처음부터 빌드하기 위해 생성된 새 페이지(비주얼 빌더)
3. 모의 콘텐츠에 사용할 3개의 이미지

그런 다음 Divi에서 일부 호버 탭을 만들기 시작할 수 있는 빈 캔버스가 생깁니다.

Divi 행을 사용하여 수평 호버 탭 만들기

시작하려면 2열 행이 있는 새 일반 섹션을 만드십시오.

행 배경, 패딩 및 상자 그림자

모듈을 추가하기 전에 먼저 행 설정을 약간 사용자 정의하겠습니다. 탭 기능을 위해 위치를 지정하려면 나중에 행으로 돌아와야 합니다.

행 설정을 열고 다음을 업데이트합니다.

배경 그라데이션 왼쪽 색상: #284f91
배경 그라데이션 오른쪽 색상: #4646c4

패딩: 상단 50픽셀, 하단 50픽셀, 왼쪽 50픽셀, 오른쪽 50픽셀
박스 섀도우: 스크린샷 참조
상자 그림자 색상: rgba(70,70,196,0.66)

행에 콘텐츠 추가

이제 행에 모의 콘텐츠를 추가할 것입니다. 콘텐츠 영역에 대한 열과 모듈의 조합을 추가할 수 있다는 점을 염두에 두십시오.

1열에 이미지 모듈이 있는 이미지를 추가합니다. Design Conference Layout Pack에서 하나를 사용하고 있습니다.

오른쪽 열에서 행동 유도 모듈을 추가하고 다음을 업데이트하십시오.

버튼 링크 URL: # (지금은 버튼만 표시)
배경색 사용: 아니요

텍스트 정렬: 왼쪽
제목 글꼴: Lato
제목 텍스트 크기: 60px(데스크톱), 50px(전화)

탭 만들기

사용자가 이 행 콘텐츠를 표시하기 위해 마우스를 가져가는 실제 탭을 만들려면 텍스트 모듈을 만들고 일부 사용자 지정 CSS를 사용하여 오른쪽 상단에 배치해야 합니다.

계속해서 1열의 이미지 아래에 새 텍스트 모듈을 추가하고 다음을 업데이트하십시오.

내용: "탭 1"

배경 색상: #284f91(행의 왼쪽 그라데이션 색상과 일치해야 함)
텍스트 텍스트 정렬: 가운데
텍스트 텍스트 색상: #ffffff
너비: 100px
높이: 50px
여백: 상단 -100px, 왼쪽 -50px
패딩: 14px 상단

마지막으로 다음 사용자 지정 CSS를 기본 요소에 추가하여 행 맨 위에 절대 위치를 지정합니다.

position: absolute !important;
top: 0;

이 CSS와 우리가 추가한 사용자 정의 여백은 탭이 행의 왼쪽 상단에 정확히 위치하도록 합니다. 사용자가 나중에 마우스를 이동할 수 있도록 탭이 실제로 행 위에 위치하는 것이 중요합니다.

단면 높이 및 간격

이제 나머지 행과 탭을 계속 생성하기 전에 섹션에 상단 및 하단 여백을 추가하여 행에 약간의 호흡 공간을 제공하겠습니다. 이 디자인의 경우 섹션 높이를 설정하기 때문에 여백을 사용하여 섹션 간격을 두는 것이 중요합니다. 행이 섹션의 전체 높이에 걸쳐 있기를 원하기 때문에 섹션에 설정된 높이를 제공해야 합니다. 이것은 각 행(탭 콘텐츠)이 섹션의 높이와 동일함을 의미합니다. 따라서 각 행의 콘텐츠 양이 비슷하거나 일부 행 탭에 원치 않는 음수 공간이 있는 것이 가장 좋습니다. 이것은 나중에 더 의미가 있습니다.

지금은 섹션 설정을 열고 다음을 업데이트하십시오.

높이: 500px(데스크톱), 900px(태블릿), 750px(휴대폰)
여백: 상단 100px, 하단 100px
패딩: 0px 상단, 0px 하단

모바일에서 행 열이 쌓일 때 더 긴 콘텐츠 공간을 고려하여 섹션 높이를 조정해야 합니다. 따라서 필요에 따라 이 높이를 약간 조정해야 합니다.

이제 설정을 저장하고 더 많은 행을 추가하는 작업으로 돌아갑니다.

탭 콘텐츠의 두 번째 행 만들기

두 번째 행을 생성하려면 이전에 생성한 행을 복제합니다. 텍스트 모듈을 열 1로 이동하고 이미지를 열 2로 이동합니다. 그런 다음 이미지를 새 것으로 업데이트합니다. 이렇게 하면 각 탭에서 다른 콘텐츠가 어떻게 보이는지 알 수 있습니다.

두 번째 행의 설정을 열고 배경 미리보기 영역 위로 마우스를 가져간 다음 작은 "전환" 아이콘을 클릭하여 배경 그라디언트 색상을 전환합니다.

그런 다음 열 1에서 탭을 만드는 데 사용된 텍스트 모듈의 설정을 열고 새 상단 그라디언트와 일치하는 색상을 지정합니다.

배경색: #4646c4

그런 다음 이 행이 위의 행과 겹칠 때 첫 번째 행의 탭 오른쪽에 있는 탭을 직접 볼 수 있도록 탭을 오른쪽으로 이동해야 합니다.

여백: 50px 왼쪽

두 번째 행에 불투명 필터 호버 효과 추가

행의 경우 불투명도 필터 호버 효과를 추가하여 탭 위로 마우스를 이동하고 행의 내용을 표시할 때 호버 전환이 멋지게 되도록 할 수 있습니다.

행 설정을 열고 다음 필터를 추가합니다.

불투명도: 70%(기본값), 100%(마우스 오버)

그런 다음 불투명도 필터 호버 효과에 대한 전환 지속 시간 및 속도 곡선을 추가합니다.

전환 시간: 500ms
전환 속도 곡선: 선형

탭 콘텐츠의 세 번째 행 만들기

이제 탭 콘텐츠의 마지막 행을 추가할 수 있습니다. 이렇게 하려면 방금 만든 두 번째 행을 복제합니다. 그런 다음 텍스트 모듈을 열 1로 이동하고 이미지를 열 2로 이동합니다. 그리고 이미지 모듈을 새 이미지로 업데이트합니다.

새로운 배경 그라데이션으로 행 설정을 업데이트합니다.

배경 그라데이션 왼쪽 색상: #333333
배경 그라데이션 오른쪽 색상: #4646c4

다음으로 열 1에서 탭을 만드는 데 사용되는 텍스트 모듈의 설정을 열고 색상과 여백을 업데이트합니다.

배경색: #333333
여백: 150px 왼쪽

이것은 행이 서로 겹치도록 배치하기 전에 페이지의 모습이어야 합니다.

절대 위치 지정으로 행 겹침

행을 겹치려면 절대 위치 지정을 사용해야 합니다. 그런 다음 Z 인덱스 옵션을 사용하여 탭 위로 마우스를 가져갈 때 각 행을 맨 앞으로 가져옵니다. 그러나 행에 절대 위치를 제공하기 때문에(그리고 부모/섹션에는 높이가 설정되어 있음) 섹션의 전체 높이에 걸쳐 있도록 각 행에 100% 높이를 추가할 수 있습니다.

방법은 다음과 같습니다.

먼저 와이어프레임 모드를 배포합니다. 그런 다음 다중 선택을 사용하여 세 행 모두를 선택하고 그 중 하나의 설정을 열어 요소 설정 모달을 배포합니다. 그런 다음 높이를 100%로 업데이트합니다.

높이: 100%

이렇게 하면 세 행 모두의 높이가 100%로 설정됩니다.

그런 다음 기본 요소에 다음 사용자 정의 CSS를 추가합니다.

position: absolute !important;
left: 0;
right: 0;
margin: auto;

이제 데스크톱 보기 모드를 배포하여 탭을 만들기 위해 행이 어떻게 멋지게 겹치는지 확인합니다.

Z 인덱스로 마우스를 가져갈 때 행 순서 변경

지금 바로 세 번째 행/탭이 맨 앞에 있다는 것을 눈치채셨을 것입니다. 따라서 다른 탭 위로 마우스를 가져갈 때까지 첫 번째 탭이 먼저 표시되도록 Z 인덱스를 사용하여 행을 재정렬해야 합니다.

이렇게 하려면 와이어프레임 보기 모드로 돌아가서 생성한 첫 번째 행의 설정을 엽니다(탭 1 사용). 그런 다음 다음과 같이 z 인덱스를 업데이트합니다.

Z 인덱스: 10

그런 다음 다중 선택을 사용하여 두 번째 및 세 번째 행을 선택합니다. 그런 다음 요소 설정 모달을 열고 두 행에 마우스를 가져갈 때 다음 z 인덱스를 추가합니다.

Z 인덱스: 11(마우스 오버)

그게 다야 최종 결과를 확인해보자.

최종 결과

이것이 작동하는 이유는 기술적으로 각 탭(텍스트 모듈)이 행 위와 외부에 위치하더라도 각 행의 일부이기 때문입니다. 그렇기 때문에 탭 위로 마우스를 가져가면 해당 탭이 포함된 행이 표시됩니다.

그리고 모바일에서는 이렇게 보입니다.

수직 호버 탭 만들기

행에 세로 탭을 추가하려면 각 탭을 만드는 데 사용되는 텍스트 모듈의 위치를 ​​변경하기만 하면 됩니다. 또한 탭을 위한 공간을 만들기 위해 행의 크기와 섹션 간격을 조정해야 합니다.

다음은 수행할 작업입니다.

작업할 새 디자인을 갖도록 방금 만든 호버 탭이 포함된 섹션을 복제합니다.

그런 다음 섹션 설정을 열고 다음을 업데이트합니다.

패딩: 왼쪽 10%, 오른쪽 10%

그런 다음 다중 선택을 사용하여 세 행을 모두 선택하고 다음으로 요소 설정을 업데이트합니다.

너비: 70%(데스크톱), 70%(태블릿), 80%(휴대폰)
최대 너비: 980px

그런 다음 탭을 왼쪽에 배치할 때 왼쪽 그라디언트 색상이 탭 배경 색상과 혼합되도록 3개의 모든 광고에 대해 그라디언트 방향을 90도로 업데이트합니다.

기울기 방향: 90deg

이제 텍스트 모듈 탭을 행 왼쪽에 배치하여 원하는 수직 탭을 얻을 차례입니다.

첫 번째 행에서 텍스트 모듈 탭 설정을 열고 다음을 업데이트합니다.

여백(데스크톱): 위쪽 -50px, 왼쪽 -150px
여백(전화): 상단 -100px, 왼쪽 -50px

전화의 여백 설정은 가로 탭 표시를 위해 탭을 다시 행 위로 가져오는 것입니다.

그런 다음 섹션 행에서 텍스트 모듈 탭에 대한 설정을 열고 다음을 업데이트합니다.

여백(데스크톱): 위쪽 0px, 왼쪽 -150px
여백(전화): -100px 상단, 50px 왼쪽

그리고 세 번째 행의 마지막 탭에 대해 다음을 업데이트합니다.

여백(데스크톱): 위쪽 50px, 왼쪽 -150px
여백(전화): -100px 위쪽, 150px 왼쪽

최종 결과

이제 최종 결과를 확인해보자.

여기 하나의 태블릿과 휴대폰이 있습니다.

마지막 생각들

약간의 창의적인 생각과 Divi의 힘으로 Divi 행을 사용하여 꽤 멋진 사용자 지정 호버 탭을 만들 수 있습니다. 표시할 수 있는 항목에는 몇 가지 제한이 있습니다. 예를 들어, 이 설정에서 모든 행은 단면과 높이가 같아야 합니다. 하지만 플러그인을 사용할 필요가 없다는 점에서 훌륭한 솔루션이라고 생각합니다. 콘텐츠에 Divi 행을 사용할 수 있으므로 다음 프로젝트에서 이러한 호버 탭을 사용할 수 있는 방법이 많이 있다는 것을 잊지 마십시오.

댓글로 여러분의 의견을 기다리겠습니다.

건배!