WordPress에 Lottie 애니메이션을 추가하는 방법(간단한 4단계)

WordPress에서 Lottie 애니메이션을 사용하면 페이지를 멋지게 꾸밀 수 있습니다. 일반적으로 가볍고 사용자 정의가 가능하므로 사용자 경험(UX)을 해치지 않고 매력적인 콘텐츠를 만드는 데 도움이 될 수 있습니다. 그러나 스트레스 없이 사이트에 추가할 수 있는 방법을 찾고 있을 수 있습니다.

다행히도 프로세스는 생각보다 쉽습니다. Otter Blocks와 같은 플러그인을 사용하면 몇 번의 클릭만으로 Lottie 애니메이션을 추가하고 사용자 지정할 수 있습니다. 적시에 재생되도록 가시성 조건을 설정할 수도 있습니다.

롯데 애니메이션 소개

Lottie는 웹 애니메이션용 오픈 소스 파일 형식입니다. 이를 통해 브랜드에 대한 맞춤형 애니메이션을 만들고 웹 사이트에서 사용할 수 있습니다.

물론 언제든지 GIF를 선택할 수 있지만 이러한 파일은 사이트에 부담을 줄 수 있습니다. Lottie 애니메이션은 GIF보다 훨씬 작습니다. 따라서 UX를 유지하고 빠른 로딩 시간을 제공하면서 사이트를 더욱 흥미롭게 만들 수 있습니다.

또한 Lottie 애니메이션에는 다양한 사용자 지정 옵션이 있습니다. 라이브러리 자체는 광범위하며 수천 개의 요소, 문자 및 일러스트레이션에 대한 액세스를 제공합니다. 그러나 색상을 교체하고 디스플레이 설정을 변경하고 가시성 조건을 추가할 수도 있습니다.

사용자 정의 애니메이션은 방문자에게 깊은 인상을 줄 수 있습니다. 또한 사이트를 신선하고 독특하게 보이게 할 수 있습니다.

WordPress에 Lottie 애니메이션을 추가하는 방법(4단계)

이제 Lottie Animations에 대해 조금 더 알게 되었으니 WordPress 웹사이트에 추가하는 방법을 살펴보겠습니다.

1단계: Otter 블록 설치 및 활성화

WordPress에 Lottie 애니메이션을 추가하는 방법에는 여러 가지가 있습니다. 예를 들어 HTML 및 JavaScript를 사용할 수 있습니다. 그러나 이 방법은 상당히 복잡할 수 있습니다.

또는 Lottie 애니메이션 플러그인을 사용할 수 있지만 모든 페이지 빌더와 호환되지 않을 수 있습니다. 또한 많은 문체 옵션을 제공하지 않습니다.

사이트에 Lottie 애니메이션을 추가하는 가장 쉬운 방법은 Otter Blocks와 같은 플러그인을 사용하는 것입니다.

이 플러그인은 Lottie 애니메이션용 블록을 포함하여 사이트에 새로운 콘텐츠 블록과 템플릿을 추가합니다. 또한 사용자 지정 CSS, 애니메이션, 가시성 조건 등으로 블록 편집기의 기능을 확장합니다. 따라서 페이지를 보다 효율적으로 디자인하고 페이지 빌더의 필요성을 줄이는 데 도움이 됩니다.

Otter Blocks Pro로 업그레이드하면 특수 WooCommerce 블록 및 추가 스타일 설정과 같은 고급 기능에 액세스할 수 있습니다. 그러나 Lottie 애니메이션 기능을 사용하기 위해 Pro 버전이 필요하지 않습니다.

무료 버전을 사용하려면 WordPress 대시보드에서 플러그인 > 새로 추가 로 이동하여 “Otter Blocks:”를 검색하십시오.

그런 다음 설치 > 활성화를 클릭합니다. 이제 블록 편집기에서 선택된 새 블록을 볼 수 있습니다.

2단계: Lottie 라이브러리에서 애니메이션 선택

이제 웹 사이트에 Otter Blocks가 설정되었으므로 Lottie 라이브러리로 이동하여 애니메이션을 선택할 수 있습니다. 디자인에 액세스하려면 무료 계정을 만들어야 합니다.

프로필을 만든 후 검색 으로 이동하여 바로 사용할 수 있는 무료 애니메이션을 선택합니다.

여기에서 웹 사이트, 애플리케이션 및 소셜 미디어에서 사용할 수 있는 Lottie 요소 라이브러리를 탐색할 수 있습니다.

