Divi로 호버 이미지를 변경하는 방법
게시 됨: 2018-12-14마우스 오버 시 이미지를 변경하는 방법을 알면 작업 중인 모든 종류의 웹 사이트에 유용할 수 있습니다. 또한 페이지에 미묘한 상호 작용을 추가하는 데 도움이 됩니다. 예를 들어 페이지 및 팀 페이지에 대한 평가에 대한 추가 관점을 제공하는 데 사용할 수 있습니다. Divi의 새로운 호버 옵션을 사용하면 내장 옵션만 사용하여 호버 시 이미지를 변경할 수 있습니다. 열 배경과 불투명도 필터를 결합하면 금방 얻을 수 있습니다.
가자!
시사
튜토리얼을 시작하기 전에 처음부터 다시 만들 네 가지 예제를 살펴보겠습니다.
일반 단계
새 섹션 추가
이 자습서의 첫 번째 부분에서는 몇 가지 일반적인 단계를 수행합니다. 이러한 일반적인 단계는 처음 세 가지 예에 집중할 때 시간을 절약하는 데 도움이 됩니다. 새 페이지나 기존 페이지를 열고 일반 섹션을 추가합니다.
새 행 추가
열 구조
그런 다음 다음 열 구조를 사용하여 새 행을 추가합니다.
열 1 배경 이미지
아직 모듈을 추가하지 않고 행 설정을 열고 첫 번째 열에 배경 이미지를 추가하십시오. 마우스 오버 시 표시할 이미지를 선택합니다.
- 열 1 배경 이미지 반복: 반복 없음
열 1에 이미지 추가
이미지 업로드
계속해서 첫 번째 열에 이미지 모듈을 추가하고 마우스를 올리기 전에 표시할 이미지를 업로드하세요.
열 2에 제목 텍스트 모듈 추가
콘텐츠 추가
두 번째 열에서는 먼저 제목 텍스트 모듈이 필요합니다. H3 콘텐츠를 추가하세요.
제목 텍스트 설정
그런 다음 제목 텍스트 설정으로 이동하여 몇 가지를 변경합니다.
- 제목 3 글꼴: Baloo Tamma
- 제목 3 텍스트 색상: #eda96a
- 제목 3 텍스트 크기: 100px(데스크톱), 70px(태블릿), 50px(전화)
- 제목 3 글자 간격: -4px
- 제목 3 텍스트 그림자 가로 길이: 0.04em
- 제목 3 텍스트 그림자 세로 길이: 0.04em
- 제목 3 텍스트 그림자 색상: rgba(0,0,0,0.6)
간격
마지막으로 간격 설정에서 위쪽 여백을 추가합니다.
- 상단 여백: 100px(데스크톱), 50px(태블릿 및 휴대폰)
2열에 디바이더 모듈 추가
구분선 표시
열 2의 제목 텍스트 모듈 바로 아래에 구분선 모듈을 추가합니다.
- 디바이더 표시: 예
디바이더 색상
다음으로 구분선 색상을 변경합니다.
- 디바이더 색상: #e25300
스타일
그리고 스타일 설정에서 다른 구분선 스타일을 선택합니다.
- 디바이더 스타일: 점선
사이징
크기 설정에서도 구분선 가중치를 늘립니다.
- 디바이더 무게: 3px
2열에 본문 모듈 추가
콘텐츠 추가
마지막 모듈로! 선택한 내용이 포함된 두 번째 열에 본문 텍스트 모듈을 추가합니다.
텍스트 설정
다음으로 텍스트 설정을 변경합니다.
- 텍스트 크기: 16px
- 텍스트 줄 높이: 2.3em
- 텍스트 방향: 양쪽 맞춤
섹션을 두 번 복제
모든 일반 단계를 완료했으면 구축한 섹션을 두 번 복제합니다. 이제 처음 세 가지 예 각각에 대해 별도의 섹션이 있습니다.
예제 #1 만들기
이미지 모듈에 추가 설정 적용
기본 불투명도
첫 번째 예제를 만들어 봅시다! 여기서 할 일은 추가 효과 없이 호버 전환을 만드는 것뿐입니다. 그렇게 하려면 이미지 모듈을 열고 필터 설정으로 이동하십시오. 기본 불투명도 값이 100%인지 확인하십시오.
- 불투명도: 100%
호버 불투명도
마우스를 가져갈 때 불투명도를 변경합니다.
- 불투명도: 0%
전환
마지막으로 전환 지속 시간을 늘려 부드러운 전환을 만듭니다.
- 전환 시간: 1200ms
예제 #2 만들기
이미지 모듈에 추가 설정 적용
기본 간격
두 번째 예시로! 열 1에서 이미지 모듈을 열고 기본 사용자 지정 패딩이 없는지 확인합니다.
호버 간격
호버에 있는 이미지의 크기를 늘릴 수 있도록 호버에 아래쪽 패딩을 추가하여 계속합니다.
- 하단 패딩: 100px
박스 섀도우
또한 마우스를 올리면 사라지는 기본 상자 그림자도 추가합니다.
- 상자 그림자 수평 위치: -55px
- 상자 그림자 수직 위치: -50px
- 상자 그림자 확산 강도: -10px
- 섀도우 컬러: #eda96a
기본 불투명도
그런 다음 필터 설정으로 이동하여 기본 불투명도가 100%인지 확인합니다.
- 불투명도: 100%
호버 불투명도
호버에서 모듈의 불투명도를 제거합니다. 이렇게 하면 열 배경이 표시되고 '마우스 오버 시 이미지' 효과가 생성됩니다.
- 불투명도: 0%
전환
마지막으로 이미지 모듈의 전환 설정에서 전환 시간을 늘립니다.
- 전환 시간: 1200ms
예제 #3 만들기
열 1에 그라데이션 배경 추가
세 번째 예에서는 행 설정을 열고 첫 번째 열에 방사형 그라데이션 배경을 추가하여 시작합니다. 이렇게 하면 호버에 있는 이미지가 원형 모양으로 표시됩니다.
- 색상 1: rgba(43,135,218,0)
- 색상 2: #ffffff
- 열 1 그라디언트 유형: 방사형
- 열 1 방사형 방향: 중심
- 열 1 시작 위치: 60%
- 열 1 끝 위치: 60%
이미지 모듈에 추가 설정 적용
기본 불투명도
계속해서 1열의 이미지 모듈을 열고 기본 불투명도가 100%인지 확인합니다.
- 불투명도: 100%
호버 불투명도
열 배경이 보이도록 마우스를 가져갈 때 모든 불투명도를 제거합니다.
- 불투명도: 0%
예제 #4 만들기
새 행 추가
열 구조
마지막 예시로! 여기에서는 6개의 열이 있는 새 행이 필요합니다.
열 1 배경 이미지
아직 모듈을 추가하지 않은 상태에서 행 설정을 열고 마우스 오버 시 표시할 배경 이미지를 열 1 배경 이미지로 추가합니다.
- 열 1 배경 이미지 반복: 반복 없음
행의 모든 열에 대해 반복
행의 각 열에 대해 이전 단계를 반복합니다.
사이징
그런 다음 행의 크기 조정 설정으로 이동하여 열 사이의 모든 공백을 제거합니다.
- 이 행을 전체 너비로 만들기: 예
- 사용자 지정 거터 너비 사용: 1
열 1에 이미지 모듈 추가
이미지 업로드
첫 번째 열에 이미지 모듈을 추가하고 기본적으로 표시하려는 이미지를 업로드하여 계속합니다.
기본 불투명도
이 모듈의 기본 불투명도가 100%인지 확인하십시오.
- 불투명도: 100%
호버 불투명도
열 배경이 대신 표시되도록 마우스를 가져갈 때 불투명도를 제거합니다.
- 불투명도: 0%
전환
부드러운 전환을 위해 전환 시간을 늘립니다.
- 전환 시간: 800ms
이미지 모듈 3회 복제 및 나머지 열에 중복 배치
열 1에서 이미지 모듈 수정을 완료하면 이를 복제하고 나머지 열에 복제본을 배치할 수 있습니다. 이미지도 변경해야 합니다.
시사
이제 모든 단계와 네 가지 예를 모두 거쳤으므로 우리가 만든 세 가지 예를 모두 마지막으로 살펴보겠습니다.
마지막 생각들
호버에서 이미지를 변경하면 페이지 및 팀 페이지에 대한 평가 섹션에 추가 상호 작용을 가져올 수 있습니다. 이 튜토리얼에서는 Divi의 내장 옵션만을 사용하여 호버에서 다양한 종류의 이미지를 얻을 수 있는 쉬운 방법을 보여주었습니다! 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!
추천 이미지: LovArt / shutterstock.com