Divi에서 섹션/행에 애니메이션 효과를 추가하는 방법

게시 됨: 2017-08-11

오늘의 Divi 튜토리얼에서는 Divi에서 섹션과 행에 애니메이션 효과를 추가하는 방법을 보여드리겠습니다. Divi 테마 자체는 웹 사이트에 추가 수준의 상호 작용을 가져오는 데 도움이 되는 몇 가지 관련 애니메이션 효과를 제공합니다. 이러한 효과는 고급 탭의 애니메이션 하위 범주에 있는 Divi Builder 내의 이미지에 쉽게 할당할 수 있습니다.

그러나 이러한 애니메이션 효과를 웹사이트의 다른 모듈, 섹션 또는 행에 추가하는 방법을 찾고 있다면 그것도 가능합니다. 이 포스트에서는 그 방법을 정확히 알려드리겠습니다. 내장된 애니메이션 효과를 추가하는 방법 외에도 Wow.js 및 animate.css를 Divi 웹사이트에 통합하는 방법도 보여줍니다.

이 게시물이 끝나면 행과 섹션 모두에 멋진 효과를 추가할 수 있습니다. 프로세스를 시각화하는 데 도움이 되도록 다음 예제를 공유하고 싶습니다(이 게시물의 끝에서 달성 방법을 보여줌).

애니메이션 효과

Divi 애니메이션 또는 Wow.js 및 Animate.css?

어떤 경우에 Divi 애니메이션을 사용하는 것을 고려해야 하며 어떤 경우에 wow.js 및 animate.css가 작업을 더 잘 수행하는지 궁금할 것입니다. 고급 애니메이션 효과를 만들지 않으려는 경우 Divi 내장 애니메이션을 사용하는 것이 가장 쉬운 솔루션이지만, Wow.js 및 animate.css 효과는 확실히 웹사이트에 큰 부가가치를 가져다 줄 것입니다.

Divi 애니메이션을 사용하는 경우

Divi 내에서 사용할 수 있는 5가지 애니메이션 효과가 있습니다.

  • 페이드 인
  • 하단 슬라이드
  • 왼쪽 슬라이드 인
  • 오른쪽 슬라이드 인
  • 상단 슬라이드 인

다섯 가지 가능성만 있지만 가장 자주 사용되는 것이기도 합니다. 그들은 간단하고 요점입니다. 너무 많은 노력을 들이지 않고 웹사이트에 멋진 추가 효과를 주고 싶다면 Divi 애니메이션 효과를 사용하는 것이 좋습니다. 이러한 각 효과는 스크롤하고 효과를 추가한 모듈, 행 또는 섹션을 보는 순간부터 활성화됩니다. 그렇게 하면 방문자는 예를 들어 페이지 하단에 있는 효과를 놓치지 않을 것입니다.

Divi 애니메이션 효과를 통합하기 위해 웹사이트에 하위 테마를 업로드할 필요가 없습니다. 상위 테마에서 작업하면서 이러한 효과를 쉽게 추가할 수 있습니다.

Wow.js 및 Animate.css를 사용하는 경우

웹사이트에 Wow.js 및 animate.css를 통합하는 것은 다양한 옵션이 있기 때문에 정말 마음에 드실 것입니다. 해당 카테고리와 관련된 다양한 효과를 포함하는 14개의 애니메이션 효과 카테고리가 있습니다. 선택할 수 있는 범주는 다음과 같습니다.

  • 주의를 찾는 사람
  • 튀는 입구
  • 튀는 출구
  • 페이딩 입구
  • 페이딩 출구
  • 오리발
  • 빛의 속도
  • 회전 입구
  • 회전 출구
  • 슬라이딩 입구
  • 슬라이딩 출구
  • 줌 입구
  • 확대 종료
  • 스페셜

다음 링크를 클릭하면 사용 가능한 모든 효과를 볼 수 있습니다. 이러한 애니메이션 효과는 스크롤할 때도 나타납니다.

Divi에서 섹션/행에 애니메이션 효과를 추가하는 방법

YouTube 채널 구독

내장 애니메이션 효과 사용

우리가 보여줄 첫 번째 가능성은 내장된 애니메이션 효과입니다. 섹션과 행 모두에 효과를 적용하는 방법을 보여드리겠습니다. 수정하려는 페이지를 엽니다.

