Divi에서 확장 코너 탭으로 호버 콘텐츠를 표시하는 방법(무료 다운로드)

게시 됨: 2020-01-18

고유한 호버 효과를 사용하여 콘텐츠에 사용자를 참여시키는 새롭고 창의적인 방법을 찾는 것은 언제나 즐겁습니다. 이를 수행하는 한 가지 좋은 방법은 확장된 모서리 탭을 사용하여 마우스를 가져갈 때 콘텐츠를 표시하는 것입니다. 이를 통해 사용자는 열 또는 이미지 모서리에 있는 탭 위로 마우스를 가져가 사용자에게 유용한 추가 콘텐츠가 포함된 오버레이를 확장할 수 있습니다.

이 튜토리얼에서는 확장된 모서리 탭을 사용하여 마우스를 가져갈 때 콘텐츠를 표시하는 완전히 고유한 Divi 레이아웃을 만들 것입니다. 실제로 Divi에서 열의 네 모서리 모두에 확장 모서리 탭을 디자인하는 방법을 보여 드리겠습니다.

시작하자!

엿보기

다음은 함께 구축할 확장 코너 탭 레이아웃을 간략히 살펴보겠습니다. 호버 효과와 콘텐츠가 어떻게 아름답게 대칭되는지 확인하십시오.

확장 코너 탭

무료로 레이아웃 다운로드

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

파일 다운로드

무료로 다운로드

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

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

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

튜토리얼로 가볼까요?

시작하는 데 필요한 것

확장 코너 탭

시작하려면 다음을 수행해야 합니다.

아직 설치하지 않았다면 Divi 테마를 설치하고 활성화하십시오.
WordPress에서 새 페이지를 만들고 Divi Builder를 사용하여 프런트 엔드(비주얼 빌더)에서 페이지를 편집합니다.
"처음부터 빌드" 옵션을 선택합니다.

그런 다음 Divi에서 디자인을 시작할 수 있는 빈 캔버스가 생깁니다.

처음부터 확장 콘텐츠 오버레이 레이아웃 만들기

1부: 오른쪽 하단 위치에서 확장 코너 탭 만들기

시작하려면 일반 섹션에 2열(1/2 1/2) 행을 추가합니다.

확장 코너 탭

모듈을 추가하기 전에 다음과 같이 사용자 지정 거터 너비로 행 설정을 업데이트하십시오.

거터 폭: 4

확장 코너 탭

이 첫 번째 추천 항목의 경우 마우스를 올리면 전체 열/이미지를 확장하고 오버레이하는 열의 오른쪽 하단에 모서리 탭(설명 모듈 사용)이 있는 열 배경 이미지를 만듭니다.

Blub 모듈을 추가하는 것부터 시작하겠습니다.

블러브 모듈 추가

열 1에 말풍선 모듈을 추가합니다.

확장 코너 탭

우리는 아직 스타일을 만들지 않을 것입니다. 기본적으로 광고 문구가 포함된 열의 스타일을 지정할 수 있도록 몇 가지 콘텐츠가 필요했습니다.

열 1 설정

광고 문구가 있는 상태에서 행 설정을 연 다음 클릭하여 열 1 설정을 편집합니다. 그런 다음 다음을 업데이트합니다.

배경 이미지 [이미지 삽입]
배경 이미지 크기: 실제 크기

확장 코너 탭

참고: 제 예에서는 Brewery Layout Pack에서 가져온 투명한 배경 맥주 이미지를 사용하고 있습니다. 그것들은 128px x 359px이므로 이미지의 실제 크기를 사용하고 있습니다.

열 1 테두리

둥근 모서리: 10px 오른쪽 하단
오른쪽 테두리 너비: 2px
오른쪽 테두리 색상: #e94558
하단 테두리 너비: 2px
하단 테두리 색상: #e94558

확장 코너 탭

사용자 정의 CSS 및 오버플로

고급 탭에서 다음 사용자 정의 CSS를 기본 요소에 추가합니다.

height: 400px;

다음을 업데이트합니다.

수평 오버플로: 숨김
수직 오버플로: 숨김

확장 코너 탭

이 사용자 정의 높이는 우리의 블러브 모듈(모서리 탭)이 열의 전체 높이를 확장하는 데 필요합니다. 그리고 호버 상태가 될 때까지 열 외부에서 대부분의 블러브 모듈을 숨길 수 있도록 숨겨진 오버플로가 필요합니다.

Blurb 모듈 콘텐츠 추가

이제 열 1 내부의 광고 문구 모듈 사용자 정의를 시작할 준비가 되었습니다. 광고 문구 설정을 열고 다음을 업데이트합니다.

제목: 망고 IPA

신체:

