Как выровнять кнопки в тильде
Эффект кнопок в стиле Material design для Tilda
Я расскажу, как сделать кнопки в стиле Material design с эффектом анимации ripple при клике. Данный эффект выглядит, как блик или полупрозрачная волна и исходит именно из того места где было произведено нажатие курсора мыши.
Данный метод достаточно прост, т.к. я заранее подготовил готовые файлы css и js для поключения к вашему проекту.
Кнопки в стиле Material design для Tilda
Эффект для кнопок в Zero block
Зайдите в редактор, создайте любой элемент, кликните по нему правой кнопкой мыши, в выпадающем меню выберите последний пункт «Add CSS Class Name» (см. изображение).
Напишите свое значение, например ripple-white, класс указывается без точки.
Данная манипуляция необходима, для того чтобы «зацепить» скрипт за необходимый нам элемент по названию его css класса и смены цвета эффекта, плюс удобно глобально стилизовать кнопки с помощью css кода. Так же это удобно, если элементы повторяются не только на странице, но и на всем сайте.
Я задал в редакторе цвет кнопок и выставил border-radius, остальное в примере ниже.
Лендинг на Tilda: как добавить кнопку?
CTA (от англ. call-to-action, призыв к действию) — один из самых важных компонентов любого сайта. Простой конструктор Tilda не требует знаний верстки, чтобы добавить недостающий элемент. Давайте разберемся, как можно добавить кнопку на ваш сайт, собранный на Тильде.
Как добавить кнопку в существующий блок
Если вы хотите добавить призыв к действию в уже существующем блоке, зайдите в настройки контента. В информационно-текстовом блоке у вас появятся поля с вариантами контента, который вы можете добавить. Выбираем вкладку “кнопка” и переходим к ее редактированию. Здесь можно добавить название кнопки, ссылку и возможность ее открытия в новой вкладке.
Рис.1. Редактирование кнопки в настройках контента
После основных настроек кнопки, можно перейти к визуальному оформлению. Для этого заходим в “Настройки” (верхний левый угол блока) и приступаем к редактированию.
*Для того, чтоб кнопка была по центру блока в настройке “Выравнивание заголовочной секции блока” выберете “По центру”.
Рис.2. Вкладка редактирования кнопки в “Настройках”
В настройках находим вкладку “стиль кнопки” и выбираем необходимый дизайн. Если вы развернете вкладку “дополнительные настройки”, то сможете настроить тени, изменение цвета при наведении и другие классные эффекты. После того, как вы внесли все необходимые изменения, нажмите “сохранить и закрыть”. Кнопка добавлена в ваш блок!
Как добавить кнопку отдельным блоком
Если вы хотите добавить кнопку в новом отдельном блоке, для этого нужно нажать на значок “+” между блоками или на пустой странице. Слева у вас появится окно с возможным контентом, в котором нужно выбрать вариант “форма и кнопка”.
Рис.3. Добавление кнопки в новом блоке
В данной категории вы можете выбрать разные форматы для вашей кнопки: простой CTA, кнопка с призывом, форму для заполнения с кнопкой и многое другое. Обратите внимание, что большинство контента в этом разделе доступно на оплаченном аккаунте.
После того, как вы добавили кнопку на новом блоке, вы можете отредактировать ее в привычном меню слева вверху блока. В “настройках” можно полностью поменять визуал, а в “контенте” исправить текст и ссылку кнопки.
Рис.4. Здесь можно отредактировать кнопку
Вот такая простая, но, надеемся полезная статья у нас сегодня получилась о работе с Tilda.
Остались вопросы по работе с конструктором Тильда?
Не нашли ответ на интересующий Вас вопрос? Или у вас возникла другая проблема, в работе с Tilda? Задавайте вопросы, которые Вас интересуют в комментариях, на них оперативно ответит специалист отдела разработки Convert Monster.
Коды для сайтов на платформе Тильда
Градиентные кнопки для сайтов на платформе Тильда
Данную модификацию я использую на сайтах, которые имеют определённую стилистику и заказчики хотят видеть градиентные кнопки. В тильде нет стандартной настройки, что бы сделать такую кнопку. Поэтому я использовал код, который беру с сайта michailozdemir.dev
Тут нам достаточно зайти на страницу, вставить нужные цвета, здесь же посмотреть как будет выглядеть наша кнопка. После чего копируем код и вставляем на тильде в блок другое T123. И не забудьте класс кнопке прописать, об этом я рассказываю тут
Тоже интересный эффект, который можно применить на различных сайтах. Код для глитч эффекта можно взять с этого сайта romanyu.ru Там же есть инструкция, которая поможет сделать подобный эффект на своём сайте.
У Романа много интересных модификаций для Тильды, которые можно применять на своих сайтах. Если что-то не получится, то можно всегда ему написать и попросить помощи.
Глитч в zero block на Тильде для текста
Калькулятор и квиз в zero block на Тильде
Если вам мало модификаций на сайтах, которые я написал выше, то на этом mo-ti.ru их много.
Различные модификации и код начиная от изменения эффектов кнопки и заканчивая сложными калькуляторами и квизами, которые периодически я использую в своих проектах.
Автора данного ресурса с модификациями для Тильды зовут Дмитрий. За небольшую плату можно получить доступ ко всем видео инструкциям на сайте. А если вы дружите с кодом, то и так поймёте как установить модификацию на сайт.