팀원들이 캐러셀 형식으로 제공되기를 원하십니까? Divi ?
정보 페이지를 설정할 때 팀 구성원도 거기에 포함하고 싶을 것입니다. 그렇게 함으로써, 당신은 허용 방문자 비즈니스 뒤에 있는 사람들과 연결할 수 있습니다.
스크롤에서 팀 구성원의 섹션에 애니메이션을 적용하는 방법을 찾고 있다면 이 튜토리얼을 좋아할 것입니다.
우리는 당신의 움직임에 따라 움직이는 아름다운 자동 스크롤 팀원 회전 목마를 다시 만들 것입니다. 방문자 페이지를 스크롤하십시오.
가자.
측량
튜토리얼을 시작하기 전에 다양한 화면 크기에서 결과를 간단히 살펴보겠습니다.
데스크탑 컴퓨터
모바일 버전
Divi로 디자인을 시작해 봅시다.
새 섹션 추가
내면의 마법사
작업중인 페이지에 새 일반 섹션을 추가하여 시작하십시오. 섹션 설정을 열고 다양한 화면 크기에 맞춤 패딩을 추가합니다.
- 패딩(상단 및 하단): 200px(데스크탑), 100px(태블릿 및 휴대폰)
시계
디자인에 가로 스크롤 막대가 표시되지 않도록 고급 탭에서 섹션 오버플로를 숨깁니다.
- 수평 오버플로: 숨김
- 수직 오버플로: 숨김
라인 #1 추가
기둥의 구조
다음 열 구조를 사용하여 섹션에 새 행을 계속 추가합니다.
폭
아직 모듈을 추가하지 않고 라인 설정을 열고 탭으로 전환하십시오. 디자인 크기 설정에서 너비와 최대 너비를 변경합니다.
- 폭: 90%
- 최대 너비: 1px
간격
또한 사용자 지정 상위 및 하위 패딩을 추가합니다.
- 패딩(상단 및 하단): 100px
열에 텍스트 모듈 추가
H2 크기 콘텐츠 추가
이제 첫 번째 텍스트 모듈부터 시작하여 모듈을 추가할 차례입니다. 다음을 입력하세요. 내용 원하는 H2 크기.
H2 텍스트 설정
탭으로 전환 디자인 모듈의 H2 텍스트 매개변수를 다음과 같이 수정합니다.
- 글꼴: Quicksand
- 글꼴 두께: 반 굵게
- 텍스트 색상: #000000
- 텍스트 크기: 70px(데스크톱), 50px(태블릿), 40px(휴대폰)
열에 "분할기" 모듈 추가
시계
그런 다음 모듈을 추가하십시오. 분할기. "표시 구분선" 옵션이 활성화되어 있는지 확인하십시오.
- 디바이더 표시: 예
라인
그런 다음 라인 설정을 약간 변경합니다.
- 선 색상: #edf000
- 스타일: 솔리드
- 라인 위치: 상단
크기 조정
그리고 그에 따라 크기 조정 매개변수를 수정하여 모듈 매개변수를 완료합니다.
- 디바이더 무게: 20px
- 폭: 11%
- 정렬 모듈: 왼쪽
- 높이: 20px
2행 추가
기둥의 구조
다음 줄! 다음 열 구조를 사용합니다.
크기 조정
아직 모듈을 추가하지 않고 행 설정을 열고 다음과 같이 크기 설정을 변경합니다.
- 사용자 지정 거터 너비 사용: 예
- 거터 폭: 2
- 폭: 100%
- 최대 너비: 100%
간격(태블릿 및 휴대폰만 해당)
다음으로 작은 화면 크기에만 왼쪽 및 오른쪽 패딩을 추가합니다.
- 패딩(좌우): 5%(태블릿 및 휴대폰만 해당)
열 매개 변수 (5x)
이제 이 자습서의 다음 세 단계에서 열을 일부 변경합니다. 행의 각 열에 세 단계를 적용합니다.
배경 그라데이션
먼저 각 열에 그라데이션 배경을 추가합니다.
- 그라디언트 스톱(25%): rgba(255,255,255,0)
- 그라디언트 스톱(86%): rgba(0,0,0,0.84)
- 유형: 선형
- 배경 이미지 위의 정사각형 그라데이션 : 예
배경 이미지
그런 다음 원하는 배경 이미지를 업로드하십시오. 이 배경 이미지는 각 팀원을 나타내므로 각 열에 다른 이미지를 사용하십시오.
- 배경 이미지 크기 : 표지
- 배경 이미지 위치: 중앙
사용자 정의 CSS 추가(태블릿 전용)
기본 요소에 사용자 정의 CSS를 추가하여 열 설정을 완료합니다(보기용 태블릿 만) 각 열의.
이 CSS 코드 줄은 두 열을 나란히 두는 대신 태블릿에서 열을 다른 열 아래에 배치하는 데 도움이 됩니다.
width: 100% !important;
margin: 50px 0px 50px 0px !important;
열에 '사람' 모듈 추가
콘텐츠 추가
팀원 정보를 공유하기 위해 모듈을 사용합니다. 사람.
열 1에 첫 번째 Person 모듈을 추가하고 내용 드 votre choix.
이미지 삭제
그런 다음 이미지를 삭제합니다. 대신 열의 배경 이미지를 사용합니다.
배경 이미지
다음으로 모듈의 배경 이미지로 이미지 오버레이를 추가합니다.
- 배경 이미지 크기: 표지
- 배경 이미지 위치: 중앙
제목 텍스트 설정
탭으로 전환 디자인 모듈을 만들고 다음과 같이 제목 텍스트 설정을 변경합니다.
- 제목 제목 수준: H3
- 제목 글꼴: Quicksand
- 글꼴 두께: 굵게
- 제목 텍스트 색상: #ffffff
- 제목 텍스트 크기: 230%
본문 텍스트 설정
본문 텍스트 설정도 변경하십시오.
- 본문 글꼴: Open Sans
- 텍스트 색상: #ffffff
- 줄 높이: 2,2em
팀원 게시물 텍스트 설정
다음으로, 팀 구성원이 보유한 직책의 텍스트 설정을 일부 변경합니다.
- 위치 글꼴: 없이 열기
- 위치 텍스트 색상: #edf000
간격
그리고 간격 설정에 사용자 지정 패딩 값을 추가하여 모듈 설정을 완료합니다.
- 패딩: 70%(상단), 10%(하단, 왼쪽 및 오른쪽)
"사람" 모듈을 네 번 복제
Person 모듈을 완료하면 전체 모듈을 네 번 복제 할 수 있습니다.
나머지 열에 중복 배치
행의 나머지 XNUMX개 열에 중복 모듈을 배치합니다.
또한 내용.
행을 자동 스크롤 캐러셀로 전환
행 크기 변경 #2
이제 이 라인을 자동 스크롤 캐러셀로 바꾸려면 라인 설정을 다시 열고 크기 설정에서 너비와 최대 너비를 변경해야 합니다.
- 폭: 180%
- 최대 너비: 220%(데스크톱), 100%(태블릿 및 휴대폰)
라인 2에 수평 이동 추가
탭에서 스크롤 효과 설정에 수평 이동을 추가하여 라인 설정 완료 Advnaced 옵션에서 스크롤 효과 그리고 당신은 끝났습니다!
- 수평 동작 활성화: 예
- 시작 오프셋:
- 데스크탑: 2,5
- 태블릿 및 전화: 0
- 중간 오프셋: 0(~40%)
- 끝 오프셋:
- 데스크탑: -25(~62%)
- 태블릿 및 전화: 0
- 모션 효과 트리거: 요소의 중간
측량
이제 모든 단계를 수행 했으므로 다양한 화면 크기에서 어떻게 보이는지 마지막으로 살펴 보겠습니다.
데스크탑 컴퓨터
지금 DIVI를 다운로드하세요!!!
모바일 보기
지금 DIVI를 다운로드하세요!!!
결론
이 기사에서는 내장된 스크롤 효과로 창의력을 발휘하는 방법을 보여 주었습니다 Divi.
특히 우리는 자동 스크롤 팀원이 포함된 아름다운 회전식 슬라이드를 재현했습니다. 때 방문자 페이지를 스크롤하면 캐러셀의 다른 부분이 나타납니다.
이 튜토리얼이 다음 프로젝트에 영감을 주기를 바랍니다. Divi. 우려 사항이나 제안 사항이 있으면 댓글 섹션 그것을 논의하기 위해.
상담도 가능합니다 우리의 자원, 인터넷 사이트 작성 프로젝트를 수행하기 위해 더 많은 요소가 필요한 경우.
주저하지 말고 가이드와 상의하세요. 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
