7 ноября, 2020

Секция. Вкладка Стиль.

Секция Элементора. Стиль.

sekcziya. stil

Данный раздел, как Вы уже догадались, отвечает за визуальное оформление секции: размер и тип шрифтов, фоны, границы и др.

Вкладка стили включает в себя следующие настройки:

  • фон;
  • перекрытие фона;
  • граница;
  • разделитель секции;
  • типографика.

Фон.

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

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
Видео-фон.

Данная настройка отвечает на назначение в качестве фона секции видео-файла.

Ссылка на видео.

Устанавливает ссылку на видео-фон:

  • youtube;
  • vimeo;
  • ссылка на фал на локальном хостинге.

Сами разработчики рекомендуют использовать для видеофайлов расширение mp4.

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

Время начала.
sekcziya. stil.video fon.vremya nachala

Устанавливает время, с которого видео-фон начнет воспроизводиться.

Время окончания.
sekcziya. stil.video fon.vremya okonchaniya

Устанавливает время окончания воспроизведения фонового видео-файла.

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

Проиграть единожды.
sekcziya. stil.video fon.proigrat edinozhdy

Видео проиграется только один раз.

Проиграть на мобильных.
sekcziya. stil.video fon. proigrat na mobilnyh

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

Резервный фон.
sekcziya. stil.video fon.rezervnyj fon

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

Слайд-шоу.

Устанавливает на фон слайд-шоу из картинок.

sekcziya. stil.fon. slajd shou

Изображения выбираются из стандартной медиа-библиотеки WordPress.

Дополнительно настраивается длительность и тип перехода, зацикливание пролистывания и положение слайдов.

Эффект Кена Бернса.

Обратите внимание на данную настройку. Она позволяет создать впечатление, что камера перемещается по объекту (панорамирование) или удаляется и приближается к нему (масштабирование).

Перекрытие фона.

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

Прозрачность.

Настройки аналогичны настройкам основного фона, кроме одного — появилась настройка прозрачности, которая отвечает за прозрачность перекрывающего фона.

Пример.

besshovnaya tekstura kirpicha
Изображение для основного фона
abstract
Изображение для перекрывающего фона
sekcziya. stil. perekrytie fona
Результат перекрытия одного фона другим

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

Режим наложения.

Позволяет выбрать готовые фильтры наложения (пользуюсь редко).

sekcziya. stil. perekrytie fona. rezhim nalozheniya

Граница.

В данном разделе находятся настройки, связанные с границей (обводкой, border’ом) секции.

Сюда входят:

  • тип границы;
  • скругление углов;
  • тень объекта (в данном случае секции)
sekcziya. stil.granicza.obshhee

Тип границы.

Элементор поддерживает создание границ пяти (5) типов, хотя в html их немного больше:

  • сплошная;
  • двойная;
  • точечный пунктир;
  • штриховой пунктир;
  • выпуклость.
sekcziya. stil.granicza.tip

Покажем внешний вид каждой границы на примере внутренней секции, настройки границ которой идентичны основной секции, колонкам и всем виджетам Elementor.

sekcziya. stil.granicza.tip. vse tipy

Названия типов границ говорят сами за себя, поэтому что-либо разъяснять подробнее не имеет смысла.

Толщина.

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

sekcziya. stil.granicza.tip. tolshhina

По умолчанию толщина границы устанавливается на всю секцию путем ввода числового значения в любом поле. Чтобы установить границу для какой-то определенной стороны секции, нужно кликнуть на значке «цепочки» справа (обозначает связанные настройки, т. е. настройки одного параметра автоматически применяются ко всем параметрам), что даст возможность редактировать толщину границы для нужной стороны по отдельности.

sekcziya. stil.granicza.tip. tolshhina02

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

sekcziya. stil.granicza.tip. tolshhina. adaptiv
sekcziya. stil.granicza.tip. tolshhina. desktop
Толщина границы для PC
sekcziya. stil.granicza.tip. tolshhina. tablet
Толщина границы для Tablet

Цвет.

Цвет границы устанавливается через хорошо знакомую палитру цветов Elementor.

sekcziya. stil.granicza.tip. czvet