사용하려는 애니메이션을 찾으면 디자인을 클릭합니다. 애니메이션 모양을 변경할 수 있는 팝업이 나타납니다.

예를 들어 애니메이션 속도를 조정하고 배경색을 변경할 수 있습니다. 레이어 색상 편집을 클릭하면 Lottie 편집기로 이동합니다.

여기에서 디자인의 모든 부분에 대한 색상을 사용자 지정할 수 있습니다. 변경하려는 요소 섹션을 클릭하고 모든 색상 으로 이동한 다음 색상 선택기를 사용하여 새 톤을 적용하기만 하면 됩니다.

변경 내용이 마음에 들지 않으면 화면 왼쪽 상단에 있는 실행 취소 화살표를 클릭하십시오.

3단계: Lottie 애니메이션 URL을 Otter Block에 붙여넣거나 Lottie 파일을 업로드합니다.

디자인에 만족하면 WordPress에 추가할 수 있는 두 가지 옵션이 있습니다.

1. Lottie Animation URL을 복사하여 LottieFiles 서버의 버전을 사이트에 추가할 수 있습니다. 디자인 바로 아래에 있는 애니메이션 팝업에서 찾을 수 있습니다.
2. 오른쪽 상단 모서리에 있는 다운로드 버튼을 클릭하고 dotLottie 형식을 선택하여 완성된 LottieFile을 컴퓨터에 다운로드할 수 있습니다. 이렇게 하면 서버에서 파일을 호스팅할 수 있습니다.

그런 다음 WordPress 사이트로 돌아가서 애니메이션을 삽입하려는 페이지나 게시물을 엽니다.

새 블록을 추가하고 "Lottie Animations:"를 검색하려면 클릭하십시오.

페이지에 블록을 추가하십시오. 그런 다음 다음 옵션 중 하나를 선택합니다.

• URL에서 삽입 – LottieFiles의 서버에 있는 Lottie 파일에 대한 링크를 입력하려면 이 옵션을 사용하십시오. LottieFiles 웹사이트에서 복사한 Lottie Animation URL 링크를 붙여넣기만 하면 됩니다.
• 업로드 – LottieFiles에서 실제 dotLottie 파일을 다운로드한 경우 사용합니다. 그런 다음 해당 파일을 WordPress 사이트에 업로드할 수 있습니다.

그런 다음 Enter 키를 누르면 페이지에 애니메이션이 나타납니다.

이제 변경 사항을 저장하고 마지막 단계로 이동할 수 있습니다.

4단계: Otter Blocks로 애니메이션 사용자 지정

이제 WordPress에 Lottie 애니메이션을 추가했으므로 디자인과 레이아웃을 사용자 지정할 준비가 되었습니다. 차단 설정에서 다양한 표시 옵션을 볼 수 있습니다.

TRIGGER 아래에서 자동 재생 , 스크롤 , 가리키기 또는 클릭 중에서 선택할 수 있습니다. 페이지에서 다음 작업 중 하나가 완료될 때까지 애니메이션이 재생되지 않습니다.

애니메이션을 반복 재생하도록 토글하는 옵션도 있습니다. 또한 슬라이더를 사용하여 애니메이션 속도를 조정하고 방향을 바꾸고 디자인 폭을 변경할 수 있습니다.

배경색을 변경하려면 배경 탭을 클릭합니다. 여기에서 기본 단색 옵션 중 하나를 선택하거나 색상 선택기를 사용하거나 그라데이션 배경을 선택할 수 있습니다.

Visibility Conditions 로 이동하면 특정 상황에서만 애니메이션이 나타나도록 구성할 수 있습니다.

예를 들어 로그인한 사용자에게만 차단이 표시되도록 하거나 특정 날짜에 표시되도록 할 수 있습니다. 이렇게 하려면 규칙 그룹 추가를 클릭합니다. 그런 다음 화살표를 선택하여 설정을 엽니다.

CONDITION 아래에서 드롭다운 메뉴를 사용하여 가시성 설정을 구성합니다. 둘 이상의 조건을 추가하고 추가 규칙 그룹을 생성할 수 있습니다.

WordPress에서 Lottie 애니메이션 시작하기

요약하자면 다음은 WordPress에 Lottie 애니메이션을 추가하는 네 단계입니다.

기본 WordPress 편집기를 개선하는 더 많은 방법을 보려면 최고의 WordPress 블록 플러그인 전체 컬렉션을 확인하십시오.

WordPress에 Lottie 애니메이션을 추가하는 것에 대해 질문이 있습니까? 아래 댓글 섹션에서 알려주세요!