🟡 Новая панель для выбора цвета

Обновлены дизайн и функции панели цветов. Что нового:

Пипетка. С её помощью выбирается цвет со страницы. Работает во всех современных браузерах при редактировании страницы с компьютера.

Цветовые модели. Вы можете выбрать одну из трех, которая подходит именно вам:
HEX — шестнадцатеричная цветовая модель, уже была встроена в Тильду.
RGB — цвета создаются при смешивании основных: красного, зеленого и синего.
HSL — цвет задается тремя параметрами: тон, насыщенность и светлота.

Отображаемая палитра. Можно выбрать, какая палитра будет отображаться в панели: цвета на странице, сохраненные цвета или библиотека цветов Tilda Colors. Для Zero Block дополнительно будет отображаться палитра с градиентами, для базовых блоков она появится позднее.

Где найти новую цветовую панель: в настройках проекта, в настройках писем и во всех блоках, где доступны изменения цветов.

🔊 Сброс настроек элементов адаптивов в Zero Block

В нулевых блоках появилась возможность очистить настройки элементов для младших разрешений экрана.

🤓 Когда это может быть полезно
Петя создал дизайн для разрешения 1200px и адаптирует его под планшет и смартфон. Для младших разрешений он поменял порядок элементов и немного изменил дизайн. Текущая версия ему не понравилась, поэтому он решил сбросить внесенные изменения. Чтобы начать заново, он перешел на старшее разрешение (1200px), выделил нужные элементы, перешел в контекстное меню и нажал «Clear Adaptive Design». Готово.

Если вы хотите очистить дизайн только определенных разрешений, перейдите к предыдущему старшему разрешению и сбросьте в нем настройки. Например, чтобы очистить дизайн элемента для 320-480px и 480-640px, необходимо применить настройку на предыдущем разрешении 640-960px.

У меня не нажимается кнопка, что делать?
Если кнопка серая и вы не можете её нажать, значит адаптивы для текущего элемента (или элементов) не настроены. Это можно использовать, чтобы перепроверить, для всех ли элементов настроен адаптив.

Где найти: выберите один или несколько элементов → перейдите в контекстное меню с помощью правой кнопкой мыши → Clear Adaptive Design.

👀 Градиенты для фона всего блока и для кнопок в базовых блоках

Во всех базовых блоках появилась возможность добавлять градиент на фон и на кнопки.

Вы можете выбрать готовый градиент из библиотеки или создать свой. Для собственного варианта можно задать линейный или радиальный переход градиента, настроить угол наклона и выбрать несколько цветов. А чтобы сохранить градиент, добавьте его в палитру сохранённых цветов.

Где найти: в Настройках блока.

😨 Zero Block во всплывающем окне — новый блок T1093 в библиотеке

Блок позволяет превратить любой Zero Block в попап, который появится по клику. В библиотеке модификатор можно найти под номером Т1093 «Popup: Zero Block в попапе» в категории «Другое».

Когда пригодится блок-модификатор?
Вам нужен попап, а базовые решения в библиотеке не подходят. Например, вы хотите сделать особенное меню первого, второго или третьего уровня, нестандартную подсказку по клику, маркетинговый попап и многое другое.

Как работать с блоком?
1. Добавьте на страницу Zero Block и подготовьте дизайн блока, который будет всплывать
2. Добавьте на страницу блок-модификатор Т1093
3. В этом блоке во вкладке Контент задайте id нулевого блока из первого шага
4. Там же задайте ссылку на попап
5. Подумайте, какой блок станет триггером по клику для открытия попапа. Укажите в этом блоке ссылку на попап из пункта 4.

Готово! Также во вкладке Настройки можно настроить внешний вид всплывающего окна: выравнивание, размытие фона, детали анимации и многое другое.

Читать подробнее об использовании блока: https://help-ru.tilda.cc/zero#popup

Как вы будете использовать новый блок? Покажите свои решения в комментариях к этому посту ✨

💬 Редактор функции плавности (easing) для Step-by-step-анимаций

Теперь вы можете более гибко настраивать функцию плавности (изинг) для каждого шага анимации. Ранее были доступны пять базовых типов изингов: linear, ease-in, ease-out, ease-in-out, elastic-fin. К ним добавилась возможность изменять функцию плавности вручную, задавать точные координаты для этой функции, а также 24 новых типа изингов.

Давайте разберемся, как это работает:
1. Выберите элемент и добавьте для него шаг анимации
2. Задайте значение Move (или любой другой параметр) и перейдите в Easing → Edit
3. Далее вы можете выбрать тип изинга из списка, изменить изинг с помощью кривых Безье или задать для него координаты. Ниже можно запустить проигрывание анимации для этого шага.

Функция плавности настраивается отдельно для каждого шага анимации.

Для просмотра анимации, которая состоит из нескольких шагов, выберите Play element в разделе Test в основной панели настроек SBS-анимации.

Где найти редактор функции плавности: Step-by-step animation → Easing → Edit.

Читать базовую теорию об изингах: https://tilda.education/courses/webanimation/baseanimation/#easing

🐈 Loop with reverse и Loop once — два новых параметра в Step-by-step анимации

С параметром loop with reverse анимация элемента проигрывается по шагам, возвращается обратно на исходную позицию и так повторяется бесконечное количество раз. Это удобно, если вы хотите закольцевать анимацию элемента. Работает для всех типов sbs-анимации, кроме анимации по скроллу.

Если установить значение loop once, то анимация будет выполняться на странице только один раз, пока посетитель не перезагрузил страницу. Это может быть удобно, если вы хотите, чтобы при нажатии/ховере на кнопку дополнительный элемент появился и не исчезал. Работает для анимации по ховеру и по клику.

✨ Поддержка градиентов в векторном редакторе

Для векторных элементов появилась возможность добавить линейный и круговой градиенты. Работает с заливкой и обводкой элементов. Также можно импортировать SVG-элементы с градиентами из других графических редакторов.