Divi에서 팀원 바이오스에 호버 효과를 추가하는 방법

페이지에 대한 정보가 웹사이트에서 클릭을 유도하는 데 큰 역할을 한다는 것은 비밀이 아닙니다. 그것은 또한 웹사이트 뒤에 있는 회사의 인간적인 부분을 강조할 한 종류의 페이지입니다. 이것을 아는 것은 우리가 페이지를 구성하는 방식, 우리가 공유하는 정보의 종류, 상호작용을 만드는 방법에 주의를 기울이는 것이 중요하다는 것을 깨닫게 해줍니다. 페이지 경험을 향상시키기 위해 할 수 있는 일 중 하나는 직원을 집중 조명하는 팀원 섹션을 제공하는 것입니다. 또한 Divi의 내장 옵션만 사용하여 팀원 사진에 바이오 호버 효과를 추가할 수 있습니다. 이렇게 하면 작업 중인 페이지의 공간을 절약하고 방문자와 호버 상호작용을 만들 수 있습니다.

이 튜토리얼에서는 거기에 도달하는 방법을 단계별로 보여줍니다. 접근 방식을 익히면 자신의 필요에 맞게 디자인 스타일을 사용자 정의할 수 있습니다.

가자!

시사

튜토리얼을 시작하기 전에 다양한 화면 크기에서 결과를 살펴보겠습니다.

데스크탑

이동하는

재창조를 시작하자

YouTube 채널 구독

새 섹션 추가

간격

새 페이지를 만들거나 기존 페이지를 열고 다음 사용자 지정 패딩 값을 사용하여 새 섹션을 추가합니다.

• 상단 패딩: 100px
• 하단 패딩: 100px

행 #1 추가

열 구조

섹션에 사용자 정의 패딩 추가를 완료하면 섹션 설정을 닫고 하나의 열만 사용하여 새 행을 추가할 수 있습니다.

텍스트 모듈 추가

H2 콘텐츠 추가

선택한 H2 사본이 있는 열에 제목 텍스트 모듈을 추가합니다.

H2 텍스트 설정

그런 다음 H2 텍스트 설정으로 이동하여 사본 모양을 약간 변경합니다.

• 제목 2 글꼴: Cinzel
• 제목 2 글꼴 스타일: 작은 대문자
• 제목 2 텍스트 정렬: 가운데
• 제목 2 텍스트 크기: 70px

디바이더 모듈 추가

시계

제목 Text Module 바로 아래에 새 Divider Module을 추가하여 계속 진행합니다.

• 디바이더 표시: 예

디바이더 색상

디자인 탭으로 이동하여 색상 설정을 열고 그에 따라 구분선의 색상을 변경합니다.

• 디바이더 색상: #333333

사이징

다음으로 구분선의 크기를 줄이고 중앙에 배치합니다.

• 폭: 26%
• 모듈 정렬: 중앙

행 #2 추가

열 구조

추가한 이전 행 바로 아래에 동일한 크기의 열 3개를 사용하여 새 행을 추가합니다.

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 크기 설정을 약간 조정합니다.

• 사용자 정의 너비 사용: 예
• 단위: PX
• 사용자 정의 너비: 2000px
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1
• 열 높이 균등화: 예

간격

그런 다음 간격 설정으로 이동하여 사용자 지정 여백 및 패딩 값을 추가합니다.

• 상단 여백: 50px
• 하단 여백: 50px
• 상단 패딩: 10px
• 하단 패딩: 10px
• 왼쪽 패딩: 5px
• 오른쪽 패딩: 5px
• 열 1, 2, 3 왼쪽 패딩: 5px
• 열 1, 2, 3 오른쪽 패딩: 5px

박스 섀도우

또한 다음 설정으로 상자 그림자를 추가하여 행에 약간의 깊이를 부여합니다.

• 상자 그림자 흐림 강도: 80px
• 상자 그림자 확산 강도: -14px
• 그림자 색상: rgba(0,0,0,0.3)

열 1에 이미지 모듈 추가

이미지 모듈에 이미지 업로드

모듈 추가를 시작할 시간입니다! 바이오 호버 효과를 얻으려면 총 두 개의 모듈이 필요합니다. 이미지 모듈 및 Blurb 모듈. 이미지 모듈은 당신이 보여주고 싶은 팀원의 이미지를 담을 것입니다. 반면에 Blurb 모듈은 마우스를 가져가면 왼쪽 하단 모서리에 아이콘을 추가하고 약력을 추가하는 데 사용됩니다. 정사각형 크기의 이미지를 사용하여 첫 번째 열에 이미지 모듈을 추가합니다.

