Как вставить гифку в тильду

Как сделать GIF из видео?

Чтобы сделать gif-анимацию из видео, воспользуйтесь сервисом на выбор:

Как сделать сделать активацию gif при наведении в ZeroBlock для Tilda?

1. Находим нужный gif
2. Открываем в фоторедакторе и сохраняем первый кадр в виде статичного фото
3. Добавляем это фото в ZeroBlock
4. Копируем class этого фото и добавляем в скрипт (пример)
.tn-elem__436056751470210033144
5. В скрипте:
— при наведении курсора на фото, прописываем адрес gif файла
— при удалении курсора прописываем адрес статичного фото

Фишки и ограничения Тильды, о которых вы не знали

блог диджитал агентства - что такое тильда иллюстрация - статья блога MANUFACT PRO

Всем доброго времени суток! Мы решили написать этот материал в связи с ограничением на Тильде, с которым недавно столкнулись, верстая очередной проект в ZeroBlock. Мы с командой неожиданно поняли, что таких “ограничительных” мелочей и фишек у нас накопилось приличное количество, и решили поделиться с вами, чтобы и вы тоже были в курсе.

В этой статье вы найдете ответы на вопросы, которые не гуглятся. Мы их получили из опыта разработки на Тильде. Надеемся, что этот материал будет вам полезен.

Сколько элементов можно добавить в ZeroBlock на Tilda?

Дата 06.06.2022. Опытным путём, добавив максимальное количество элементов и подсчитав их с помощью функции слоёв, мы выяснили ограничение — не более 600 элементов можно разместить в блоке.

Однако уже спустя месяц, на 19.07.2022, повторив тот же самый опыт, мы смогли добавить уже 1700 элементов — это показывает, что Тильда безостановочно развивается и расширяет свои возможности. Поэтому воспринимать такое ограничение можно как временное.

Самый простой прелоудер для Тильды

При вёрстке сложных одноблочных, двухблочных сайтов мы постоянно сталкиваемся с дёрганой или долгой загрузкой страницы. Функции lazyload и стандартной анимации появления зачастую не сильно помогают ускорить это дело. В более чем 50 проектах на Тильде мы перепробовали большое количество кода для эффектов загрузки страницы – и выделили для себя самый простой, быстрый и любимый. Ниже прикрепляем код для копирования в блок 123 на Тильде.

Способ использования:
1. Создаем блок 123 – HTML код – в самом верху вашей страницы. Если хотите создать сквозной прелоудер для всех страниц, создайте сквозной header и добавьте блок 123 туда.
2. Добавляем любой блок, в который можно добавить изображение, под блок с кодом – загружаем туда своё .gif изображение (желательно без фона) и копируем ссылку на изображение. После этого отключаем (скрываем) блок.
3. Копируем прикрепленный ниже код в блок 123 и в коде в строку URL в скобки, добавляем ссылку из предыдущего пункта.
4. Опубликовываем все страницы.

Как из любого ZeroBlock-а сделать фиксированное меню для сайта в мобильной и ПК версиях?

Часто стандартных блоков меню недостаточно, чтобы реализовать тот или иной дизайн. Для этого пригодится следующий представленный ниже код. Для его использования достаточно заверстать собственное меню в zeroblock и прикрепить rec блока в коде, в строке blockMenuID. А сам код добавить в блок 123.

Помимо этого, с помощью представленного ниже кода, можно также заменить цвет фона меню в строке background-color и добавить эффект блюра в строке backdrop-filter.

Как сделать свою кнопку для любой отправки формы на Тильде, или отправлять данные из нескольких форм в ZeroBlock по клику на одну кнопку

При вёрстке сложных форм часто необходимо разместить колонки полей для ввода, исходя из дизайн-макетов – Тильда такой возможности по умолчанию не даёт. Для таких задач мы используем простой код, который позволяет объединить формы одной кнопкой отправки.

Сделать это достаточно просто, держите шаги:

1. Создайте в ZeroBlock необходимую форму для ввода и добавьте отдельно любым удобным способом кнопку – на кнопку закрепите ссылку #sendmyform.

2. Далее в блок 123 добавьте код расположенный в статье ниже.

3. Замените в коде #rec397693186 на свой rec блока.

4. Опубликуйте страницу.

Lottie анимация Tilda

Lottie анимация — это легкая, масштабируемая анимация для вашего веб-сайта.

Lottie анимация на 99% легче любой гифки.

На данном ресурсе есть коллекция бесплатных Lottie — https://iconscout.com/free-lotties

Здесь вы можете создать свою Lottie-анимацию — https://lottiefiles.com/

А с помощью кода ниже ее можно встроить на ваш сайт на Тильде.

P.s.: Все анимации, что вы видите на сайте — это Lottie

Lottie анимация — это легкая, масштабируемая анимация для вашего веб-сайта.

Lottie анимация на 99% легче любой гифки.

На данном ресурсе есть коллекция бесплатных Lottie — https://iconscout.com/free-lotties

А вот здесь вы можете создать свою Lottie-анимацию — https://lottiefiles.com/

А с помощью кода ниже ее можно встроить на ваш сайт на Тильде.

P.s.: Все анимации, что вы видите на сайте — это Lottie

Наглядный пример разницы веса гиф-анимации с Lottie-анимацией
Особенности

Lottie анимация добавляется в Zero-блок и блок .t123
Вам понадобится аккаунт в Github

Ищем Lottie анимацию

LottieFlow —https://finsweet.com/lottieflow/category
IconScout —https://iconscout.com/free-lotties
Creattie —https://creattie.com/lottie-animated-illustrations

Я выбрал сервис IconScout.

Выбираем нужную анимацию и скачиваем в формате Lottie JSON

Далее открываем скачанный файл с помощью Visual Studio или если его нет, то через обычный Блокнот.
Копируем весь код (Ctrl+A -> Ctrl+C / Cmd+A -> Cmd+C)

2. Загружаем анимацию на хостинг

Бесплатным хостингом у нас будет Github Gist — https://gist.github.com/.
Заводим аккаунт, если его нет и создаем новый Gist.
Зачем это надо? Потому что в Тильде нет хостинга, а покупать отдельный хостинг на рег.ру нет никакого смысла. В Гитхаб Гисте не надо создавать репозиторий и работать с ветками, мы можем быстро загрузить свою анимацию.

Пишем description (описание) своей анимации
Название анимации в формате .json
И вставляем ранее скопированный код из файла.
Жмем «Create secret gist»

Далее нажимаем на кнопку Raw и пока что переходим к следующему шагу (не закрывайте страницу, которая открылась).