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

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

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

Нажмите Preview post в правой панели для того, что бы включить предварительный просмотр поста. В левом фрейме –  desktop-версия страницы, в правом – мобильная версия. Начните уменьшать ширину окна браузера и в верхнем фрейме появится переключатель Desktop / Mobile. Инструмент позволяет увидеть, как адаптируется верстка при сужении ширины экрана.

 

 

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

Для изменения порядка следования колонок, переключитесь в меню Grid, нажмите на троеточие в верхнем меню, и оно раскроется вниз. В Grid mobile layout выберите reverse, чтобы колонки следовали в обратном порядке и правый столбец шел раньше левого. Режим matrix выстроит все колонки сетки в два столбца.

 

 

 

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

 

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

Фоновое изображение

Если фоновое изображение растянуто по всей ширине поста или колонки для desktop-версии вашего сайта, на экране мобильного устройства оно будет смотреться непропорционально большим. В настройках редактора вы можете отключить отображение фонового изображения для мобильной версии в разделе Background > Show background on mobile > Off.  В то же время, если вы отключите фоновое изображение или заливку под текстом, цвет которого совпадает или приближен к дефолтному цвету фона страницы, текст перестанет быть виден в мобильной версии сайта.  

 

backround_on_mobile.png

 

 

Видео

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

 

 

Эмбеды из Facebook

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