Divi 5의 Lottie 모듈에 대해 알아야 할 모든 것

Divi 5의 Lottie 모듈은 페이지에 역동적이고 가벼운 애니메이션을 제공하여 페이지를보다 매력적이고 대화식으로 만들 수 있습니다. 올바른 영상은주의를 끌고 방문객들을 참여시키는 데 중요합니다. Lottie 모듈을 사용하면 Divi 5를 사용하면 성능 친화적 인 전문적인 애니메이션을 추가 할 수 있습니다.

이 게시물에서는 기능, 설정 프로세스, 사용자 정의 옵션 및 사용 방법을 포함하여 Lottie 모듈에 대해 알아야 할 모든 것을 설명합니다. 들어 오자!

LOTTIE 파일은 무엇입니까?

로티 애니메이션은 경량, JSON 기반 그래픽으로 확장 가능한 벡터로 렌더링합니다. 그들은 비디오 나 GIF의 무거운 파일 크기없이 확장 가능한 비주얼을 제공합니다. 성능을 유연성과 결합하는 능력 덕분에 Lottie는 인기를 얻었으므로 현대 웹 디자인에 인기를 얻었습니다. 전통적인 애니메이션과 달리 Lottie 파일은 벡터 기반 JSON 데이터를 사용하여 모든 장치 및 화면 크기에서 선명한 비주얼과 부드러운 재생을 보장합니다.

YouTube 채널을 구독하십시오

Divi 5에서 Lottie 모듈은 이러한 애니메이션을 비주얼 빌더에 원활하게 통합하여 사용자가 몇 번의 클릭으로 Divi 웹 사이트에 동적이고 현대적인 터치를 추가 할 수 있도록합니다. CTA를 강조하거나 영웅 섹션에 감각을 추가하든 Lottie 모듈은 복잡한 코딩없이 애니메이션을 통합합니다.

Lottie 모듈을 사용하면 Divi 5는 웹 디자인에 동작을 가져 오는 방법을 변형시켜 매력적이고 효율적입니다.

주요 기능

Divi 5의 Lottie 모듈은 역동적이고 최적화 된 애니메이션을 쉽게 만드는 기능으로 가득 찬 다양한 도구입니다. 애니메이션 동작을 제어하여 속도, 방향, 트리거 등을 조정할 수 있습니다. 주요 기능 중 일부를 살펴 보겠습니다.

사용 편의성

Divi 5의 Lottie 모듈은 단순성을 염두에두고 설계되었으므로 초보자 친화적이고 모든 기술 수준의 사용자가 액세스 할 수 있습니다. Divi 웹 사이트에 전문적이고 시선을 사로 잡는 애니메이션을 추가하기 위해 코딩 전문가 일 필요는 없습니다.

온라인으로 사용할 수있는 리소스 수 덕분에 소싱 애니메이션이 쉽습니다. Lottiefiles 및 Lordicon과 같은 플랫폼은 미묘한로드 아이콘부터 생생한 그래픽에 이르기까지 광범위한 무료 및 프리미엄 로티 애니메이션 라이브러리를 제공합니다.

고유 한 터치를 원하는 사람들을 위해 BodyMovin 플러그인을 사용하여 Adobe After Effects와 같은 도구를 사용하여 사용자 정의 애니메이션을 만들 수 있습니다. 이 플러그인은 애니메이션을 JSON 파일로 LOTTIE 모듈과 호환 할 수 있습니다. 사전 제작 또는 사용자 정의 애니메이션을 선택하든 프로세스는 간단합니다.

사용자 정의 옵션

Divi 5의 Lottie 모듈은 사용자 정의 옵션을 제공하므로 Lottie 파일의 여러 측면을 제어 할 수 있습니다. 대화식 경험의 경우 트리거 애니메이션을 사용하여 요소가 뷰포트, 호버, 클릭 또는 스크롤에 들어갈 때로드와 같은 애니메이션을 활성화 할 때를 선택하십시오. 루프 애니메이션을 활성화하여 Lottie 파일에서 연속적인 움직임을 허용하고 애니메이션 속도를 조정하고 방향 (앞으로 또는 뒤로)을 선택한 다음 플레이 모드 필드에서 일반 또는 바운스 중에서 선택할 수 있습니다.

