Divi로 콘텐츠를 강조하기 위해 애니메이션 테두리 겹침을 만드는 방법

페이지의 특정 부분을 집중 조명할 수 있는 독특한 방법을 찾고 계십니까? 계속 읽으십시오! 오늘은 애니메이션 테두리 겹침을 만들어 페이지의 콘텐츠를 강조 표시하는 방법을 보여 드리겠습니다. App Developer Layout Pack의 랜딩 페이지에 3개의 서로 다른 애니메이션 테두리 겹침을 만들 것이지만 구축 중인 모든 종류의 웹 사이트에 이 기술을 사용할 수 있습니다. 페이지에 추가 차원을 추가하는 데 확실히 도움이 될 것입니다. 이 튜토리얼을 통해 자신만의 대체 애니메이션 테두리 겹침도 만들 수 있기를 바랍니다.

가자!

시사

튜토리얼을 시작하기 전에 세 가지 예제의 결과를 간단히 살펴보겠습니다. 작은 화면 크기에서도 비슷한 결과를 기대할 수 있습니다.

예 #1

예 #2

예 #3

YouTube 채널 구독

앱 개발자 레이아웃 팩의 방문 페이지를 사용하여 새 페이지 만들기

가장 먼저 해야 할 일은 앱 개발자 레이아웃 팩의 랜딩 페이지를 사용하여 새 페이지를 만드는 것입니다.

클론 영웅 섹션

처음 두 예제는 영웅 섹션에서 생성됩니다. 두 예제를 모두 다시 만들려면 영웅 섹션을 복제하여 두 번째 예제를 다시 만들 수 있도록 복제본으로 이동하는 것이 좋습니다.

예제 #1 다시 만들기

영웅 섹션에 새 행 추가

열 구조

첫 번째 예제를 다시 만들어 봅시다! 다음 열 구조를 사용하여 특수 섹션에 새 행을 추가합니다.

텍스트 모듈 추가

콘텐츠 상자를 비워 둡니다.

행에 새 텍스트 모듈을 추가하고 내용 상자를 비워 두십시오. 우리는 작성된 콘텐츠를 표시하지 않고 내장된 디자인 옵션에 모듈을 사용하고 있습니다.

간격

텍스트 모듈의 간격 설정으로 이동하여 사용자 지정 상단 및 하단 패딩을 추가하여 모듈에 모양을 지정합니다. 약간의 음수 상단 여백도 추가하여 이 모듈과 이전 모듈 사이에 겹침을 만듭니다.

• 상단 여백: -480px
• 상단 패딩: 223px
• 하단 패딩: 223px

국경

그런 다음 모듈의 테두리 설정으로 이동하여 원하는 테두리를 추가합니다.

• 테두리 너비: 9px
• 테두리 색상: #0ae2ff
• 테두리 스타일: 시작

박스 섀도우

상자 그림자도 추가하십시오.

• 상자 그림자 흐림 강도: 1px
• 상자 그림자 확산 강도: 15px
• 그림자 색상: rgba(10,226,255,0.59)

생기

그리고 애니메이션 설정을 가지고 놀아 콘텐츠를 돋보이게 만드세요.

• 애니메이션 스타일: 뒤집기
• 애니메이션 반복: 한 번
• 애니메이션 방향: 오른쪽
• 애니메이션 지속 시간: 1500ms
• 애니메이션 지연: 1500ms
• 애니메이션 강도: 500%

예제 #2 다시 만들기

영웅 섹션을 복제하기 위해 새 행 추가

두 번째 예시로! 다음 열 구조를 사용하여 복제 영웅 섹션에 새 행을 추가합니다.

텍스트 모듈 #1 추가

콘텐츠 상자를 비워 둡니다.

우리는 다시 빈 텍스트 모듈을 사용하고 있습니다.

간격

간격 설정으로 이동하여 사용자 지정 상단 및 하단 패딩을 사용하여 모듈에 모양을 지정합니다. 약간의 음수 상단 여백도 추가하여 이전 모듈과 겹치도록 합니다.

• 상단 여백: -480px
• 상단 패딩: 223px
• 하단 패딩: 223px

국경

계속해서 텍스트 모듈에 테두리를 추가하십시오.

• 테두리 너비: 9px
• 테두리 색상: #0ae2ff
• 테두리 스타일: 더블

생기

그리고 롤링 효과를 만들기 위해 애니메이션 설정을 가지고 놀아보세요.

• 애니메이션 스타일: 롤
• 애니메이션 반복: 한 번
• 애니메이션 방향: 중앙
• 애니메이션 지속 시간: 4500ms
• 애니메이션 지연: 1500ms
• 애니메이션 강도: 100%
• 애니메이션 시작 불투명도: 100%

복제 텍스트 모듈

첫 번째 텍스트 모듈 수정을 완료했으면 계속해서 복제하십시오.

간격 변경

복제본의 설정을 열고 간격 설정에서 상단 여백 값을 변경합니다.

• 상단 여백: -495px

테두리 변경

테두리 색상도 수정합니다.

