VK Вебинары (кастомный)
Дизайн

Тонкости адаптивной верстки на Тильде: мастер-класс

Тильда позволяет создавать сайты, которые выглядят эффектно и аккуратно на любом экране. Как использовать возможности стандартных блоков и функции Zero Block для адаптивной вёрстки — на мастер-классе рассказывает Максим Ширко.

На вебинар разберем:

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 признана экстремистской организацией, ее деятельность на территории России запрещена.