Скругление углов.

Данная настройка устанавливает css свойство border-radius, отвечающее за скругление углов.

Скругление можно установить как в абсолютных, так и в относительных единицах:

  • в процентах %;
  • в пикселях px.
sekcziya. stil.granicza.tip. skruglenie uglov. ediniczy

Для верха, низа, правого и левого угла возможно установить различную величину скругления.

sekcziya. stil.granicza.tip. skruglenie uglov

Имейте ввиду, что если не указать толщину и цвет границы, то вы не увидите скругления углов

Тень объекта.

Данный пункт отвечает за css-свойство box-shadow, т. е. отбрасывание тени секцией, колонкой или виджетом Elementor.

sekcziya. stil.granicza.tip.ten obekta

Тень объекта включает следующие настройки:

  • цвет;
  • горизонтальное смещение;
  • вертикальное смещение;
  • размытие;
  • размах;
  • положение.
sekcziya. stil.granicza.tip.ten obekta.nastrojki

Регулируется каждая из них при помощи горизонтальных ползунков. Все настройки, кроме Размытия, регулируются в пределах от -100 до +100.

Рассмотрим каждую настройку отдельно.

Цвет.

Устанавливается при помощи стандартной палитры Elementor.

Горизонтальное смещение (x-offset).

Устанавливает смещение тени по оси X относительно элемента. Можно устанавливать отрицательное и положительное значение.

sekcziya. stil.granicza.ten.gorizontalnoe smeshhenie polozhitelnoe
Горизонтальное смещение тени положительное
sekcziya. stil.granicza.ten.gorizontalnoe smeshhenie otriczatelnoe
Горизонтальное смещение тени отрицательное
Вертикальное смещение (y-offset).

Устанавливает смещение тени относительно оси Y. Положительное значение смещает тень вниз, отрицательное — вверх.

sekcziya. stil.granicza.ten.vertikalnoe smeshhenie polozhitelnoe
Вертикальное смещение тени положительное
sekcziya. stil.granicza.ten.vertikalnoe smeshhenie otriczatelnoe
Вертикальное смещение тени отрицательное
Размытие (blur).

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

sekcziya. stil.granicza.ten.raziytie01
Радиус размытия 10px
sekcziya. stil.granicza.ten.raziytie02
Радиус размытия 56px

Размах.

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

sekcziya. stil.granicza.ten.razmah01
Размах 10px
sekcziya. stil.granicza.ten.razmah02
Размах 25px

Положение.

Устанавливает параметры отображения тени:

  • внутренняя;
  • внешняя.
sekcziya. stil.granicza.ten.vneshnyaya
Внешняя тень
sekcziya. stil.granicza.ten.vnutrennyaya
Внутренняя тень

Наглядные настройки тени в элементоре на изображении с сайта html5book.ru ниже.

box shadow

Разделитель секции.

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

sekcziya. stil.razdelitel sekczii. tipy

На данный момент имеется 18 типов разделителей:

  • горы;
  • капли;
  • облака;
  • зигзаг;
  • пирамиды;
  • треугольник;
  • треугольник ассиметричный;
  • наклон;
  • прозрачный наклон;
  • прозрачный вентилятор;
  • кривая;
  • ассиметричная кривая;
  • волны;
  • волнистая кисть;
  • волнистый узор;
  • стрелка;
  • расщепление;
  • книга.

Разделитель секции устанавливается отдельно для низа блока и для верха. Возможно разное комбинирование разделителей вверху и внизу.

При выборе типа разделителя появляются более подробные настройки разделителя.

sekcziya. stil.razdelitel sekczii. nastrojki

Цвет разделителя устанавливается при помощи уже хорошо знакомой палитры Elementor.

sekcziya. stil.razdelitel sekczii. gory
Разделитель секции. Горы.

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

Типографика.

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

Можно настроить:

  • цвет заголовка;
  • цвет текста;
  • цвет ссылки;
  • цвет ссылки при наведении;
  • выравнивание текста.

Цвет настраивается при помощи хорошо знакомой палитры Elementor.

0

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

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

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

Читать полностью »
Подписаться
Уведомить о
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
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.