Divi에서 셔터 호버 효과로 콘텐츠를 표시하는 방법

호버에 모듈 콘텐츠를 표시하면 몇 가지 유용한 이점이 있습니다. 1) 초기에 웹 페이지를 보다 간결하거나 우아한 디자인으로 만드는 좋은 방법이 될 수 있습니다. 2) 공간을 절약합니다. 3) 사용자가 페이지와 상호 작용하도록 유도할 수 있습니다. 4) 멋져 보입니다 :). 기본 아이디어는 모듈 콘텐츠(예: 티저)의 일부만 표시하여 방문자가 더 많은 것을 보기 위해 마우스를 가져가도록 유도하는 것입니다. 모듈 위로 마우스를 가져가면 셔터처럼 열리고 닫히는 부드러운 호버 효과로 전체 콘텐츠가 표시됩니다.

이 튜토리얼에서는 Divi 빌더를 사용하여 셔터 스타일 호버 효과로 모듈 콘텐츠를 표시하는 방법을 보여 드리겠습니다.

엿보기

다음은 함께 구축할 내용을 간략하게 살펴보겠습니다.

시작하기

YouTube 채널 구독

시작하려면 새 페이지를 만들고 페이지에 제목을 지정한 다음 Divi Builder를 배포하여 프런트 엔드에서 빌드하십시오. "미리 만들어진 레이아웃 선택" 옵션을 선택합니다. 그런 다음 Divi 라이브러리 팝업에서 Day Spa 레이아웃 팩을 선택하고 클릭하여 방문 페이지 레이아웃을 사용합니다.

레이아웃이 페이지에 로드되면 시작할 준비가 된 것입니다!

Blurb의 상단과 하단에 디바이더 추가

페이지를 아래로 스크롤하여 4개의 광고 문구가 있는 "럭셔리 스파 경험" 섹션으로 이동합니다. 디자인을 시작하기 위해 4개의 광고 문구가 있는 행을 사용합니다.

첫 번째 구분선 추가

첫 번째 단계는 광고 내용을 뒤에 숨기기 위해 광고 모듈 위와 아래에 구분선을 추가하는 것입니다. 이러한 디바이더는 호버링 시 열리고 닫히는 창의 셔터로 생각할 수 있습니다.

첫 번째 열의 광고 문구 위에 구분선 모듈을 추가하고 다음을 업데이트합니다.

배경색: #ffffff
색상(디바이더): #ffffff
디바이더 무게: 100px
높이: 100px
사용자 정의 여백: 0px 하단

흰색 배경은 보고 싶지 않기 때문에 섹션의 배경과 일치합니다. 디바이더의 무게와 높이가 동일한지 확인하십시오.

두 번째(주황색) 구분선 추가

그런 다음 방금 만든 구분선 바로 아래에 다른 구분선을 만들고 다음을 업데이트합니다.

색상: #ff7a6b
디바이더 무게: 2px
높이: 2px
사용자 정의 여백: 0px 하단

그런 다음 콘텐츠 탭으로 이동하여 구분선에 "주황색 구분선"이라는 관리 레이블을 지정합니다. 이것은 와이어프레임 모드를 사용하여 구분선을 복사하여 다른 열에 붙여넣을 때 이전(흰색) 구분선과 구분선을 구별하는 데 도움이 됩니다.

페이지를 저장합니다.

Blurbs 주변의 구분선 복사 및 붙여넣기

이제 각 열의 각 안내문 위와 아래에 구분선을 복사하여 붙여넣을 준비가 되었습니다. 이 과정을 조금 더 쉽게 하려면 페이지 하단의 설정 메뉴를 열고 와이어프레임 아이콘을 클릭하여 와이어프레임 모드를 배포하십시오. (또는 shft + w 사용)

와이어프레임 모드에서 방금 만든 광고 문구와 구분선이 포함된 행을 찾습니다. 그런 다음 최종 결과가 다음과 같이 보이도록 구분선과 주황색 구분선을 복사하여 각 광고 문구의 위와 아래에 붙여넣습니다.

그런 다음 바탕 화면 보기(shft + w)로 돌아가서 디자인을 완료합니다. 페이지는 다음과 같아야 합니다.

Blurb 모듈 사용자 정의

이제 모든 디바이더가 준비되었으므로 사용자 지정 여백을 포함하여 몇 가지 스타일 조정으로 블러브 모듈을 편집하여 셔터 스타일 호버 효과를 만들 차례입니다.

먼저 다중 선택을 사용하여 4개의 블러브 모듈을 모두 선택합니다. 이렇게 하려면 ctrl(또는 cmd)을 누른 상태에서 각 모듈을 클릭하십시오. 그런 다음 모듈 중 하나의 설정을 열어 요소 설정 모달을 배포합니다.