이 예에서는 페이지의 첫 번째 섹션과 행에 애니메이션 효과를 추가합니다. 섹션 또는 행에 애니메이션을 추가하는 것은 두 경우 모두 동일합니다. 다양한 애니메이션 효과에 대한 CSS 클래스 코드는 다음과 같습니다.

  • 페이드인 CSS 클래스: et-waypoint et_pb_animation_fade_in
  • 하단 슬라이드인 CSS 클래스: et-waypoint et_pb_animation_bottom
  • 왼쪽 슬라이드인 CSS 클래스: et-waypoint et_pb_animation_left
  • 오른쪽 슬라이드인: CSS 클래스: et-waypoint et_pb_animation_right
  • 상단 슬라이드인 CSS 클래스: et-waypoint et_pb_animation_top

행에 애니메이션 효과 추가

특정 행에 애니메이션을 추가하려면 해당 행의 설정을 열고 고급 탭으로 이동합니다. 고급 탭에서 애니메이션 효과 CSS 클래스를 CSS 클래스 필드에 배치합니다. 이 경우 페이드 인 애니메이션을 추가하는 방법을 보여 드리겠습니다.

애니메이션 효과

섹션에 애니메이션 효과 추가

행에 애니메이션 효과를 추가하는 것과 동일한 방법이 섹션에도 적용됩니다. 고급 탭으로 이동하여 CSS 클래스 필드에 선택한 애니메이션 효과 CSS 클래스를 배치합니다. 이 예에서는 상단 슬라이드인 애니메이션 효과를 추가하는 방법을 보여 드리겠습니다.

결과

섹션과 행에 효과를 추가하면 다음 결과가 표시됩니다.

자녀 테마에 Wow.js 및 Animate.css 추가

이 다음 부분에서는 WordPress 웹 사이트에 wow.js 및 animate.css를 추가하는 방법과 Divi 테마 전체에서 사용하는 방법을 보여드리겠습니다.

우선, Wow.js 및 animate.css를 WordPress에 통합하는 방법에 대한 이 게시물에 대해 Jeremy Cookson에게 공을 돌리고 싶습니다. 게시물의 이 부분에서는 Divi 테마로 구축된 WordPress 웹 사이트에 대해 통합을 수행하는 방법을 정확히 보여 드리겠습니다.

웹페이지에 Wow.js 및 animate.css를 추가하려면 웹사이트에서 하위 테마를 사용해야 합니다. 자식 테마를 만드는 방법이 궁금하시다면 이 게시물을 확인하세요. 자식 테마의 기본 파일을 만든 후에는 두 개의 다른 파일을 추가하여 애니메이션 효과로 자식 테마를 완성해야 합니다.

파일 다운로드 및 자녀 테마에 추가

자녀 테마를 손이 닿는 곳에 두고 다음 두 링크를 클릭하여 그 동안 다음 두 파일을 다운로드하십시오.

  • animate.min.css
  • 와우.min.js

두 파일을 다운로드했으면 하위 테마 내에 하위 폴더를 만듭니다. 그 중 하나는 CSS로, 다른 하나는 JS로 지정하십시오. 그런 다음 CSS 폴더에 animate.min.css를, JS 폴더에 wow.min.js를 배치합니다.

애니메이션 효과

하위 테마 업로드

다음으로 해야 할 일은 방금 wow.js 및 animate.css를 추가한 하위 테마를 업로드하고 활성화하는 것입니다. WordPress 대시보드 > 모양 > 테마 > 페이지 상단의 '새로 추가'를 클릭합니다.

Functions.php 파일에 PHP 코드 추가

자식 테마를 업로드했으면 다음 PHP 코드 줄을 자식 테마의 functions.php 파일에 추가합니다.

//* Animate.CSS 및 WOW.js를 대기열에 넣습니다.
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
함수 sk_enqueue_scripts() {
wp_enqueue_style( '애니메이트', get_stylesheet_directory_uri() . '/css/animate.min.css' );
wp_enqueue_script( '와우', get_stylesheet_directory_uri() . '/js/wow.min.js', array(), ”, true );
}
//* WOW.js를 활성화하기 위한 대기열에 스크립트
add_action('wp_enqueue_scripts', 'sk_wow_init_in_footer');
함수 sk_wow_init_in_footer() { add_action( 'print_footer_scripts', 'wow_init' );}
//* </body>function wow_init() { ?> 앞에 JavaScript 추가
<스크립트 유형=”텍스트/자바스크립트”>
새로운 WOW().init(); </스크립트><?php }

