Divi 테마 기능 업데이트: 모든 Divi 모듈, 행, 섹션에 고급 애니메이션 옵션 도입

오늘 워드프레스 베스트셀링 테마인 Avada로 만든 사이트에서 그림과 글자에 애니메이션 효과가 적용된 것을 보고 Divi에서는 어떻게 구현하면 좋을까 잠시 생각해보았습니다.

마침 오늘 Divi 테마에서 모든 Divi 모듈, 행(Row), 절(섹션)에 고급 애니메이션 옵션을 추가하는 기능 업데이트가 있었습니다. (Divi는 며칠마다 한 번씩 업데이트될 정도로 업데이트가 잦습니다.)

Divi 테마 기능 업데이트: 모든 Divi 모듈, 행, 섹션에 고급 애니메이션 옵션 도입 15

이 글을 작성한 이후 Divi 테마에 많은 편의 기능이 추가되어 사용성이 더욱 향상되었습니다.

Divi 테마 기능 업데이트: 모든 모듈, 행, 섹션에 애니메이션 옵션 도입

이제 Divi에서 쉽게 모듈이나 행 또는 섹션에 애니메이션 효과를 적용하여 보다 다이내믹한 사이트를 만드는 데 도움이 될 것 같습니다.

Divi 테마를 업데이트를 한 후에 살펴보니 총 7가지의 애니메이션 스타일을 적용할 수 있는 애니메이션 옵션이 추가된 것을 확인할 수 있었습니다.

Divi 테마 기능 업데이트: 모든 모듈, 행, 섹션에 애니메이션 옵션 도입

애니메이션 옵션을 설정하려면 모듈이나 행, 섹션의 설정에 들어간 다음 디자인 탭을 클릭하고 스크롤을 아래로 내리면 애니메이션을 설정하는 옵션을 볼 수 있습니다.

위의 그림과 같이 페이드, 슬라이드, Bounce(바운스), Zoom(줌), 반전, Fold(폴드), Roll(롤링) 등 7가지 옵션 중에서 선택 가능합니다. 기본 설정은 None(애니메이션 적용 안 함)입니다.

원하는 애니메이션 옵션을 선택하여 활성화하면 아래에 세부 옵션을 지정할 수 있도록 숨겨져 있던 옵션이 표시됩니다.

Divi 테마 기능 업데이트: 모든 Divi 모듈, 행, 섹션에 고급 애니메이션 옵션 도입 16

다음과 같은 옵션을 지정할 수 있습니다.

  • 애니메이션 반복(Animation Repeat)
  • 애니메이션 방향(Animation Direction)
  • 애니메이션 지속시간(Animation Duration)
  • 애니메이션 지연(Animation Delay)
  • 애니메이션 강도(Animation Intensity)
  • 애니메이션 시작 불투명도(Animation Starting Opacity)
  • 애니메이션 속도 커브(Animation Speed Curve)

애니메이션 효과의 적용 예:

Divi 테마 기능 업데이트: 모든 Divi 모듈, 행, 섹션에 고급 애니메이션 옵션 도입 17
슬라이드 애니메이션 스타일
Divi 테마 기능 업데이트: 모든 Divi 모듈, 행, 섹션에 고급 애니메이션 옵션 도입 18
반전 애니메이션 스타일
Divi 테마 기능 업데이트: 모든 Divi 모듈, 행, 섹션에 고급 애니메이션 옵션 도입 19
슬라이드 애니메이션 스타일. 애니메이션 방향을 왼쪽/오른쪽으로 지정
Divi 테마 기능 업데이트: 모든 Divi 모듈, 행, 섹션에 고급 애니메이션 옵션 도입 20
개별 모듈에 효과를 적용한 것으로 보입니다.
Divi 테마 기능 업데이트: 모든 Divi 모듈, 행, 섹션에 고급 애니메이션 옵션 도입 21
이런 효과도 가능하네요.

7가지 애니메이션 스타일 설정:

Divi 테마 기능 업데이트: 모든 Divi 모듈, 행, 섹션에 고급 애니메이션 옵션 도입 22
페이드 스타일
Divi 테마 기능 업데이트: 모든 Divi 모듈, 행, 섹션에 고급 애니메이션 옵션 도입 23
슬라이드 스타일
Divi 테마 기능 업데이트: 모든 Divi 모듈, 행, 섹션에 고급 애니메이션 옵션 도입 24
바운스(Bounce) 스타일
Divi 테마 기능 업데이트: 모든 Divi 모듈, 행, 섹션에 고급 애니메이션 옵션 도입 25
줌(Zoon) 스타일
Divi 테마 기능 업데이트: 모든 Divi 모듈, 행, 섹션에 고급 애니메이션 옵션 도입 26
플립(Flip) 스타일
Divi 테마 기능 업데이트: 모든 Divi 모듈, 행, 섹션에 고급 애니메이션 옵션 도입 27
폴드(Fold) 스타일
Divi 테마 기능 업데이트: 모든 Divi 모듈, 행, 섹션에 고급 애니메이션 옵션 도입 28
롤링(Roll) 스타일

 마치며

아마 Divi 테마의 이전 버전에서 제한적으로 적용 가능한 애니메이션 효과를 이번에 업데이트하면서 섹션(절), 행(Row), 모듈 등 모든 요소에 적용할 수 있도록 기능이 업데이트된 것 같습니다.

애니메이션 반복, 방향, 지속시간, 지연, 강도, 시작 시 불투명도, 속도 커브 등의 옵션을 세부적으로 지정하면 다양한 효과를 얻을 수 있을 것입니다.

참고:


2개 댓글

    1. 특히 모든 모듈, 행, 섹션에 애니메이션 옵션을 적용할 수 있어 편리한 것 같습니다.

      다른 페이지 옵션에서도 애니메이션 기능이 지원되는데요, 아바다의 경우 살펴보니 컬럼(열)에는 적용되지만 개별 요소의 경우 이미지 프레임 정도에만 애니메이션 사용이 가능한 것 같습니다. (텍스트 등의 요소에는 애니메이션 옵션이 표시되지 않습니다.)

댓글 남기기

* 이메일 주소는 공개되지 않습니다.