Flash эффект для кнопки в zero block, конструктор сайтов tilda?
В tilda есть возможность добавлять готовые блоки и новая возможность для создания кастомного блока zero block.
Если добавлять готовую кнопку: все блоки —> фрма и кнопка —> кнопка в настройках для этой кнопки можно задать разные эффекты (например flash):
Но если создавать zero block и в нем добавлять кнопку, то для нее нет возможности задания подобных эффектов!
Вопрос: можно ли все же как-то создать кнопку с анимационными эффектами тильда (flash, ripple, light) в zero block ? Или если создаю стандартный блок с кнопкой, можно ли ее как-то переместить в другой блок, например, на обложку?
Интересный эффект появления кнопки при скролле на Тильде
Нам потребуется zero block тильды. Для примера, возьмем страницу из шаблонов и переконвертируем в зеро.
Затем выделим элемент и откроем панель настроек.
Идем в раздел пошаговая анимация тильды, и выбираем анимацию при скролле.
Настраиваем необходимые параметры, чтобы закрепить блок при скролле в тильде есть параметр FIX, по умолчанию там NONE, нужно заменить на FIXED. Тогда наша кнопка будет ездить за пользователем. Далее нажимаем сохранить и возвращаемся в редактор, нажимаем ПУБЛИКОВАТЬ.
На выходе получаем необычную анимацию кнопки, которая еще и повышает конверсию, ведь она сопровождает пользователя по всему сайту.
Эффект кнопок в стиле Material design для Tilda
Я расскажу, как сделать кнопки в стиле Material design с эффектом анимации ripple при клике. Данный эффект выглядит, как блик или полупрозрачная волна и исходит именно из того места где было произведено нажатие курсора мыши.
Данный метод достаточно прост, т.к. я заранее подготовил готовые файлы css и js для поключения к вашему проекту.
Кнопки в стиле Material design для Tilda
Эффект для кнопок в Zero block
Зайдите в редактор, создайте любой элемент, кликните по нему правой кнопкой мыши, в выпадающем меню выберите последний пункт «Add CSS Class Name» (см. изображение).
Напишите свое значение, например ripple-white, класс указывается без точки.
Данная манипуляция необходима, для того чтобы «зацепить» скрипт за необходимый нам элемент по названию его css класса и смены цвета эффекта, плюс удобно глобально стилизовать кнопки с помощью css кода. Так же это удобно, если элементы повторяются не только на странице, но и на всем сайте.
Я задал в редакторе цвет кнопок и выставил border-radius, остальное в примере ниже.