Всем доброе утро и с началом новой недели!
Сегодня дам 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
В статье под каждым сервисом поставьте, пожалуйста, свою эмоцию «👎👍🤩», чтобы я понимал, о каких сервисах рассказывать больше.
Советую всем перекинуть свои сайты на NS сервера Тильды для стабильной работы:
• ns1.tildadns.com
• ns2.tildadns.com
• ns1.tildadns.com
• ns2.tildadns.com
Druk Text Wide. Скрытый шрифт в Тильде.
Он находится: Шрифты и цвета → Расширенные настройки → Druk Text Wide (самый низ списка).
Этот шрифт хорошо подходит для лендингов, где используются короткие текстовые блоки и заголовки. Отлично сочетается с большими изображениями и крупными планами товаров. Шрифт использовался в журнале Bloomberg.
Он находится: Шрифты и цвета → Расширенные настройки → Druk Text Wide (самый низ списка).
Этот шрифт хорошо подходит для лендингов, где используются короткие текстовые блоки и заголовки. Отлично сочетается с большими изображениями и крупными планами товаров. Шрифт использовался в журнале Bloomberg.
По-умолчанию раскрытые фильтры в мобильной версии.
Привет всем! Не знаю как вы, лично я до сих пор не могу смириться с маленькой кнопкой «Фильтры» в мобильной версии каталога. Уже изучил множество метрик и везде эта кнопка оказывается не популярной (возможно, плохо заметной) для людей.
Дописал небольшой CSS код, который автоматически показывает фильтры и поле поиска в мобильной версии.
Чтобы не захламлять страницы кодами, добавляйте их в «Настройки → Ещё → Пользовательские CSS-стили».
@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;
}
}
Пользуйтесь!
Думаю, многим понадобится эта небольшая доработка.
С вас лайк/реакция😉.
Привет всем! Не знаю как вы, лично я до сих пор не могу смириться с маленькой кнопкой «Фильтры» в мобильной версии каталога. Уже изучил множество метрик и везде эта кнопка оказывается не популярной (возможно, плохо заметной) для людей.
Дописал небольшой CSS код, который автоматически показывает фильтры и поле поиска в мобильной версии.
Чтобы не захламлять страницы кодами, добавляйте их в «Настройки → Ещё → Пользовательские CSS-стили».
@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)»
Размер шрифта в фильтрах десктопной и мобильной версии можете регулировать общими размерами текста в «Настройки → Шрифты и цвета → Размер текста (18-24px)»
This media is not supported in your browser
VIEW IN TELEGRAM
Страница 404 в Тильде.
Статус 404 означает, что на сайте отсутствует запрашиваемая страница.
Чаще всего мы сталкиваемся с этой ошибкой, когда удаляем страницу или меняем её адрес, при этом, не указываем переадресацию (редирект 301) на новый адрес.
Важно всегда использовать страницу 404, даже на одностраничном сайте!
Я бы выделил 2 вида 404 страницы:
1. Статичная страница с ошибкой
2. Автопереадресация на главную страницу (блок Т223)
Лично я против показа стандартных ошибок с непонятными цифрами (зачастую непонятными даже для разработчика сайтов). Любые ошибки отпугивают посетителей сайта.
На мой взгляд, лучше нестандартно описать ошибку несуществующей страницы, не спугнуть посетителей, а заинтересовать их и предложить дальнейшие действия: переход на главную страницу или каталог, показ популярных товаров, а ещё лучше, извиниться и дать небольшую скидку на свои товары или услуги.
В некоторых тематиках будет уместно использовать немного юмора (превью).
Статус 404 означает, что на сайте отсутствует запрашиваемая страница.
Чаще всего мы сталкиваемся с этой ошибкой, когда удаляем страницу или меняем её адрес, при этом, не указываем переадресацию (редирект 301) на новый адрес.
Важно всегда использовать страницу 404, даже на одностраничном сайте!
Я бы выделил 2 вида 404 страницы:
1. Статичная страница с ошибкой
2. Автопереадресация на главную страницу (блок Т223)
Лично я против показа стандартных ошибок с непонятными цифрами (зачастую непонятными даже для разработчика сайтов). Любые ошибки отпугивают посетителей сайта.
На мой взгляд, лучше нестандартно описать ошибку несуществующей страницы, не спугнуть посетителей, а заинтересовать их и предложить дальнейшие действия: переход на главную страницу или каталог, показ популярных товаров, а ещё лучше, извиниться и дать небольшую скидку на свои товары или услуги.
В некоторых тематиках будет уместно использовать немного юмора (превью).
Размытие фона под меню при скролле страницы.
Всем привет! В декабре этого года блогу будет 5 лет и с каждом годом новые идеи становится искать тяжелее, но при этом, иногда появляются интересные моменты, о которых хочется рассказать.
Сейчас хочу показать вам, как можно заблюрить контент под меню при скролле страницы.
Нам нужно: Zero Block и шейп.
Создаётся этот эффект следующим образом:
1. Создаёте меню Zero Block, размещаете в нём контент (лого, пункты меню, телефоны, кнопки)
2. Убираете фон, вместо фона добавляете шейп и растягиваете его во всю ширину экрана
3. В настройках шейпа ставите непрозрачность 90% и эффект: Background Blur 5px
4. С помощью кода фиксируете Zero Block
5. Готово! Эффект работает и на мобильных устройствах тоже!
Чтобы вы долго не искали, держите код для фиксации Zero Block (поменяйте ID блока на свой):
<style> #rec455074964 {position: fixed; top: 0px; left: 0; width:100%; z-index: 9999;} </style>
Пользуйтесь!
Всем привет! В декабре этого года блогу будет 5 лет и с каждом годом новые идеи становится искать тяжелее, но при этом, иногда появляются интересные моменты, о которых хочется рассказать.
Сейчас хочу показать вам, как можно заблюрить контент под меню при скролле страницы.
Нам нужно: Zero Block и шейп.
Создаётся этот эффект следующим образом:
1. Создаёте меню Zero Block, размещаете в нём контент (лого, пункты меню, телефоны, кнопки)
2. Убираете фон, вместо фона добавляете шейп и растягиваете его во всю ширину экрана
3. В настройках шейпа ставите непрозрачность 90% и эффект: Background Blur 5px
4. С помощью кода фиксируете Zero Block
5. Готово! Эффект работает и на мобильных устройствах тоже!
Чтобы вы долго не искали, держите код для фиксации Zero Block (поменяйте ID блока на свой):
<style> #rec455074964 {position: fixed; top: 0px; left: 0; width:100%; z-index: 9999;} </style>
Пользуйтесь!
Forwarded from CloudComments (Dmitry Rybalka)
Обновление 2.1
Прикрепление фотографий к отзывам в тарифе Премиум — максимальное доверие к отзывам!
Возможности:
• Прикрепление до 6 фотографий к каждому отзыву
• Прикрепляйте фотографии с любого устройства
• Фотографии автоматически сжимаются и быстро загружаются в отзывах
• Все фото пожизненно надёжно хранятся на серверах Yandex Cloud
• После модерации под отзывами выводятся миниатюры фотографий и при нажатии на них, открывается галерея во весь экран
Смотреть тарифные планы на сайте.
Прикрепление фотографий к отзывам в тарифе Премиум — максимальное доверие к отзывам!
Возможности:
• Прикрепление до 6 фотографий к каждому отзыву
• Прикрепляйте фотографии с любого устройства
• Фотографии автоматически сжимаются и быстро загружаются в отзывах
• Все фото пожизненно надёжно хранятся на серверах Yandex Cloud
• После модерации под отзывами выводятся миниатюры фотографий и при нажатии на них, открывается галерея во весь экран
Смотреть тарифные планы на сайте.
Размытие фона при открытии popup окна.
Выглядит довольно хорошо. Попробуйте поиграться уровнем размытия, осветлением и затемнением фона.
Код:
<style>
.t-popup.t-popup_show {
-webkit-backdrop-filter: blur(5px);
}
</style>
Где 5px — уровень размытия фона.
Как установить:
Добавить в HTML блок T123 в подвал сайта (для того, чтобы код отображался на всех страницах сайта):
Совет:
Чтобы в вашем сайте был полный порядок, я советую все CSS коды (только без <style>, </style>) добавлять в Настройки сайта → Ещё → Пользовательские CSS-стили.
Такие образом все ваши CSS стили будут храниться в одном месте!
Выглядит довольно хорошо. Попробуйте поиграться уровнем размытия, осветлением и затемнением фона.
Код:
<style>
.t-popup.t-popup_show {
-webkit-backdrop-filter: blur(5px);
}
</style>
Где 5px — уровень размытия фона.
Как установить:
Добавить в HTML блок T123 в подвал сайта (для того, чтобы код отображался на всех страницах сайта):
Совет:
Чтобы в вашем сайте был полный порядок, я советую все CSS коды (только без <style>, </style>) добавлять в Настройки сайта → Ещё → Пользовательские CSS-стили.
Такие образом все ваши CSS стили будут храниться в одном месте!
This media is not supported in your browser
VIEW IN TELEGRAM
Выравнивание текста по ширине блока.
Я увидел, что вам понравился прошлый пост с доработкой сайта с помощью CSS кода. Давайте покажу ещё одну полезную строчку кода, которой я пользуюсь очень часто.
Выравнивание текста внутри блока в Zero Block.
Реализация:
1. Добавьте текстовый блок в Zero Block
2. Задайте имя стиля к текстовому блоку: нажмите правой кнопкой на текстовый блок, выберите "Add CSS Class Name" и впишите имя стиля "zeroblock-text"
3. В блок HTML-код T123 добавьте код:
<style>
.zeroblock-text {
text-align: justify !important;
}
</style>
Сохраните. Опубликуйте. Готово!
Теперь где будет необходимо растягивать текст по ширине блока, просто добавляйте стиль "zeroblock-text".
Я увидел, что вам понравился прошлый пост с доработкой сайта с помощью CSS кода. Давайте покажу ещё одну полезную строчку кода, которой я пользуюсь очень часто.
Выравнивание текста внутри блока в Zero Block.
Реализация:
1. Добавьте текстовый блок в Zero Block
2. Задайте имя стиля к текстовому блоку: нажмите правой кнопкой на текстовый блок, выберите "Add CSS Class Name" и впишите имя стиля "zeroblock-text"
3. В блок HTML-код T123 добавьте код:
<style>
.zeroblock-text {
text-align: justify !important;
}
</style>
Сохраните. Опубликуйте. Готово!
Теперь где будет необходимо растягивать текст по ширине блока, просто добавляйте стиль "zeroblock-text".
This media is not supported in your browser
VIEW IN TELEGRAM
Две анимации у одного элемента в Zero Block.
Несколько раз у меня спрашивали, можно ли в Тильде совместить совместить стандартную анимацию и пошаговую?
Да, можно!
К посту я приложил пример появления кнопки (стандартная анимация) и увеличение кнопки при наведении (пошаговая анимация).
Как сделать 2 анимации:
1. Добавляете к элементу пошаговую анимацию
2. Создаёте стандартную анимацию на любом другом элементе и копируете её
3. Вставляете стандартную анимацию в пошаговую анимацию к основному элементу
Готово! Пользуйтесь на здоровье!
Для редактирования стандартной анимации, нужно также её создать в другом элементе и вставить в основной элемент.
Несколько раз у меня спрашивали, можно ли в Тильде совместить совместить стандартную анимацию и пошаговую?
Да, можно!
К посту я приложил пример появления кнопки (стандартная анимация) и увеличение кнопки при наведении (пошаговая анимация).
Как сделать 2 анимации:
1. Добавляете к элементу пошаговую анимацию
2. Создаёте стандартную анимацию на любом другом элементе и копируете её
3. Вставляете стандартную анимацию в пошаговую анимацию к основному элементу
Готово! Пользуйтесь на здоровье!
Для редактирования стандартной анимации, нужно также её создать в другом элементе и вставить в основной элемент.
Tilda и Zero Block | Блог Дмитрия Рыбалка pinned Deleted message