Divi용 무료 다채로운 스패터 애니메이션 영웅 섹션 다운로드

게시 됨: 2020-06-12

페이지의 영웅 섹션을 디자인하는 방식은 페이지의 나머지 부분에 대한 기대치를 설정합니다. 기념일이든 세일이든 무엇인가를 기념하는 방문 페이지를 디자인하는 경우 디자인에 축제 분위기를 불어넣는 데 확실히 도움이 될 수 있습니다. 접근하는 한 가지 방법은 영웅 섹션의 배경에 다채로운 스패터 애니메이션을 추가하는 것입니다. 귀하가 제공한 서면 사본과 CTA에 계속 초점을 맞출 것입니다. 이 튜토리얼에서는 Divi의 내장 설정으로 아름답고 다채로운 스패터 애니메이션 섹션을 만드는 방법을 보여줍니다. JSON 파일도 무료로 다운로드할 수 있습니다!

시작하겠습니다.

시사

튜토리얼을 시작하기 전에 다양한 화면 크기에 따른 결과를 간단히 살펴보겠습니다.

데스크탑

스패터 애니메이션

이동하는

스패터 애니메이션

The Spatter Animation Hero 섹션 레이아웃 무료 다운로드

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

파일 다운로드
무료로 다운로드

무료로 다운로드

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

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

재창조를 시작합시다!

새 섹션 추가

그라데이션 배경

작업 중인 페이지에 새 섹션을 추가하여 시작하십시오. 섹션 설정을 열고 원하는 그라데이션 배경을 적용합니다.

  • 색상 1: #070a49
  • 색상 2: #6f00f7
  • 그라디언트 유형: 선형
  • 기울기 방향: 148deg

스패터 애니메이션

사이징

섹션의 디자인 탭으로 이동하여 크기 설정에 최소 높이를 추가합니다. 이렇게 하면 섹션이 전체 화면으로 바뀝니다.

  • 최소 높이: 100vh

스패터 애니메이션

간격

다음으로 모든 기본 상단 및 하단 패딩을 제거합니다.

  • 상단 패딩: 0px
  • 하단 패딩: 0px

스패터 애니메이션

시계

그리고 디자인에 가로 스크롤 막대가 표시되지 않도록 하기 위해 섹션의 오버플로를 숨깁니다.

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

스패터 애니메이션

행 #1 추가

열 구조

섹션 설정이 완료되면 다음 열 구조를 사용하여 첫 번째 행을 추가합니다.

스패터 애니메이션

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 다음과 같이 크기 설정을 수정하여 행이 섹션 컨테이너의 왼쪽과 오른쪽에 닿도록 합니다.

  • 폭: 100%
  • 최대 너비: 100%

스패터 애니메이션

간격

다음으로 모든 기본 상단 및 하단 패딩을 제거합니다.

  • 상단 패딩: 0px
  • 하단 패딩: 0px

스패터 애니메이션

주요 요소 CSS

그리고 더 작은 화면 크기에서 모듈이 나란히 표시되도록 하기 위해 행의 기본 요소에 CSS 코드 한 줄을 추가합니다. 

display: flex;

스패터 애니메이션

1열 애니메이션

일반 행 설정이 완료되면 열 1 설정을 열고 애니메이션을 추가합니다.

  • 애니메이션 스타일: 확대/축소
  • 애니메이션 방향: 중앙
  • 애니메이션 강도: 100%

스패터 애니메이션

2열 애니메이션

다음 두 번째 열에 애니메이션을 추가합니다.

  • 애니메이션 스타일: 확대/축소
  • 애니메이션 방향: 중앙
  • 애니메이션 지연: 250ms
  • 애니메이션 강도: 100%

스패터 애니메이션

3열 애니메이션

그리고 우리는 세 번째 열에도 애니메이션을 사용하고 있습니다.

  • 애니메이션 스타일: 확대/축소
  • 애니메이션 방향: 중앙
  • 애니메이션 지연: 500ms
  • 애니메이션 강도: 100%

