새로운 크기 조정 옵션 이후 Divi 릴리스되었으므로 호버 표시를 만드는 방법을 보여주는 몇 가지 튜토리얼이 있습니다. 이 튜토리얼에서는 내용 마스크를 수직으로 배치했습니다. 그러나 어떤 경우에는 수평 모서리 받침을 생성해야 할 수도 있습니다. 이 튜토리얼에서는 호버 그리드와 오버플로 옵션을 사용하여 이미지를 표시하는 방법을 보여 드리겠습니다. Divi. 이 작업을 수행하려면 약간 다른 접근 방식이 필요합니다. 한 열의 행을 사용하고 모든 모듈을 다른 모듈 아래에 배치합니다. 마우스를 가져가면 열이 수평 그리드로 바뀝니다. JSON 파일도 무료로 다운로드할 수 있습니다!
가자.
측량
튜토리얼을 시작하기 전에 다양한 화면 크기에서 어떻게 보이는지 간단히 살펴 보겠습니다.
재현을 시작합시다!
새 섹션 추가
작업중인 페이지에 새 일반 섹션을 추가하여 시작하십시오.
새 행 추가
기둥 구조
다음 열 구조를 사용하여 새 행을 계속 추가하십시오.
기본 그라데이션 배경
더 많은 모듈을 추가하지 않고 선 매개 변수를 열고 다음 그라데이션 배경을 추가하십시오.
- 1 색상 : #b1ffc4
- 2 색상 : #ffffff
- 그라디언트 유형 : 방사형
- 레이디 얼 방향 : 중심
- 시작 위치 : 28 %
- 최종 위치 : 28 %
그라데이션 배경 위에 비행
호버링하여 그라데이션 배경을 변경하십시오.
- 1 색상 : #b1ffc4
- 2 색상 : #ffffff
- 그라디언트 유형 : 방사형
- 레이디 얼 방향 : 왼쪽
- 시작 위치 : 5 %
- 최종 위치 : 5 %
간격
간격 설정으로 이동 한 다음 패딩 및 여백 값을 변경합니다.
- 상단 패딩 : 0px
- 하단 패딩 : 0px
- 상단 여백 : 50px
- 아래쪽 여백 : 50px
기본 테두리
오른쪽 상단과 오른쪽 하단에 50 픽셀의 테두리 반경을 추가하십시오.
호버 테두리
모서리를 "0px"로 가져갑니다.
기본 그림자
그런 다음 다음 매개 변수를 사용하여 미묘한 상자 그림자를 추가하십시오.
- 박스 그림자 흐림 효과 : 50px
- 그림자 색상 : rgba (0,0,0,0.09)
호버 상자 그림자
비행 할 때 상자에서 그림자를 제거하고 그림자의 색을 완전히 투명한 색으로 바꿉니다.
- 그림자 색상 : rgba (0,0,0,0)
열에 텍스트 모듈 추가
H2 콘텐츠 추가
이제 텍스트 모듈부터 시작하여 모듈 추가를 시작할 시간입니다. 들어가다 내용 당신이 선택한 H2.
H2 텍스트 설정
디자인 탭으로 전환하고 그에 따라 H2 텍스트 설정을 변경합니다.
- 타이틀 2 폰트 : Acme
- 제목 2 글꼴 스타일 : 밑줄
- 제목 2 밑줄 색상 : #00ff3f
- 제목 2 텍스트 색상 : #000000
- 제목 2 텍스트 크기 : 3vw
간격
그런 다음 사용자 정의 채우기 값을 추가하십시오.
- 최고의 패딩 : 6vw
- 하단 패딩 : 7vw
- 왼쪽 패딩 : 2vw
열에 이미지 모듈 추가
업로드 이미지
이 칼럼에서 필요한 두 번째 모듈은 이미지 모듈입니다. 원하는 풍경 이미지를 업로드하세요.
라이트 박스
그런 다음 링크 설정에서 라이트 박스 옵션을 활성화합니다.
- 뷰어에서 열기 : 예
크기 조정
그리고 크기 조정 설정에서 이미지에 전체 너비를 적용합니다. 이렇게하면 모든 화면 크기에서 이미지가 민감하게 유지됩니다.
- 전폭 : 예
복제 이미지 모듈
첫 번째 이미지 모듈을 완료하면 두 번 복사 할 수 있습니다.
이미지 변경
두 개의 중복 이미지를 변경하십시오. 업로드하는 이미지가 첫 번째 이미지와 동일한 크기인지 확인하십시오.
행에 롤오버 효과 추가
크기 조정
이제 기본 행 및 모드 설정을 완료 했으므로 호버 효과를 만들 차례입니다! 행의 높이와 너비를 변경하고 오버플로를 숨 깁니다. 행 크기 조정 설정을 열고 다음과 같이 변경하십시오.
- 사용자 정의 거터 너비를 사용하십시오. 예
- 거터 폭 : 1
- 너비 : 20 %
- 최대 너비 : 100 %
- 높이 : 15.9vw
맴돌다
마우스를 올리는 동안 너비를 "100 %"로 줄입니다. 이렇게하면 선을 가리키면 이미지가 표시됩니다.
- 너비 : 100 %
시계
다음 고급 탭으로 전환하고 오버플로를 숨깁니다. 이렇게 하면 이미지가 방문자 텍스트 모듈을 가리키거나(데스크톱) 클릭(태블릿/모바일)합니다.
- 수평 오버플로 : 숨겨진
- 수직 오버플로 : 숨겨진
전학
또한 전환 매개 변수에서 전환 지속 시간을 변경하고 있습니다.
- 전환 기간 : 0ms
기본 열 롤오버 요소
호버 그리드를 만들려면 열 설정을 열고 고급 옵션 탭으로 이동 한 다음 기본 호버 요소에 다음 CSS 코드 줄을 배치합니다.
디스플레이 : 그리드; 그리드 템플릿 열 : 20 % 25 % 25 % 25 %; 그리드 갭 : 10px;
라인을 두 번 복제
첫 번째 행을 완료하면 원하는만큼 복제 할 수 있습니다. 이 특정 디자인 예제에서는 행을 두 번 복제합니다.
1 선의 그라디언트 배경 수정
두 번째 선의 그라디언트 배경에서 첫 번째 그라디언트의 색상을 변경하십시오.
- 1 색상 : # ffdc96
2 선의 그라디언트 배경 변경
세 번째 행에 대해서도 동일하게 수행하십시오.
- 1 색상 : # b7c7ff
텍스트 모듈의 사본과 두 사본의 밑줄 색상을 변경하십시오.
사본과 함께 텍스트 모듈 사본의 밑줄 색상을 변경하여 계속하십시오.
- 밑줄 친 색상 # 1 : # ffaa00
- 밑줄 친 색상 # 2 : # 0037ff
마지막 생각
이 튜토리얼에서는 오버플로 옵션을 사용하여 수평 호버 그리드에 이미지를 표시하는 방법을 보여주었습니다. Divi. 데스크톱에 마우스를 올리고 태블릿/휴대전화를 클릭하면 이미지가 표시되었습니다. 이미지를 공개했지만, 내용 생성기에서 매개변수를 수정하여 원하는 대로 변경할 수 있습니다. 이 튜토리얼이 여러분이 자신만의 대체 호버 그리드 디자인을 만드는 데 영감을 주기를 바랍니다! 질문이나 제안 사항이 있으면 아래 댓글 섹션에 댓글을 남겨주세요!