콘텐츠 탭 아래에 몇 줄의 모의 콘텐츠를 추가합니다.

그런 다음 이미지 상자 그림자를 완전히 비활성화합니다.

셔터 호버 효과를 만들려면 기본적으로 구분선 뒤에 콘텐츠를 숨기기 위해 음수 위쪽 및 아래쪽 여백을 추가해야 합니다. 그런 다음 여백을 0px로 설정하여 호버에 있는 콘텐츠를 표시합니다. 이렇게 하려면 다음 간격을 추가하십시오.

사용자 정의 여백(기본값): 위쪽 -100px, 아래쪽 -65px
사용자 정의 여백(마우스 오버): 위쪽 0px, 아래쪽 0px

맞춤 패딩(마우스 오버): 위쪽 10px, 아래쪽 10px

콘텐츠의 양에 따라 음수 여백 값을 조정해야 할 수도 있습니다. 예를 들어 더 긴 텍스트 콘텐츠의 경우 더 많은 음수 여백이 필요할 수 있습니다.

지금까지의 결과를 확인해보세요.

각 모듈의 상단과 하단은 마우스를 가져갈 때까지 구분선 뒤에 숨겨져 있습니다.

셔터 호버 효과 정리

모듈을 수직으로 센터링

현재 셔터 호버 효과는 호버링할 때마다 나머지 콘텐츠를 페이지 아래로 밀어냅니다. 이로 인해 주의가 산만해질 수 있는 일부 페이지 이동이 발생합니다. 또한 호버 동작은 진정한 셔터 효과가 아닌 아래쪽 방향으로만 진행됩니다. 콘텐츠가 중앙에서 위쪽과 아래쪽으로 모두 열리길 원합니다. 이를 수행하려면 다음을 수행해야 합니다.

행 설정을 열고 열 높이를 균등화합니다.

그런 다음 고급 탭으로 이동하여 기본 요소 아래에 다음 사용자 정의 CSS를 입력합니다.

align-items: center;

이렇게 하면 모듈이 열 내에서 수직으로 중앙에 유지되어 위쪽 및 아래쪽 셔터 효과를 얻을 수 있습니다.

행에 고정 높이 제공

호버 효과가 아래 페이지 콘텐츠를 아래로 누르지 않도록 하려면 호버링할 때마다 행 높이가 커지는 것을 중지해야 합니다. 이렇게 하려면 데스크탑의 행에 고정 높이를 설정해야 합니다. 높이가 고정되기 때문에 행의 높이가 호버 상태에서 광고 내용의 높이를 수용할 수 있을 만큼 충분히 높아야 합니다. 그러나 모듈 위와 아래에 너무 많은 공백을 남길 것이기 때문에 너무 높게 만들고 싶지는 않습니다. 이 예에서는 행 높이를 600px로 설정하겠습니다. 그러나 우리는 데스크탑에만 고정 높이를 설정하기를 원하기 때문에 미디어 쿼리를 사용하여 페이지 설정에 일부 CSS를 추가해야 합니다.

여기 당신이해야 할 일이 있습니다.

먼저 행 설정에서 행에 CSS ID를 지정합니다.

CSS ID: 고정 높이

그런 다음 페이지 설정(고급 탭 아래)을 열고 다음 사용자 정의 CSS를 추가합니다.

@media (min-width: 980px) {
#fixed-height {
  height: 600px;
}
}

이렇게 하면 데스크톱에서 행의 높이가 600px로 고정되고 호버 효과가 페이지 콘텐츠의 나머지 부분을 아래쪽으로 밀어내는 것을 중지합니다.

그게 다야!

최종 결과

최종 디자인을 확인하세요.

그리고 여기 셔터 호버 효과가 있습니다.

모바일에서 호버 효과를 비활성화하는 것이 좋습니다. 그렇게 하려면 다음과 같이 각 블러브 모듈에 대한 사용자 지정 여백을 설정하기만 하면 됩니다.

맞춤 여백(태블릿): 위쪽 0px, 아래쪽 0px

마지막 생각들

이 셔터 호버 효과는 청중이 다양한 서비스에 대한 추가 정보를 찾도록 하는 창의적인 방법입니다. 그리고 Divi의 마법과 CSS의 몇 가지 스니펫으로 최종 결과는 매우 우아합니다. 원하는 모듈을 사용할 수 있기 때문에 이 셔터 호버 효과에 더 많은 응용 프로그램이 있다고 확신합니다. 자신만의 흥미진진한 새로운 디자인을 자유롭게 탐색하고 주저하지 말고 우리와 공유하십시오. 댓글로 여러분의 의견을 기다리겠습니다.

건배!