스패터 애니메이션

열 1에 이미지 모듈 추가

스패터 이미지 업로드

모듈을 추가할 시간입니다. 1열의 이미지 모듈부터 시작합니다. 이 자습서의 시작 부분에서 다운로드할 수 있었던 다운로드 폴더에서 찾을 수 있는 스패터 이미지를 업로드합니다.

스패터 애니메이션

사이징

모듈의 디자인 탭으로 이동하여 크기 설정에서 전체 너비를 적용합니다.

  • 강제 전폭: 예

스패터 애니메이션

필터

그런 다음 필터 설정을 사용하여 모듈의 색상을 변경합니다.

  • 색조: 303deg
  • 채도: 200%

스패터 애니메이션

변환 스케일

변환 설정에서도 이미지의 크기를 조정하고 있습니다.

  • 하단: 150%
  • 오른쪽: 150%

스패터 애니메이션

수직 모션 스크롤 효과

다음으로 고급 탭으로 이동하여 수직 모션을 활성화합니다.

  • 수직 모션 활성화: 예
  • 시작 오프셋: 0
  • 중간 오프셋:
    • 데스크탑: 0(50%에서)
    • 태블릿: 0(70%에서)
    • 전화: 0(85%에서)
  • 끝 오프셋: 2
  • 모션 효과 트리거: 요소 하단

스패터 애니메이션

수평 모션 스크롤 효과

수평 모션도 사용하고 있습니다.

  • 수평 동작 활성화: 예
  • 시작 오프셋:
    • 데스크탑: -10
    • 태블릿 및 전화: 0
  • 중간 오프셋: 0
  • 끝 오프셋: 4
  • 모션 효과 트리거: 요소 하단

스패터 애니메이션

확대 및 축소 스크롤 효과

확대 및 축소 효과와 함께.

  • 확장 및 축소 활성화: 예
  • 시작 규모: 100%
  • 중간 규모: 150%
  • 엔딩 스케일: 200%
  • 모션 효과 트리거: 요소 하단

스패터 애니메이션

이미지 모듈을 두 번 복제하고 행의 나머지 열에 중복 배치

첫 번째 이미지 모듈이 완료되면 전체 모듈을 두 번 복제하고 행의 나머지 열에 복제본을 배치할 수 있습니다.

스패터 애니메이션

2열의 이미지 모듈 변경

간격

2열에서 이미지 모듈을 열고 태블릿과 휴대폰에서 상단 여백을 추가합니다.

  • 최고 마진: 50%(태블릿 및 휴대폰만 해당)

스패터 애니메이션

필터

필터 설정에서도 색조를 변경하십시오.

  • 색조: 55deg

스패터 애니메이션

3열의 이미지 모듈 변경

필터

그런 다음 세 번째 열에서 이미지 모듈을 열고 그에 따라 필터 설정을 변경합니다.

  • 색조: 309deg
  • 밝기: 0%

스패터 애니메이션

행 #2 추가

열 구조

다음 행으로 이동합니다. 다음 열 구조를 사용합니다.

스패터 애니메이션

위치

행 설정을 열고 고급 탭에서 행의 위치 설정을 변경합니다.

  • 위치: 절대
  • 위치: 센터

스패터 애니메이션

열에 텍스트 모듈 #1 추가

H1 콘텐츠 추가

선택한 H1 콘텐츠가 포함된 텍스트 모듈로 시작하여 모듈을 추가할 시간입니다.

스패터 애니메이션

H1 텍스트 설정

모듈의 H1 텍스트 설정을 다음과 같이 변경합니다.

  • 제목 글꼴: Rubik
  • 제목 텍스트 색상: #ffffff
  • 제목 텍스트 크기: 80px(데스크톱), 50px(태블릿), 35px(전화)

