Как адаптировать сайт на Тильда ( тонкости адаптивной верстки )

• Приветствие и проверка звука.  

• Подготовка к эфиру: настройка и демонстрация экрана.  

• План: продолжение предыдущего эфира, верстка адаптивной версии.  

• Адаптив: перегруппировка элементов для разных разрешений.  

• Основные элементы: ширина, центровка, шрифты.  

• Проблемы с центровкой и шрифтами на разных разрешениях.  

• Настройка разрешений: 640, 480, 320.  

• Проблемы с шрифтами и отступами.  

• Использование групп для адаптации элементов.  

• Уменьшение шрифтов для разных разрешений.  

• Проблемы с дефисами и пробелами.  

• Настройка отступов и шрифтов для разных разрешений.  

• Настройка шрифтов и отступов для мобильных устройств.  

• Создание отдельных элементов для мобильных разрешений.  

• Перенос элементов за пределы экрана для мобильных устройств.  

• Центровка элементов и работа с группами.  

• Проблемы с группами и их решение.  

• Завершение работы с адаптивной версткой.  

• Назначение высоты элементов 60 пикселей и выравнивание по высоте.  

• Подрезка элементов и проверка на разных разрешениях.  

• Публикация и проверка на мобильных устройствах.  

• Использование браузера для проверки адаптивности.  

• Разные разрешения и их влияние на отображение элементов.  

• Стандарты верстки для разных разрешений.  

• Центрирование элементов на разных разрешениях.  

• Проверка и корректировка элементов для адаптивности.  

• Публикация и проверка на разных устройствах.  

• Использование сетки и направляющих для центрирования.  

• Проверка и корректировка элементов на разных разрешениях.  

• Настройка направляющих для удобства.  

• Адаптация текста и изображений для разных разрешений.  

• Проверка и корректировка кегля шрифта.  

• Использование направляющих для точного выравнивания.  

• Группировка элементов для адаптивности.  

• Выравнивание элементов по левому краю.  

• Проверка и корректировка элементов в инспекторе кода.  

• Адаптация изображений и текста для разных разрешений.  

• Проверка и корректировка положения элементов.  

• Использование адаптивных изображений и текста.  

• Финальная настройка элементов для адаптивности.  

• Проверка и корректировка отступов и позиций.  

• Проверка на разных разрешениях и устройствах.  

• Выравнивание по левому краю с отступом.  

• Настройка размеров для текста и фона.  

• Проблемы с контейнером и необходимость ручного подтягивания.  

• Контейнер слишком большой, приходится вручную подтягивать.  

• Картинка не помещается, приходится уменьшать размер.  

• Проблемы с сохранением изменений в стиле.  

• Проблемы с типографикой в адаптивных версиях.  

• Желание сохранить крупную типографику во всех версиях.  

• Настройка межстрочного расстояния и выравнивание по контейнеру.  

• Центрирование заголовка и выравнивание текста.  

• Проблемы с выравниванием по контейнеру и буквам.  

• Настройка отступов в мобильном устройстве.  

• Проверка и корректировка размеров и отступов.  

• Проблемы с заголовками и их размерами.  

• Важность одинаковой верстки для всех экранов.  

• Разные начертания шрифтов и их влияние на внешний вид.  

• Решение оставить начертание лайт для заголовков.  

• Проблемы с розовым цветом и его замена на более утонченный.  

• Создание двух колонок и их ширина.  

• Выравнивание текста относительно колонок.  

• Проблемы с изменением ширины контейнера и их решение.  

• Подрезка текста для разных разрешений.  

• Использование крупной типографики в одном блоке.  

• Подрезка для сохранения размера шрифта.  

• Задаем расстояние между блоками в 40 пикселей.  

• Используем вертикальную направляющую для выравнивания.  

• Уменьшаем шрифт с 70-го до 60-го кегля.  

• Уменьшаем отступы до 80 пикселей.  

• Оставляем декоративные элементы без изменений.  

• Растягиваем заголовок для лучшего восприятия.  

• Сохраняем изменения и контролируем отступы.  

• Используем анимацию для мобилок в Tilda.  

• Уменьшаем шрифты для компактности.  

• Группируем элементы для удобства.  

• Проверяем расположение текста относительно крайних линий.  

• Уменьшаем расстояние между блоками до 30 пикселей.  

• Адаптивная верстка заключается в перегруппировке элементов.  

• Не нужно кардинально менять размеры элементов.  

• Важно учитывать размер шрифта для разных разрешений.  

• Завершаем трансляцию и обещаем выложить запись в Instagram.  

• Показываем, как верстка работает на мобильном устройстве с анимацией.