모듈, 열 및 행에 대한 호버 효과를 동시에 트리거하는 방법

Divi로 사이트를 구축할 때 가장 좋은 점 중 하나는 각 빌딩 블록이 디자인 옵션으로 가득 차 있다는 것입니다. 모든 모듈, 열, 행 및 섹션에는 기본 및 호버 상태 모두에 대한 디자인 설정이 포함되어 있습니다. 이렇게 하면 이 요소를 함께 결합할 때 여러 호버 효과를 트리거할 수 있는 문이 열립니다.

이 자습서에서는 모듈, 열 및 행에 대해 호버 효과를 동시에 트리거하는 방법을 보여 드리겠습니다. 트릭은 모든 요소가 동일한 크기와 호버 공간을 공유하는지 확인하는 것입니다. 그러나 일단 요소가 제자리에 있으면 호버 효과와 디자인으로 매우 창의적이 될 수 있습니다.

시작하자.

엿보기

다음은 다른 Divi 요소의 호버 효과를 동시에 트리거하는 방법에 대한 간단한 예입니다.

무료로 디자인 예제 다운로드

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

파일 다운로드

무료로 다운로드

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

다운로드

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

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

YouTube 채널 구독

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

여러 Divi 요소에서 호버 상태를 동시에 트리거하는 방법 이해.

Divi의 각 요소(섹션, 행 또는 모듈)에는 기본적으로 요소 자체의 크기인 고유한 호버 공간이 있습니다.

이러한 각 요소에는 해당 요소 또는 포함된 자식 요소 위로 마우스를 가져갈 때 활성화되는 기본 제공 호버 옵션이 있습니다.

예를 들어 섹션에 호버 옵션을 추가한 경우 섹션을 호버링할 때마다 해당 호버 옵션이 활성화됩니다.

그런 다음 섹션 내부의 행 호버 공간 위로 마우스를 가져가면 행과 섹션의 호버 옵션이 모두 활성화됩니다. 행이 섹션의 자식 요소이기 때문입니다.

열 위로 마우스를 가져갈 때마다 열, 행 및 섹션의 호버 상태가 활성화됩니다.

마지막으로 모듈 위로 마우스를 가져갈 때마다 모듈과 모든 상위 요소(열, 행 및 섹션)에 대한 호버 상태를 트리거합니다.

기본적으로 이러한 각 요소에는 사용자가 각 요소를 선택적으로 호버링할 수 있는 호버 공간에 간격을 만드는 간격(패딩)이 있습니다. 그러나 각 요소 사이의 간격을 제거하면 모든 요소에 대해 호버 상태를 동시에 트리거할 수 있습니다.

이렇게 하면 각 요소에 대한 호버 옵션을 결합하고 공유 호버 공간에서 활성화할 때 동시에 발생할 수 있는 많은 호버 효과 조합에 대한 문이 열립니다.

호버 효과 결합의 예

다음은 이것이 Divi와 어떻게 작동하는지에 대한 예입니다.

아래 예에는 배경 이미지가 있는 행이 있습니다. 호버에는 일종의 테두리 디자인 요소로 표시되는 지연된 상자 그림자가 있습니다.

행 내부에는 블랙 박스 그림자로 채워진 열이 있습니다. 마우스를 가져가면 열의 상자 그림자가 점차 감소하여 행 배경 이미지가 나타납니다.

열 내부에는 파란색 배경의 광고 문구 모듈이 있습니다. 마우스를 가져가면 파란색 배경이 반투명 파란색으로 변경되어 배경 이미지를 볼 수 있습니다.

각 요소 사이에 간격이 있으므로 각 개별 호버 공간 위로 마우스를 가져갈 때 각 요소의 특정 호버 효과를 볼 수 있습니다.

그러나 간격을 제거하고 행에 사용자 정의 너비를 지정하면 모든 요소가 동일한 호버 공간을 공유합니다. 다른 식으로 말하면 모듈은 열과 행의 전체 공간을 차지합니다. 따라서 모듈 위로 마우스를 가져가면 모듈, 열 및 행에 대한 호버 효과가 동시에 활성화됩니다.

전환 지연은 이 설정에서 잘 작동합니다.

