"회사 소개" 페이지가 귀하의 웹 사이트. 비즈니스의 인간적인 부분을 강조하는 것도 이 유형의 페이지입니다. 사이트 웹. 이를 알고 있기 때문에 페이지를 구성하는 방법, 공유하는 정보의 종류, 상호작용을 만드는 방법에 주의를 기울이는 것이 중요하다는 것을 깨달았습니다.

페이지 경험을 개선하기 위해 수행 할 수있는 작업 중 하나는 직원을 주목할 수있는 팀 구성원 섹션을 제공하는 것입니다. 또한 Divi의 내장 옵션 만 사용하여 팀원의 사진에 생물학적 호버 효과를 추가 할 수 있습니다.

이렇게 하면 작업 중인 페이지의 공간을 절약하고 사용자와 사용자 간에 호버 상호 작용을 만들 수 있습니다. 방문자.

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

가자!

측량

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

국

모바일

다시 만들기 시작합시다

새 섹션 추가

간격

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

• 베스트 패딩 : 100px
• 하단 패딩 : 100px

1 행 추가

기둥 구조

섹션에 맞춤 채우기 추가를 완료하면 섹션 설정을 닫고 단일 열을 사용하여 새 행을 추가 할 수 있습니다.

텍스트 모듈 추가

H2 콘텐츠 추가

H2 크기를 선택한 열에 텍스트 모듈 제목을 추가하십시오.

H2 텍스트 설정

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

• 제목 2 폰트 : Cinzel
• 제목 2 폰트 스타일 : Small Caps
• 제목 2 텍스트 정렬 : 가운데
• 제목 2 텍스트 크기 : 70px

분류 모듈 추가

시계

텍스트 모듈 제목 바로 아래에 새 분리 모듈을 계속 추가하십시오.

• 쇼 분배기 : 예

분리기의 색상

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

• 분리기의 색상 : # 333333

크기 조정

그런 다음 분배기의 크기를 줄이고 가운데에 배치합니다.

• 너비 : 26 %
• 모듈의 정렬 : 중심

2 라인 추가

기둥 구조

추가 한 이전 행 바로 아래에서 동일한 크기의 세 열을 사용하여 새 행을 계속 추가하십시오.

크기 조정

더 많은 모듈을 추가하지 않고 라인 매개 변수를 열고 크기 조정 매개 변수를 변경하십시오.

• 맞춤 너비 사용 : 예
• 단위 : 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에 이미지 모듈 추가

이미지 모듈에 이미지로드

이제 모듈 추가를 시작할 시간입니다! 생물학적 호버 효과를 얻으려면 총 XNUMX 개의 모듈이 필요합니다. 이미지 모듈과 광고 모듈입니다. 이미지 모듈에는 발표하려는 팀원의 이미지가 포함됩니다.

한편 Blurb 모드는 왼쪽 하단 모서리와 호버 전기에 아이콘을 추가하는 데 사용됩니다. 정사각형 크기의 이미지를 사용하여 첫 번째 열에 이미지 모듈을 추가합니다.

필터

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

• 채도 : 0 %

1 열에 Blurb 모듈 추가

콘텐츠 추가

계속해서 열 1의 이미지 모듈 바로 아래에 새 광고 모듈을 추가합니다. 제목 필드에 팀 구성원의 이름을 추가하고 상자에 팀 구성원에 대한 추가 정보를 입력합니다. 내용.

아이콘을 선택하십시오

다음으로 할 일은 표시될 선택 아이콘을 선택하는 것입니다. 방문자 사진 이상의 것이 있다는 것입니다.

기본 배경색

다음으로 완전 투명한 배경색을 선택합니다.

• 배경색 : 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
• 제목 글꼴 : Bold
• 제목 글꼴 스타일 : 작은 대문자
• 색상 텍스트 제목 : # 000000
• 텍스트 제목 크기 : 0px

제목의 텍스트 설정 위로 마우스를 가져갑니다.

마우스를 가져 가면 텍스트 크기가 변경됩니다.

• 텍스트 제목 크기 : 30px

기본 본문 텍스트 설정

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

• 신체 검사 : Open Sans
• 본문 색 텍스트 : # 000000
• 본문 텍스트 크기 : 0px
• 본체 높이 : 1.8em

비행 중 신체의 매개 변수

그리고 다시 텍스트 유혹의 본문 크기를 변경하십시오.

• 본문 텍스트 크기 : 14px

기본 간격

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

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

고정 간격

롤오버에서 사용자 정의 여백 및 채우기 값을 변경하십시오.

• 상단 여백 : -11,38vw
• 상단 패딩 : 20px
• 하단 패딩 : 20px
• 실내 장식품 오른쪽 : 50px

두 모듈을 두 번 복제하고 나머지 열에 복제본을 두십시오.

첫 번째 생물학적 호버 효과 만들기를 완료했습니다. 시간을 절약하기 위해 열 1의 두 모듈을 두 번 복제하고 나머지 두 열에 중복을 배치 할 수 있습니다.

Blurb 모듈의 이미지 및 콘텐츠 편집

이미지 모듈에서 이미지를 변경하고 Blurb 모듈에 복사하여 팀 구성원 섹션을 완료하는 것을 잊지 마십시오!

측량

이제 모든 단계를 마쳤으므로 다양한 화면 크기에서 어떻게 보 였는지 마지막으로 살펴 보겠습니다.

국

모바일

마지막 생각

이 기사에서는 Divi의 기본 제공 옵션 만 사용하여 팀원 사진에 생물학적 호버 효과를 만드는 방법을 보여주었습니다. 가장 많이 방문한 웹 사이트 중 하나이기 때문에 좋은 페이지를 만드는 것이 얼마나 중요한지 강조했습니다.

팀원의 사진에 바이오 호버 효과를 사용하면 페이지 품질이 향상 될뿐만 아니라 방문자와의 상호 작용도 만들어집니다. 질문이나 제안이 있으시면 아래 댓글 섹션에 댓글을 남겨주세요!