다음 Divi 프로젝트를 위한 활기찬 호버 팀 페이지를 만드는 방법

팀 페이지는 종종 과소평가됩니다. 제품을 구매하거나 서비스를 고용하기 전에 많은 사용자가 회사와 그 뒤에 있는 사람들에 대해 더 나은 아이디어를 얻기 위해 팀이나 페이지에 대해 탐색합니다. 팀 페이지가 긍정적인 첫인상을 남기면 전환율이 높아질 수 있습니다. 이제 Divi로 아름다운 팀 페이지를 만드는 방법이 많이 있지만 다음 프로젝트에 대한 영감을 찾고 있다면 이 게시물을 좋아할 것입니다. 호버에서 구성원 약력을 트리거하는 활기찬 호버 팀 페이지를 다시 만들 것입니다.

가자!

시사

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

데스크탑

이동하는

YouTube 채널 구독

1. 제목에 대한 일반 섹션 + 한 열 행으로 시작

새 페이지를 열고 페이지 속성을 '빈 페이지'로 설정합니다. 완료했으면 Divi Builder를 입력하고 1열 행이 있는 섹션을 추가합니다.

텍스트 및 구분선 모듈을 추가합니다.

2. 텍스트 모듈에 콘텐츠 추가 및 스타일 지정

텍스트 모듈에 일부 H1 콘텐츠를 추가합니다.

디자인 탭으로 이동하고 그에 따라 H1 텍스트 설정의 스타일을 지정합니다.

• 제목 글꼴: Poppins
• 제목 글꼴 두께: 가벼움
• 제목 텍스트 정렬: 가운데
• 제목 텍스트 색상: 검정 #000000
• 제목 텍스트 크기:
  • 데스크탑 = 6vw
  • 태블릿 = 9vw
  • 전화 = 11vw
• 제목 문자 간격: -0.4vw

3. 디바이더 스타일 지정

다음 모듈인 분할기 모듈로 넘어갑니다. 구분선 색상을 검정색으로 변경하고 크기 설정을 수정합니다.

• 디바이더 색상: 블랙 #oooooo
• 디바이더 무게: 12px
• 폭: 14%
• 모듈 정렬: 중앙

4. 일반 섹션 + 3열 행을 사용하여 팀 약력 만들기

이제 제목 섹션을 완료했으므로 팀 바이오스 구축을 시작할 준비가 되었습니다. 3열 행이 있는 새 일반 섹션을 추가하여 시작합니다.

5. 행 크기 조정 설정 조정

크기 조정 설정을 수정하여 행이 섹션 컨테이너의 전체 너비를 차지하도록 합니다.

• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1
• 폭: 100%
• 최대 너비: 100%

6. 행 간격 설정 조정

사용자 정의 상단 및 하단 패딩도 추가하십시오.

• 탑 패딩: 2vw
• 하단 패딩: 2vw

7. 1열에 이미지 및 블러브 모듈 추가

최종 효과를 만드는 데 사용할 두 가지 주요 모듈은 이미지와 블러브 모듈입니다. 먼저 이미지 모듈을 추가한 다음 광고 문구를 추가합니다.

8. 이미지 업로드 및 스타일 지정

호버 팀 페이지는 팀 구성원을 보여주는 모든 것입니다. 이미지 모듈을 열고 그 중 하나의 사진을 추가하십시오. 우리는 Divi 스톡 이미지 중 하나를 사용할 것입니다. 이미지 크기가 612px X 612px인지 확인하세요.

조정

디자인 탭으로 이동하여 이미지 정렬을 변경합니다.

• 이미지 정렬: 중앙

사이징

크기 설정도 수정합니다.

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

간격

그리고 약간의 음수 상단 여백을 추가하십시오.

• 여유:
  • 데스크탑 = -3vw
  • 태블릿 및 전화 = -13vw

국경

이미지를 원으로 바꾸기 위해 테두리 설정을 변경하겠습니다.

