Divi의 새로운 이미지 교체 호버 옵션으로 창의력 발휘하기
게시 됨: 2019-09-28Divi의 새로운 이미지 교체 호버 옵션은 프로젝트에 완전히 새로운 수준의 창의성을 제공합니다. 이 게시물에서는 마우스를 가져갈 때 이미지가 변경되는 아름다운 섹션을 만드는 방법을 보여줍니다. 이 디자인이 Divi의 이미지 교체 호버 옵션을 사용하여 독창적인 섹션을 만드는 데 영감을 주기를 바랍니다. JSON 파일도 무료로 다운로드할 수 있습니다!
시작하겠습니다.
시사
튜토리얼을 시작하기 전에 다양한 화면 크기에 따른 결과를 간단히 살펴보겠습니다.
데스크탑
이동하는
무료 이미지 교체 레이아웃 다운로드
무료 이미지 교체 레이아웃을 사용하려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.
무료로 다운로드
Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.
성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!
YouTube 채널 구독
재창조를 시작하자
새 섹션 추가
간격
새 페이지를 만들거나 기존 페이지에 새 섹션을 추가하여 시작하십시오. 행을 추가하기 전에 섹션의 간격 설정을 조정하십시오.
- 상단 및 하단 여백: 2vw
- 왼쪽 및 오른쪽 여백: 2vw
국경
그런 다음 경계 반경을 추가합니다.
- 둥근 모서리: 10px
새 행 추가
열 구조
다음 열 구조를 사용하여 섹션에 새 행을 계속 추가합니다.
배경
모듈을 추가하기 전에 옅은 연어 그라데이션 배경을 추가하십시오.
- 배경: 그라데이션
- 그라데이션 색상 1: 창백한 연어 #f4e9de
- 그라디언트 색상 2: 더 옅은 연어 #fff0e8
사이징
행의 너비를 조정하여 계속하십시오.
- 거터 폭: 1
- 폭: 100%
- 최대 너비: 100%
간격
마지막으로 간격을 조정합니다.
- 탑 패딩:
- 데스크탑 + 태블릿: 5vw
- 왼쪽 패딩:
- 태블릿 + 전화: 5vw
- 오른쪽 패딩:
- 데스크탑: 7vw
- 태블릿 + 전화: 5vw
열 1에 텍스트 모듈 추가
H2 콘텐츠 추가
모듈 추가를 시작할 시간입니다! 열 1에 텍스트 모듈을 추가하고 원하는 H2 콘텐츠를 삽입합니다.
제목 텍스트
디자인 탭으로 이동하여 그에 따라 H2 텍스트 설정의 스타일을 지정합니다.
- 제목 텍스트 수준: H2
- H2 글꼴: Annie는 망원경을 사용합니다
- H2 글꼴 두께: 굵게
- H2 텍스트 정렬: 가운데
- H2 텍스트 색상: 브라운 #793715
- H2 텍스트 색상:
- 데스크탑: 7.2vw
- 태블릿: 12vw
- 전화: 11vw
사이징
다음으로 바탕 화면의 너비를 수정합니다.
- 너비:
- 데스크탑: 45vw
- 태블릿 + 전화: 100%
변환
마지막으로 변환 설정을 사용하여 텍스트를 회전하고 위치를 변경합니다.
- 변환 회전:
- 데스크탑: 270도
- 변환 번역:
- x축: -10vw
- y축: 19vw
열 1에 첫 번째 이미지 모듈 추가
투명 일러스트 추가
텍스트 모듈 바로 아래에 새 이미지 모듈을 추가하고 원하는 그림을 업로드하세요. 이 게시물의 시작 부분에서 압축 폴더를 다운로드하여 이 튜토리얼에서 사용하는 이미지를 찾을 수 있습니다.
사이징
이제 이미지 크기를 전체 너비로 설정합니다.
- 전폭: 예
간격
그런 다음 간격 설정을 조정합니다.
- 최고 여백:
- 데스크탑 + 태블릿: -11vw
- 왼쪽 여백:
- 데스크탑: -2vw
- 태블릿+ 전화: -36vw
- 왼쪽 및 오른쪽 패딩:
- 데스크탑: 10vw
- 태블릿 + 전화: 34vw
열 1에 두 번째 이미지 모듈 추가
투명 일러스트 추가
첫 번째 이미지 모듈 바로 아래에 다른 모듈을 추가합니다. 원하는 그림을 삽입하십시오.
사이징
모듈을 전체 너비로 설정합니다.
- 전폭: 예
간격
그런 다음 간격 설정을 조정합니다.
- 최고 여백:
- 데스크탑: -2vw
- 태블릿+ 전화: -10vw
- 왼쪽 여백:
- 데스크탑 + 태블릿: -14vw
- 왼쪽 및 오른쪽 패딩:
- 데스크탑: 7vw
- 태블릿 + 전화: 35vw
열 1에 세 번째 이미지 모듈 추가
이미지 추가
열에 다른 이미지 모듈을 추가하고 그림을 삽입합니다.
사이징
그런 다음 모듈을 전체 너비로 설정합니다.
- 전폭: 예
간격
마지막으로 간격을 조정합니다.
- 최고 여백:
- 태블릿+ 전화: -18vw
- 왼쪽 여백:
- 데스크탑: -13vw
- 태블릿 + 전화: 10vw
- 왼쪽 및 오른쪽 패딩:
- 데스크탑: 7vw
- 태블릿 + 전화: 35vw
열 1에 4번째 이미지 모듈 추가
이미지 추가
1열의 마지막 모듈은 또 다른 이미지 모듈입니다. 삽화를 삽입합니다.
사이징
모듈을 전체 너비로 설정합니다.
- 전폭: 예
간격
그런 다음 간격을 조정합니다.
- 최고 여백:
- 데스크탑: 3vw
- 태블릿+ 전화: -15vw
- 왼쪽 여백:
- 데스크탑: -3vw
- 태블릿 + 전화: 30vw
- 왼쪽 및 오른쪽 패딩:
- 데스크탑: 10vw
- 태블릿 + 전화: 35vw
변환
마지막으로 그림을 회전합니다.
- 변환 회전: 84deg
열 2에 첫 번째 텍스트 모듈 추가
콘텐츠 추가
다음 칼럼으로! 선택한 H3 콘텐츠가 포함된 텍스트 모듈을 추가합니다.
링크 추가
그런 다음 모듈에 대한 링크를 추가합니다.
배경
배경 설정으로 이동하여 다음에 배경색을 추가합니다.
- 배경색
- 배경색: 브라운 #793715
제목 텍스트
그런 다음 디자인 탭에서 H3 텍스트의 스타일을 지정합니다.
- 제목 텍스트 수준: H3
- H3 글꼴: Annie는 망원경을 사용합니다
- H3 색상: 흰색 #ffffff
- H3 글꼴 크기:
- 데스크탑: 2vw
- 태블릿: 5vw
- 전화: 6vw
사이징
이제 크기 설정을 조정합니다.
- 폭: 33%
- 모듈 정렬: 중앙
간격
그런 다음 다양한 화면 크기에 걸쳐 간격 값을 추가합니다.
- 하단 여백: 1vw
- 탑 패딩:
- 데스크탑: 0.5vw
- 태블릿 + 전화: 2.3vw
- 하단 패딩:
- 데스크탑 + 태블릿: 1.1vw
국경
경계 반경을 추가하여 계속하십시오.
- 둥근 모서리: 1vw 모든 모서리
박스 섀도우
마지막으로 상자 그림자를 추가합니다.
- 박스 섀도우: 첫 번째 옵션
- 수평 위치: 7px
- 흐림 강도: 25px
열 2에 첫 번째 이미지 모듈 추가
이미지 추가
2열에서 필요한 다음 모듈은 이미지 모듈입니다. 두 개의 다른 이미지를 업로드하십시오. 하나는 정적 상태용이고 다른 하나는 호버링입니다.
- 정적: 첫 번째 이미지
- 호버: 두 번째 이미지
사이징
이미지를 전체 너비로 만듭니다.
- 전폭: 예
간격
그런 다음 간격 값을 조정합니다.
- 최고 여백:
- 데스크탑: -2vw
- 태블릿 + 전화: 20vw
- 하단 여백:
- 데스크탑 + 태블릿: 4vw
- 왼쪽 여백:
- 데스크탑: -5vw
국경
다음으로 둥근 모서리를 추가하십시오.
- 둥근 모서리: 모든 모서리 10픽셀
박스 섀도우
이미지에 미묘한 상자 그림자도 부여하십시오.
- 상자 그림자: 두 번째 옵션
- 수직 위치: 20px
- 흐림 강도: 80px
변환
마지막으로 호버에서 변환 스케일 값을 조정합니다.
- 호버 시 변환 배율: 110%
열 2의 중복된 텍스트 및 이미지 모듈
두 모듈을 모두 복제하고 복제본을 올바른 순서로 배치합니다.
2열의 두 번째 텍스트 모듈 조정
콘텐츠 및 링크 변경
중복 텍스트 모듈의 내용을 변경합니다.
2열의 두 번째 이미지 모듈 조정
이미지 변경
정적 및 호버 설정 모두에서 이미지를 변경합니다.
복제 열 2
3열 삭제 및 2열 복제
행 설정으로 돌아가서 세 번째 열을 삭제하십시오. 그런 다음 두 번째 열을 복제합니다.
3열의 첫 번째 텍스트 모듈 조정
콘텐츠 및 링크 변경
2열을 복제한 후 3열의 1번째 텍스트 모듈에서 텍스트와 링크를 조정합니다.
3열의 첫 번째 이미지 모듈 조정
이미지 변경
이미지 모듈의 이미지도 변경하십시오.
간격
그런 다음 간격을 조정합니다.
- 최고 여백:
- 데스크탑: -2vw
- 태블릿 + 전화: 11vw
- 하단 여백
- 데스크탑 + 태블릿: 5vw
3열의 두 번째 텍스트 모듈 조정
콘텐츠 및 링크 변경
3열의 마지막 텍스트 모듈의 텍스트와 링크를 변경합니다.
3열의 두 번째 이미지 모듈 조정
이미지 변경
마지막 이미지 모듈의 정적 및 호버 이미지도 변경하십시오.
간격
마지막으로 이미지 모듈의 간격을 조정하면 완료됩니다!
- 최고 여백:
- 데스크탑: -3vw
- 태블릿 + 전화: 7vw
시사
이제 모든 단계를 거쳤으므로 다양한 화면 크기에 따른 결과를 최종적으로 살펴보겠습니다.
데스크탑
이동하는
결론
이 게시물에서는 Divi의 새로운 이미지 교체 호버 옵션으로 디자인을 만드는 방법을 보여주었습니다. 이 기능은 많은 창의적인 가능성으로 이어질 수 있습니다. 우리는 당신이 당신 자신의 프로젝트에서 그것들을 사용하기를 바랍니다. 정적 이미지와 호버 이미지 모두에 동일한 이미지 크기를 사용해야 합니다. 질문이나 제안 사항이 있으면 아래 댓글 섹션에 자유롭게 남겨주세요!