Divi를 사용하여 Hover에서 텍스트 모듈을 고유한 사람 설명으로 변환

게시 됨: 2018-12-05

이미지에 설명을 추가 할 수있는 창의적인 방법을 찾고? Divi의 내장된 호버 옵션을 사용하면 이제 그 어느 때보다 쉬워졌습니다. 이 접근 방식을 웹사이트에서 평가부터 팀원 설명 등에 이르기까지 다양한 목적으로 사용할 수 있습니다. 이 튜토리얼에서는 멋진 웹 디자인을 달성하는 데 도움이 되는 4가지 다른 예를 살펴보겠습니다. 우리는 Divi의 내장 옵션만을 사용하여 네 가지 예제를 모두 만들고 있습니다.

가자!

시사

단계별 자습서를 시작하기 전에 다양한 화면 크기의 최종 결과를 간단히 살펴보겠습니다.

데스크탑

사람 설명

이동하는

사람 설명

일반 단계

새 섹션 추가

이 자습서를 더 쉽게 따라할 수 있도록 몇 가지 일반적인 단계부터 시작하겠습니다. 그런 다음 각 예제에 고유한 단계를 처리합니다. 새 페이지나 기존 페이지에 새 일반 섹션을 추가하여 시작하십시오.

사람 설명

행 추가

열 구조

계속해서 다음 열 구조를 선택하십시오(다른 열 구조에서도 이 작업을 수행할 수 있음).

사람 설명

열 1 배경 이미지

아직 모듈을 추가하지 않고 행 설정을 열고 첫 번째 열에 배경 이미지를 추가하십시오.

열 1 배경 이미지 반복: 반복 없음

사람 설명

사이징

행의 크기 설정을 변경하여 계속합니다.

이 행을 전체 너비로 만들기: 예
사용자 지정 거터 너비 사용: 예
거터 폭: 1

사람 설명

간격

다음으로 사용자 정의 패딩 값을 추가합니다.

상단 패딩: 150px
하단 패딩: 150px

사람 설명

열 1에 텍스트 모듈 추가

콘텐츠 추가

호버에 대한 설명을 표시하기 위해 네 가지 예 각각에 대해 텍스트 모듈을 사용합니다. 계속해서 이 텍스트 모듈을 배경 이미지를 추가한 동일한 열에 추가하십시오.

사람 설명

기본 텍스트 설정

그런 다음 텍스트 설정으로 이동하여 몇 가지를 변경합니다.

텍스트 색상: rgba(255,255,255,0)
텍스트 크기: 0.7vw(데스크톱), 12px(태블릿 및 휴대폰)
텍스트 방향: 양쪽 맞춤

사람 설명

호버 텍스트 설정

마우스를 가져갈 때 텍스트 색상을 변경합니다.

텍스트 색상: #000000

사람 설명

기본 제목 텍스트 설정

H3 텍스트 설정도 변경하십시오.

제목 3 글꼴 두께: 매우 굵게
제목 3 글꼴 스타일: 대문자
제목 3 텍스트 색상: rgba(255,255,255,0)
제목 3 텍스트 크기: 2.5vw(데스크톱), 40px(태블릿), 30px(전화)
제목 3 줄 높이: 2.2em

사람 설명

호버 제목 텍스트 설정

그리고 호버에 다른 H3 텍스트 색상을 적용합니다.

제목 3 텍스트 색상: #000000

사람 설명

행 3회 복제

이제 모든 일반 단계를 거쳤으므로 생성한 행을 세 번 복제하여 네 가지 예 각각에 대해 하나의 행을 가질 수 있습니다. 각 예를 시작할 때 다음 행으로 이동해야 합니다.

사람 설명

예 #1

사람 설명

텍스트 모듈 변경

기본 배경색

첫 번째 예제부터 시작하겠습니다! 첫 번째 열에서 텍스트 모듈을 열고 배경색을 추가합니다.

배경색: rgba(255,255,255,0)

사람 설명

호버 배경색

마우스를 가져갈 때 이 배경색을 변경합니다.

배경색: rgba(255,255,255,0.73)

사람 설명

기본 간격

다음으로 사용자 정의 여백과 패딩을 추가하십시오.

상단 여백: -500px
하단 여백: 500px
상단 패딩: 250px
하단 패딩: 250px
왼쪽 패딩: 70px
오른쪽 패딩: 70px

사람 설명

호버 간격

마우스 오버 시 값을 변경합니다.

상단 여백: 0px
하단 여백: 0px
상단 패딩: 100px
하단 패딩: 100px

사람 설명

전환

마지막으로 고급 탭에서 전환 지속 시간을 늘려 부드러운 전환을 만듭니다.

전환 시간: 1000ms

사람 설명