Статьи по: Редактор
Эта статья также доступна на:

Редактирование мобильной версии сайта

Вы можете отредактировать некоторые части сайта отдельно для отображения на компьютерах и смартфонах. А именно можно отдельно настроить:
горизонтальное выравнивание текста;
горизонтальное выравнивание элементов в колонках;
горизонтальное выравнивание элементов в элементах (карточках) блока-коллекции;
вертикальные отступы у блоков;
фигурные разделители блоков;
текстовый шрифт;
высоту элемента Spacer;
Flex block.

По умолчанию мобильная версия сайта создаётся и адаптируется автоматически на основе компьютерной (десктопной) версии. Однако если изменить у элемента одну из вышеупомянутых настроек на мобильной версии сайта, то эта настройка у этого конкретного элемента будет указываться отдельно для каждого устройства. То есть если в моб. редакторе, скажем, изменить выравнивание текстового элемента, выравнивание этого текстового элемента будет независимо настраиваться на компьютерной и мобильной версии сайта (изменения на компьютерной версии сайта не будут влиять на мобильную версию).

Примечание: версия сайта для смартфона – это отображение сайта на девайсах с шириной экрана от 320 до 477 пикселей. Версия для планшетов (создаётся автоматически на основе компьютерной версии) – от 478 до 991 пикселя. Компьютерная версия сайта – ширина экрана более 992 пикселей.

Горизонтальное выравнивание текста отдельно для разных устройств


Рассмотрим каким образом происходит отдельное выравнивание для разных девайсов на примере текста. Например, у вашего сайта определенный заголовок выровнен по левому краю колонки:

Соответственно, на мобильном девайсе текст выровнен так же (если изменять выравнивание на компьютерной версии сайта, изменения применяются и на мобильной версии):

Чтобы указать выравнивание отдельно для смартфонов:
Перейдите в редактор мобильной версии сайта с помощью переключателя вверху экрана:

Нажмите на необходимый текст и измените его выравнивание:

Готово! После того, как вы изменили выравнивание текста на смартфоне, выравнивание этого элемента будет производиться отдельно для компьютерной и мобильной версии сайта.

Примечание: вы можете вернуться к редактору компьютерной версии сайта и увидеть, что здесь не изменилось выравнивание, ведь вы его изменили только для смартфонов. Даже если вы измените выравнивание этого текста на комп. версии сайта, эти изменения уже не будут применены для моб. версии, поскольку именно для этого элемента выравнивание уже указывается отдельно для разных девайсов.
Подсказка: вы можете узнать больше о работе с текстом в этой инструкции.

Горизонтальное выравнивание элементов в колонках


Вы можете отдельно указать выравнивание элементов (кнопок, изображений и т.п.) по горизонтали в колонках. Для этого перейдите к мобильному редактору и откройте настройки колонки:

...также вы можете переключаться между настройками для разных девайсов внутри настроек самой колонки:

После этого укажите для мобильной версии отдельное выравнивание:

Готово! Это применимо только для моб. девайсов – на компьютерной версии выравнивание не изменится и при этом теперь горизонтальное выравнивание для этой колонки будет настраиваться отдельно для компьютерной и мобильной версии сайта.

Примечание: если в колонке указать горизонтальное выравнивание, то по умолчанию оно применится и для текстовых элементов внутри этой колонки. Однако если указать выравнивание именно для текстового элемента, то оно будет иметь бóльший приоритет, чем выравнивание колонки. Например, если контент колонки выровнен по центру, а текстовый элемент отдельно выровнен по левому краю, то этот текст будет выровнен именно по левому краю.
Обратите внимание: взаимосвязь между компьютерной и мобильной версией сайта является отдельной у каждого элемента и колонки. Например, если вы изменили горизонтальное выравнивание у колонки для отображения на смартфонах, то именно у этой колонки горизонтальное выравнивание будет осуществляться отдельно для компьютеров и смартфонов. Но при этом текстовые элементы внутри этой колонки все еще не потеряли взаимосвязь между комп. и моб. версией сайта – если изменить выравнивание текста на комп. версии сайта, это изменение будет применено и для моб. версии. И только если отдельно изменить выравнивание на моб. устройствах этого конкретного текстового элемента, тогда он будет отдельно настраиваться для смартфонов и компьютеров.

Горизонтальное выравнивание элементов в элементах коллекции


Элементы коллекции — это своеобразные карточки-колонки, имеющие общую структуру. Соответственно, если в блок-коллекцию добавить еще один элемент коллекции, он будет иметь такую же структуру, как предыдущие элементы коллекции. В свою очередь внутри элемента коллекции находятся обычные элементы (изображения, кнопки, текстовые элементы и т.п.) — для этих обычных элементов можно изменить выравнивание отдельно для компьютерной и мобильной версии сайта. Это делается аналогично предыдущему разделу инструкции:
Откройте настройки элемента коллекции (1) и перейдите к настройкам для смартфонов (2):

Выберите необходимое выравнивание, которое будет использоваться только для элементов коллекции в этом блоке при отображении на смартфонах:

Готово! Обратите внимание, что теперь выравнивание кнопок и других элементов внутри элементов этого блока-коллекции осуществляется отдельно для разных девайсов.

Вертикальные отступы у блоков


У каждого блока снизу и сверху есть внутренние отступы (padding). По умолчанию наша система автоматически адаптирует их для мобильной версии (делает несколько меньше для отображения на смартфонах). Однако вы можете указать значение необходимого вам отступа отдельно для моб. устройств. Для этого перейдите к мобильному редактору (1), наведите на нижнюю или верхнюю часть блока, зажмите левую клавишу мыши и потяните отступ вниз или вверх, чтобы изменить его размер (2). Также вы можете открыть настройки блока (3) и в настройках для мобильных устройств (4) отдельно для смартфона указать отступы в числовом значении (5):

Примечание: для данного параметра также доступна автонастройка на основе компьютерной версии.

Фигурные разделители блоков


Фигурные разделители блоков позволяют сделать границу между двумя блоками визуально более привлекательной. Чтобы настроить разделитель отдельно для мобильной и компьютерной версии сайта перейдите в мобильный редактор (1), и в этом режиме внесите изменения в настройки блока, или же откройте настройки блока (2) и в настройках для мобильных устройств (3) задайте необходимые параметры отдельно для меньших экранов (4):

Примечание: для данного параметра также доступна автонастройка на основе компьютерной версии.

Высота элемента Spacer



С помощью элемента Spacer/Пустое пространство можно визуально отделять элементы внутри блока. Чтобы настроить его высоту, вам нужно открыть настройки элемента, нажав на иконку шестерёнки:


Узнайте, как добавить пустое пространство (спейсер) на ваш сайт в этой статье.

Обновлено на: 16/02/2024

Была ли эта статья полезна?

Поделитесь своим отзывом

Отменить

Спасибо!