• 테두리 색상: #ededed

애니메이션 변경

그리고 애니메이션 설정을 수정하여 이 게시물의 미리보기에서 본 결과를 얻으십시오.

• 애니메이션 반복: 루프
• 애니메이션 지속 시간: 5000ms
• 애니메이션 지연: 2000ms

예제 #3 다시 만들기

2열에서 이미지 모듈의 간격 변경

다음이자 마지막 예제로! 페이지의 프로세스 섹션으로 이동하여 중간에 큰 그림이 포함된 이미지 모듈에 상단 패딩을 추가합니다.

• 상단 여백: 70px(데스크톱), 0px(태블릿 및 휴대폰)

기존 텍스트 모듈에 배경색 추가

계속해서 첫 번째 및 세 번째 열의 각 텍스트 모듈에 흰색 배경색을 추가합니다.

• 배경색: #ffffff

열 1에 텍스트 모듈 추가

콘텐츠 상자를 비워 둡니다.

이제 첫 번째 애니메이션 테두리 겹침 추가를 시작할 수 있습니다! 새 텍스트 모듈을 첫 번째 열에 추가하고(인쇄 화면 참조) 내용 상자를 비워 두십시오.

간격

다음으로 텍스트 모듈의 간격 설정으로 이동하여 사용자 지정 여백 및 패딩 값을 사용하여 모양과 겹침을 만듭니다.

• 상단 여백: -230px
• 왼쪽 여백: 80px
• 오른쪽 여백: 100px
• 상단 패딩: 120px
• 하단 패딩: 120px

국경

다음에 테두리를 추가합니다.

• 테두리 너비: 13px
• 테두리 색상: #bcf5f3
• 테두리 스타일: 더블

생기

공유 중인 콘텐츠를 강조 표시하는 데 도움이 되는 원하는 애니메이션을 계속 추가하세요.

• 애니메이션 스타일: 접기
• 애니메이션 반복: 한 번
• 애니메이션 방향: 오른쪽
• 애니메이션 강도: 100%

Z 인덱스

테두리가 콘텐츠 아래에 표시되도록 하기 위해 테두리 설정이 포함된 텍스트 모듈의 Z 인덱스에 음수 값을 사용할 것입니다.

• Z 인덱스: -1

텍스트 모듈 복제 및 열 1 끝에 배치

텍스트 모듈을 만들고 수정했으면 계속해서 복제하십시오. 복제본을 첫 번째 열의 끝에 배치합니다.

테두리 변경

테두리 색상을 변경합니다.

• 테두리 색상: #ffc0ec

애니메이션 변경

그리고 애니메이션 지연도 추가합니다.

• 애니메이션 지연: 1000ms

열 3에 텍스트 모듈 추가

콘텐츠 상자를 비워 둡니다.

계속해서 세 번째 열에 텍스트 모듈을 추가하고(인쇄 화면 참조) 내용 상자를 비워 두십시오.

간격

간격 설정으로 이동하여 사용자 지정 여백 및 패딩 값을 사용하여 모양과 겹침을 만듭니다.

• 상단 여백: -230px
• 왼쪽 여백: 100px
• 오른쪽 여백: -80px
• 상단 패딩: 120px
• 하단 패딩: 120px

국경

다음에 원하는 테두리를 추가합니다.

• 테두리 너비: 13px
• 테두리 색상: #7479ff
• 테두리 스타일: 더블

생기

이전 두 개의 텍스트 모듈에 제공된 것보다 더 높은 애니메이션 지연을 포함하는 애니메이션과 함께.

• 애니메이션 스타일: 접기
• 애니메이션 반복: 한 번
• 애니메이션 방향: 왼쪽
• 애니메이션 지연: 2000ms
• 애니메이션 강도: 100%

Z 인덱스

음수 Z 인덱스를 사용하여 모듈이 콘텐츠 아래에 표시되는지 확인합니다.

• Z 인덱스: -1

텍스트 모듈 복제 및 3열 끝에 배치

텍스트 모듈 추가 및 수정이 완료되면 복제하고 세 번째 행의 끝에 복제본을 배치합니다.

테두리 변경

복제본의 테두리 색상을 변경합니다.

• 테두리 색상: #b3d1ff

애니메이션 변경

애니메이션 지연을 추가하면 완료됩니다!

• 애니메이션 지연: 3000ms

시사

이제 모든 단계를 거쳤으므로 이 자습서 전체에서 다시 만든 세 가지 예제 모두의 결과를 최종적으로 살펴보겠습니다.

예 #1

예 #2

예 #3

마지막 생각들

이 게시물에서는 애니메이션 테두리 겹침을 사용하여 콘텐츠를 스포트라이트에 넣는 방법을 보여주었습니다. 이것은 페이지의 특정 부분으로 주의를 끌고 우아한 방식으로 주의를 끌기 위한 훌륭한 기술입니다. 구축 중인 모든 종류의 웹사이트에 이 기술을 사용할 수 있습니다. 질문이나 제안 사항이 있으면 아래 댓글 섹션에 댓글을 남겨주세요!