Divi에서 그리드 레이아웃을 위한 확장 호버 효과를 만드는 방법

그리드 레이아웃에 확장 호버 효과를 추가하는 것은 청중이 페이지 콘텐츠와 상호 작용하도록 참여시키는 독특한 방법입니다. 아이디어는 그리드의 컴팩트 디스플레이로 시작한 다음 사용자가 Divi의 요소 위로 마우스를 가져갈 때 그리드 콘텐츠를 맨 앞으로 가져오도록 그리드를 확장하는 것입니다. 이것은 이미지 갤러리를 확장하여 마우스를 가져가면 더 큰 갤러리(더 큰 이미지 포함)를 표시하는 데 유용합니다. 또한 방문자가 서비스를 탐색할 수 있도록 안내문 클러스터를 확장할 수도 있습니다.

시작하자.

엿보기

다음은 이 튜토리얼에서 다루게 될 확장 호버 효과의 예입니다.

시작하기

이 튜토리얼에서는 Divi만 있으면 됩니다. 또한 Divi Builder 내에서 사용할 수 있는 Design Agency About Page 사전 제작 레이아웃을 사용하여 디자인을 시작합니다.

시작하려면 새 페이지를 만들고 페이지에 제목을 지정한 다음 클릭하여 Divi Builder를 사용하십시오. 다음으로 미리 만들어진 레이아웃 선택 옵션을 선택합니다. 라이브러리에서 로드 팝업에서 디자인 에이전시 레이아웃 팩을 선택한 다음 클릭하여 디자인 에이전시 정보 페이지를 사용합니다.

레이아웃이 페이지에 로드되면 게시합니다. 이 튜토리얼에서는 프런트 엔드에서 Divi 빌더를 사용할 것입니다. 이렇게 하려면 백엔드 페이지 편집기 상단에 있는 "Build On The Front End" 버튼을 클릭하기만 하면 됩니다.

이제 시작할 준비가 되었습니다!

호버에서 확장 블러브

이 첫 번째 예에서는 제공되는 서비스를 표시하는 이 레이아웃의 두 번째 섹션에서 광고 문구를 확장하는 방법을 보여 드리겠습니다.

한 행만 차지하도록 Blurb 모듈 이동

현재 섹션은 각 열에 문구가 있는 두 개의 3열 행으로 구성되어 있습니다.

단일 행에 호버 효과를 추가할 것이므로 맨 아래 행의 광고 문구를 맨 위 행으로 이동해야 합니다. 맨 위 행의 각 열에 두 개의 광고 문구가 있는지 확인하십시오.

그런 다음 빈 맨 아래 행을 삭제하십시오.

Blurb 모듈 사용자 정의

다음으로 다중 선택을 사용하여 6개의 광고 문구를 모두 선택하여 동일한 디자인을 동시에 모두에 적용할 것입니다. 그렇게 하려면 ctrl(또는 cmd)을 누른 상태에서 모두 선택될 때까지 각 블러브 모듈을 클릭합니다. 그런 다음 광고 문구 중 하나에서 설정 아이콘을 클릭하여 요소 설정 모달을 엽니다.

콘텐츠 상자에서 찾은 콘텐츠를 꺼내고 다음과 같이 디자인 설정을 업데이트합니다.

제목 텍스트 크기 16px
너비: 150px
모듈 정렬: 중앙
맞춤 패딩: 10px 상단, 기본 하단, 기본 왼쪽, 기본 오른쪽

모듈에 150px의 사용자 정의 너비를 지정하면 행을 확장할 때 제목 텍스트가 제자리에 고정된 상태로 유지됩니다.

변경 사항을 저장하고 다중 선택을 클릭합니다.

센터 블러브를 더 뚜렷하게 만들기

다음으로 "Brand Identity"라는 제목의 두 번째 열에서 상단 광고 문구에 대한 광고 문구 모듈 설정을 엽니다. 그런 다음 다음을 업데이트합니다.

아이콘 글꼴 크기: 120px
제목 텍스트 크기: 18px(기본값)

이렇게 하면 다른 광고 문구가 바깥쪽으로 확장되는 중앙 부분으로 중앙 광고 문구가 더 뚜렷해집니다.

마우스를 가져갈 때 확장할 행 사용자 지정

호버에서 모듈을 확장하기 위해 행의 크기와 간격을 조정합니다. 행 설정을 열고 다음을 업데이트합니다.

맞춤 너비: 750px
거터 폭: 4
맞춤 패딩(기본값): 왼쪽 150px, 오른쪽 150px
맞춤 패딩(마우스오버): 0px 왼쪽, 0px 오른쪽
맞춤 패딩(태블릿): 0px 왼쪽, 0px 오른쪽

호버에 대한 패딩 값의 변경은 확장 호버 효과를 만드는 것입니다. 행은 오른쪽으로 150px, 왼쪽으로 150px 확장됩니다.

