Web5X Блог

Блог о создании сайта, конструкторе сайтов

Web5X Блог

Блог о создании сайта, конструкторе сайтов

Поиск по блогу

Адаптивные фоновые изображения и границы

Обновлено: 20.10.2019
0 комментариев
адаптивный фон в конструкторе сайта elementor

Конструктор сайтов Elementor позволяет пользователям иметь полный контроль над элементами управления фоновыми изображениями на настольных, планшетных и мобильных устройствах. Этот элемент управления включает в себя настройки управления фоновыми изображениями (изображение, положение, вложение, повтор и размер) на мобильных устройствах.

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

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

Свое фоновое изображение и позиция

С помощью функции управления позицией фонового изображения вы можете вручную установить желаемую позицию фона на оси X и Y. Таким образом, теперь у вас есть возможность установить точное выравнивание для фона.

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

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

Адаптивная граница элемента

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

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

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

Нет больше этих странных "осиротевших границ" на мобильном телефоне!

Остались вопросы?
Листай ниже или клик по ссылке выше. Там можно задать вопрос или почитать комментарии других.
Написать комментарий

0 комментариев

Оставьте первый комментарий