홈페이지를 생동감 넘치고 움직이는 그래픽으로 꾸미고 싶으신가요? 로티 애니메이션을 사용하여 WordPress 사이트의 시각적 매력을 높이고 방문객에게 매력적인 경험을 제공할 수 있습니다. 본 안내서에서는 Elementor에서 로티를 사용하여 인상적인 애니메이션을 쉽게 통합하는 방법에 대해 알아볼 것입니다.
주요 인사이트
- 로티를 사용하면 Elementor에서 움직이는 그래픽을 활용할 수 있습니다.
- 애니메이션은 JSON 파일로 다운로드하거나 외부로 연결할 수 있습니다.
- Elementor의 사용자 인터페이스에는 애니메이션 설정을 쉽게 수정할 수 있는 옵션이 제공됩니다.
단계별 안내
단계 1: 로티 요소 추가
먼저 Elementor에 로티 요소를 추가해야 합니다. 사이트의 Elementor 편집기로 이동하세요. 사이드바에서 "로티" 요소를 찾아 페이지에서 원하는 위치로 끌어다 놓으세요. 로티는 Elementor의 Pro 버전에서 다소 하단에 있습니다.
단계 2: 로티파일에서 애니메이션 다운로드
좋아하는 애니메이션을 찾으려면 LottieFiles 플랫폼을 방문하세요. 여기서 무료로 등록하고 다양한 애니메이션을 검색할 수 있습니다. 원하는 항목을 검색란에 입력하세요 - 예를 들어 "Apple"을 검색했습니다.
단계 3: 원하는 애니메이션 선택
마음에 드는 애니메이션을 찾으면 미리보기를 클릭하세요. JSON 또는 GIF 형식으로 애니메이션을 다운로드할 수 있습니다. Elementor에서 애니메이션을 사용하려면 JSON 파일로 다운로드하십시오.
단계 4: 애니메이션 업로드
이제 Elementor로 돌아가세요. Lottie요소의 업로드 필드를 통해 다운로드한 JSON 파일을 직접 업로드할 수 있습니다. JSON 파일은 Elementor에서 활성화되어야 표시됩니다.
단계 5: 외부 URL 생성
다운로드가 작동하지 않는 경우 애니메이션의 URL을 직접 사용할 수도 있습니다. 해당 필드에 URL을 붙여넣으면 Elementor가 자동으로 애니메이션을 가져와 표시합니다.
단계 6: 애니메이션 설정 조정
이제 애니메이션 설정을 조정할 수 있습니다. 재생 속도 및 배경색을 정의하는 옵션이 제공됩니다. 반복되는 애니메이션을 표시하려면 루프 기능을 활성화해야 합니다.
단계 7: 상호작용 트리거 설정
클릭 또는 호버 시 애니메이션을 시작할 트리거를 선택하십시오. 설정에서 원하는 상호작용을 설정해 사용자 경험을 제어할 수 있습니다.
단계 8: 추가 조정
애니메이션 설정의 빈도를 조정하거나 시작 및 종료 지점을 정의하여 원하는 효과를 얻을 수 있습니다. 이러한 조정은 애니메이션이 사용자의 요구 사항에 정확히 맞게 되도록 합니다.
단계 9: 스타일 및 디자인 조정
로티 애니메이션에는 스타일 및 디자인을 조정할 수 있는 옵션이 있습니다. 여기서 애니메이션의 높이, 너비 및 투명도를 설정할 수 있습니다. 또한 CSS 필터를 추가하고 전환 시간을 정의하여 전문적인 외관을 보장할 수 있습니다.
단계 10: 애니메이션 테스트 및 저장
원하는 설정을 마쳤다면 변경 사항을 저장하세요. Elementor 편집기 미리보기에서 애니메이션을 확인하여 원하는 대로 작동하는지 확인하십시오. 마우스를 올리거나 클릭했을 때 반응하는 효과가 있는 매력적인 애니메이션이 나와야 합니다.
요약
Elementor에 Lottie 애니메이션을 삽입하는 것은 간단하며 동적이고 현대적인 디자인을 웹사이트에 부여할 수 있습니다. 설명된 단계를 통해 애니메이션을 사용자 정의하고 사용자 경험을 향상시키며 콘텐츠를 창의적으로 다룰 수 있습니다.