행 및 섹션에 애니메이션 추가

행과 섹션에 Wow.js 및 animate.css 효과를 추가하는 시스템은 Divi 애니메이션 효과와 동일합니다. 애니메이션 효과를 추가할 행이나 섹션의 설정을 열어야 합니다. 다음으로 애니메이션에 할당된 CSS 클래스를 섹션 또는 행의 CSS 클래스 필드에 배치할 수 있습니다.

행에 애니메이션 추가

행과 함께 보여줄 예에서는 애니메이션 효과 목록에서 찾은 fadeInRight 효과를 사용하고 있습니다. 행 설정의 고급 탭으로 이동하여 CSS 클래스 필드에 'wow fadeInRight'를 추가합니다. 웹사이트의 일부에 효과를 추가할 때마다 사용 중인 효과 앞에 '와우'를 넣어야 합니다.

결과

CSS 클래스를 추가하고 작업 중인 페이지를 미리 보면 다음과 같은 결과를 얻었을 것입니다.

애니메이션 효과

섹션에 애니메이션 추가

섹션에 애니메이션 효과를 추가할 때도 동일한 방법이 적용됩니다. 고급 탭으로 이동하여 섹션의 CSS 클래스 필드에 'wow bounceInDown' CSS 클래스를 추가합니다.

결과

모든 단계를 올바르게 수행했다면 다음과 같은 결과를 얻을 수 있습니다.

애니메이션 효과

고급 옵션

애니메이션에 몇 가지 추가 사양을 추가하려는 경우에도 그렇게 할 수 있습니다. 예를 들어 애니메이션 효과 중 하나에 지연 시간을 추가할 수 있습니다. 이는 섹션 애니메이션을 동일한 섹션 내에서 행 애니메이션과 결합할 때 유용할 수 있습니다. 이렇게 하면 애니메이션 효과가 서로 겹치지 않도록 할 수 있습니다.

이 지연 시간을 추가하는 방법을 보여주기 위해 이 게시물의 이전 부분에서 사용한 두 가지 효과를 결합할 것입니다. 하나의 애니메이션 효과는 섹션에 할당되고 다른 하나는 행에 할당됩니다. 행 애니메이션 효과가 사라지지 않도록 하기 위해 2초의 지연 시간을 추가합니다.

행 설정을 열고 고급 탭으로 돌아갑니다. CSS 클래스 필드 내에서 'delay'라는 다른 클래스를 추가합니다. 이 클래스는 아직 존재하지 않지만 다음 단계에서 추가하려고 합니다.

이제 다음 버튼을 클릭하여 작업 중인 페이지의 설정에 지연 CSS 클래스를 추가합니다.

다음으로, CSS 코드 라인이 있는 CSS 클래스를 Custom CSS 필드에 추가합니다. 이 예에서 하는 것처럼 2초의 지연 시간을 추가하려면 다음 CSS 코드 줄이 필요합니다. 

.delay {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-ms-animation-delay: 2s;
-o-animation-delay: 2s;
}

결과

지연 시간을 추가하면 결과는 다음과 같아야 합니다.

애니메이션 효과

마지막 생각들

이 게시물에서는 Divi 웹사이트에 애니메이션 효과를 추가하는 방법을 보여 드렸습니다. 우리는 두 가지 가능성을 제공했습니다. 첫 번째는 Divi에서 제공하는 표준 애니메이션 효과를 사용하는 방법을 보여줍니다. 두 번째 가능성은 wow.js와 animate.css를 통합하는 것입니다. 웹사이트에서 애니메이션 효과를 사용하면 방문자와 공유하고 싶은 콘텐츠를 강조할 수 있습니다. 게다가 보기에도 멋집니다. 질문이나 제안 사항이 있는 경우 아래 댓글 섹션에 댓글을 남겨주세요.

중요한 발표, 유용한 팁 또는 Divi 공짜를 절대 놓치지 않도록 이메일 뉴스레터와 YouTube 채널을 구독하세요!

Stocker top / shutterstock.com의 주요 이미지