• 둥근 모서리: 20vw 네 모서리 모두
• 테두리 스타일: 4면 모두
• 테두리 너비: 12px
• 테두리 색상: 흰색 #ffffff
• 테두리 스타일: 더블

박스 섀도우

또한 미묘한 상자 그림자를 적용하여 이미지에 깊이를 추가하고 있습니다.

• 박스 섀도우: 첫 번째 옵션
• 상자 그림자 흐림 강도: 50px

Z 인덱스

이전 단계 중 하나에서 약간의 음수 상단 여백을 추가했습니다. 이미지가 열의 상단에 유지되도록 하기 위해 이미지가 열을 초과하더라도 가시성 설정에서 z 인덱스를 높일 것입니다.

• Z 인덱스: 3

9. Blurb에 콘텐츠 추가 및 스타일 지정

페이지 설정에 사용자 정의 CSS 추가

다른 작업을 수행하기 전에 광고 문구 안에 있는 아이콘의 기본 하단 여백을 제거하기 위해 몇 가지 사용자 정의 CSS를 추가합니다. 페이지 설정에 다음 CSS 코드 줄을 추가합니다.

.blurb-icon .et_pb_main_blurb_image
{
margin-bottom: 0px;
}

Blurb에 CSS 클래스 제공

다음에 blurb 모듈을 열고 일치하는 CSS 클래스를 추가합니다.

• CSS 클래스: 말풍선 아이콘

콘텐츠 추가

자리 표시자 텍스트를 사용하지만 팀 구성원의 실제 이름과 설명을 삽입할 수 있습니다.

아이콘 선택

다음으로 더하기 아이콘을 선택합니다.

• 아이콘 사용: 예
• 아이콘: 원 안의 더하기 기호

스타일 배경

배경 설정으로 이동하여 흰색 기본 배경색과 호버에 그라데이션 배경을 추가합니다.

• 배경: 흰색 #ffffff
• 호버 배경: 그라디언트
• 그라디언트 색상 1: #00ffa1
• 그라디언트 색상 2: #29c4a9
• 그라디언트 유형: 선형
• 기울기 방향: 154deg
• 시작 위치: 0
• 최종 위치: 46%

스타일 아이콘

다음에 다음 아이콘 설정을 적용합니다.

• 아이콘 색상:
  • 기본값: #29c4a9
  • 호버: 투명 rgba(255,255,255,0)
• 아이콘 글꼴 크기 사용: 예
• 아이콘 글꼴 크기:
  • 데스크탑 = 2vw
  • 태블릿 = 4vw
  • 전화 = 6vw

조정

텍스트 설정으로 이동하여 텍스트 정렬을 변경합니다.

• 텍스트 정렬: 가운데

스타일 제목 텍스트

그런 다음 제목 텍스트 설정을 열고 다양한 화면 크기에서 일부 변경을 수행합니다.

• 제목: H4
• 제목 글꼴: Poppins
• 제목 글꼴: 굵게
• 제목 텍스트 색상: 흰색 #ffffff
• 제목 텍스트 크기:
  • 데스크탑: 1.5vw
  • 태블릿: 2.5vw
  • 전화: 3.5vw

스타일 본문 텍스트

본문 설정에 대해서도 동일한 작업을 수행합니다.

• 본문 색상: 흰색 #ffffff
• 본문 텍스트 크기:
  • 데스크탑 = 0.8vw
  • 태블릿 = 1.9vw
  • 전화 = 2.6vw
• 바디 라인 높이:
  • 데스크탑 = 2vw
  • 태블릿 + 전화 = 3vw

사이징

다음으로, 우리는 블러브 모듈의 크기 설정을 변경할 것입니다.

• 콘텐츠 너비: 100%
• 폭: 81%
• 모듈 정렬: 중앙

간격

다양한 화면 크기에도 일부 사용자 지정 여백 및 패딩 값을 적용합니다.

• 최고 여백:
  • 데스크탑 = -4vw
  • 태블릿 + 전화 = -9vw