<p>Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet</p>
<p>Hops: Lorem Ipsum<br /> Yeast: Dolor Amet</p>
<p>4.8% ABV / 4 IBUs</p>

이미지: 열 배경에 사용된 동일한 이미지 추가

확장 코너 탭

Blurb 모듈 디자인

다음과 같이 호버에 배경색을 지정하십시오.

배경색(데스크톱): 투명
배경색(호버): rgba(255,255,255,0.9)

확장 코너 탭

디자인 탭에서 다음을 업데이트합니다.

이미지/아이콘 배치: 왼쪽
제목 글꼴: Oswald
제목 글꼴 스타일: TT
제목 텍스트 크기: 40px
본문 글꼴 두께: 반 굵게
본문 텍스트 색상(데스크톱): 투명
본문 텍스트 색상(마우스 오버): #121212

확장 코너 탭

이미지 너비: 100px(데스크톱), 64px(전화)
콘텐츠 너비: 100%
높이: 100%
패딩(데스크탑): 상단 15%, 하단 15%, 왼쪽 8%, 오른쪽 8%
패딩(호버): 위쪽 8%, 아래쪽 8%, 왼쪽 8%, 오른쪽 8%

확장 코너 탭

둥근 모서리(기본값): 왼쪽 상단 20px
둥근 모서리(마우스 올리기): 왼쪽 상단 10px
상단 테두리 너비: 4px(데스크톱), 2px(마우스 오버)
상단 테두리 색상: #e94558
왼쪽 테두리 너비: 4px(데스크톱), 2px(마우스 오버)
왼쪽 테두리 색상: #e94558

확장 코너 탭

변형 옵션(데스크탑)

스케일 Y축 변환: 50%
스케일 X축 변환: 50%
Y축 변환: 50%
변환 X축 변환: 30%
변환 원점: 오른쪽 하단

확장 코너 탭

변형 옵션(마우스 오버)

변환 배율 Y축(마우스 오버): 100%
변형 배율 X축(마우스를 가져가): 100%
변환 Y축 변환(마우스 오버): 0%
변환 X축 변환(마우스 오버): 0%

확장 코너 탭

Blurb 이미지를 오른쪽으로 뒤집으려면 Blurb Content 상자에 다음 사용자 정의 CSS를 추가하십시오.

direction: rtl

참고: "rtl" 방향은 콘텐츠의 기본 순서(왼쪽에서 오른쪽)를 전환하는 "오른쪽에서 왼쪽"을 나타냅니다.

확장 코너 탭

결과

오른쪽 하단 위치에서 확장된 모서리 탭의 최종 결과를 확인해 보겠습니다. 마우스 오버 시 전체 열을 채우도록 확장되는 방법을 확인하십시오.

확장 코너 탭

파트 2: 왼쪽 하단 위치에서 확장 코너 탭 만들기

열 복제

왼쪽 하단 위치에서 확장 코너 탭을 만들려면 전체 열을 복제하여 디자인을 바로 시작할 수 있습니다. 행 설정을 열고 열 1을 복제합니다. 그런 다음 여분의 열을 삭제하여 두 개의 정확한 복제본만 갖도록 합니다.

확장 코너 탭

열 2 설정 업데이트

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

둥근 모서리: 왼쪽 하단 10px
오른쪽 테두리 너비: 0px
왼쪽 테두리 너비: 2px
왼쪽 테두리 색상: #e94558

확장 코너 탭

Blurb 설정 업데이트

다음으로 Blurb 설정을 다음과 같이 업데이트합니다.

텍스트 정렬: 오른쪽
둥근 모서리(데스크톱): 오른쪽 상단 20px
둥근 모서리(마우스 올리기): 오른쪽 상단 10px
왼쪽 테두리 너비: 0px
오른쪽 테두리 너비: 4px(데스크톱), 2px(마우스 오버)
오른쪽 테두리 색상: #e94558

확장 코너 탭

X축 변환(데스크톱): -30%
변형 원점(데스크톱): 왼쪽 하단

그런 다음 Blurb Content 상자에서 사용자 정의 CSS를 삭제해야 합니다.

확장 코너 탭

결과

결과는 다음과 같습니다. 이것이 어떻게 첫 번째 것과 대칭이고 기둥의 왼쪽 하단 위치에서 확장되는지 주목하십시오.

확장 코너 탭

3부: 오른쪽 상단 위치에서 확장 코너 탭 만들기

이제 마지막 두 개의 확장 코너 탭 디자인을 시작할 준비가 되었습니다. 먼저 시작하기 위해 이미 디자인한 광고 문구가 포함된 전체 행을 복제해 보겠습니다.

확장 코너 탭

열 1 설정 업데이트

