20 мая, 2021

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

Граница.

В данном разделе находятся настройки, связанные с границей (обводкой, 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

0

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

Создаем меню в Elementor

Создаем меню навигации в Elementor. Используем для создания меню в Elementor Виджет «Меню навигации», который доступен только в Pro-версии, ведь без навигации

Читать полностью »
Подписаться
Уведомить о
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.