Будьте аккуратны, если используете новую функцию расширение Zero Block по ширине окна "Autoscale to window with".
✅ В редакторе все элементы уменьшены и выровнены.
✅ В опубликованной версии тоже всё хорошо.
⛔️ Но если сузить экран, элементы начинают налетать друг на друга и этот момент сейчас сложно поправить.
Пока функция находится в бета-режиме, тщательно проверяйте расположение всех элементов на всех экранах.
✅ В редакторе все элементы уменьшены и выровнены.
✅ В опубликованной версии тоже всё хорошо.
⛔️ Но если сузить экран, элементы начинают налетать друг на друга и этот момент сейчас сложно поправить.
Пока функция находится в бета-режиме, тщательно проверяйте расположение всех элементов на всех экранах.
This media is not supported in your browser
VIEW IN TELEGRAM
Красивое смешивание слоёв в Zero Block с помощью всего лишь одной строчки CSS кода.
Свойство называется «mix-blend-mode». Оно смешивает цвета верхнего и нижнего слоя. За счёт этого можно получить интересный эффект наложения.
Как сделать такой эффект:
1. Разместить слои друг над другом
2. Нажать правой кнопкой мыши по верхнему слою и добавить имя CSS-классу (Add CSS Class Name) — mix-blend-mode
3. Добавить HTML-код <style>.mix-blend-mode {mix-blend-mode: difference;}</style> (где difference — режим смешивания, а другие режимы можете посмотреть здесь: https://developer.mozilla.org/ru/docs/Web/CSS/mix-blend-mode)
Важно! Если верхним слоем вы добавили текстовый блок, а нижнем слоем тёмное фото, то используйте светлый цвет у текста.
Пример реализации (анимация так же работает на мобильных):
https://dmitryrybalka.ru/blog/smeshivanie-sloev-v-tilda-zero-block
Инструкция (пошаговая со скриншотами):
https://dmitryrybalka.ru/blog/tpost/sjprb3xoj1-smeshivanie-sloyov-v-zero-block
Свойство называется «mix-blend-mode». Оно смешивает цвета верхнего и нижнего слоя. За счёт этого можно получить интересный эффект наложения.
Как сделать такой эффект:
1. Разместить слои друг над другом
2. Нажать правой кнопкой мыши по верхнему слою и добавить имя CSS-классу (Add CSS Class Name) — mix-blend-mode
3. Добавить HTML-код <style>.mix-blend-mode {mix-blend-mode: difference;}</style> (где difference — режим смешивания, а другие режимы можете посмотреть здесь: https://developer.mozilla.org/ru/docs/Web/CSS/mix-blend-mode)
Важно! Если верхним слоем вы добавили текстовый блок, а нижнем слоем тёмное фото, то используйте светлый цвет у текста.
Пример реализации (анимация так же работает на мобильных):
https://dmitryrybalka.ru/blog/smeshivanie-sloev-v-tilda-zero-block
Инструкция (пошаговая со скриншотами):
https://dmitryrybalka.ru/blog/tpost/sjprb3xoj1-smeshivanie-sloyov-v-zero-block
Media is too big
VIEW IN TELEGRAM
Презентация товара с помощью пошаговой анимации одной фотографии в Zero Block.
Хотите показать преимущества товара с помощью одной фотографии? Есть хороший способ — использовать пошаговую анимацию с увеличением и поворотом фотографии.
Для создании похожей анимации вам понадобится только фотография высокого качества и следующие настройки пошаговой анимации в Zero Block:
1 шаг: увеличение на 150%
2 шаг: поворот на 90% и уменьшение
3 шаг: увеличение
4 шаг: возврат в исходное положение
В каждом шаге я корректирую положение фотографии, чтобы левый верхний угол фотографии примерно находился в одной точке — так анимация воспринимается приятнее, а так же задаю небольшие задержки перед каждым шагом.
Как вам идея?
—
rtng.ru — вступайте в каталог дизайнеров на Тильде!
dmitryrybalka.ru — создание сайтов на Тильде, блог про Тильду
Хотите показать преимущества товара с помощью одной фотографии? Есть хороший способ — использовать пошаговую анимацию с увеличением и поворотом фотографии.
Для создании похожей анимации вам понадобится только фотография высокого качества и следующие настройки пошаговой анимации в Zero Block:
1 шаг: увеличение на 150%
2 шаг: поворот на 90% и уменьшение
3 шаг: увеличение
4 шаг: возврат в исходное положение
В каждом шаге я корректирую положение фотографии, чтобы левый верхний угол фотографии примерно находился в одной точке — так анимация воспринимается приятнее, а так же задаю небольшие задержки перед каждым шагом.
Как вам идея?
—
rtng.ru — вступайте в каталог дизайнеров на Тильде!
dmitryrybalka.ru — создание сайтов на Тильде, блог про Тильду
Всем привет!
Только что нашёл свой блокнот 2015 года, в котором я составлял список дел, вносил заметки по работе и вёл учёт доходов.
Сейчас я понимаю, насколько это было неудобно и малоэффективно.
1️⃣ Во-первых, записи от руки всегда сложнее считывать, чем печатные буквы — потеря времени.
2️⃣ Во-вторых, записи приходится дольше искать — неэффективно.
3️⃣ И в-третьих, бумага имеет свойство портиться, а чернила затираться, а если потеряли блокнот — из облака его уже не выгрузишь😅
— незащищённо.
Читать дальше: https://dmitryrybalka.ru/blog/tpost/a8hfb7ht11-bumazhnii-ili-elektronnii-format-dlya-ve
Только что нашёл свой блокнот 2015 года, в котором я составлял список дел, вносил заметки по работе и вёл учёт доходов.
Сейчас я понимаю, насколько это было неудобно и малоэффективно.
1️⃣ Во-первых, записи от руки всегда сложнее считывать, чем печатные буквы — потеря времени.
2️⃣ Во-вторых, записи приходится дольше искать — неэффективно.
3️⃣ И в-третьих, бумага имеет свойство портиться, а чернила затираться, а если потеряли блокнот — из облака его уже не выгрузишь😅
— незащищённо.
Читать дальше: https://dmitryrybalka.ru/blog/tpost/a8hfb7ht11-bumazhnii-ili-elektronnii-format-dlya-ve
Как подключить заявки с Тильды в группу Telegram?
1. Создаём группу
2. Добавляем в группу бота @TildaFormsBot
3. Отправляем сообщение /start в группу, получаем сообщение от бота и вносим настройки в сайт
Таким способом, можно создать в Telegram несколько групп пользователей, которые будут получать заявки из разных форм на сайте.
Пользуйтесь!
1. Создаём группу
2. Добавляем в группу бота @TildaFormsBot
3. Отправляем сообщение /start в группу, получаем сообщение от бота и вносим настройки в сайт
Таким способом, можно создать в Telegram несколько групп пользователей, которые будут получать заявки из разных форм на сайте.
Пользуйтесь!
Тёмная тема в Zero Block👍🏿
→ Включается в настройках Zero Block справа внизу.
Быстрое управление блоками Zero Block ↓
Посмотреть весь список блоков Zero Block можно в панели слоёв, которая включается через «Command + L» или меню Zero Block справа вверху «•••»
В этой панели вы можете создавать новые Zero Block, копировать или удалять их.
→ Включается в настройках Zero Block справа внизу.
Быстрое управление блоками Zero Block ↓
Посмотреть весь список блоков Zero Block можно в панели слоёв, которая включается через «Command + L» или меню Zero Block справа вверху «•••»
В этой панели вы можете создавать новые Zero Block, копировать или удалять их.
This media is not supported in your browser
VIEW IN TELEGRAM
Идея расположения фиксированных кнопок внизу экрана.
Создаю ещё один сайт для ресторана с функционалом онлайн-доставки. Нужно разместить 4 кнопки: корзину, избранное, заказать стол (quiz) и кнопку наверх (так как некоторые страницы получаются длинными).
На мой взгляд, я нашёл идеальное размещение этих кнопок.
1. Фиксированную кнопку BF703 размещаем в правом нижнем углу
2. Расположение корзины и избранного смещаем левее
3. Кнопку наверх размещаем в левом нижнем углу
Главное — выровняйте кнопки относительно друг друга и задайте им общий стиль!
Создаю ещё один сайт для ресторана с функционалом онлайн-доставки. Нужно разместить 4 кнопки: корзину, избранное, заказать стол (quiz) и кнопку наверх (так как некоторые страницы получаются длинными).
На мой взгляд, я нашёл идеальное размещение этих кнопок.
1. Фиксированную кнопку BF703 размещаем в правом нижнем углу
2. Расположение корзины и избранного смещаем левее
3. Кнопку наверх размещаем в левом нижнем углу
Главное — выровняйте кнопки относительно друг друга и задайте им общий стиль!
Я буду первым, кто создал широкоформатный шаблон для Тильды😎
Лично для меня создание шаблонов помогает лучше изучать Тильду и находить новые идеи для блога, а так же хорошо прокачивает скилл.
Какие советы я могу вам дать, при работе с широким форматом:
1. Используйте размер небольшой размер типографики (+- 12px текст и 16px заголовки), так как страница ещё сильно растянется и текст увеличится
2. Не уводите элементы за границы макетной сетки — с широкоформатной функцией лучше оставлять чуть больше места по краям экрана
3. Располагайте элементы относительно макетной сетки, так будет проще работать
4. С широкоформатными Zero Block хорошо сочетаются стандартные блоки на всю ширину экрана с 40px отступами
5. Пошаговую анимацию для планшетов и мобильных нужно настраивать вручную
———
Посмотреть и купить шаблон: https://dmitryrybalka.ru/shop/tproduct/276004096-285714814641-shablon-magazin-3
Лично для меня создание шаблонов помогает лучше изучать Тильду и находить новые идеи для блога, а так же хорошо прокачивает скилл.
Какие советы я могу вам дать, при работе с широким форматом:
1. Используйте размер небольшой размер типографики (+- 12px текст и 16px заголовки), так как страница ещё сильно растянется и текст увеличится
2. Не уводите элементы за границы макетной сетки — с широкоформатной функцией лучше оставлять чуть больше места по краям экрана
3. Располагайте элементы относительно макетной сетки, так будет проще работать
4. С широкоформатными Zero Block хорошо сочетаются стандартные блоки на всю ширину экрана с 40px отступами
5. Пошаговую анимацию для планшетов и мобильных нужно настраивать вручную
———
Посмотреть и купить шаблон: https://dmitryrybalka.ru/shop/tproduct/276004096-285714814641-shablon-magazin-3
Всем доброе утро и с началом новой недели!
Сегодня дам 4 небольших совета, которые помогут улучшить ваш сайт на Тильде.
1. Виджет с мессенджерах BF905A — описание можно стилизовать и добавлять призывы к действию для быстрой связи с вами
2. Хлебные крошки ME605 — чтобы в последнем пункте появилась горизонтальная черта, поставьте в нём пробел
3. Для закрытия popup окна используйте ссылку “##”
4. Неразрывный пробел “#nbsp;” работает в кнопках тоже
Сегодня дам 4 небольших совета, которые помогут улучшить ваш сайт на Тильде.
1. Виджет с мессенджерах BF905A — описание можно стилизовать и добавлять призывы к действию для быстрой связи с вами
2. Хлебные крошки ME605 — чтобы в последнем пункте появилась горизонтальная черта, поставьте в нём пробел
3. Для закрытия popup окна используйте ссылку “##”
4. Неразрывный пробел “#nbsp;” работает в кнопках тоже
This media is not supported in your browser
VIEW IN TELEGRAM
Идея плавной анимации скругления при наведении на кнопку.
Реализация:
1. Создали в Zero Block зелёный шейп
2. В Figma нарисовали зелёный прямоугольник с плавно выступающим полукругом посередине снизу, сохранили как .svg
3. Поместили прямоугольник .svg над шейпом так, чтобы совпадали границы с шейпом
4. Поместили сверху белую кнопку с анимацией при наведении со сдвигом вниз на 10px
5. К прямоугольнику .svg добавили анимацию: при наведении на кнопку растягивание по горизонтали на 130-150%, Ease In Out.
Готово ✅ Получаем лёгкую плавную анимацию!
🔗 Пошаговая статья на сайте: https://dmitryrybalka.ru/blog/tpost/mots793x81-plavnaya-animatsiya-skrugleniya
Реализация:
1. Создали в Zero Block зелёный шейп
2. В Figma нарисовали зелёный прямоугольник с плавно выступающим полукругом посередине снизу, сохранили как .svg
3. Поместили прямоугольник .svg над шейпом так, чтобы совпадали границы с шейпом
4. Поместили сверху белую кнопку с анимацией при наведении со сдвигом вниз на 10px
5. К прямоугольнику .svg добавили анимацию: при наведении на кнопку растягивание по горизонтали на 130-150%, Ease In Out.
Готово ✅ Получаем лёгкую плавную анимацию!
🔗 Пошаговая статья на сайте: https://dmitryrybalka.ru/blog/tpost/mots793x81-plavnaya-animatsiya-skrugleniya
This media is not supported in your browser
VIEW IN TELEGRAM
Анимация карточки с уменьшением границы, увеличением фото и появлением текста с помощью пошаговой анимации в Zero Block.
Релизация.
Подготовка:
1. Добавить шейп с фото, например 600х400 px
2. Сверху наложить пустой шейп 700х500 с белыми границами 50px, pointer events: none
3. Выше добавить текстовый блок, pointer events: none
Создание анимации:
1. При наведении на шейп с фото добавить анимацию увеличения на 110%
2. К пустому шейпу добавить анимацию уменьшения на 90% при наведении на шейп с фото
3. К тексту добавить анимацию появления при наведении на шейп с фото
Готово!🔥 Получается лёгкая и стильная анимация карточки.
Подробная инструкция со скриншотами на сайте: https://dmitryrybalka.ru/blog/tpost/p42gkxypf1-animatsiya-s-tekstom-pri-navedenii-na-ka
Релизация.
Подготовка:
1. Добавить шейп с фото, например 600х400 px
2. Сверху наложить пустой шейп 700х500 с белыми границами 50px, pointer events: none
3. Выше добавить текстовый блок, pointer events: none
Создание анимации:
1. При наведении на шейп с фото добавить анимацию увеличения на 110%
2. К пустому шейпу добавить анимацию уменьшения на 90% при наведении на шейп с фото
3. К тексту добавить анимацию появления при наведении на шейп с фото
Готово!🔥 Получается лёгкая и стильная анимация карточки.
Подробная инструкция со скриншотами на сайте: https://dmitryrybalka.ru/blog/tpost/p42gkxypf1-animatsiya-s-tekstom-pri-navedenii-na-ka
Моя подборка ТОП-10 самых полезных сервисов для бизнеса по созданию сайтов на Тильде.
Всеми сервисами лично я пользуюсь уже не первый год и могу их смело вам рекомендовать.
Что в статье:
Tilda Publishing — создание сайтов
Тинькофф Банк — приём платежей
Telegram, WhatsApp — общение
SIS — покупка изображений
Контур Диадок — документооборот
Google Disk — работа с файлами
Notion — онлайн записная книжка
Flaticon — иконки для сайта
CloudComments — отзывы для сайта
Reg — регистрация доменов
🔗 Читать статью на сайте: https://dmitryrybalka.ru/blog/top-10-servisov-dlya-biznesa-po-sozdaniyu-saitov
В статье под каждым сервисом поставьте, пожалуйста, свою эмоцию «👎👍🤩», чтобы я понимал, о каких сервисах рассказывать больше.
Всеми сервисами лично я пользуюсь уже не первый год и могу их смело вам рекомендовать.
Что в статье:
Tilda Publishing — создание сайтов
Тинькофф Банк — приём платежей
Telegram, WhatsApp — общение
SIS — покупка изображений
Контур Диадок — документооборот
Google Disk — работа с файлами
Notion — онлайн записная книжка
Flaticon — иконки для сайта
CloudComments — отзывы для сайта
Reg — регистрация доменов
🔗 Читать статью на сайте: https://dmitryrybalka.ru/blog/top-10-servisov-dlya-biznesa-po-sozdaniyu-saitov
В статье под каждым сервисом поставьте, пожалуйста, свою эмоцию «👎👍🤩», чтобы я понимал, о каких сервисах рассказывать больше.