주요 내용으로 건너 뛰기

Divi로 팀원 스크롤링 캐 러셀을 만드는 방법

Divi : 사용하기 가장 쉬운 WordPress 테마

Elementor로 웹 사이트를 쉽게 만들 수 있습니다

Elementor를 사용하면 전문적인 모양으로 웹 사이트 디자인을 쉽게 만들 수 있습니다. 자신이 할 수있는 일에 대해 비용을 지불하지 마십시오. [무료]

정보 페이지를 만들 때 팀원도 소개하고 싶을 것입니다. 이렇게하면 방문자가 비즈니스 뒤에있는 사람들과 상호 작용할 수 있습니다. 스크롤에서 팀원 섹션에 활기를 불어 넣을 방법을 찾고 있다면이 튜토리얼이 도움이 될 것입니다. 방문자가 페이지를 스크롤 할 때 이동하는 자동 스크롤 팀 구성원 캐 러셀을 만듭니다. 

데모

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

스크롤 디비 팀원

임신의 시작

새 섹션 추가

간격

작업중인 페이지에 새 일반 섹션을 추가하여 시작하십시오. 섹션 설정을 열고 다양한 화면 크기에 맞춤 패딩을 추가합니다.

  • 상단 패딩 : 200px (데스크), 100px (태블릿 및 전화)
  • 하단 패딩 : 200px (데스크), 100px (태블릿 및 전화)
매개 변수 구성

오버 플로우

디자인에 가로 스크롤 막대가 나타나지 않도록하기 위해 고급 탭에서 섹션 오버플로를 숨 깁니다.

  • 수평 오버플로 : 숨겨진
  • 수직 오버플로 : 숨겨진
오버플로 구성

라인 # 1 추가

기둥 구조

다음 열 구조를 사용하여 섹션에 새 줄을 계속 추가하십시오.

divi 레이아웃 선택

크기 조정

아직 모듈을 추가하지 않고 행 설정을 열고 디자인 탭으로 전환 한 다음 크기 조정 설정에서 너비와 최대 너비를 변경합니다.

  • 너비 : 90 %
  • 최대 너비 : 1580px
Divi 라인 매개 변수

간격

또한 사용자 지정 상위 및 하위 패딩을 추가합니다.

  • 상단 패딩 : 100px
  • 하단 패딩 : 100px
줄 간격 divi 구성

열에 텍스트 모듈 추가

H2 콘텐츠 추가

첫 번째 텍스트 모듈부터 시작하여 모듈을 추가 할 때입니다. 원하는 H2 내용을 입력하십시오.

팀 만나기

H2 텍스트 설정

모듈 디자인 탭으로 이동하여 다음과 같이 H2 텍스트 설정을 변경합니다.

Divi : 모든 시간의 최고의 WordPress 테마!

901.000 다운로드Divi는 세계에서 가장 인기있는 WordPress 테마입니다. 그것은 완전하고, 사용하기 쉽고 62 무료 템플릿 이상을 제공합니다. [추천]

  • 서체 제목 2 : Quicksand
  • 서체 제목 2 : 세미 볼드
  • 항목 2의 텍스트 색상 : # 000000
  • 헤더 2 텍스트 크기 : 70px (데스크톱), 50px (태블릿), 40px (전화)
Divi 텍스트 간격

컬럼에 분리 모듈 추가

시계

그런 다음 분리 모듈을 추가합니다. "분리기 표시"옵션이 활성화되어 있는지 확인하십시오.

  • 구분 기호 표시 : 예
divi 구분 기호 표시

라인

그런 다음 회선 설정을 약간 변경하십시오.

  • 선 색상 : # edf000
  • 선 스타일 : 솔리드
  • 라인 위치 : 상단
Divi 간격 스타일

크기 조정

치수 매개 변수를 적절하게 수정하여 모듈 매개 변수를 완료하십시오.

  • 분배기 무게 : 20px
  • 너비 : 11 %
  • 모듈의 정렬 : 왼쪽
  • 높이 : 20px
divi 라인 모듈 크기 조정

2 번 줄 추가

기둥 구조

다음 줄로! 다음 열 구조를 사용하십시오.

Divi 열 구성

크기 조정

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

  • 사용자 정의 거터 너비를 사용하십시오. 예
  • 거터 폭 : 2
  • 너비 : 100 %
  • 최대 폭 : 100 %
거터 너비 구성

간격

그런 다음 작은 화면에만 왼쪽 및 오른쪽 패딩을 추가하십시오.

  • 왼쪽 패딩 : 5 % (태블릿 및 휴대 전화 만 해당)
  • 오른쪽 여백 : 5 % (태블릿 및 휴대 전화 만 해당)
줄 간격 스타일 구성

열 매개 변수 (5x)

이제이 자습서의 다음 세 단계에서 열을 일부 변경합니다. 행의 각 열에 세 단계를 적용합니다.

Divi 매개 변수 라인 구성

그라데이션 배경

먼저 각 열에 그라데이션 배경을 추가합니다.

  • 1 색상 : rgba (255,255,255,0)
  • 2 색상 : rgba (0,0,0,0,84)
  • 그라디언트 유형 : 선형
  • 시작 위치 : 25 %
  • 최종 위치 : 86 %
  • 배경 이미지 위에 그라디언트 배치 : 예
Divi 후면 컬럼 구성