필터

우리가 만들고 있는 디자인은 완전히 회색조입니다. 이 회색조를 이미지에 추가하려면 필터 설정으로 이동하여 모든 채도를 제거하십시오.

• 채도: 0%

열 1에 Blurb 모듈 추가

콘텐츠 추가

1열의 이미지 모듈 바로 아래에 새 Blurb 모듈을 추가하여 계속 진행합니다. 제목 필드에 팀 구성원의 이름을 추가하고 콘텐츠 상자에 팀 구성원에 대한 추가 정보를 입력합니다.

아이콘 선택

다음으로 할 일은 방문자에게 단순한 그림 이상의 것이 있음을 보여줄 아이콘을 선택하는 것입니다.

기본 배경색

그런 다음 전체 투명 배경색을 선택합니다.

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

호버 배경색

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

• 배경색: rgba(255,255,255,0.88)

기본 아이콘 설정

방문자가 마우스를 가져갈 수 있다는 것을 이해하는 데 도움이 되는 눈에 띄는 아이콘이 필요합니다. 그런 아이콘을 얻으려면 아이콘 설정을 변경하십시오.

• 아이콘 색상: #ffffff
• 원 아이콘: 예
• 원 색상: #000000
• 아이콘 배치: 왼쪽
• 아이콘 글꼴 크기 사용: 예
• 아이콘 글꼴 크기: 50px

호버 아이콘 설정

그러나 우리는 아이콘이 호버에 표시되는 것을 원하지 않습니다. 그렇기 때문에 대신 완전히 투명한 색상을 사용합니다.

• 아이콘 색상: rgba(255,255,255,0)
• 원 색상: rgba(255,255,255,0)

기본 제목 텍스트 설정

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

• 제목 글꼴: Cinzel
• 제목 글꼴 두께: 굵게
• 제목 글꼴 스타일: 작은 대문자
• 제목 텍스트 색상: #000000
• 제목 텍스트 크기: 0px

호버 제목 텍스트 설정

마우스 오버 시 텍스트 크기를 수정합니다.

• 제목 텍스트 크기: 30px

기본 본문 텍스트 설정

본문 설정도 수정합니다.

• 본문 글꼴: Open Sans
• 본문 색상: #000000
• 본문 텍스트 크기: 0px
• 바디 라인 높이: 1.8em

호버 본문 텍스트 설정

그리고 다시 마우스를 가져갈 때 본문 텍스트 크기를 변경합니다.

• 본문 텍스트 크기: 14px

기본 간격

마지막으로 음수 상단 여백을 사용하여 Blurb 모듈과 이미지 모듈 사이에 겹침을 만들어야 합니다.

• 상단 여백: -3.7vw(데스크톱), -9vw(태블릿 및 전화)
• 하단 여백: 1.5vw(태블릿), 2vw(전화)

호버 간격

마우스 오버 시 사용자 지정 여백 및 패딩 값을 변경합니다.

• 최고 여백: -11.38vw
• 상단 패딩: 20px
• 하단 패딩: 20px
• 오른쪽 패딩: 50px

두 모듈을 두 번 복제하고 나머지 열에 중복 배치

첫 번째 바이오 호버 효과 만들기를 완료했습니다. 시간을 절약하기 위해 1열에 있는 두 모듈을 두 번 복제하고 나머지 2개 열에 복제본을 배치하면 됩니다.

Blurb 모듈의 이미지 및 콘텐츠 변경

이미지 모듈의 이미지와 Blurb 모듈의 사본을 변경하여 팀원 섹션을 완료하는 것을 잊지 마십시오!

시사

이제 모든 단계를 거쳤으므로 다양한 화면 크기에서 결과를 최종적으로 살펴보겠습니다.

데스크탑

이동하는

마지막 생각들

이 게시물에서는 Divi의 기본 제공 옵션만을 사용하여 팀원 사진의 호버에 바이오 호버 효과를 만드는 방법을 보여주었습니다. 페이지는 가장 많이 방문한 페이지 웹사이트 중 하나이기 때문에 페이지를 잘 만드는 것이 얼마나 중요한지 언급했습니다. 팀원 사진에 바이오 호버 효과를 사용하면 정보 페이지를 다음 단계로 끌어올릴 뿐만 아니라 방문자와의 상호 작용도 만들 수 있습니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!