위의 예에서 이 개념의 기능을 잘 강조하는 행 및 열 호버 효과에 전환 지연이 있음을 명심하십시오. 모듈에만 유사한 호버 효과 조합을 추가하려는 경우 각 호버 효과에 개별적으로 서로 다른 전환 지연 및 지속 시간을 적용할 수 없습니다.

Divi에서 디자인 예제 재생성

Divi의 실제 세계에서 이것이 어떻게 작동하는지에 대한 지침을 제공하기 위해 위에서 설명한 예를 다시 만들어 보겠습니다.

시작하는 데 필요한 것

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

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

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

섹션 및 행 추가

가장 먼저 해야 할 일은 한 열 행이 있는 일반 섹션을 만드는 것입니다.

행 및 열 설정 업데이트

그런 다음 행 설정을 열고 행에 배경 이미지를 지정합니다.

그런 다음 행과 열 사이의 호버 공간에 간격이 없도록 기본 패딩을 제거해야 합니다.

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

그런 다음 마우스를 가져갈 때 행에 다음 상자 그림자를 추가합니다.

• 박스 섀도우: 스크린샷 참조
• 상자 그림자 흐림 강도: 0px
• 상자 그림자 확산 강도: 0px(데스크톱), 10px(호버링)
• 그림자 색상: #063c68

다음으로 다음과 같이 지속 시간과 지연으로 전환 옵션을 업데이트합니다.

• 전환 시간: 500ms
• 전환 지연: 700ms

이제 열 설정을 열고 다음을 업데이트하십시오.

• 박스 섀도우: 스크린샷 참조
• 상자 그림자 흐림 강도: 0px
• 상자 그림자 확산 강도: 200px(데스크톱), 0px(호버링)
• 그림자 색상: #000000
• 전환 시간: 500ms
• 전환 지연: 200ms

Blurb 모듈 추가

이제 행에 블러브 모듈을 추가합니다.

그런 다음 다음과 같이 광고 문구를 업데이트합니다.

• 이미지: [광고 이미지 삽입]
• 배경색: #0c71c3
• 배경색(호버): rgba(12,113,195,0.35)

• 텍스트 정렬: 가운데
• 텍스트 색상: 라이트
• 패딩: 상단 20픽셀, 하단 20픽셀, 왼쪽 20픽셀, 오른쪽 20픽셀

최종 결과

최종 결과를 확인하세요.

최종 생각 및 팁

여러 Divi 요소에 대한 호버 상태를 동시에 트리거하는 방법을 이해하면 흥미로운 디자인 가능성이 열립니다. 이 게시물의 예는 모듈, 열 및 행의 호버 상태를 결합할 때 가능한 많은 호버 효과 조합 중 몇 가지만 강조합니다. 또한 더 많은 호버 옵션을 제공하는 섹션 호버 옵션을 결합하여 제공되는 가능성을 탐색하지도 않았습니다. 이러한 호버 효과를 직접 탐색할 때 도움이 되는 몇 가지 팁과 아이디어가 있습니다.

• 테두리 대신 상자 그림자 사용 – 테두리는 실제로 요소에 추가 공간을 추가하므로 원치 않는 호버 간격이 발생할 수 있습니다. Box Shadows는 실제 공간을 추가하지 않는 디자인 요소를 추가합니다.
• 배경 전환 호버 효과 탐색 – 각 Divi 요소에는 창의적인 호버 효과 레이어에 결합할 수 있는 배경 호버 옵션이 있습니다.
• 변형 호버 옵션 사용 – 변형 호버 옵션은 호버 시 요소 크기 조정 및 회전과 같은 크리에이티브 요소를 추가할 수 있습니다. 그러나 호버링 시 여러 요소를 회전하는 것은 점프를 유발할 수 있으므로 어려울 수 있습니다.
• 전환 옵션 활용 – 각 요소의 호버 상태에 다른 전환 지속 시간과 지연을 추가하면 고유한 호버 애니메이션을 만들 수 있습니다.

이 튜토리얼이 Divi에서 놀라운 호버 효과 조합을 탐색하는 데 영감을 주기를 바랍니다.

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

건배!