다음으로 중복 행의 설정을 연 다음 열 1의 설정을 열고 다음을 업데이트하십시오.

둥근 모서리 10px 오른쪽 상단
하단 테두리 너비: 0px
상단 테두리 너비: 2px
상단 테두리 색상: #e94558

확장 코너 탭

Blurb 모듈 설정 업데이트

그런 다음, blurb 모듈에 대한 설정을 열고 다음을 업데이트합니다.

둥근 모서리(데스크톱): 20px 왼쪽 하단
둥근 모서리(마우스 오버): 10px 왼쪽 하단
상단 테두리 너비: 0px
하단 테두리 너비: 4px(데스크톱), 2px(마우스 오버)
하단 테두리 색상: #e94558
Y축 변환(데스크톱): -50%
변환 원점: 오른쪽 상단

확장 코너 탭

Blurb 사용자 정의 CSS

지금은 위 행에 있는 다른 두 개의 광고 문구처럼 제목을 표시하지 않는 광고 문구 모듈의 왼쪽 하단 부분만 볼 수 있습니다. 탭 내부에 제목을 표시하려면 일부 사용자 정의 CSS를 사용하여 제목을 광고 문구의 왼쪽 하단으로 재배치해야 합니다.

Blurb Title 상자에 다음 사용자 정의 CSS를 추가합니다.

position: absolute;
bottom: 0;
left: 15px;

그런 다음 Blurb 콘텐츠 상자에 다음 CSS를 추가합니다.

direction: rtl;
height: 100%;

확장 코너 탭

4부: 왼쪽 상단 위치에서 확장 코너 탭 만들기

네 번째이자 마지막 확장 코너 탭 호버 효과의 경우 왼쪽 상단 모서리에 배치하여 전체 그리드 레이아웃의 대칭 디자인을 완료합니다.

열 2 설정 업데이트

행 설정에서 열 2의 설정을 열고 다음을 업데이트합니다.

둥근 모서리: 왼쪽 상단 10px
하단 테두리 너비: 0px
상단 테두리 너비: 2px
상단 테두리 색상: #e94558

확장 코너 탭

Blurb 설정 업데이트

다음으로 2열의 광고 문구에 대한 설정을 열고 다음을 업데이트합니다.

둥근 모서리(데스크톱): 20px 오른쪽 하단
둥근 모서리(마우스 오버): 10px 오른쪽 하단
상단 테두리 너비: 0px
하단 테두리 너비: 4px(데스크톱), 2px(마우스 오버)
하단 테두리 색상: #e94558

확장 코너 탭

그런 다음 변환 옵션을 업데이트합니다.

X축 변환(데스크톱): -30%
변환 원점: 왼쪽 상단

확장 코너 탭

Blurb 사용자 정의 CSS

그런 다음 Blurb Title 상자에 다음 Custom CSS를 추가합니다.

position: absolute;
bottom: 0%;
right: 0%;

그런 다음 Blurb 콘텐츠 상자에 다음 CSS를 추가합니다.

height: 100%;

확장 코너 탭

파트 4: 레이아웃 디자인 완료하기

섹션 배경색

다음과 같이 섹션 배경색을 추가합니다.

배경색: #efefef

확장 코너 탭

제목 추가

제목을 생성하려면 두 행의 중간에 행을 추가하고 한 열 행에 텍스트 모듈을 추가합니다.

확장 코너 탭

콘텐츠 추가: "계절".

그런 다음 다음 설정을 업데이트합니다.

제목 2 글꼴: Merriweather
제목 2 글꼴 두께: 굵게
제목 2 글꼴 스타일: TT
제목 2 텍스트 정렬: 가운데
제목 2 텍스트 색상: #999999
제목 2 텍스트 크기: 50px(데스크톱), 30px(태블릿), 24px(휴대폰)
제목 2 글자 간격: 1em
패딩: 왼쪽 50픽셀(데스크톱), 왼쪽 30픽셀(태블릿), 왼쪽 24픽셀(휴대폰)

확장 코너 탭

최종 결과

확장된 모서리 탭으로 레이아웃의 최종 결과를 확인하십시오.

확장 코너 탭

그리고 여기 모바일에서의 디자인이 있습니다.

마지막 생각들

이 레이아웃 디자인에 포함된 확장 코너 탭은 Divi 웹사이트에 표시하려는 모든 종류의 콘텐츠에서 확실히 작동합니다. 네 모서리를 모두 사용할 필요도 없습니다. 예를 들어, 오른쪽 상단 모서리 탭만 사용하여 이미지에 대한 격자 레이아웃을 만들어 호버 시 콘텐츠를 표시할 수 있습니다. 이것으로 디자인 능력이 풍부합니다. 즐거운 시간 보내세요.

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

건배!