페이지에 여러 클릭 유도 문안을 표시 할 때 서로 다른 요소를 결합하는 대화 형 스크롤 효과를 만드는 것이 도움이 될 수 있습니다. 한 가지 해결책은 모듈이 컬럼 컨테이너에서 이동하는 동안 고정 요소로 변환하는 것입니다. 오늘의 튜토리얼에서는이 기술을 다루는 아름다운 디자인을 만드는 방법을 보여 드리겠습니다. 또한 무료로 JSON 파일을 다운로드 할 수 있습니다!
가자.
측량
튜토리얼을 시작하기 전에 다양한 화면 크기에서 어떻게 작동하는지 마지막으로 살펴 보겠습니다.
재현을 시작합시다!
새 섹션 추가
작업중인 페이지에 새 일반 섹션을 추가하여 시작하십시오.
간격
섹션 설정을 열고 화면 크기에 따라 하단 및 상단 여백을 변경합니다.
- 실내 장식품 상단 : 7vw (데스크톱), 10vw (태블릿), 15vw (전화)
- 하단의 실내 장식품 : 20vw (데스크톱), 7vw (태블릿), 10vw (전화)
새 행 추가
기둥 구조
다음 열 구조를 사용하여 새 행을 계속 추가하십시오.
크기 조정
아직 모듈을 추가하지 않고 행 설정을 열고 섹션의 전체 너비를 차지하도록합니다. 그는 또한 매우 중요 '열 높이 동일화'옵션을 활성화합니다. 이렇게하면 페이지를 스크롤하는 동안 고정 모듈이 자유롭게 이동할 수 있도록 열에 빈 공간이 생깁니다.
- 사용자 정의 거터 너비를 사용하십시오. 예
- 거터 폭 : 1
- 열 높이 균등화 : 예
- 너비 : 100 %
- 최대 너비 : 100 %
열 2 상단 패딩
그런 다음 2 열의 설정을 열고 바탕 화면에 상단 필러를 추가하십시오.
- 상단 패딩 : 20vw (데스크톱), 0vw (태블릿 및 전화)
열 3 상단 패딩
또한 세 번째 열에 사용자 정의 상단 채우기 값을 추가하십시오.
- 최상의 패딩 : 40vw (데스크톱), 0vw (태블릿 및 전화)
열 4 상단 패딩
4 열에 더 높은 채우기 값을 추가하여 라인의 매개 변수를 완성하십시오.
- 상단 패딩 : 60vw (데스크톱), 0vw (태블릿 및 전화)
1 열에 CTA 추가
콘텐츠 추가
이제 모듈 추가를 시작할 시간입니다! 1열에서 필요한 첫 번째 모듈은 CTA(Call to Action) 모듈입니다. 끼워 넣다 내용 드 votre choix.
선취 특권
또한 버튼에 링크를 추가하십시오. 이렇게하면 버튼이 디자인에 표시됩니다.
- 버튼 링크의 URL : #
배경색
나중에 모듈의 배경색을 변경하십시오.
- 배경색 : #ffffff
텍스트 설정
디자인 탭으로 전환하고 일반 텍스트 설정을 변경합니다.
- 텍스트의 정렬 : 중심
- 텍스트 색상 : 어두운
제목 텍스트 설정
제목의 텍스트 설정도 변경하십시오.
- 타이틀 타이틀 레벨 : H3
- 텍스트 제목 : Spectral
- 색상 텍스트 제목 : # 000000
- 텍스트 제목 크기 : 2vw (데스크톱), 4vw (태블릿), 6vw (전화)
본문 텍스트 설정
텍스트 본문의 매개 변수와 함께.
- 바디 글꼴 : Fira Sans
- 폰트의 무게 : Light
- 본문 색 텍스트 : # 000000
- 본문 크기 : 1vw (데스크톱), 2vw (태블릿), 3vw (전화)
- 본체 높이 : 1.8em
버튼 설정
CTA 모듈 버튼의 스타일도 잊지 마세요.
- 버튼에 사용자 정의 스타일 사용 : 예
- 버튼 텍스트 크기 : 1vw (데스크톱), 2vw (태블릿), 3vw (전화)
- 버튼 텍스트 색상 : #ffffff
- 버튼 배경색 : #444eff
- 단추 테두리의 너비 : 0px
- 버튼 테두리의 반경 : 50vw
- 버튼 글꼴 : Fira Sans
- 상단 패딩 : 1vw (데스크톱), 2vw (태블릿), 3vw (전화)
- 하단의 실내 장식품 : 1vw (데스크톱), 2vw (태블릿), 3vw (전화)
- 왼쪽 패딩 : 3vw (데스크톱), 7vw (태블릿), 13vw (전화)
- 오른쪽 장식 : 3vw (데스크톱), 7vw (태블릿), 13vw (전화)
간격
그런 다음 간격 설정으로 이동하여 사용자 정의 내부 및 하단 여백을 추가하십시오.
- 상단 패딩 : 8vw
- 하단 패딩 : 8vw
경계
또한 모듈에 둥근 각도를 추가하십시오.
- 둥근 모서리 : 1vw (모든 모서리)
그림자 상자
미묘한 상자 그림자를 추가하여 모듈 디자인을 완료하십시오.
- 상자 그림자 가로 위치 : 10px
- 박스 그림자 흐림 효과 : 50px
- 그림자 색상 : rgba (0,0,0,0,08)
CSS 클래스
이제 스티키 스크롤 효과가 작동하려면이 튜토리얼의 끝에 몇 줄의 CSS 코드를 추가해야합니다. 준비로 CTA 모듈에 CSS 클래스를 추가합니다.
- CSS 클래스 : sticky-cta
열 1에 이미지 모듈 추가
업로드 이미지
이미지 모드 인 1 열에서 필요한 다음 및 마지막 모드로 이동하겠습니다. 원하는 PNG 이미지를 업로드하십시오.
조정
다음으로 이미지 정렬을 변경하십시오.
- 이미지 정렬 : 중앙
크기 조정
모듈의 전체 폭도 강제로 설정하십시오.
- 전폭 : 예
간격
간격 설정으로 이동하고 다양한 화면 크기에 대한 사용자 지정 간격 값을 추가하여 모듈 설정을 완료합니다.
- 상단 여백 : -5vw (태블릿 및 전화)
- 하단 여백 : -12vw (데스크톱), 5vw (태블릿 및 전화)
- 왼쪽 패딩 : 3vw (데스크톱), 10vw (태블릿), 25vw (전화)
- 오른쪽 장식 : 3vw (데스크톱), 10vw (태블릿), 25vw (전화)
두 모듈을 세 번 복제하고 나머지 열을 배치하십시오.
1 열에서 두 모듈을 모두 완료하면 해당 모듈을 세 번 복제하고 행의 나머지 열에 복제본을 배치 할 수 있습니다.
이미지 변경
각 중복 이미지 모듈에서 이미지를 변경해야합니다.
CTA 내용 및 버튼의 배경색 변경
또한 내용 버튼 배경색이 있는 CTA입니다.
- CTA 모듈 #2 : #89ffb4
- CTA 모듈 #3 : #ff89f1
- CTA 모듈 #4 : #ffd389
열 1, 2 및 3의 이미지 모듈에 CSS 클래스 추가
이제 고정 효과가 이미지에서도 작동하는지 확인하려면 1, 2, 3 열의 이미지 모듈에 CSS 클래스를 추가해야합니다.
- CSS 클래스 : sticky-image
2 라인 추가
기둥 구조
남은 것은 CSS 코드를 추가하는 것입니다. 이렇게하려면 새 줄을 추가하십시오.
CSS 코드로 코드 모듈 추가
줄에 코드 모듈을 추가하고 아래에 CSS 코드를 삽입하면 완료됩니다!
<style>@media only screenand (min-width: 980px) {.sticky-cta {position: sticky;position: -webkit-sticky;top: 8vw !important;}.sticky-image {position: sticky;position: -webkit-sticky;top: 28vw !important;}}</style>
측량
이제 모든 단계를 마쳤으므로 다양한 화면 크기에서 발생한 일을 마지막으로 살펴 보겠습니다.
마지막 생각
이 기사에서는 모듈을 컬럼 컨테이너에 고정하는 방법을 보여주었습니다. 이 기술을 사용하면 페이지에서 다양한 클릭 유도 문안을 강조 할 수있는 놀라운 스크롤 효과를 생성 할 수 있습니다. JSON 파일을 무료로 다운로드 할 수도 있습니다! 질문이나 제안이 있으시면 아래 댓글 섹션에 댓글을 남겨주세요.