• 하단 여백:
  • 데스크탑 = 3.5vw
  • 태블릿 + 전화 = 10vw
• 상단 및 하단 패딩:
  • 데스크탑 = 7.1vw
  • 태블릿 = 30vw
  • 전화 = 28vw
• 왼쪽 및 오른쪽 패딩
  • 데스크탑 = 2vw
  • 태블릿 + 전화 = 8vw

국경

테두리 반경을 추가하여 블러 모듈을 원으로 바꿉니다.

• 둥근 모서리: 50vw 네 모서리 모두

박스 섀도우

그리고 호버링 시 나타나는 박스 그림자를 추가하여 블러 모듈 디자인을 완성합니다.

• 박스 섀도우: 다섯 번째 스타일
• 상자 그림자 수평 위치: 0vw
• 상자 그림자 수직 위치:
  • 데스크탑 + 호버 = -14vw
  • 태블릿 = -44vw
  • 전화 = -46vw
• 상자 그림자 확산 강도:
  • 데스크탑 + 호버 = -6vw
  • 태블릿 + 전화 = -19vw
• 상자 그림자 색상:
  • 호버 = rgba(0,0,0,0.05)

10. 스타일 열 1

이제 열 1에 필요한 모든 모듈을 추가했으므로 열의 스타일을 지정할 차례입니다.

배경

열 1 배경 설정을 열고 다음 그라데이션 배경을 적용합니다.

• 배경 스타일: 그라데이션
• 그라디언트 색상 1: #00ffa1
• 그라디언트 색상 2: #29c4a9
• 그라디언트 유형: 라이너
• 기울기 방향: 282deg

국경

디자인 탭으로 이동하여 테두리 반경을 추가하여 기둥을 원으로 바꿉니다.

• 둥근 모서리: 50vw

과다

이미지가 열 위에 나타나도록 하기 위해 가시성 설정에서 가로 및 세로 오버플로를 변경합니다.

• 수평 및 수직 오버플로: 표시

11. 빈 열 삭제 및 첫 번째 열 두 번 복제

첫 번째 열과 그 안의 모든 모듈을 완료했습니다. 시간을 절약하기 위해 빈 열을 제거하고 첫 번째 열을 두 번 복제합니다.

2열 및 3열 삭제

기본 행 설정으로 돌아가서 2열과 3열의 휴지통 아이콘을 클릭합니다.

1열을 두 번 복제

2열과 3열을 삭제하면 1열이 잠시 이상하게 보이지만 열을 두 번 복제하면 모든 것이 변경됩니다.

12. 2열의 내용 및 색상 변경

이제 다른 두 팀원을 위해 새 기둥의 스타일을 지정할 차례입니다.

2열

두 번째 열의 설정을 열고 그라데이션 배경을 변경합니다.

• 배경 그라디언트 색상 1: #00eeff
• 배경 그라데이션 색상 2: #309ce5

다른 이미지도 업로드하십시오.

Blub 모듈을 열고 그라디언트 배경을 변경하여 계속하십시오.

• 호버 배경색 1: #00eeff
• 호버 배경색 2: #309ce5

아이콘 색상도 변경합니다.

• 기본 아이콘 색상: #309ce5

3열

세 번째 열의 설정을 열고 그라데이션 배경을 변경합니다.

• 배경 그라디언트 색상 1: #ff91ec
• 배경 그라데이션 색상 2: #a500ff

다음으로 블러브 그라디언트 배경을 변경합니다.

• 호버 배경색 1: #ff91ec
• 호버 배경색 2: #a500ff

아이콘 색상과 함께.

• 기본 아이콘 색상: #a500ff

시사

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

데스크탑

이동하는

랩입니다!

이 게시물에서는 다채로운 호버 옵션으로 활기찬 호버 팀 페이지를 만드는 방법을 보여 주었습니다. 다음 Divi 프로젝트에서 이 디자인을 자유롭게 사용하세요. 팀 페이지나 기여자 디렉토리에 사용해 보십시오. 의견에 의견이 있으면 알려주십시오.