정보 페이지를 만들 때 거기에 팀원을 소개하고 싶을 수도 있습니다. 그렇게 함으로써, 당신은 방문자 비즈니스 뒤에 있는 사람들과 상호 작용합니다. 스크롤할 때 팀원의 섹션에 애니메이션을 적용하는 방법을 찾고 있다면 이 튜토리얼이 도움이 될 것입니다. 우리는 자동 스크롤 팀원 회전 목마를 만들 것입니다. 방문자 페이지를 스크롤하십시오.
데모
튜토리얼을 시작하기 전에 다양한 화면 크기에서 결과를 살펴 보겠습니다.
임신의 시작
새 섹션 추가
간격
작업중인 페이지에 새 일반 섹션을 추가하여 시작하십시오. 섹션 설정을 열고 다양한 화면 크기에 맞춤 패딩을 추가합니다.
- 상단 패딩 : 200px (데스크), 100px (태블릿 및 전화)
- 하단 패딩 : 200px (데스크), 100px (태블릿 및 전화)
오버 플로우
디자인에 가로 스크롤 막대가 나타나지 않도록하기 위해 고급 탭에서 섹션 오버플로를 숨 깁니다.
- 수평 오버플로 : 숨겨진
- 수직 오버플로 : 숨겨진
라인 # 1 추가
기둥 구조
다음 열 구조를 사용하여 섹션에 새 줄을 계속 추가하십시오.
크기 조정
아직 모듈을 추가하지 않고 행 설정을 열고 디자인 탭으로 전환 한 다음 크기 조정 설정에서 너비와 최대 너비를 변경합니다.
- 너비 : 90 %
- 최대 너비 : 1580px
간격
또한 사용자 지정 상위 및 하위 패딩을 추가합니다.
- 상단 패딩 : 100px
- 하단 패딩 : 100px
열에 텍스트 모듈 추가
H2 콘텐츠 추가
이제 첫 번째 텍스트 모듈부터 시작하여 모듈을 추가할 차례입니다. 입력하세요 내용 당신이 선택한 H2.
H2 텍스트 설정
모듈 디자인 탭으로 이동하여 다음과 같이 H2 텍스트 설정을 변경합니다.
- 서체 제목 2 : Quicksand
- 서체 제목 2 : 세미 볼드
- 항목 2의 텍스트 색상 : # 000000
- 헤더 2 텍스트 크기 : 70px (데스크톱), 50px (태블릿), 40px (전화)
컬럼에 분리 모듈 추가
시계
그런 다음 분리 모듈을 추가합니다. "분리기 표시"옵션이 활성화되어 있는지 확인하십시오.
- 구분 기호 표시 : 예
라인
그런 다음 회선 설정을 약간 변경하십시오.
- 선 색상 : # edf000
- 선 스타일 : 솔리드
- 라인 위치 : 상단
크기 조정
치수 매개 변수를 적절하게 수정하여 모듈 매개 변수를 완료하십시오.
- 분배기 무게 : 20px
- 너비 : 11 %
- 모듈의 정렬 : 왼쪽
- 높이 : 20px
2 번 줄 추가
기둥 구조
다음 줄로! 다음 열 구조를 사용하십시오.
크기 조정
더 많은 모듈을 추가하지 않고 다음과 같이 라인 매개 변수를 열고 크기 조정 매개 변수를 수정하십시오.
- 사용자 정의 거터 너비를 사용하십시오. 예
- 거터 폭 : 2
- 너비 : 100 %
- 최대 폭 : 100 %
간격
그런 다음 작은 화면에만 왼쪽 및 오른쪽 패딩을 추가하십시오.
- 왼쪽 패딩 : 5 % (태블릿 및 휴대 전화 만 해당)
- 오른쪽 여백 : 5 % (태블릿 및 휴대 전화 만 해당)
열 매개 변수 (5x)
이제이 자습서의 다음 세 단계에서 열을 일부 변경합니다. 행의 각 열에 세 단계를 적용합니다.
그라데이션 배경
먼저 각 열에 그라데이션 배경을 추가합니다.
- 1 색상 : rgba (255,255,255,0)
- 2 색상 : rgba (0,0,0,0,84)
- 그라디언트 유형 : 선형
- 시작 위치 : 25 %
- 최종 위치 : 86 %
- 배경 이미지 위에 그라디언트 배치 : 예
배경 이미지
그런 다음 원하는 배경 이미지를 업로드하십시오. 이 배경 이미지는 각 팀원을 나타내므로 각 열에 다른 이미지를 사용하십시오.
- 배경 이미지 크기 : 표지
- 배경 이미지의 위치 : 중앙
주요 요소
각 열의 기본 태블릿 요소에 사용자 정의 CSS를 추가하여 열 설정을 완료하십시오. 이 CSS 코드 줄은 두 개를 나란히 배치하는 대신 태블릿에서 열을 다른 하나 아래에 배치하는 데 도움이됩니다.
너비 : 100 % 중요! 여백 : 50px 0px 50px 0px! 중요;
열에 개인 모듈 추가
콘텐츠 추가
팀 구성원에 대한 정보를 공유하기 위해 Person 모듈을 사용하겠습니다. 열 1에 첫 번째 Person 모듈을 추가하고 내용 드 votre choix.
이미지 삭제
그런 다음 이미지를 삭제하십시오. 대신 열의 배경 이미지를 사용합니다.
배경 이미지
그런 다음 모듈의 배경 이미지로 이미지 오버레이를 추가합니다. 이 튜토리얼의 시작 부분에서 폴더를 다운로드하여 사용중인 파일을 찾을 수 있습니다.
- 배경 이미지 크기 : 표지
- 배경 이미지의 위치 : 중앙
제목 텍스트 설정
모듈 디자인 탭으로 이동하여 다음과 같이 제목 텍스트 설정을 변경합니다.
- 타이틀 레벨 : H3
- 제목 글꼴 : Quicksand
- 제목 글꼴 무게 : 굵게
- 제목 텍스트 색상 : #ffffff
- 제목 텍스트 크기 : 230 %
본문 텍스트 설정
본문 텍스트 설정도 변경하십시오.
- 본문 글꼴 : Open Sans
- 본문 텍스트 색상 : #ffffff
- 바디 라인 높이 : 2,2 em
위치 텍스트 설정
그런 다음 위치 텍스트 설정을 약간 변경하십시오.
- 글꼴 위치 : Open Sans
- 위치 텍스트 색상 : # edf000
간격
그리고 간격 설정에 사용자 지정 패딩 값을 추가하여 모듈 설정을 완료합니다.
- 상단 패딩 : 70 %
- 낮은 패딩 : 10 %
- 왼쪽 패딩 : 10 %
- 오른쪽 패딩 : 10 %
Person 모듈을 4 번 복제
Person 모듈을 완료하면 전체 모듈을 네 번 복제 할 수 있습니다.
나머지 열에 중복 배치
행의 나머지 XNUMX개 열에 중복 모듈을 배치합니다. 또한 내용.
행을 자동 스크롤 회전 목마로 전환
라인 2의 크기 변경
이제이 행을 자동 스크롤 팀 구성원 캐 러셀로 바꾸려면 행 설정을 다시 열고 크기 설정에서 너비와 최대 너비를 변경해야합니다.
- 너비 : 180 %
- 최대 너비 : 220 % (데스크), 100 % (태블릿 및 전화)
라인 2의 수평 이동 추가
고급 탭의 스크롤 효과 설정에 수평 이동을 추가하여 선 설정을 완료하면 완료됩니다!
- 수평 이동 활성화 : 예
- 시작 오프셋 :
- 사무실 : 2,5
- 태블릿 및 전화 : 0
- 평균 오프셋 : 0 (40 %)
- 끝 오프셋 :
- 사무실 : -25 (62 %)
- 태블릿 및 전화 : 0
- 트리거 모션 효과 : 요소 중간
측량
이제 모든 단계를 수행 했으므로 다양한 화면 크기에서 어떻게 보이는지 마지막으로 살펴 보겠습니다.
국
마지막 생각
이 튜토리얼에서는 Divi. 특히 우리는 아름다운 자동 스크롤 팀원 캐러셀을 재현했습니다. 때 방문자 페이지를 스크롤하면 캐러셀의 다른 부분이 나타납니다.