JSON 애니메이션 업로드

Divi 5에 Lottie 애니메이션을 추가하려면 Lottie 파일의 표준 형식 인 JSON 파일을 업로드해야합니다. 그러나 WordPress는 미디어 라이브러리에서 JSON 업로드를 기본적으로 지원하지 않으므로 업로드 할 수 있도록 추가 단계를 수행해야합니다.

첫 번째 옵션은 자식 테마를 만들고 Child Theme의 functions.php 파일에 PHP 스 니펫을 추가하는 것입니다. 이 방법은 가볍고 애니메이션 파일을 안전하게 처리합니다. 또는 파일 업로드 유형과 같은 플러그인을 사용하여 코드를 터치하지 않고 JSON 업로드를 허용 할 수 있으므로 플러그 앤 플레이 솔루션을 선호하는 사용자에게 이상적입니다. 두 방법을 구현하기위한 단계별 안내서를 보려면 지원 기사를 확인하십시오.이 기사를 확인하여 프로세스를 통해 JSON 업로드 용 Divi 5 웹 사이트를 설정하십시오.

Divi 5에서 Lottie 모듈을 사용하는 방법

Divi 5에 Lottie Animation을 추가하는 것은 간단합니다. Lottiefiles 또는 Lordicon과 같은 소스에서 Lottie Animation을 만들거나 다운로드하십시오. 시각적 빌더에서 Lottie 모듈을 찾고 클릭하여 페이지에 추가하십시오.

JSON 파일을 업로드하거나 WordPress 미디어 갤러리에서 찾으십시오.

트리거 애니메이션을 선택하십시오. 로드, 뷰, 호버, 클릭 또는 스크롤을 애니메이션으로 애니메이션으로 설정할 수 있습니다.

Lottie 애니메이션에 대화식 요소를 갖도록하려면 모듈의 스크롤을 사용하여 애니메이션 트리거를 사용하십시오.

이 트리거를 사용하면 역동적이고 매력적인 사용자 경험을 만들 수있는 좋은 방법이 있습니다. 페이지가로드 될 때 애니메이션을 사용하는 대신 스크롤하여 애니메이션의 진행 상황을 사용자의 스크롤 동작과 직접 연결합니다. 사용자가 페이지를 아래로 스크롤하면 애니메이션이 프레임별로 진행됩니다. 이로 인해 애니메이션은 경험을보다 역동적으로 느끼게하는 대화식 요소가됩니다.

애니메이션이 끝없이 루프를 원한다면 루프 애니메이션 토글을 활성화하십시오. 또한 애니메이션 속도를 설정하고 방향을 제어하고 ( 앞으로 또는 뒤로 ), 플레이 모드 의 일반 또는 바운스를 선택할 수 있습니다.

설계 탭 에서 크기 조정, 정렬, 높이, 간격 등을 제어 할 수 있습니다.

Divi 5 내에서 Lottie 파일의 색상을 변경할 수는 없지만 대부분의 Lottie 웹 사이트를 사용하면 다운로드하기 전에 특정 색상과 스트로크 너비를 선택할 수 있습니다.

보시다시피, Divi 5 웹 사이트에 Lottie 파일을 추가하는 데 몇 초가 걸리고 성능에 대해 걱정하지 않고 웹 페이지에 약간의 감각을 더합니다.

Lottie 모듈을 사용한 실제 예

Divi 5의 Lottie 모듈은 다양한 응용 프로그램을 제공하여 동적 애니메이션이있는 웹 사이트에 감각을 추가합니다. 연락 페이지 향상부터 시선을 사로 잡는 영웅 섹션에 이르기까지 유연성은 모든 유형의 디자인에 적합합니다.

