Тильда позволяет создавать сайты, которые выглядят эффектно и аккуратно на любом экране. Как использовать возможности стандартных блоков и функции Zero Block для адаптивной вёрстки — на мастер-классе рассказывает Максим Ширко.
На вебинар разберем:
00:00:00 Введение
00:03:26 Как работает сетка базовых блоков?
00:09:13 Ошибка при работе с высотой блока
00:12:46 Частая ошибка с блоком меню
00:15:13 Не делайте все блоки на весь экран
00:16:50 Как работает контейнер?
00:22:21 Ответы на вопросы
00:28:02 Как работает Grid контейнер?
00:41:54 Элементы для маленьких экранов
00:42:24 Как работает Window контейнер?
00:51:27 Ответы на вопросы
00:55:21 Совместное использование Zero Block и базового блока
00:57:37 Ответы на вопросы
00:59:23 Особенности мобильной верстки
01:08:48 Ответы на вопросы
Ближайшие вебинары: http://webinars.tilda.cc
👉 Создать сайт на Tilda: https://tilda.cc/ru
🤩 Онлайн-журнал для дизайнеров, маркетологов и предпринимателей Tilda Education: https://tilda.education
Подписывайтесь на нас в соцсетях:
◾ Telegram: https://t.me/tildanews
◾ VK: https://vk.com/tildapublishing
◾ Instagram*: https://www.instagram.com/tildapublishing
Оставить отзыв о работе на платформе Tilda: https://tilda.cc/ru/otzy
* Компания Meta Platforms Inc., владеющая социальными сетями Facebook и Instagram, по решению суда от 21.03.2022 признана экстремистской организацией, ее деятельность на территории России запрещена.
На вебинар разберем:
00:00:00 Введение
- Обсуждение особенностей верстки в стандартных блоках, ZeroBlock и мобильных версиях.
- Вебинар предназначен для тех, кто уже знаком с Tilda.
00:03:26 Как работает сетка базовых блоков?
- Обсуждение стандартных блоков и сетки в Tilda.
- Примеры блоков с различными настройками ширины и отступов, знакомство с принципом 12 колонок.
- Ошибки в выравнивании блоков.
- Почему важно выравнивать блоки?
- Включение 12-колоночной сетки
- Пример выравнивания блоков по сетке.
00:09:13 Ошибка при работе с высотой блока
- Обложка на сайте: настройка высоты.
- Первый экран должен содержать важную информацию;
00:12:46 Частая ошибка с блоком меню
- О параметре высоты 100vh.
- Важно следить за процентным соотношением высоты блока и меню.
00:15:13 Не делайте все блоки на весь экран
- Не рекомендуется использовать высоту 100% для всех блоков, кроме первого экрана.
- О проблемах с отображением на экранах с разной высотой.
- Для всех блоков, кроме первого, лучше использовать фиксированную высоту в пикселях.
00:16:50 Как работает контейнер?
- Некоторые блоки, такие как карточки товаров, могут растягиваться на 100% экрана;
- Старайтесь минимизировать контраст между блоками на всю ширину экрана и блоками в сетке.
- Текстовые блоки нельзя растянуть на 100% ширины.
00:22:21 Ответы на вопросы
- Разные блоки на сайте могут иметь разную ширину.
- Визуальный контраст помогает сгладить различия.
- Zero block позволяет работать с сеткой и стандартными блоками.
- Как оформлять отступы по бокам.
00:28:02 Как работает Grid контейнер?
- Какие контейнеры есть в Zero Block?
- Подключите window-контейнер, чтобы элементы меняли размер в зависимости от окна браузера.
- Важно правильно работать с сеткой и попадать в колонки.
- В настройках Artboard можно установить высоту Zero Block в пикселях или процентах.
- Безопасная высота для большинства устройств.
- Строка состояния Windows и браузера уменьшает доступную высоту экрана.
- Не стоит увеличивать высоту Zero Block выше 550 пикселей.
- В Tilda используются пороговые значения для адаптивной верстки.
- Важно учитывать ширину колонок при создании сайта.
00:41:54 Элементы для маленьких экранов
- Элементы для маленьких экранов можно обрезать.
- Это позволяет контенту быть фокусом на маленьких экранах.
- Важно не обрезать фотографии или текст.
00:42:24 Как работает Window контейнер?
- Как сделать так, чтобы элементы расширялись на всю ширину экрана?
- Переключение на window-контейнер для резиновой верстки.
- Пример использования window-контейнера для фиксированного размещения элементов.
- Как равномерно распределить элементы для предотвращения наслоения?
- Проблемы часто возникают из-за неправильного сочетания элементов.
- Примеры сайтов с фиксированными элементами и анимацией.
00:51:27 Ответы на вопросы
- Возможность указывать ширину элементов в процентах.
- Важно тестировать на разных экранах для точного предвидения.
00:55:21 Совместное использование Zero Block и базового блока
- Можно сочетать стандартные блоки с Zero Block.
- Важно следить за выравниванием элементов в колонках.
- Аккуратность в верстке улучшает восприятие сайта.
00:57:37 Ответы на вопросы
- Увеличение загрузки сайта: Google PageSpeed
- Важно учитывать размер картинок и сложность анимации.
- От чего зависит скорость загрузки сайта?
00:59:23 Особенности мобильной верстки
- Пример с обложкой: настройка отображения блока только на десктопах.
- Проблемы с отступами между блоками и их настройка для мобильных версий.
- Можно ли настроить отступы отдельно для десктопов и мобильных версий?
- Zero Block позволяет управлять данными и верстать по своему усмотрению.
- Различие между резиновой версткой для десктопов и фиксированной версткой для мобильных версий.
- Пример использования grid-контейнера для мобильных версий.
01:08:48 Ответы на вопросы
- Проблема с адаптацией и масштабированием в мобильной версии.
- Проблемы с адаптацией под разные разрешения и устройства.
- Проблемы с отображением шрифтов на китайских устройствах
- Рекомендации по использованию размеров шрифтов популярных сайтов для мобильной версии.
- Важность создания разных дизайнов для мобильной и десктопной версий.
Ближайшие вебинары: http://webinars.tilda.cc
👉 Создать сайт на Tilda: https://tilda.cc/ru
🤩 Онлайн-журнал для дизайнеров, маркетологов и предпринимателей Tilda Education: https://tilda.education
Подписывайтесь на нас в соцсетях:
◾ Telegram: https://t.me/tildanews
◾ VK: https://vk.com/tildapublishing
◾ Instagram*: https://www.instagram.com/tildapublishing
Оставить отзыв о работе на платформе Tilda: https://tilda.cc/ru/otzy
* Компания Meta Platforms Inc., владеющая социальными сетями Facebook и Instagram, по решению суда от 21.03.2022 признана экстремистской организацией, ее деятельность на территории России запрещена.