Статистика ВК сообщества "Tilda и Zero Block | Блог Дмитрия Рыбалка"

Градиентная заливка.

На днях Тильда добавила в Zero Block градиентную заливку к элементам: шейп, кнопка, текст, фон.

Работает только в Zero Block. В стандартных блоках заливка осталась только одним цветом.

Настройки градиента следующие:
1. Выбор градиента — линейный или круговой
2. Добавление и удаление точек для плавного перехода цвета
3. Настройка непрозрачности каждой точки

#tilda #madeontilda #tildapublishing #dmitryrybalka

По-умолчанию раскрытые фильтры в мобильной версии.

Привет всем! Не знаю как вы, лично я до сих пор не могу смириться с маленькой кнопкой «Фильтры» в мобильной версии каталога. Уже изучил множество метрик и везде эта кнопка оказывается не популярной (возможно, плохо заметной) для людей.

Дописал небольшой CSS код, который автоматически показывает фильтры и поле поиска в мобильной версии.

Чтобы не захламлять страницы кодами, добавляйте их в «Настройки → Ещё → Пользовательские CSS-стили».

[id705766|@media] screen and (max-width: 960px) {
/* Открытые фильтры (Блог Дмитрия Рыбалка) */
.t-store__filter__options, .t-store__filter__search-and-sort, .t-store__filter__sort {
display: block;
}
.t-store__filter__opts-mob-btn {
display: none;
}
/* Открытый поиск (Блог Дмитрия Рыбалка)*/
.t-store__filter__options, .t-store__filter__search-and-sort, .t-store__filter__sort {
display: block;
}
.t-store__filter__search-mob-btn {
display: none;
}
}

Маленький лайфхак: размер шрифта в фильтрах десктопной и мобильной версии можете регулировать общими размерами текста в «Настройки → Шрифты и цвета → Размер текста (18-24px)»

Пользуйтесь!
Думаю, многим понадобится эта небольшая доработка.
С вас лайк/реакция.

#madeontilda #tilda #tildapublishing

Druk Text Wide. Скрытый шрифт в Тильде.

Он находится: Шрифты и цвета → Расширенные настройки → Druk Text Wide (самый низ списка).

Этот шрифт хорошо подходит для лендингов, где используются короткие текстовые блоки и заголовки. Отлично сочетается с большими изображениями и крупными планами товаров. Шрифт использовался в журнале Bloomberg.

#madeontilda #tilda #tildapublishing

Анимация в Zero Block с исчезновением текста. Без кода.

При скролле страницы вниз с фоновым изображением текст пересекает первую горизонтальную черту и исчезает. Но куда? Как сделать похожий эффект?

Всё довольно просто!

Нам понадобится:
— Два Zero Block
— Блок T674: Модификатор: добавление фонового изображения для всей страницы

Реализация:
1. В первом Zero Block убираем фон, добавляем Shape непрозрачностью 90% и крупный текст. Добавляем анимация смещения Shape при скролле и фиксацию текста при скролле.
2. Во втором Zero Block так же убираем фон, добавляем точно такой же шейп с анимацией, сверху 2 горизонтальные черты 100% Window Container и между ними текст.
3. Добавляем блок Блок T674 и подгружаем своё изображение, которое будет показываться статично фоном на странице.

Всё!

Мы получили фоновое изображение и фиксацию текста, которое при скролле скрывается под вторым блоком.

Как видите, не всегда нужно писать код, чтобы сделать нестандартную анимацию. Пользуйтесь!

#madeontilda #tilda #tildapublishing

Размытие фона под меню при скролле страницы.

Всем привет! В декабре этого года блогу будет 5 лет и с каждом годом новые идеи становится искать тяжелее, но при этом, иногда появляются интересные моменты, о которых хочется рассказать.

Сейчас хочу показать вам, как можно заблюрить контент под меню при скролле страницы.

Нам нужно: Zero Block и шейп.

Создаётся этот эффект следующим образом:
1. Создаёте меню Zero Block, размещаете в нём контент (лого, пункты меню, телефоны, кнопки)
2. Убираете фон, вместо фона добавляете шейп и растягиваете его во всю ширину экрана
3. В настройках шейпа ставите непрозрачность 90% и эффект: Background Blur 5px
4. С помощью кода фиксируете Zero Block
5. Готово! Эффект работает и на мобильных устройствах тоже!

Чтобы вы долго не искали, держите код для фиксации Zero Block (поменяйте ID блока на свой):


Пользуйтесь!

#madeontilda #tilda #tildapublishing

Презентация товара с помощью слайдера в Zero Block.

1. Загрузите в слайдер Zero Block фотографии высокого качества
2. Включите автоплей, уберите точки и стрелки
3. Поверните слайдер на 90 градусов
4. Увеличьте размер слайдера
5. Нестандартная презентация товара готова

Идея очень простая в реализации, но смотрится эффектно.

#tilda #madeontilda #tildapublishing #dmitryrybalka

Как подключить заявки с Тильды в группу Telegram?

1. Создаём группу
2. Добавляем в группу бота @TildaFormsBot
3. Отправляем сообщение /start в группу, получаем сообщение от бота и вносим настройки в сайт

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

Пользуйтесь

#tilda #madeontilda #tildapublishing #dmitryrybalka

Идея расположения фиксированных кнопок внизу экрана.

Создаю ещё один сайт для ресторана с функционалом онлайн-доставки. Нужно разместить 4 кнопки: корзину, избранное, заказать стол (quiz) и кнопку наверх (так как некоторые страницы получаются длинными).

На мой взгляд, я нашёл идеальное размещение этих кнопок.

1. Фиксированную кнопку BF703 размещаем в правом нижнем углу
2. Расположение корзины и избранного смещаем левее
3. Кнопку наверх размещаем в левом нижнем углу

Главное — выровняйте кнопки относительно друг друга и задайте им общий стиль!

#tilda #madeontilda #tildapublishing #dmitryrybalka

Всем доброе утро и с началом новой недели!

Сегодня дам 4 небольших совета, которые помогут улучшить ваш сайт на Тильде.

1. Виджет с мессенджерах BF905A — описание можно стилизовать и добавлять призывы к действию для быстрой связи с вами
2. Хлебные крошки ME605 — чтобы в последнем пункте появилась горизонтальная черта, поставьте в нём пробел
3. Для закрытия popup окна используйте ссылку “##”
4. Неразрывный пробел “#nbsp;” работает в кнопках тоже

#tilda #madeontilda #tildapublishing #dmitryrybalka

Написал статью про работу с рестораном Халиф и на готовом кейсе показал, как настраивать редирект 301. Добавил много скриншотов, чтобы статья читалась легко и каждый шаг был максимально понятен.

После прочтения, оцените, пожалуйста, пост.

#madeontilda #tilda #tildapublishing