Отображение сайтов на мобильных устройствах
Все веб-сайты, созданные на Weblium, полностью адаптивны, поэтому вы можете работать только с десктопной версией своего сайта, не беспокоясь о том, как он будет выглядеть на мобильных устройствах. Наш конструктор делает сайты для мобильных устройств в автоматическом режиме.
В этой статье мы расскажем об основных принципах отображения различных элементов и блоков на мобильных устройствах.
Отступы и шрифты на сайтах высчитываются автоматически. Например, отступы в 90px остаются такими же на мобильных, а если они больше, на маленьких экранах они подстраиваются пропорционально.
То же самое и со шрифтами: заголовки остаются пропорционально большими и на меньших экранах.
Шапка сайта — это верхний блок на сайте, который обычно используется для построения навигации. Детальнее ознакомиться с функционалом шапки вы сможете в статье Настройки шапки сайта.
Все компоненты шапки в мобильной версии сайта переходят в так называемое бургер-меню. Так как большие меню навигации могут занимать слишком много места на мобильном телефоне, или наоборот, они могут быть слишком маленькими, чтобы их можно было прочитать или нажать на нужную ссылку, всё содержимое шапки (кнопки, меню навигации, иконки социальных сетей) скрыто в бургер-меню, пока пользователь не развернёт его.
Например, вот как шапка сайта выглядит на десктопном устройстве:
А вот как она будет преображена в мобильной версии:
После нажатия на иконку меню вы увидите все элементы, которые находятся в шапке:
Подсказка: фон бургер-меню — это текущий цвет фона для шапки сайта. Даже если шапка сайта прозрачна, цветом фона будет предыдущий заданный цвет шапки.
Все блоки с несколькими компонентами — коллекции, списки, галерея — будут выглядеть вертикальными на меньших экранах. Порядок этих элементов сохраняется и на мобильной версии — мы считываем компоненты слева-направо, только располагаем их вертикально.
Например, так блок с элементами коллекции выглядит на десктопном устройстве:
А вот как он будет выглядеть в мобильной версии:
Примечание: пустые колонки и коллекции не отображаются на мобильных.
Каждая строка таблицы преобразуется в отдельную карточку. Колонки в шапке таблицы отображаются справа, а их содержимое, соответственно, слева.
Вот как будет выглядеть таблица в десктопной версии:
И вот как будет выглядеть эта же строка на мобильных устройствах:
Подсказка: обратитесь к статье Добавление таблицы, чтобы детальнее узнать о её настройках.
Если вы хотите скрыть определённый блок на сайте от показа на мобильных устройствах, обратитесь к статье Скрытие блока для мобильных устройств.
В этой статье мы расскажем об основных принципах отображения различных элементов и блоков на мобильных устройствах.
Отступы и шрифты на мобильных
Отступы и шрифты на сайтах высчитываются автоматически. Например, отступы в 90px остаются такими же на мобильных, а если они больше, на маленьких экранах они подстраиваются пропорционально.
То же самое и со шрифтами: заголовки остаются пропорционально большими и на меньших экранах.
Отображение шапки сайта на мобильных устройствах
Шапка сайта — это верхний блок на сайте, который обычно используется для построения навигации. Детальнее ознакомиться с функционалом шапки вы сможете в статье Настройки шапки сайта.
Все компоненты шапки в мобильной версии сайта переходят в так называемое бургер-меню. Так как большие меню навигации могут занимать слишком много места на мобильном телефоне, или наоборот, они могут быть слишком маленькими, чтобы их можно было прочитать или нажать на нужную ссылку, всё содержимое шапки (кнопки, меню навигации, иконки социальных сетей) скрыто в бургер-меню, пока пользователь не развернёт его.
Например, вот как шапка сайта выглядит на десктопном устройстве:
А вот как она будет преображена в мобильной версии:
После нажатия на иконку меню вы увидите все элементы, которые находятся в шапке:
Подсказка: фон бургер-меню — это текущий цвет фона для шапки сайта. Даже если шапка сайта прозрачна, цветом фона будет предыдущий заданный цвет шапки.
Отображение блоков с несколькими компонентами на мобильных устройствах
Все блоки с несколькими компонентами — коллекции, списки, галерея — будут выглядеть вертикальными на меньших экранах. Порядок этих элементов сохраняется и на мобильной версии — мы считываем компоненты слева-направо, только располагаем их вертикально.
Например, так блок с элементами коллекции выглядит на десктопном устройстве:
А вот как он будет выглядеть в мобильной версии:
Примечание: пустые колонки и коллекции не отображаются на мобильных.
Отображение таблицы на мобильных устройствах
Каждая строка таблицы преобразуется в отдельную карточку. Колонки в шапке таблицы отображаются справа, а их содержимое, соответственно, слева.
Вот как будет выглядеть таблица в десктопной версии:
И вот как будет выглядеть эта же строка на мобильных устройствах:
Подсказка: обратитесь к статье Добавление таблицы, чтобы детальнее узнать о её настройках.
Если вы хотите скрыть определённый блок на сайте от показа на мобильных устройствах, обратитесь к статье Скрытие блока для мобильных устройств.
Обновлено на: 05/12/2023
Спасибо!