Искате ли да добавите анимация на Lottie Elementor?
От версия 2.10.0, Elementor Pro поддържа Lottie анимация, което ви позволява да добавите лека анимация към вашата страница. Преди актуализацията можете да приложите анимационни ефекти към джаджа от опцията Ефекти на движението под раздела напреднал.
Лоти обаче работи по различен начин. Lottie е анимационен формат, подобно на GIF, така че Lottie файлът е предпоставка за добавяне на анимацията на Lottie в Elementor.
категория Elementor, можете да добавите Lottie файл с помощта на приспособлението Lottie. Следователно можете също да приложите ефекти на движение към вашия файл Lottie. Например, можете да приложите ефект на хоризонтално превъртане, за да накарате вашата Lottie да се движи хоризонтално — в дясната или в лявата посока — когато страницата се превърта. Ето един пример.
Можете да видите оригиналния анимационен файл по-горе ICI. В оригиналния файл на Lottie колоездачът - и неговият велосипед - остават в същата позиция, когато страницата се превърта. За да го накарате да се движи надясно, когато страницата се превърта надолу, и наляво, когато страницата се превърта нагоре, можете да използвате вградения ефект на движение в Elementor.
Ако сте нов в Elementor, вижте нашето ръководство за: Как да инсталирам Elementor на WordPress
Какво е Lottie и къде да получите Lottie файл?
Както споменахме по-рано, Lottie е анимационен формат. Това е базиран на JSON анимационен формат, разработен от инженери на Airbnb. Можете да прочетете повече за историята на Лоти на Cette страница.
Най-голямата полза от осиновяването на Лоти на вашия уеб сайт това твое ли е уеб сайт ще бъде много по-лек, защото файлът на Lottie е много по-малък от другите анимационни формати, с ясно визуално качество. Можете също да промените размера на вашия Lottie файл, без да счупите пикселите.
Adobe After Effects е един от инструментите, които можете да използвате, за да създадете Lottie файл. Можете също така да получите файлове на Lottie безплатно Лоти файлове.
Моля, обърнете внимание, че Lottie и LottieFiles са две различни неща. Lottie отново е — — анимационен формат, докато LottieFiles е уеб сайт който предлага Lottie файлове.
Как да добавите анимация на Lottie в Elementor
Преди да започнете да добавяте анимация на Lottie в Elementor, уверете се, че сте надстроили своя Elementor Pro. След като сте готови, създайте нова страница и редактирайте с Elementor. Или модифицирайте съществуващ.
В редактора на Elementor плъзнете изпълнимия модул Lottie в областта за редактиране
Отидете до левия панел. на блока Лоти под раздела Съдържание, изберете източника. Ако решите Медиен файл, просто качете вашия Lottie файл (JSON файл), като щракнете върху иконата за качване.
Прочетете още: Как да зададете персонализиран размер за иконата на бутона Elementor
След това можете да зададете подравняването и да добавите персонализиран URL адрес.
Ако искате да използвате файл на Lottie, хостван от източник на трета страна, изберете опцията Външен URL адрес и поставете URL адреса на файла Lottie, който искате да използвате, в наличното поле.
След това отворете блока настройки под раздела Съдържание за контрол на поведението на анимацията. Първо изберете типа на задействане, за да задействате анимацията на Lottie. Можете да избирате от 4 типа тригери:
- Изглед: Анимацията Lottie започва да се възпроизвежда въз основа на горния прозорец (видимата област на екрана на устройството).
- При щракване: Анимацията Lottie започва да се възпроизвежда, когато a посетител щракнете върху него.
- При задържане на мишката: Анимацията Lottie започва да се възпроизвежда, когато a посетител движи мишката си.
- При превъртане: Анимацията Lottie се възпроизвежда само когато страницата се превърта.
Можете също да зададете опция за активиране контур, активирайте опцията Обратен, задайте начална/крайна точка и задайте скорост на възпроизвеждане.
Има и опция за активиране на Lazyload.
За да зададете ширината на вашия Lottie файл, можете да отидете в раздела Стил. В този раздел можете да зададете ширината, както и да добавите CSS филтър, както при работа с изпълнимия модул Image.
Ако искате да приложите хоризонтално движение като това в примера по-горе, отидете на раздела напреднал. отворен блок Ефекти на движението и активирайте Ефекти на превъртане.
Кликнете върху опцията Хоризонтално превъртане. Задайте посока, скорост и прозорец.
Заключение
Ако искате да изтеглите Lottie файл от уебсайта LottieFiles, не забравяйте да изтеглите JSON файла. Първо изберете Lottie файла, който искате да изтеглите, и щракнете върху бутона Изтеглете JSON .
Вземете Elementor Pro сега!!!
Заключение
Тук ! Това е за тази статия, която ви показва как добавете анимация на Lottie в Elementor. Ако имате някакви притеснения относно това как да стигнете до там, уведомете ни в рамките на Връзка.
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...