스패터 애니메이션

  • 제목 텍스트 그림자 세로 길이: 0.08em
  • 제목 텍스트 그림자 흐림 강도: 0em
  • 제목 텍스트 그림자 색상: #1a005b

스패터 애니메이션

열에 텍스트 모듈 #2 추가

콘텐츠 추가

그런 다음 일부 설명 콘텐츠가 포함된 다른 텍스트 모듈을 추가합니다.

스패터 애니메이션

텍스트 설정

디자인 탭으로 이동하여 그에 따라 텍스트 설정을 변경합니다.

  • 텍스트 글꼴: Muli
  • 텍스트 색상: #dddddd
  • 텍스트 크기: 15px(데스크톱), 14px(태블릿 및 휴대폰)
  • 텍스트 줄 높이: 2.1em

스패터 애니메이션

  • 텍스트 그림자 색상: #1a005b

스패터 애니메이션

사이징

다음으로 모듈의 너비를 수정합니다.

  • 너비: 60%(데스크톱), 100%(태블릿 및 휴대폰)

스패터 애니메이션

간격

그리고 다양한 화면 크기에 걸쳐 상단 및 하단 여백을 추가하여 모듈 설정을 완료합니다.

  • 최고 마진: 6%(데스크톱), 10%(태블릿), 14%(전화)
  • 하단 마진: 6%(데스크톱), 10%(태블릿), 14%(전화)

스패터 애니메이션

열에 버튼 모듈 추가

사본 추가

칼럼에서 필요한 마지막 모듈은 버튼 모듈입니다. 원하는 사본을 추가하십시오.

스패터 애니메이션

버튼 설정

그런 다음 디자인 탭으로 이동하여 다음과 같이 버튼의 스타일을 지정합니다.

  • 버튼에 사용자 정의 스타일 사용: 예
  • 버튼 텍스트 크기: 17px
  • 버튼 텍스트 색상: #ffffff
  • 버튼 배경색: #ea01a6
  • 버튼 테두리 너비: 0px
  • 버튼 테두리 반경: 100px

스패터 애니메이션

  • 버튼 글꼴: Rubik
  • 버튼 글꼴 두께: 굵게
  • 버튼 글꼴 스타일: 대문자

스패터 애니메이션

간격

간격 설정에서도 사용자 정의 패딩 값을 추가하십시오.

  • 상단 패딩: 20px
  • 하단 패딩: 20px
  • 왼쪽 패딩: 60px
  • 오른쪽 패딩: 60px

스패터 애니메이션

박스 섀도우

그리고 박스 섀도우를 추가하여 모듈 설정을 완료합니다.

  • 상자 그림자 수평 위치: 5px
  • 상자 그림자 수직 위치: 5px
  • 그림자 색상: #30005b

스패터 애니메이션

시사

이제 모든 단계를 거쳤으므로 다양한 화면 크기에 따른 결과를 최종적으로 살펴보겠습니다.

데스크탑

스패터 애니메이션

이동하는

스패터 애니메이션

마지막 생각들

이 게시물에서는 Divi의 내장 애니메이션 및 스크롤 효과로 창의력을 발휘하는 방법을 보여주었습니다. 보다 구체적으로, 특별한 날을 위해 설정하는 방문 페이지에 대해 다채로운 스패터 애니메이션 영웅 섹션을 만드는 방법을 보여 주었습니다. 그 기회는 회사의 기념일이나 특별 판매일 수 있지만 이에 국한되지 않습니다. JSON 파일도 무료로 다운로드할 수 있었습니다! 질문이나 제안 사항이 있으면 아래의 댓글 섹션에 자유롭게 의견을 남겨주세요.

Divi에 대해 자세히 알아보고 더 많은 무료 Divi를 받고 싶다면 이메일 뉴스레터와 YouTube 채널을 구독하세요. 그러면 항상 이 무료 콘텐츠를 가장 먼저 알고 혜택을 받을 수 있습니다.