Редактор постов Верстка поста для мобильных устройств

Верстка поста для мобильных устройств

О возможностях настройки стилей поста для мобильных устройств вы можете узнать в разделе Style Manager.

Просмотр контента на мобильных устройствах

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

Screen_Shot_2019-07-04_at_12.53.49.png

 

Автоматическая адаптация контента для мобильных устройств

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

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

Чтобы контент поста не прилипал к краям мобильного браузера, к нему автоматически добавляется отступ величиной 10px с обеих сторон контейнера поста. 

Дополнительные настройки для мобильного отображения контента

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

Для этого для выбранного элемента необходимо переключиться в режим мобильных настроек в верхней панели редактора:

Screen_Shot_2019-07-05_at_17.25.28.png

Доступные настройки:

 

  • цвет;
  • нижний отступ;
  • внутренний отступ;
  • выравнивание (горизонтальное и вертикальное);
  • отображение таблиц. Можно выбрать отображение таблиц на мобильных устройствах со скроллом, списком (когда колонки таблицы становятся строчками), карточками со скроллом и карточками без скролла.
  • отображение сеток. Можно выбрать обычное (когда колонки сеток будут в посте идти одна за другой), обратное (меняется порядок колонок сеток) или матричное (когда колонки сеток идут по две в ряд).

Набор мобильных настроек в верхней панели редактора зависит от того, какой элемент сейчас находится у вас в фокусе.

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

Screen_Shot_2019-07-05_at_17.37.37.png

 

Возможные проблемы отображения контента на мобильных устройствах и способы их устранения

Видео

Видео с отключенной опцией Responsive embed в мобильной версии не будут адаптироваться под ширину экрана. Для того, чтобы разрешить растягивание видеоэмбеда по ширине, во вкладке Embed > Responsive embed установите значение On.  

 

 

Эмбеды из Facebook

Эмбед-коды некоторых сторонних сервисов могут некорректно отображаться на странице поста. Это связано с тем, что внутрь контейнера <iframe></iframe> помещается независимый документ со своими предустановленными значениями атрибутов. При установке режима Responsive embed – On, содержимое такого эмбеда с целью сохранения пропорций обрезается с одной стороны. В данном случае, при растягивании эмбеда по ширине экрана, мы советуем проверить в режиме предварительного просмотра как будет выглядеть содержимое на странице поста в мобильной версии.