배경 이미지

그런 다음 원하는 배경 이미지를 업로드하십시오. 이 배경 이미지는 각 팀원을 나타내므로 각 열에 다른 이미지를 사용하십시오.

최고의 WordPress 테마 및 플러그인을 찾고 계십니까?

Envato에서 최고의 플러그인과 WordPress 테마를 다운로드하고 쉽게 웹 사이트를 만드십시오. 이미 49.720.000 다운로드 이상. [EXCLUSIVE]

  • 배경 이미지 크기 : 표지
  • 배경 이미지의 위치 : 중앙
divi 열 배경 이미지 추가

주요 요소

각 열의 기본 태블릿 요소에 사용자 정의 CSS를 추가하여 열 설정을 완료하십시오. 이 CSS 코드 줄은 두 개를 나란히 배치하는 대신 태블릿에서 열을 다른 하나 아래에 배치하는 데 도움이됩니다.

너비 : 100 % 중요! 여백 : 50px 0px 50px 0px! 중요;
코드 css divi 열

열에 개인 모듈 추가

콘텐츠 추가

팀원에 대한 정보를 공유하기 위해 Person 모듈을 사용합니다. 첫 번째 Person 모듈을 열 1에 추가하고 원하는 콘텐츠를 사용합니다.

사람 이름 divi

이미지 삭제

그런 다음 이미지를 삭제하십시오. 대신 열의 배경 이미지를 사용합니다.

divi 이미지 제거

배경 이미지

그런 다음 모듈의 배경 이미지로 이미지 오버레이를 추가합니다. 이 튜토리얼의 시작 부분에서 폴더를 다운로드하여 사용중인 파일을 찾을 수 있습니다.

  • 배경 이미지 크기 : 표지
  • 배경 이미지의 위치 : 중앙
사람 모듈 배경 구성

제목 텍스트 설정

모듈 디자인 탭으로 이동하여 다음과 같이 제목 텍스트 설정을 변경합니다.

  • 타이틀 레벨 : H3
  • 제목 글꼴 : Quicksand
  • 제목 글꼴 무게 : 굵게
  • 제목 텍스트 색상 : #ffffff
  • 제목 텍스트 크기 : 230 %
Divi 모듈 제목 사용자 정의

본문 텍스트 설정

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

  • 본문 글꼴 : Open Sans
  • 본문 텍스트 색상 : #ffffff
  • 바디 라인 높이 : 2,2 em
Divi 바디 사용자 정의

위치 텍스트 설정

그런 다음 위치 텍스트 설정을 약간 변경하십시오.

  • 글꼴 위치 : Open Sans
  • 위치 텍스트 색상 : # edf000
Divi 위치

간격

그리고 간격 설정에 사용자 지정 패딩 값을 추가하여 모듈 설정을 완료합니다.

  • 상단 패딩 : 70 %
  • 낮은 패딩 : 10 %
  • 왼쪽 패딩 : 10 %
  • 오른쪽 패딩 : 10 %
Divi 사람 모듈 간격

Person 모듈을 4 번 복제

Person 모듈을 완료하면 전체 모듈을 네 번 복제 할 수 있습니다.

나머지 열에 중복 배치

행의 나머지 XNUMX 개 열에 중복 모듈을 배치합니다. 내용도 편집해야합니다.

온라인 상점을 쉽게 만들 수 있습니다.

무료 WooCommerce를 다운로드하십시오. 전자 상거래 플러그인은 WordPress에서 실제 제품과 디지털 제품을 판매하는 플러그인입니다. [추천]

행을 자동 스크롤 회전 목마로 전환

라인 2의 크기 변경

이제이 행을 자동 스크롤 팀 구성원 캐 러셀로 바꾸려면 행 설정을 다시 열고 크기 설정에서 너비와 최대 너비를 변경해야합니다.

  • 너비 : 180 %
  • 최대 너비 : 220 % (데스크), 100 % (태블릿 및 전화)
줄 divi 수정 간격

라인 2의 수평 이동 추가

고급 탭의 스크롤 효과 설정에 수평 이동을 추가하여 선 설정을 완료하면 완료됩니다!

  • 수평 이동 활성화 : 예
  • 시작 오프셋 :
    • 사무실 : 2,5
    • 태블릿 및 전화 : 0
  • 평균 오프셋 : 0 (40 %)
  • 끝 오프셋 :
    • 사무실 : -25 (62 %)
    • 태블릿 및 전화 : 0
  • 트리거 모션 효과 : 요소 중간
Divi 스크롤 애니메이션 구성

측량

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

스크롤 디비 팀원

마지막 생각

이 튜토리얼에서는 Divi의 내장 스크롤 효과로 창의력을 발휘하는 방법을 보여주었습니다. 특히, 자동 스크롤되는 아름다운 팀 구성원 캐 러셀을 다시 만들었습니다. 방문자가 페이지를 아래로 스크롤하면 캐 러셀의 다른 부분이 나타납니다.

이 문서에는 메모의 0을 포함

코멘트를 남겨주세요

귀하의 이메일 주소는 공개되지 않습니다. 필수 필드는 표시됩니다 *

이 사이트는 원하지 않는 것을 줄이기 위해 Akismet을 사용합니다. 댓글 데이터 사용 방법에 대해 자세히 알아보기.

맨 위로
0 주식
짹짹
레지스터