20 мая, 2021

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

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

Давайте рассмотрим фон в Elementor.

Фон.

Здесь устанавливается фон для секции, фон для колонки или виджетов: цветом, изображением, видео и др.

sekcziya. stil. fon 2

Тип фона.


Предусмотрена установка четырех типов фона:

  • классический;
  • градиентный;
  • видеофон;
  • слайдшоу.
Фон. Классический.

Классический фон предусматривает заливку цветом и установку картинки.

sekcziya. stil. fon
Цвет.
sekcziya. stil. fon. klassicheskij. czvet

Выбрать цвет можно двумя вариантам: через предустановленные глобальные цвета и при помощи палитры цветов.

sekcziya. stil. fon. klassicheskij. czvet. globalnyj
Выбор предустановленного цвета
sekcziya. stil. fon. klassicheskij. czvet. palitra
Выбор цвета в палитре

Первые четыре глобальных цвета являются системными и их нельзя удалить. Другие цвета могут быть изменены при помощи все той же палитры цветов или удалены.

Управление глобальными цветами доступно по клику на иконке «шестеренки» справа.

sekcziya. stil. fon. klassicheskij. czvet. globalnyj. nastrojki 1
Настройки глобальных цветов

Или в настройках сайта.

sekcziya. stil. fon. klassicheskij. czvet. globalnyj. nastrojki 02
1
sekcziya. stil. fon. klassicheskij. czvet. globalnyj. nastrojki 03
2
sekcziya. stil. fon. klassicheskij. czvet. globalnyj. nastrojki 04
3

Добавить цвет в палитру можно нажав значок ‘ + ‘ в правом верхнем углу.

sekcziya. stil. fon. klassicheskij. czvet. globalnyj. dobavit

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

sekcziya. stil. fon. klassicheskij. czvet. prozrachnost

Чтобы сбросить цвет в палитре, нужно нажать кнопку сброса.

sekcziya. stil. fon. klassicheskij. czvet. sbros

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

Изображение.

Изображение устанавливается из библиотеки WordPress, или динамически. (Работу с динамическим контентом мы рассмотрим позже в отдельной статье). Послу выбора изображения, отобразится его миниатюра.

sekcziya. stil. fon.izobrazhenie
sekcziya. stil. fon.izobrazhenie. adaptiv
Для разных устройств вы можете выбрать разное фоновое изображение, чтобы обеспечить наиболее вид при изменении размера экрана.

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

Их всего четыре:

  • позиция;
  • привязка;
  • повтор;
  • размер.
Позиция.

Устанавливает фоновое изображение внутри относительно оси X и оси Y. Существует как предустановленные варианты, так и произвольное позиционирование.

sekcziya. stil. fon.izobrazhenie. pozicziya. predustanovlennye
Предустановленное позиционирование
sekcziya. stil. fon.izobrazhenie. pozicziya. proizvolno
Произвольное позиционирование
Привязка.

Здесь включается или отключается прокрутка фонового изображения.

Секция. Стиль. Фон. Изображение. Привязка
Прокрутка фонового изображения. Фон прокручивается вместе с секцией.
Закрепление фонового изображения. Фон остается на месте при прокрутке страницы.
Повтор.

Включает повтор изображения по вертикали и горизонтали, если оно меньше размера секции.

Покажем наглядно.

sekcziya. stil. fon.izobrazhenie. povtor. po umolchaniyu
По умолчанию
sekcziya. stil. fon.izobrazhenie. povtor. ne povotoryat
Не повторять
sekcziya. stil. fon.izobrazhenie. povtor. po gorizontali
Повтор по горизонтали
sekcziya. stil. fon.izobrazhenie. povtor. po vertikali
Повтор по вертикали

По умолчанию небольшие изображения устанавливаются в режиме Повтор.

Данные настройки очень удобны при установке бесшовных текстур.

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

besshovnaya tekstura kirpicha
Бесшовная текстура
sekcziya. stil. fon.izobrazhenie. povtor. besshovnye tekstury
Повтор бесшовной структуры. Небольшая картинка заполняет всю секцию без швов.

Эффект прокрутки.

Данные пункты позволяют настраивать эффекты поведения фона при прокрутке страницы или при взаимодействии с «компьютерной мышкой».

sekcziya. stil. fon.izobrazhenie. effekty prokrutki

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

Фон градиентный.

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

sekcziya. stil. fon.gradient
Цвет градиента.

В данном варианте фона необходимо выбрать два цвета, настроить положение, тип и угол поворота градиента. Рассмотрим настройки более подробно.

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

sekcziya. stil. fon.gradient. czvet

Регулировкой ползунков положения настраивается соотношение заливки между первым и вторым цветом.

Тип.

Поддерживается два типа градиента:

  • линейный;
  • радиальный.
sekcziya. stil. fon.gradient. tip

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

sekcziya. stil. fon.gradient. tip. linejnyj
Угол.

Данная настройка позволяет установить угол наклона прямой линии в пределах 360 градусов. Применяется только к линейному градиенту.

sekcziya. stil. fon.gradient. tip. linejnyj. povorot
Линейный градиент

Радиальный градиент создает заливку относительно точки в разные стороны, а не вдоль прямой линии.

sekcziya. stil. fon.gradient. tip. radialnyj
Радиальный градиент

Плавность перехода регулируется установкой ползунка Положение.

Позиция.

Позиция регулирует положение точки, относительно которой градиент расходится:

  • центр-центр;
  • центр-лево;
  • центр-право;
  • верх-центр;
  • верх-лево;
  • верх-право;
  • низ-центр;
  • низ-лево;
  • низ-право.
sekcziya. stil. fon.gradient. tip. radialnyj. pozicziya

Данные настройки фона применимы практически ко всем виджетам Elementor.

Для секций и колонок доступны дополнительные настройки фона, прочитать про которые вы можете статье «Секция. Вкладка Стиль.»

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

Эффекты движения в Elementor. Общие настройки виджетов Elementor.

Эффекты движения. В эффектах движения добавляются красивые эффекты прокрутки и анимации элементов. Эффекты движения включает в себя: эффекты прокрутки; прилипать; анимация при

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

Коротко об Elementor

Здравствуйте, друзья! Проведем краткий обзор самого функционального конструктора страниц для WordPress — Elementor! Итак, что же такое Elementor и для чего он

Читать полностью »
Подписаться
Уведомить о
4 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Светлана Айрапетова
1 месяц назад

Здравствуйте! Уже несколько дней борюсь с проблемой вставки фона в секцию на новой странице. На холсте всё выглядит нормально. Но после обновления и просмотра все без фона.В роли фона надо вставить картинку. Подскажите в чём может быть проблема.

4
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x
()
x

Блог о Веб-разработке на Wordpress, Elementor и Elementor Pro:
Документация. Уроки. Видео

Блог о Веб-разработке на Wordpress, Elementor и Elementor Pro:
Документация. Уроки. Видео

Регистрация

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.