Создавал сайт на своём ноутбук с разрешением hd. Картинка фона секции была ровная (ещё поставил эффект прокрутки). Если заходить с другим компьютеров с разными разрешениями (или даже таким же), то картинка прыгает и остаётся пустой фон. На фото видно, что картинка выше, чем она должна быть и там пустое место. Как сделать, чтобы картинка хотя бы примерно подстраивалась под разные типы экранов автоматически?
Работа с пользовательским позиционированием требует от вас соблюдения определенных правил. Чтобы активировать функцию пользовательского позиционирования, необходимо на вкладке «Дополнительно» в боковой панели Elementor pro.
И изменить в раскрывающемся списке галочку на «Абсолютный», чтобы активировать пользовательское позиционирование.
Как только вы это сделаете, виджет будет «плавать» в верхней части раздела, потому что он больше не занимает вертикальное пространство. Абсолютное позиционирование может быть сложным, когда дело доходит до адаптивного дизайна. Чтобы улучшить дизайн на всех устройствах, вы должны стараться максимально использовать относительные единицы при изменении ширины. Под «относительным» мы подразумеваем такие единицы, как процент или ширина обзора (VW), а не абсолютные единицы, такие как пиксели.
Нужно создавать другой раздел с картинкой для каждой версии разрешения и скрывать их в соответствии с поддержкой на вкладке «Отзывчивый». Тем не менее, это заставляет дублировать весь контент внутри, и когда необходимо внести изменения, это вызовет двойную работу.
Wordpress уже создает изображения нескольких размеров при загрузке изображения, но через функционал Elementor нет доступа к некоторым из основных размеров. Поэтому это можно сделать с помощью простых правил CSS @media, которые можно сделать вручную прямо в файл css.
Это, пожалуй, самая полезная функция, которая спасет от разбегания и появления пустоты в разных разрешениях экрана. Для работы с плагином Elementor нужно иметь средний уровень знания языка html, css и php.