Корректировка мобильной версии сайта
Тильда автоматически подстраивает сайт для просмотра на планшетах, смартфонах, нетбуках, ноутбуках и компьютерах.
Дополнительно можно изменить размеры отступов между блоками для мобильных, настроить диапазон видимости блока на разных устройствах, сделать свою адаптивную версию с помощью редактора Zero Block либо отключить адаптивность сайта.
Как сделать разные версии блока для компьютера и мобильных
Как поменять величину отступов для мобильных
Как сделать свою версию для мобильных с помощью редактора Zero Block
Как отключить подстройку сайта для разных экранов
Диапазон видимости на устройствах
Функция, которая определяет, на каких устройствах будет виден данный блок, а на каких нет. Есть в настройках каждого блока.
Зачем нужно и как это работает
Если определенный блок (например, обложка) хорошо выглядит на компьютере, но на экране мобильного отражается плохо, вы можете установить диапазон видимости данного блока 980 px и выше. Это будет десктопная версия блока, она перестанет отображаться на мобильных телефонах.
Затем нужно скопировать этот блок и настроить его внешний вид специально для мобильных (поменять фотографию, размер шрифта и т. д). Этому блоку задайте диапазон видимости от 0 до 980px. Это будет мобильная версия блока.
Таким образом, на компьютере пользователь будет видеть десктопную версию, а на мобильных устройствах — мобильную.
Диапазон (разные значения параметров) нужен, чтобы при необходимости вы могли настроить внешний вид блока для какого-то конкретного устройства, выбрав разрешение. Например, если блок плохо отображается именно на планшете или на определенной модели телефона.
Нет необходимости менять диапазон для всех блоков. Настройку можно сделать только для тех блоков, где неудачно обрезается фотография, или если выбранный блок не подходит для мобильной версии.
Создание адаптивного сайта
который будет корректно и точно отображаться на любых устройствах!
Создать адаптивный сайт самому можно на конструкторе сайтов «Tilda Publishing»
Тильда автоматически подстроит сайт для просмотра на планшетах, смартфонах, нетбуках, ноутбуках и компьютерах.
Разработка адаптивных сайтов
Tilda Publishing предлагает не просто получить сайт таким, каким вы его хотите видеть, но стать обладателем ресурса с подвижным веб-дизайном. Пользователям будет удобно просматривать его с любых экранов вне зависимости от формата и разрешения. И ни один клиент не пройдёт мимо нужной ссылки!
Как сделать отображение разных блоков для мобильной и десктопной версии?
Это можно реализовать с помощью настройки диапазона видимости.
Создайте разные блоки: одни для мобильной версии, другие — для десктопной.
На блоках для мобильных перейдите в «Настройки» и в разделе «Диапазон видимости на устройствах» установить значение от 0 до 980px. На блоках для десктопов — установите значение от 980px до Max.
Подробнее о диапазоне видимости в Справочном центре.
Похожие вопросы
- Как добавить ссылку на конкретное место на странице (якорь)?
- Как добавить свой HTML, CSS или Javascript-код?
- Как добавить кнопку?
- Как сделать всплывающее окно?
- Как добавить видео?
Мобильная версия на Тильде
Стандартные блоки Tilda автоматически подстраиваются под мобильные устройства: планшеты и смартфоны. Но выглядит это не всегда эстетично. При адаптации у каждого элемента Тильды прописаны обязательные функции. Заголовок уменьшается на X пикселей, текстовый блок становится 16 кеглем, а картинка автоматически центрируется, как и на десктопной версии.
Если отображение элементов на компьютере устраивает, то мобильная версия выглядит некрасиво. Заголовок стал маленьким, а текст под ним теперь невозможно прочитать. Появилась дырка между текстом и кнопками. А фотография отцентрировалась посередине и персонаж пропал из зоны видимости.
Как я работаю над такими проблемами
Самый простой способ для опытного дизайнера на Тильде — создать Zeroblock.
Это специальный блок, где вручную проставляются характеристики для каждого элемента в каждом разрешении экрана. Такой подход хорош тем, что дизайнер может добавлять элементы, не предусмотренные стандартными блоками: иконки, дополнительные текстовые блоки, кнопки и поля для ввода в любом количестве.
Но есть и минусы у Zeroblock. Во-первых, клиент уже не отредактирует этот блок, если захочет изменить текст или дополнить описание. Без навыков работы на Тильде он не справится, как со стандартным блоком. Второй минус — это цена и сроки. Ведь стандартный блок подгоняется автоматически, и дизайнер задает только общие характеристики: загружает 1 картинку, задает цвет шрифта и ссылку кнопки. Работая в Zeroblock, дизайнер проставляет характеристики и положение каждого элемента на 5 разрешениях монитора: десктоп (большой монитор или ноутбук), горизонтальный и вертикальный планшет и 2 размера смартфона.
Другой способ — создать стандартный блок под необходимую ширину экрана
Этот способ подходит, если отображение сайта страдает только на 1 из 5 устройств. Например на ноутбуке и компьютере сайт выглядит эстетично, а на смартфоне требуются изменения. Например, требуется отцентрировать, уменьшить текст и загрузить картинку, где персонаж будет расположен по центру на смартфоне. Для этого создается дополнительный стандартный блок, где настраиваются эти характеристики и параметры видимости.
Что нужно знать заказчику
Тильда рекламирует себя, заявляя о полной адаптивности и отсутствии проблем с отображением на мобильных устройствах. Но штатная адаптация подойдет только тем заказчикам, которых не волнует эстетика. Если задача состоит в том, чтобы сделать удобный и адаптивный сайт, уточняйте у дизайнера возможность проработки мобильной версии. Не у всех дизайнеров эта функция включена в стоимость.
Озвучивая вам цену за сайт, я обязательно включаю в него адаптив сайта. Все больше людей пользуются смартфонами и планшетами, совершают покупки и заказывают услуги с этих устройств. Делать сайт без мобильной версии — пустить деньги на ветер.