최종 결과를 확인하세요.

원형 그리드 만들기

확장되는 원형 그리드 레이아웃을 만들고 싶다면 약간의 조정만 하면 됩니다.

먼저 외부 광고 문구 중 하나를 복제하고 두 번째 열의 큰 광고 문구 위로 드래그합니다. 그런 다음 큰 아이콘이 있는 중간 광고 문구의 제목 텍스트를 삭제합니다.

광고 문구를 세로로 정렬하려면 사용자 정의 CSS의 작은 스니펫을 추가할 수 있습니다. 행 설정을 열고 다음 사용자 지정 CSS를 기본 요소에 추가합니다.

align-items: center;

이제 결과를 확인하십시오.

그리드를 오른쪽으로 확장

그리드를 왼쪽이나 오른쪽으로 확장하도록 선택할 수도 있습니다. 모듈을 구성한 다음 행의 사용자 정의 패딩을 업데이트하기만 하면 됩니다. 예를 들어 콘텐츠를 오른쪽으로 확장하려면 기본 사용자 지정 패딩을 왼쪽으로 0px, 오른쪽으로 300px로 설정합니다.

모바일에서 어떻게 보이는지

다음은 태블릿과 스마트폰에서 디자인이 대체될 내용입니다. 확장 호버 효과는 모바일에서도 활성화되지 않습니다.

이미지 갤러리에 확장 호버 효과 추가

갤러리 모듈을 사용하여 마우스를 가져가면 이미지 갤러리를 확장하여 더 큰 이미지가 있는 더 큰 그리드 레이아웃을 보여줄 수도 있습니다. 이렇게 하려면 디자인 에이전시 정보 페이지 레이아웃 제목 "우리 작업"의 맨 아래에 있는 섹션을 찾습니다.

그런 다음 세 개의 이미지가 있는 행 아래에 새로운 1열 행을 추가합니다. 행 내부에 갤러리 모듈을 추가합니다.

다음과 같이 갤러리 모듈 설정을 업데이트합니다.

행 전체에서 동일하게 보이도록 동일한 치수로 갤러리에 4개의 이미지를 추가합니다.

이미지 번호: 4
제목 및 캡션 표시: 아니요
페이지 매김 표시: 아니요

그런 다음 디자인 탭으로 이동하여 다음을 업데이트합니다.

확대/축소 아이콘 색상: #353740
호버 오버레이 색상: rgba(252,210,29,0.92)

너비(데스크톱): 40%
너비(마우스 오버): 100%
너비(태블릿): 100%

마우스 오버 시 갤러리 모듈의 너비를 변경하면 확장 호버 효과가 생성됩니다. 태블릿 너비를 100%로 설정하면 모바일에서도 호버 효과가 발생하지 않습니다.

지금까지의 모습입니다.

기능을 약간 개선하고 레이아웃과 일치시키기 위해 행 설정을 업데이트해야 합니다.

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

사용자 정의 너비: 80%
거터 폭: 2
열 높이 균등화: 예

콘텐츠를 페이지 아래로 밀어내는 확장 호버 효과 중지

페이지 콘텐츠를 아래로 누르지 않고 이미지 갤러리를 확장하려면 행의 최소 높이를 설정하면 됩니다. 이것은 특히 갤러리 바로 아래에 있는 버튼으로 더 나은 UX를 만들 것입니다.

행 설정으로 이동하여 기본 요소에 다음 사용자 정의 CSS를 추가하십시오.

min-height: 350px

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

margin: auto;

열 높이를 동일하게 하면 백엔드에서 "display: flex" CSS 속성이 활성화되어 "margin: auto"가 열의 내용을 이제 최소 높이가 350px인 행 내에서 세로 중앙에 정렬할 수 있습니다. Divi에서 콘텐츠를 세로로 정렬하는 방법에 대한 전체 기사에서 이 개념에 대해 자세히 알아보세요.

최종 결과를 확인하세요.

갤러리에 더 많은 이미지 추가하기

갤러리에 4개의 이미지를 더 추가하고 다음 결과를 위해 행의 최소 높이를 475px로 늘릴 수도 있습니다.

모바일에서 어떻게 보이는지

모바일에서 갤러리가 어떻게 보일지 보여줍니다. 확장 호버 효과가 활성화되지 않습니다.

마지막 생각들

주어진 예는 Divi를 사용하여 전체 그리드 콘텐츠에 대한 확장 호버 효과를 만드는 몇 가지 방법일 뿐입니다. 하지만 수많은 다른 사용 사례에 사용할 수 있다고 확신합니다. 포트폴리오 모듈, 상점 모듈 또는 블로그 모듈까지 확장할 수 있습니다. 따라서 창의력을 발휘하고 스스로 가능성을 탐색하는 재미를 느끼십시오.

아래 의견에서 여러분의 의견을 기다리겠습니다.

건배!