Divi 사용자는 완벽한 통합 및 사용자 정의 옵션을 통해 전체 웹 사이트에서 매력적이고 성능 친화적 인 경험을 만들 수 있습니다.

연락처 페이지

Lottie Animations를 추가하면 연락처 페이지가 더 매력적일 수 있습니다. 예를 들어, 영업 시간, 전화 번호 및 기타 연락처 정보 옆에 Lottie 모듈을 고정하여 사이트를 늦추지 않고 전환을 향상시키는 대화식 및 매력적인 경험을 만듭니다.

404 페이지

장난스러운 로티 애니메이션을 통해 실망스러운 404 오류를 기억에 남는 순간으로 바꿉니다. 404 페이지에 회전하는 나침반 또는 애니메이션 검색 아이콘을 짧은 메시지와 쌍으로 추가하십시오.

루프 애니메이션 설정을 사용하여 모션을 연속적으로 유지하고로드에 트리거하여 즉시주의를 기울이십시오. 이로 인해 404 페이지가 막 다른 곳과 같은 느낌이 들거나 창의적인 터치 포인트처럼 느껴집니다.

주요 제품

판매중인 제품을 강조하기 위해 Lottie 애니메이션으로 좋아하는 Woo 제품 또는 카테고리를 보여줍니다. 예를 들어, 특집 제품 옆에 판매 배지 로티 애니메이션을 배치하여 강조 표시하십시오.

먼저 애니메이션을로드에서 트리거하도록 설정하십시오. 그런 다음 사용자가 탐색하고 제품에 시선을 끌고 시각적 호소력을 높이면서 활성화됩니다.

서비스 섹션

서비스 섹션을 시각적으로 대표하는 로티 애니메이션으로 서비스 섹션을 생생하게하십시오. 예를 들어, 마케팅 대행사에 루핑 애니메이션을 사용하여 톤과 일치하도록 속도를 조정하십시오.

또한 사용자가 탐색 할 때 애니메이션을 활성화하여 View Trigger를 설정하여 역동적이고 전문적인 프레젠테이션을 보장합니다.

영웅 섹션

웹 사이트의 분위기를 설정하는 대담한 로티 애니메이션으로 영웅 섹션을 잊을 수 없도록하십시오. 먼저 Divi의 Lottie 모듈을 사용하여 부드러운 배경 애니메이션을 추가하십시오. 그런 다음 Divi의 위치 설정으로 행과 모듈 뒤에 배치하십시오.

예를 들어, 흐르는 현대적인 애니메이션 또는 미묘한 입자 효과는 거의 노력하지 않고 사이트에 깊이를 더할 수 있습니다. 즉각적인 영향을 미치기 위해 온로드 트리거를 사용하고 재생 모드를 조정하여 매혹적인 효과를 위해 바운스하십시오.

파일을 다운로드하십시오

무료로 다운로드하십시오

Divi 뉴스 레터에 가입하면 Ultimate Divi Landing Page Layout Pack의 사본과 다른 놀라운 무료 Divi Resources, Tips 및 Tricks를 이메일로 보내 드리겠습니다. 따라 오면 당신은 곧 Divi Master가 될 것입니다. 이미 구독 한 경우 아래의 이메일 주소를 아래에 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

당신은 성공적으로 구독했습니다. 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하려면 이메일 주소를 확인하십시오!

결론

Divi 5에서 Lottie 모듈은 웹 사이트에 가볍고 동적 애니메이션을 추가하는 것을 단순화합니다. 시각적 빌더에 원활하게 통합되어 최소한의 노력으로 전문적인 애니메이션이 가능합니다. 유연한 컨트롤, 광범위한 사용자 정의 및 무료 로티 파일 플랫폼을 통해 사이트를 쉽게 향상시킬 수 있습니다.

Lottie 모듈을 시도 할 준비가 되셨습니까? 의견이나 소셜 미디어에서 귀하의 생각이나 창조물을 공유하십시오.