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
This media is not supported in your browser
VIEW IN TELEGRAM
Двухуровневая анимация появления текста в Zero Block.
Как сделать, чтобы текст появлялся постепенно как бы из под нижнего слоя?
Есть два варианта создания.
1 вариант — однотонный фон блока.
Если вы используете однотонный цвет фона, то поместите над каждое слово шейп в цвет фона и добавьте анимация появления текста из под этого шейпа
2 вариант — фотография на фоне.
А что делать, если фотография добавлена на фоне блока?
Не проблема! Делите фото на 3 части и добавляйте анимацию к тексту, чтобы он появлялся из-за нижней границы каждой части фотографии.
Всё достаточно просто, а смотрится эффектно!
Шаблон страницы с 4 различными видами появления текста уже в Чате Премиум Клуба.
Как сделать, чтобы текст появлялся постепенно как бы из под нижнего слоя?
Есть два варианта создания.
1 вариант — однотонный фон блока.
Если вы используете однотонный цвет фона, то поместите над каждое слово шейп в цвет фона и добавьте анимация появления текста из под этого шейпа
2 вариант — фотография на фоне.
А что делать, если фотография добавлена на фоне блока?
Не проблема! Делите фото на 3 части и добавляйте анимацию к тексту, чтобы он появлялся из-за нижней границы каждой части фотографии.
Всё достаточно просто, а смотрится эффектно!
Шаблон страницы с 4 различными видами появления текста уже в Чате Премиум Клуба.
This media is not supported in your browser
VIEW IN TELEGRAM
Параллакс эффект с фиксированием блоков.
Этот эффект хорошо подходит, когда необходимо задать странице объём. Лучше использовать в одностраничных сайтах. Особенно интересно этот эффект сочетается с подвалом, когда предпоследний блок фиксируется, а подвал как бы "наезжает" на предпоследний блок и логически завершает страницу.
Как сделать:
1. Добавьте Zero Block
2. В Zero Block добавьте фотографию шейп относительно экрана на 100% по ширине и высоте
3. Добавьте пошаговую анимацию: скролл, от верха, дистанция = ширине блока, фиксирование
4. Продублируйте несколько раз Zero Block и поменяйте в них фотографии
5. Готово
Было полезно? С вас лайк:)
Скриншоты настроек и шаблон страницы в Премиум Клубе во ВКонтакте.
Этот эффект хорошо подходит, когда необходимо задать странице объём. Лучше использовать в одностраничных сайтах. Особенно интересно этот эффект сочетается с подвалом, когда предпоследний блок фиксируется, а подвал как бы "наезжает" на предпоследний блок и логически завершает страницу.
Как сделать:
1. Добавьте Zero Block
2. В Zero Block добавьте фотографию шейп относительно экрана на 100% по ширине и высоте
3. Добавьте пошаговую анимацию: скролл, от верха, дистанция = ширине блока, фиксирование
4. Продублируйте несколько раз Zero Block и поменяйте в них фотографии
5. Готово
Было полезно? С вас лайк:)
Скриншоты настроек и шаблон страницы в Премиум Клубе во ВКонтакте.
This media is not supported in your browser
VIEW IN TELEGRAM
Текстовый слайдер в Zero Block.
Я готовлю 3-й шаблон интернет-магазина на Тильде (скоро выставлю на продажу на сайте и бесплатно в Премиум Клуб). В блоке с отзывами захотелось использовать текстовый слайдер и после недолгих размышлений нашёл интересную реализацию, которую можно получить, использую слайдер в Zero Block.
Как сделать?
1. Заходим в Zero Block
2. Добавляем слайдер: убираем все слайды, точки и стрелки
3. Делаем высоту слайдера 1px
4. В слайды добавляем белые полоски, например, 5х100px
5. В каждом слайде добавляем текст в Settings → Image Caption
6. Настраиваем автопролистывание слайдера
Готово.
Получаем аккуратный текстовый слайдер без фотографий.
С вас лайк! Вопросы задавайте в комментариях.
Я готовлю 3-й шаблон интернет-магазина на Тильде (скоро выставлю на продажу на сайте и бесплатно в Премиум Клуб). В блоке с отзывами захотелось использовать текстовый слайдер и после недолгих размышлений нашёл интересную реализацию, которую можно получить, использую слайдер в Zero Block.
Как сделать?
1. Заходим в Zero Block
2. Добавляем слайдер: убираем все слайды, точки и стрелки
3. Делаем высоту слайдера 1px
4. В слайды добавляем белые полоски, например, 5х100px
5. В каждом слайде добавляем текст в Settings → Image Caption
6. Настраиваем автопролистывание слайдера
Готово.
Получаем аккуратный текстовый слайдер без фотографий.
С вас лайк! Вопросы задавайте в комментариях.
30 лучших постов за 2022 год.
По традиции в конце каждого года я собираю в одном месте лучшие посты из моего блога. Хороший повод увидеть, что вы пропустили и узнать больше о Тильде.
30 ссылок собраны в посте ВКонтакте.
По традиции в конце каждого года я собираю в одном месте лучшие посты из моего блога. Хороший повод увидеть, что вы пропустили и узнать больше о Тильде.
30 ссылок собраны в посте ВКонтакте.
This media is not supported in your browser
VIEW IN TELEGRAM
Анимация букв в Zero Block.
Увидел эту анимацию на зарубежном сайте и решил повторить.
Каждая буква добавляется и анимируется отдельно с эффектом Elastic Fin при наведении на шейп (овал с обводкой).
Увидел эту анимацию на зарубежном сайте и решил повторить.
Каждая буква добавляется и анимируется отдельно с эффектом Elastic Fin при наведении на шейп (овал с обводкой).
This media is not supported in your browser
VIEW IN TELEGRAM
Как вставить открытый файл PDF в Тильду?
Век живи, век учись. Нужен только Google Диск.
Инструкция:
1. Загружаем PDF файл в Google Диск
2. Два раза щёлкаем по файлу, нажимаем на меню (••• справа вверху) → Открыть в новом окне
3. Ещё раз на меню (••• справа вверху) → Встроить
4. Копируем код и вставляем на сайт на Тильде в блог T123 (Другое → HTML-код)
5. Сохраняем, публикуем страницу
Плюсы:
• Удобное хранение всех документов в одном месте
• Легко обновлять материалы и ссылки на сайте
• Файл доступен для скачивания
• Удобное управление PDF с сайта: прокрутка, приближение, отдаление
• Хорошая адаптация под мобильные устройства
• Быстрая загрузка, файл не утяжеляет страницу
• Бесплатно
Век живи, век учись. Нужен только Google Диск.
Инструкция:
1. Загружаем PDF файл в Google Диск
2. Два раза щёлкаем по файлу, нажимаем на меню (••• справа вверху) → Открыть в новом окне
3. Ещё раз на меню (••• справа вверху) → Встроить
4. Копируем код и вставляем на сайт на Тильде в блог T123 (Другое → HTML-код)
5. Сохраняем, публикуем страницу
Плюсы:
• Удобное хранение всех документов в одном месте
• Легко обновлять материалы и ссылки на сайте
• Файл доступен для скачивания
• Удобное управление PDF с сайта: прокрутка, приближение, отдаление
• Хорошая адаптация под мобильные устройства
• Быстрая загрузка, файл не утяжеляет страницу
• Бесплатно
Как составить структуру сайта на Тильде?
Всегда составляйте ч/б прототип сайта. Это позволит быстрее определиться со структурой сайта и уменьшить количество правок в финальном макете.
Видео на YouTube.
Всегда составляйте ч/б прототип сайта. Это позволит быстрее определиться со структурой сайта и уменьшить количество правок в финальном макете.
Видео на YouTube.
This media is not supported in your browser
VIEW IN TELEGRAM
Брейкпоинты в Тильде
• Что такое боейкпоинт
• Какие экрана использовать
• Советы при вёрстке в Zero Block
#madeontilda dmitryrybalka.ru
• Что такое боейкпоинт
• Какие экрана использовать
• Советы при вёрстке в Zero Block
#madeontilda dmitryrybalka.ru
Рестораны Халиф. Кейс по ребрендингу сайта на Тильде.
Для клиента всегда важен один результат — прибыль с сайта. И не всегда максимально задизайненный сайт приносит ожидаемые результаты. Иногда, нужно использовать простой и понятный инструмент для получения быстрых результатов.
Мы решили не заморачиваться с дизайном, а запустить почти шаблонный вариант сайта доставки, чтобы клиент в максимально короткие сроки начал получать заказы с сайта.
Конечно, пришлось поработать над подготовкой контента и некоторыми доработками сайта. В целом, работа не была сложной, а результатом остались довольны все.
Совет: «Не усложняйте! Ищите более простые и эффективные инструменты. Помните, что в первую очередь заказчикам нужен сайт, приносящий прибыль.»
Для клиента всегда важен один результат — прибыль с сайта. И не всегда максимально задизайненный сайт приносит ожидаемые результаты. Иногда, нужно использовать простой и понятный инструмент для получения быстрых результатов.
Мы решили не заморачиваться с дизайном, а запустить почти шаблонный вариант сайта доставки, чтобы клиент в максимально короткие сроки начал получать заказы с сайта.
Конечно, пришлось поработать над подготовкой контента и некоторыми доработками сайта. В целом, работа не была сложной, а результатом остались довольны все.
Совет: «Не усложняйте! Ищите более простые и эффективные инструменты. Помните, что в первую очередь заказчикам нужен сайт, приносящий прибыль.»
YouTube
Сделали ребрендинг сайта Халиф с помощью фото/видео контента и сайта на Тильде #madeontilda
Инструкция при подключении шрифта Google Fonts к Тильде + важное уточнение.
Инструкция по подключению Google Fonts к Тильде.
1. Заходим в Google Fonts
2. Нажимаем на шрифт и плюсами выбираем нужные начертания
3. В боковом меню справа копируем не всю ссылку на шрифт, а только прямую ссылку
4. Вставляем эту ссылку в Тильда → Настройки → Шрифты и цвета → Google Fonts
5. Ниже указываем точное название шрифта для заголовка и текста из ссылки (например: Noto Sans JP)
6. Готово
Важное уточнение.
При подключении шрифта из Google Fonts в Тильду важно указывать не точное название как в Google Fonts, а название, которое находится в самой ссылке на шрифт.
Зачастую, эти названия отличаются. В карусели фото вы можете увидеть пример того, как шрифт Noto Sans Japanese подключается к Тильде только по названию Noto Sans JP.
Лично я Google Fonts пользуюсь очень редко, но для зарубежных проектов очень выручает эта коллекция за счёт большого выбора шрифтов и открытой лицензии.
Инструкция по подключению Google Fonts к Тильде.
1. Заходим в Google Fonts
2. Нажимаем на шрифт и плюсами выбираем нужные начертания
3. В боковом меню справа копируем не всю ссылку на шрифт, а только прямую ссылку
4. Вставляем эту ссылку в Тильда → Настройки → Шрифты и цвета → Google Fonts
5. Ниже указываем точное название шрифта для заголовка и текста из ссылки (например: Noto Sans JP)
6. Готово
Важное уточнение.
При подключении шрифта из Google Fonts в Тильду важно указывать не точное название как в Google Fonts, а название, которое находится в самой ссылке на шрифт.
Зачастую, эти названия отличаются. В карусели фото вы можете увидеть пример того, как шрифт Noto Sans Japanese подключается к Тильде только по названию Noto Sans JP.
Лично я Google Fonts пользуюсь очень редко, но для зарубежных проектов очень выручает эта коллекция за счёт большого выбора шрифтов и открытой лицензии.
This media is not supported in your browser
VIEW IN TELEGRAM
Новый блок — Zero Block в попап окне.
Какие блоки использовать:
• Zero Block — дизайн попап окна
• Другое → T1093 — настройки попап Zero Block
Что можно настроить в попап окне Zero Block:
• Размытие фона
• Цвет и непрозрачность фона
• Анимация появления / закрытия
• Отключить клик у фона
• Отключить блокировку скролла
• Скрыть иконку закрытия попапа
• Открыть попап после загрузки страницы
Что можно создать в попап окне:
• Информационные попап окна
• Акционные предложения с формой в попап окнах
• Меню горизонтальные (десктоп, мобильные)
• Меню вертикальные с фиксированием
• Полноэкранные блоки с большим количеством информации
• Рекомендованные товары в попап
• И многие другие ваши идеи
Какие блоки использовать:
• Zero Block — дизайн попап окна
• Другое → T1093 — настройки попап Zero Block
Что можно настроить в попап окне Zero Block:
• Размытие фона
• Цвет и непрозрачность фона
• Анимация появления / закрытия
• Отключить клик у фона
• Отключить блокировку скролла
• Скрыть иконку закрытия попапа
• Открыть попап после загрузки страницы
Что можно создать в попап окне:
• Информационные попап окна
• Акционные предложения с формой в попап окнах
• Меню горизонтальные (десктоп, мобильные)
• Меню вертикальные с фиксированием
• Полноэкранные блоки с большим количеством информации
• Рекомендованные товары в попап
• И многие другие ваши идеи
Favicon в Тильде.
Несколько моих советов:
1. Советую создавать иконки в SVG формате, они будут отображаться намного чётче, чем PNG/ICO формат + поддерживают прозрачность
2. Основную иконку создавайте с прозрачным фоном
3. Для тёмной темы создавайте светлую иконку с прозрачным фоном
4. Для светлой / тёмной темы добавляйте под иконку цветной круг или квадрат (одна иконка должна хорошо отображаться на светлой и тёмной теме одновременно)
5. Иконку для Apple/Android создавайте в PNG формате с внутренними отступами
На SEO это не влияет, но общий визуал сайта будет приятнее!
Несколько моих советов:
1. Советую создавать иконки в SVG формате, они будут отображаться намного чётче, чем PNG/ICO формат + поддерживают прозрачность
2. Основную иконку создавайте с прозрачным фоном
3. Для тёмной темы создавайте светлую иконку с прозрачным фоном
4. Для светлой / тёмной темы добавляйте под иконку цветной круг или квадрат (одна иконка должна хорошо отображаться на светлой и тёмной теме одновременно)
5. Иконку для Apple/Android создавайте в PNG формате с внутренними отступами
На SEO это не влияет, но общий визуал сайта будет приятнее!