Новые мобильные настройки Setka Editor: анимации и кастомный CSS

Включайте или отключайте анимацию и применяйте кастомный CSS, отличающийся от десктопного — так, чтобы читателям было удобно

В Setka Editor пользователи адаптируют верстку к мобильным экранам автоматически или настраивают руками. Мы расширили набор ручных настроек: управлять анимацией стало проще, а также появилась опция применять кастомный CSS-код независимо от десктопной верстки.

Анимация

Моушн-эффекты — один из способов привлечь внимание читателя и вовлечь его в изучение сайта. С помощью Setka Editor пользователи анимируют элементы текста, изображения и любые другие блоки контента.

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

 

Чтобы не допустить этого, используйте гибкие настройки анимации: они позволяют выключить анимацию на мобильных устройствах, при этом оставив ее в десктопном варианте верстки. Для этого достаточно активировать или деактивировать опцию «отображать анимацию на мобильном устройстве» в соответствующем меню. Вы можете отключить всё, включить всё или отображать только часть анимаций — эффект для каждого элемента настраивается отдельно. Используйте предпросмотр, чтобы понять, какой вариант работает, а какой — нет.

Кастомный CSS

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

 

Настройка фонов

Вместо того, чтобы создавать две сетки с разными фонами на каждом устройстве, используйте CSS-код.

Настройка формы объекта

Кастомный CSS-код поможет скруглить изображение на десктопе и оставить его квадратным на мобильном устройстве.

Настройка размеров шрифта

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

Настройка ширины изображения

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

Чтобы попробовать новые настройки, переключитесь в мобильный режим верстки и внесите изменения в поле с CSS. В этот момент над полем загорится зеленый переключатель — признак того, что CSS-код мобильной и десктопной версии различаются.

Попробуйте бесплатно

Демо-версия на 14 дней. Карта не требуется

Начать