Tilda и Zero Block | Блог Дмитрия Рыбалка
262 subscribers
96 photos
23 videos
32 links
Привет, это Дмитрий Рыбалка. Создаю сайты на Тильде с 2015 года, веду блог с 2018 года. Делюсь своими работами, опытом, идеями и лайфхаками.

Мой сайт: dmitryrybalka.ru
Виджет отзывов: cloudcomments.ru
Блог ВК: vk.com/tilda
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Новый блок — Zero Block в попап окне.

Какие блоки использовать:
• Zero Block — дизайн попап окна
• Другое → T1093 — настройки попап Zero Block

Что можно настроить в попап окне Zero Block:
• Размытие фона
• Цвет и непрозрачность фона
• Анимация появления / закрытия
• Отключить клик у фона
• Отключить блокировку скролла
• Скрыть иконку закрытия попапа
• Открыть попап после загрузки страницы

Что можно создать в попап окне:
• Информационные попап окна
• Акционные предложения с формой в попап окнах
• Меню горизонтальные (десктоп, мобильные)
• Меню вертикальные с фиксированием
• Полноэкранные блоки с большим количеством информации
• Рекомендованные товары в попап
• И многие другие ваши идеи
Favicon в Тильде.

Несколько моих советов:
1. Советую создавать иконки в SVG формате, они будут отображаться намного чётче, чем PNG/ICO формат + поддерживают прозрачность
2. Основную иконку создавайте с прозрачным фоном
3. Для тёмной темы создавайте светлую иконку с прозрачным фоном
4. Для светлой / тёмной темы добавляйте под иконку цветной круг или квадрат (одна иконка должна хорошо отображаться на светлой и тёмной теме одновременно)
5. Иконку для Apple/Android создавайте в PNG формате с внутренними отступами

На SEO это не влияет, но общий визуал сайта будет приятнее!
Сочетание скругления углов в сайте.

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

На примере главного экрана сайта ИНГОССТРАХ я хочу показать, как в сайте удачно смотрятся плитки с разным скруглением углов.

Белое меню — 20px
Баннер — 40px
Разделы — 24px
Формы, кнопки — 12px
Подсказки к поиску — полукруг

Как видите, скругление у каждого меньшего объекта уменьшается в 2 раза. На 4-м фото я кругами визуально показал разное скругление углов у плиток. Чем меньше объект — тем меньше радиус скругления. Это правило можете использовать в своих сайтах на Тильде.

Все полезные статьи про Тильду и Zero Block читайте в блоге на моём сайте.
Чёрно-белая Яндекс Карта в Zero Block.

Экономия времени — это всегда хорошо. Сейчас покажу, как с помощью шейпа можно быстро перекрасить Яндекс Карту в серый цвет (да и любой другой объект в Zero Block).

1. Создайте Zero Block, через Конструктор Карт Яндекс получите код карты и добавьте его в HTML-код Zero Block. Карта начнёт отображаться в стандартном цвете.
2. В Zero Block поверх карты создайте прозрачный шейп, растяните во весь экран и задайте ему следующие настройки:
— Pointer Events: None — чтобы оставить карту управляемой
— Effect: Background Grayscale 100% — этот эффект делает серым все объекты под шейпом.

Готово! У вас получится кликабельная серая карта Яндекса. Всё быстро и просто!

Другие интересные статьи про Тильду и Zero Block читайте в блоге на моём сайте.
Подчёркивание активного пункта меню при переходе по страницам сайта.

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

1. Добавьте меню (лучше Zero Block) в Header
2. Добавьте на каждую страницу самым первым блоком Zero Block с подчёркиванием так, чтобы подчёркивание находилось под нужным пунктом меню
3. В зависимости от адаптации меню, настройте подчёркивание

Готово!
Zero Block в попап окне.

Работаю над несколькими проектами, один из них в тематике автолизинг. Использую Zero Block в попапе — очень полезный блок! Оказывается, в Тильде можно собрать достаточно информативное попап окно.

Создавали ли вы сложные попап окна с открытием через блок Т1093? Как думаете, что самое долгое / сложное в создании таких карточек?
Пост из серии «А вы знали?»:)

1. Знали, что при загрузке изображений можно увеличить максимальный формат загружаемого изображения с 1680px до 1920px? Советую включить эту функцию только в сайтах, не требующих SEO-оптимизацию, например, в лендингах. Или очень сильно сжимать изображение 1920px.
2. Изображения не обязательно сохранять на компьютер, а потом загружать в сайт. Можно скопировать прямую ссылку на изображение и загрузить его в Тильде по ссылке.
Всем привет!

С прошедшими праздниками! Не люблю долго отдыхать, с числа 4-го уже постепенно входил в рабочий режим...:)

Я много времени уделяю добавлению выполненных работ на сайт и очень мало времени уделяю на рекламирование себя. Мои взгляды на продвижение себя как специалиста — уменьшать рекламные затраты и делать акцент на имидж, экспертность.

Добавил на сайт новую работу — лендинг лизиниговой компании на Тильде. Сайт сделан с дополнительными экранами для десктопа и мобильной версии, а также с уникальной формой заявки с зависимыми полями.

Если интересно, можете посмотреть кейс по ссылке.
Долями в Тильде.

На днях подключал своего клиенту систему оплату Долями от Тинькофф. Саму систему настроил, перехожу в Тильду Настройки сайта → Универсальная платёжная система → Шаблон настроек.

Ищу, ищу и не могу найти шаблон подключения Долями...

Методом тыка зашёл в Настройки Тильды и включил функцию «Участвовать в тестировании новых функций». После этого список шаблонов с платёжными системами значительно увеличился, в том числе появилась оплата Долями.

Так, что, оставляйте включённой эту функцию, чтобы увеличить список функционала Тильды:)
Чек-лист сайта на Тильде

300 пунктов для улучшения качества и конверсии вашего сайта.

Меня зовут Дмитрий Рыбалка. Я собрал мой накопленный опыт работы в сайтах и поместил в удобный чек-лист, который поможет сделать ваш сайт более удобным и прибыльным!

8 разделов и 300 пунктов в одном файле для улучшения качества и конверсии вашего сайта!

Смотреть чек-лист на сайте