Divi에서 슬래싱 텍스트 스크롤 효과를 만드는 방법

슬래싱 텍스트 효과를 만드는 것은 콘텐츠에 생명을 불어넣는 재미있는 방법입니다. 아이디어는 사용자가 페이지를 아래로 스크롤할 때 텍스트가 반으로 줄어들고 분리되는 것처럼 보이게 하는 것입니다. 이 튜토리얼에서 우리는 이 디자인이 Divi에서 얼마나 쉽게 빌드되는지 보여줄 것입니다!

시작하자.

엿보기

다음은 이 튜토리얼에서 구축할 디자인을 간략하게 살펴보겠습니다.

무료로 레이아웃 다운로드

이 튜토리얼의 디자인을 손에 넣으려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 ​​금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

섹션 레이아웃을 Divi 라이브러리로 가져오려면 Divi 라이브러리로 이동하십시오.

가져오기 버튼을 클릭합니다.

이식성 팝업에서 가져오기 탭을 선택하고 컴퓨터에서 다운로드 파일을 선택합니다.

그런 다음 가져오기 버튼을 클릭합니다.

완료되면 섹션 레이아웃을 Divi Builder에서 사용할 수 있습니다.

튜토리얼로 들어가 볼까요?

시작하는 데 필요한 것

시작하려면 다음을 수행해야 합니다.

1. 아직 설치하지 않았다면 Divi 테마를 설치하고 활성화하십시오.
2. WordPress에서 새 페이지를 만들고 Divi Builder를 사용하여 프런트 엔드(비주얼 빌더)에서 페이지를 편집합니다.
3. "처음부터 빌드" 옵션을 선택합니다.

그런 다음 Divi에서 디자인을 시작할 수 있는 빈 캔버스가 생깁니다.

1부: 섹션 디자인

이 첫 번째 부분에서는 섹션 레이아웃의 섹션 배경을 디자인할 것입니다.

배경색

시작하려면 다음과 같이 기본 섹션에 배경색을 추가합니다.

• 그라데이션 배경 왼쪽 색상: #29c4a9
• 그라데이션 배경 오른쪽 색상: #2b87da

분할기

디자인 탭에서 다음과 같이 상단 구분선을 추가합니다.

• 상단 구분선 스타일: 스크린샷 참조
• 디바이더 색상: 흰색
• 디바이더 플립: 수직

간격

디자인에 대한 스크롤 효과를 테스트하는 데 도움이 되도록 섹션의 위쪽과 아래쪽에 임시 여백을 추가해 보겠습니다. 섹션을 다른 페이지에 추가할 때 항상 제거할 수 있습니다. 또한 상단과 하단에 동일한 양의 패딩을 추가해야 합니다.

• 여백: 80vh 상단, 80vh 하단
• 패딩: 상단 200px, 하단 200px

추가 하단 공간을 위한 상자 그림자

섹션의 실제 공간을 손상시키지 않고 섹션 하단에 추가 디자인 색상/공간을 확보하기 위해 다음과 같이 상자 그림자를 추가할 수 있습니다.

• 박스 섀도우: 스크린샷 참조
• 상자 그림자 수평 위치: 0px
• 상자 그림자 수직 위치: 100px
• 그림자 색상: #2b87da

가시성 숨김

그런 다음 오버플로를 숨김으로 설정하여 섹션 외부로 이동할 때 스크롤 효과가 표시되지 않도록 합니다.

• 수평 오버플로: 숨김
• 수직 오버플로: 숨김

2부: 슬래싱 텍스트 효과 만들기

이 다음 부분에서는 슬래싱 텍스트 효과를 만들 것입니다. 동일한 텍스트 내용을 담고 있는 텍스트 모듈이 있는 두 개의 행을 서로 쌓을 것입니다. 그런 다음 음수 여백을 사용하여 위쪽 텍스트를 아래로 밀어 텍스트의 아래쪽 절반을 숨깁니다. 그런 다음 음수 여백을 사용하여 아래쪽 텍스트를 위로 밀어 텍스트의 위쪽 절반을 숨깁니다. 완료되면 스크롤 효과를 사용하여 맨 위 행/열을 이동하여 텍스트가 잘린 것처럼 보이게 할 수 있습니다.

텍스트의 위쪽 절반에 대한 행 추가

먼저 1열 행을 추가해 보겠습니다.

그런 다음 다음과 같이 행 설정을 업데이트합니다.

• 거터 폭: 1
• 패딩: 0px 상단, 0px 하단

열 가시성 숨김

다음으로 열 설정을 열고 오버플로를 숨김으로 업데이트합니다.

• 수평 오버플로: 숨김
• 수직 오버플로: 숨김

텍스트 모듈 추가

열에 새 텍스트 모듈을 추가합니다.

텍스트 내용

콘텐츠 본문 영역에 "슬래시"라는 단어를 추가합니다.

텍스트 디자인

디자인 탭으로 이동하여 다음과 같이 텍스트 스타일을 업데이트합니다.

• 텍스트 글꼴: B612 모노
• 텍스트 글꼴 두께: 굵게
• 텍스트 글꼴 스타일: TT
• 텍스트 텍스트 색상: #ffffff
• 텍스트 텍스트 크기: 150px(데스크톱), 100px(태블릿), 60px(휴대폰)
• 텍스트 문자 간격: 0.1em
• 텍스트 정렬: 가운데

