16 февраля, 2022

Прокрутка фона в Elementor

Здравствуйте, дорогие друзья! Сегодня снова рассмотрим вопрос, что такое прокрутка фона в Elementor и как она работает.

Для начала создадим 4 секции на всю ширину экрана с высотой по 500px, для примера., чтобы лучше видеть эффект. В вашем проекте высота может быть другой, но эффект прокрутки обычно используют для блоков с большой высотой или с высотой на весь экран.

Теперь зайдем в настройки секции в раздел Стиль => Фон (про все настройки фона читайте здесь) и первую и третью секцию зальем сплошным фоном, а для второй и четвертой установим фоновое изображение.

Прокрутка фона в Elementor

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

Отключение прокрутки страницы в Elementor

Теперь отключим прокрутку страницы (css-свойство background-attachment).

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

prokrutka fona v elementor 002 1024x370 1
Отключение прокрутки страницы в Elementor

Устанавливаем привязку в значение Закрепить (по умолчанию прокрутка отключена)

Прокрутка фона Elementor

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

Для большей красоты при использовании прокрутки фоновым изображением заполняют весь блок (у нас в примере фоновое изображение не заливает всю секцию и по краям остаются не залитое пространство)

Заливаем фоновым изображением всю секцию

Elementor позволяет изменить настройки заливки в пару кликов, изменив размер фона на значение Перекрыть.

Заливаем фоновым изображением всю секцию

То же самое сделайте с другой секцией с изображением и посмотрите на результат.

Прокрутка фона Elementor

Если хотите прочитать о настройках фона более подробно, ознакомьтесь с нашей статьей.

У меня все) Мы показали, как зафиксировать фон на месте, т. е не прокручивать его при скролле. Спасибо за внимание!

0

Интересные статьи

Вкладка Расширенные. Общие настройки виджетов Elementor.

Вкладка Расширенные. Общие настройки виджетов Elementor. Рассмотрим свойства данный блок объединяет очень важные расширенные настройки отображения виджетов: расширенные; эффекты движения; адаптивность; атрибуты;

Читать полностью »

Announce

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.