텍스트 여백

여기에서 텍스트 크기의 정확히 절반인 하단 여백을 확인하고 추가해야 합니다.

• 여백: -75px 하단(데스크톱), -50px(태블릿), -30px(휴대전화)

텍스트의 아래쪽 절반에 대한 행 추가

중복 행

텍스트가 있는 첫 번째 행 중 하나가 제자리에 있고 전체 행을 복제하여 맨 아래 행을 만듭니다.

텍스트 모듈 여백 업데이트

그런 다음 중복 행의 텍스트 모듈 여백을 아래쪽 여백 대신 음수 위쪽 여백으로 업데이트하여 텍스트의 위쪽 절반을 숨깁니다.

• 여백: -75px 상단(데스크톱), -50px 상단(태블릿), -30px 상단(휴대폰)

맨 위 행 열에 스크롤 효과 추가

다음으로 맨 위 행의 열에 스크롤 효과를 추가할 준비가 되었습니다. 텍스트의 하단 부분을 숨기는 열의 오버플로 숨김 값으로 인해 텍스트가 숨겨지기 때문에 텍스트 모듈에 스크롤 효과를 추가할 수 없습니다.

맨 위 행의 열 설정을 열고 다음을 업데이트합니다.

수직 모션 탭에서…

• 수직 모션 활성화: 예
• 시작 오프셋: 0(0%에서)
• 중간 오프셋: 0(50%에서)
• 끝 오프셋: -.02(75%에서)

수평 동작 탭에서…

• 수평 모션 활성화: 예
• 시작 오프셋: 0(0%에서)
• 중간 오프셋: 0(50%에서)
• 끝 오프셋: 0.2(75%에서)

회전 탭에서…

• 회전 활성화: 예
• 시작 회전: 0(0%에서)
• 중간 회전: 0(50%에서)
• 끝 회전: 1deg(75%에서)

이제 슬래싱 텍스트 효과가 완료되었습니다!

파트 3: 움직이는 디바이더 만들기

텍스트 자르기 효과가 완료되면 재미있는 요소를 추가할 수 있습니다. 텍스트를 가로지르는 작은 비행 구분선입니다! 이것을 만들기 위해 텍스트 모듈이 나누는 정확한 위치에서 섹션의 페이지 중앙을 가로질러 이동하는 구분선 모듈을 사용할 것입니다.

방법은 다음과 같습니다.

행 추가

두 번째 행 아래에 1열 행을 추가합니다.

디바이더 모듈 추가

열에 새 구분선 모듈을 추가합니다.

디바이더 배경

그런 다음 구분선을 표시하지 않으려면 NOT을 선택합니다. 대신 다음과 같이 구분선에 배경색을 지정합니다.

• 배경 그라데이션 왼쪽 색상: 투명
• 배경 그라데이션 오른쪽 색상: #29c4a9

변환 스케일

그런 다음 높이를 업데이트하고 변환 변환 옵션을 사용하여 왼쪽으로 이동합니다.

• 높이: 4px
• 변환 X 축 변환: -100%

스크롤 효과

이제 스크롤 효과를 추가하여 구분선을 오른쪽으로 이동합니다.

수평 모션 탭에서…

• 수평 모션 활성화: 예
• 시작 오프셋: -18(25%에서)
• 중간 오프셋: 0(50%에서)
• 끝 오프셋: 13(75%에서)

행 설정

구분선이 텍스트 중앙을 "슬래시"하도록 하려면 다음과 같이 행 설정을 업데이트해야 합니다.

• 폭: 100%
• 최대 너비: 100%
• 패딩: 0px 상단, 0px 하단
• 위치: 절대
• 위치: 왼쪽 중앙
• Z 인덱스: 9

이제 구분선이 왼쪽에서 오른쪽으로 이동하면서 텍스트의 중간을 통과합니다.

4부: 본문 추가하기

이 마지막 부분에서는 레이아웃을 완성하기 위해 텍스트 블록을 추가할 것입니다.

행 추가

구분선이 있는 행 아래에 새 1열 행을 추가합니다.

텍스트 모듈 추가

그런 다음 행에 새 텍스트 모듈을 추가합니다.

텍스트 내용

그런 다음 본문 영역에 다음 HTML을 붙여넣습니다.

<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
<a href=""> | Learn More ></a>

텍스트 디자인

디자인 탭에서 다음을 업데이트합니다.

• 텍스트 텍스트 색상: #ffffff
• 링크 텍스트 색상: #121212
• 링크 텍스트 크기: 20px

행 설정

상위 행에 대한 설정을 열고 다음을 업데이트합니다.

• 거터 폭: 1
• 최대 너비: 400px
• 위치: 절대
• 위치: 하단 중앙
• 수직 오프셋: 20px(데스크톱 및 태블릿), -25px(휴대전화)

최종 결과

다음은 최종 결과입니다.

마지막 생각들

이 디자인의 경우 모든 장치에서 텍스트를 한 줄로 유지하는 것이 중요하므로 슬래시할 텍스트의 양이 제한됩니다. 그러나 이 슬래싱 스크롤 효과 기술은 텍스트 이상에 적용될 수 있습니다. 이미지도 쉽게 자를 수 있습니다!

댓글로 여러분의 의견을 기다리겠습니다.

건배!