4 марта, 2021

Заголовок

zagolovok

Виджет «Заголовок» относится к базовым виджетам Elementor, так как он один из основополагающих при создании любой страницы и используется очень часто. Данный виджет применяется для установки заголовков для различных блоков страницы или других виджетов (например, совместно с плагином Текстовый редактор).

Настройки Заголовка, как и у почти всех виджетов Elementor, подразделяются на три больших блока:

  • содержимое;
  • стиль;
  • расширенные.
obshhie nastrojki vidzhetov

Рассмотрим более подробно каждый раздел.

Вкладка Содержимое.

Содержимое.

Содержимое отвечает за основные настройки текста самого заголовка включает следующие пункты:

  • заголовок;
  • ссылка;
  • размер;
  • HTML-тег;
  • выравнивание.
zagolovok soderzhimoe

Заголовок.

zagolovok.zagolovok

Состоит из текстового поля, в которое вводится текст заголовка. Справа вверху в поле заголовка есть иконка «Динамические теги», которое отвечает за динамическую подстановку заголовка. Динамические теги мы рассмотрим в отдельной статье.

Ссылка.

zagolovok soderzhimoe.ssylka

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

Поле «Ссылка» имеет дополнительные параметры, которые открываются по клику на значок шестеренки справа от поля.

zagolovok soderzhimoe.ssylka.dopolnitelnye parametry
Открыть в новом окне.

Является ничем иным, как атрибутом ссылки target = «_blank», выведенным в настройки для удобства. Банально открывает ссылку заголовка, если она назначена, в новом окне.

Добавить nofollow.

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

Произвольные атрибуты.

Для других атрибутов разработчики предусмотрели специальное поле, в которое эти атрибуты прописываются в формате ключ|значение.

Размер.

zagolovok soderzhimoe.razmer

Устанавливается размер заголовка. имеет 6 значений.

  • по умолчанию (30px);
  • маленький (15px);
  • средний(19px);
  • большой(29px);
  • огромный(39px);
  • гигантский(59px).
zagolovok soderzhimoe.razmer.vse razmery

HTML-тег.

Устанавливает html-тег, которым будет представлен заголовок.

zagolovok soderzhimoe.html teg

Позволяет установить несколько значений:

  • h1;
  • h2;
  • h3;
  • h4;
  • h5;
  • h6;
  • div;
  • span;
  • p

Данный пункт полезен для настройки семантичной структуры страниц.

Например, на странице должен быть только один заголовок <h1>. Для каждого важного блока на странице можно указать заголовок <h2>, под которым разместить колонки с подзаголовками <h3> с текстовым описанием в теге <p>.

zagolovok soderzhimoe.html teg.semantika01

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

zagolovok soderzhimoe.html teg.semantika

Видна четкая структура блока с упорядоченной иерархией.

Выравнивание.

zagolovok soderzhimoe.vyravnivanie

Устанавливает выравнивание заголовка:

  • лево (по умолчанию);
  • центр;
  • право;
  • по ширине.

При необходимости, настройки выравнивания устанавливаются отдельно для устройств с разным размером экрана.

zagolovok soderzhimoe.vyravnivanie.adaptiv

Вкладка Стиль

Стиль.

zagolovok stil

Включает в себя:

  • цвет текста;
  • типографика;
  • тень текста;
  • режим наложения.

Цвет текста.

zagolovok stil.zagolovok.czvet teksta

Устанавливает цвет заголовка при помощи стандартной палитры Elementor. Доступен выбор глобальных цветов по клику на значок «глобус».

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

Отвечает за настройку шрифта заголовка.

zagolovok stil.zagolovok.tipografika.

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

  • семейство;
  • размер;
  • насыщенность;
  • преобразование;
  • стиль;
  • оформление;
  • интерлиньяж;
  • межсимвольный интервал.

Семейство.
zagolovok stil.zagolovok.tipografika.semejstvo

Настраивает css-свойство font-family, т. е. семейство шрифта.

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

Размер.

Является ничем иным, как настройкой свойств css font-size, т. е. размер шрифта. Поддерживается установка размера в px, em, rem и vm.

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

zagolovok stil.zagolovok.tipografika.razmer01

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

zagolovok stil.zagolovok.tipografika.razmer.adaptiv
Преобразование.

Отвечает за настройку css-свойства text-transform, т. е трансформирует текст.

zagolovok stil.zagolovok.tipografika.preobrazovanie

Включает несколько типов преобразования текста:

  • по умолчанию;
  • верхний регистр;
  • строчные;
  • первые заглавные;
  • обычный.
По умолчанию.

Заголовок отобразиться так, как вы его написали.

Верхний регистр.

Активирует значение css-свойства text-transform — uppercase, все символы текста становятся прописными в верхнем регистре.

Строчные.

Активирует значение css-свойства text-transform — lowercase, все символы текста становятся строчными в нижнем регистре.

Первые заглавные.

Активирует значение css-свойства text-transform — capitalize, первый символ каждого слова в предложении становится заглавным, а остальные символы остаются без изменений.

Обычный.

Активирует значение css-свойства text-transform — none, не меняет регистр символов.

Стиль.

Изменяет css-свойство font-style — стиль шрифта.

Включает в себя несколько значений:

  • по умолчанию;
  • обычный;
  • курсив;
  • наклон.
По умолчанию.

Оставляет стиль шрифта как без изменений.

Обычный.

Оставляет стиль шрифта как без изменений.

Курсив.

Активирует значение font-style: italic, курсивное начертание, имитирующее рукописные текст.

Наклон.

Активирует значение font-style: oblique, наклонное начертание, наклоняет знаки вправо без имитации рукописного текста.

Оформление.
zagolovok stil.zagolovok.tipografika.oformlenie

Изменяет css-свойство text-decoration — оформление шрифта.

Включает следующие значения:

  • по умолчанию;
  • подчеркнутый;
  • линия над;
  • перечеркнутый;
  • нет.
По умолчанию.

Отображает текст, как есть.

Подчеркнутый.

Активирует значение text-decoration: underline. Устанавливает линию под текстом.

zagolovok stil.zagolovok.tipografika.oformlenie.podcherknutyj
Линия над.

Активирует значение text-decoration: overline. Устанавливает линию над текстом.

zagolovok stil.zagolovok.tipografika.oformlenie.liniya nad
Перечеркнутый.

Активирует значение text-decoration: line-through. Перечеркивает текст.

zagolovok stil.zagolovok.tipografika.oformlenie.perecherknutyj
Нет.

Активирует значение text-decoration: none. отменяет все эффекты. Включением данного пункта можно удалить подчеркивание ссылок, устанавливаемое по умолчанию.

Интерлиньяж.
zagolovok stil.zagolovok.tipografika.interlinyazh

Устанавливает межстрочный интервал в px или в em. Соответствует свойству line-height в css. Отрицательные значения не допускаются.

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

Для устройств с разным размером экрана возможна установка своих значений межстрочного интервала.

Межсимвольный интервал.

Устанавливает интервал между символами. Соответствует свойству letter-spacing в css. Допускаются отрицательные значения, но необходимо следить за читабельностью изменяемого текста.

Для устройств с разным размером экрана возможна установка своих значений межсимвольного интервала.

Тень текста.

zagolovok stil.zagolovok.ten teksta

Данный пункт отвечает за css-свойство text-shadow. Добавляет тень к тексту в Elementor.

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

  • цвет;
  • размытие;
  • горизонтальное смещение;
  • вертикальное смещение;
Цвет.

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

Размытие (blur).

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

zagolovok stil.zagolovok.ten teksta.razmytie 01
Размытие в 10px
zagolovok stil.zagolovok.ten teksta.razmytie 02
Размытие в 30px
Горизонтальное смещение (x-offset).

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

zagolovok stil.zagolovok.ten teksta.x smeshhenie 01
Горизонтальное смещение положительное
zagolovok stil.zagolovok.ten teksta.x smeshhenie 02
Горизонтальное смещение отрицательное
Вертикальное смещение (y-offset).

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

zagolovok stil.zagolovok.ten teksta.y smeshhenie 01
Вертикальное смещение положительное
zagolovok stil.zagolovok.ten teksta.y smeshhenie 02
Вертикальное смещение орицательное
Режим наложения (mix-blend-mode).
zagolovok stil.zagolovok.rezhim nalozheniya

Определяет режим смешивания цвета элемента с нижележащими слоями (например с фоном).

Включает в себя несколько режимов:

  • обычное;
  • multipy;
  • screen;
  • overlay;
  • darken;
  • lighten;
  • color dodge;
  • situation;
  • color;
  • difference;
  • exclusion;
  • hue;
  • luminosity

Вкладка Расширенные.

Данный блок объединяет очень важные расширенные настройки отображения заголовка:

  • расширенные;
  • эффекты движения;
  • фон;
  • граница;
  • позиционирование;
  • адаптивность;
  • атрибуты;
  • пользовательские css
zagolovok stil.zagolovokyurasshirennye

Расширенные.

Данный раздел отвечает за внутренние (padding) и внешние (margin) отступы заголовка, за положение заголовка по оси Z (z-index), а также позволяет присвоить уникальный идентификатор (id) и класс (class).

Список всех настроек ниже:

  • отступ снаружи;
  • отступ внутри;
  • z-index;
  • css ID;
  • css класс.
zagolovok stil.zagolovokyurasshirennye.rasshirennye

Отcтуп снаружи.

Отступы (в css — margin) снаружи заголовка. Регулирует расстояние, на которое одна секция отделена от другой.

Отступ указывается как в абсолютных (px), так и в относительных (em, %, rem) единицах измерения.

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

zagolovok stil.zagolovokyurasshirennye.rasshirennye 02

Справа от настроек отступов есть по умолчанию активный значок «Связать значения». При его активации при вводе отступа в любом поле значение будет автоматически применено ко всем полям. Если Вы хотите указать разные отступы для верха и низа, нужно деактивировать данный переключатель.

Наличие значка устройства (desktop, tablet, mobile) указывает на то, что для устройств с разным размером экрана можно назначать свои отступы, которые будут меняться при просмотре с ПК, планшета или смартфона.

z-index.

sekcziya. rasshirennye.z

Свойство z-index отвечает за положение заголовка относительно оси-Z.

z
Изображение с сайта puzzleweb.ru

Чем больше значение z-index, тем выше расположен элемент по оси z. При использовании плагина Elementor для WopdPress данную настройку обычно используют для создания прилипающего верхнего меню.

CSS ID.

sekcziya. rasshirennye.id

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

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

CSS классы.

sekcziya. rasshirennye.class

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

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

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

Эффекты движения.

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

Эффекты движения включает в себя:

  • эффекты прокрутки;
  • прилипать;
  • анимация при появлении;
  • длительность анимации;
  • задержка анимации.

Разберем каждый пункт более подробно.

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

sekcziya. rasshirennye.effekty dvizheniya. effekty prokrutki

При активации переключателя «Эффекты прокрутки» нам становятся доступны следующие настройки:

  • вертикальная прокрутка;
  • горизонтальная прокрутка;
  • прозрачность;
  • размытие;
  • поворот;
  • масштаб;
  • применить эффекты (для устройств с различным размером экрана);
  • эффекты относительно.
Вертикальная прокрутка.
sekcziya. rasshirennye.effekty dvizheniya. effekty prokrutki.vertikalnaya prokrutka

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

Горизонтальная прокрутка.
sekcziya. rasshirennye.effekty dvizheniya. effekty prokrutki.gorizontalnaya prokrutka

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

Прозрачность.
sekcziya. rasshirennye.effekty dvizheniya. effekty prokrutki.prozrachnost

Данный пункт отвечает за изменение прозрачности элемента, в нашем случае секции, при прокрутке страницы. В зависимости от выбора эффекта (fade in, fade out, fade out in, fade in out) и уровня прозрачности, секция при прокрутке страницы мышкой будет менять свою прозрачность. Дополнительно можно отредактировать область просмотра, в пределах которой будет меняться прозрачность.

Размытие.
sekcziya. rasshirennye.effekty dvizheniya. effekty prokrutki.razmytie

Данный пункт отвечает за изменение четкости элемента, обычно фонового изображения секции или ее содержимого, при прокрутке страницы. В зависимости от выбора эффекта (fade in, fade out, fade out in, fade in out) и уровня размытия, секция при прокрутке страницы мышкой будет менять свою четкость. Дополнительно можно отредактировать область просмотра, в пределах которой резкость будет меняться.

Поворот.
sekcziya. rasshirennye.effekty dvizheniya. effekty prokrutki.povorot

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

Масштаб.
sekcziya. rasshirennye.effekty dvizheniya. effekty prokrutki.masshtab

Данный пункт отвечает за изменение масштаба элемента, обычно фонового изображения секции или ее содержимого, при прокрутке страницы. В зависимости от выбора направления масштабирования (scale up, scale down, scale down up или scale up down) и скорости изменения масштаба, содержимое секции при прокрутке страницы мышкой будет менять свой масштаб (увеличиваться или уменьшаться).

При активации эффекта масштабирования, появляются дополнительные настройки привязки эффекта масштабирования относительно оси X и оси Y.

sekcziya. rasshirennye.effekty dvizheniya. effekty prokrutki.masshtab.privyazka

Дополнительно можно отредактировать область просмотра, в пределах которой эффект действует.

Применить эффекты на.
sekcziya. rasshirennye.effekty dvizheniya. effekty prokrutki.primenit effekty na

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

На практике советую отключать эффекты на мобильных устройствах в целях экономии трафика и скорости загрузки страниц.

Эффекты относительно.
sekcziya. rasshirennye.effekty dvizheniya. effekty prokrutki.effekty otnositelno

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

Прилипать.
sekcziya. rasshirennye.effekty dvizheniya. effekty prokrutki.prilipat

Данную настройку мы немного рассмотрели выше, при разборе настройки z-index. Она позволяет закрепить элемент при прокрутке страницы сверху или снизу. Используют при создании прилипающего header или footer.

Анимация при появлении.
sekcziya. rasshirennye.effekty dvizheniya. effekty prokrutki.animacziya pri poyavlenii

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

Виды анимаций:

fading (угасание)

  • fade in;
  • fade in down;
  • fade in left;
  • fade in right;
  • fade in up;

zooming (масштабирование)

  • zoom in;
  • zoom in down;
  • zoom in left;
  • zoom in right;
  • zoom in up;

bouncing (подпрыгивание)

  • bounce fade in;
  • bounce in down;
  • bounce in left;
  • bounce in right;
  • bounce in up;

sliding (скольжение)

  • slide in;
  • slide in down;
  • slide in left;
  • slide in right;
  • slide in up;

roating (вращение)

  • fade in;
  • fade in down;
  • fade in left;
  • fade in right;
  • fade in up;

attention seekers (акцентирующие внимание)

  • bounce;
  • flash;
  • pulse;
  • rubber band;
  • shake;
  • head snake;
  • swing;
  • tada;
  • wobble;
  • jello;

light speed (cскорость света)

  • light speed in;

special (специальные)

  • roll in;

При активации настройки «Анимация при появлении» становятся доступны следующие настройки:

  • длительность анимации;
  • задержка анимации.
Длительность анимации.

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

  • медленно;
  • обычно;
  • быстро.
Задержка анимации.

Устанавливает время в миллисекундах (ms), по прошествии которых анимация сработает.

1000 ms = 1 сек

500 ms = 0.5 сек

Фон.

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

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.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
Изображение.

Изображение устанавливается из библиотеки 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
Повтор бесшовной структуры. Небольшая картинка заполняет всю секцию без швов.

Граница.

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

Позиционирование.

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

zagolovok stil.zagolovokyurasshirennye.poziczionirovanie

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

  • ширина;
  • вертикальное выравнивание (пункт отображается при активации настроек ширины, кроме значения по умолчанию);
  • произвольная ширина (пункт появляется при выборе значения ширины «Произвольно»);
  • позиционирование

Ширина.

zagolovok stil.zagolovokyurasshirennye.poziczionirovanie.shirina

Настройки ширины предполагают следующие варианты:

  • по умолчанию;
  • во всю ширину (100%);
  • друг за другом (auto);
  • произвольно.

По умолчанию заголовок занимает всю ширину блока, в котором он находится.

Во всю ширину.

Виджет заголовка занимает 100% ширины секции.

Друг за другом.

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

Рассмотрим эту настройку на наглядном примере.

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

Если мы добавим иконки в колонку, они станут друг над другом, так как по умолчанию виджет занимает 100% ширины родительского блока.

zagolovok stil.zagolovok.rasshirennye.poziczionirovanie.shirina. drug za drugom 003

Если мы установим в настройках ширины «Друг за другом», то виджет иконки займет ширину только по значению ширины своего внутреннего содержимого.

zagolovok stil.zagolovok.rasshirennye.poziczionirovanie.shirina. drug za drugom 004

Следовательно, нам останется установить ширину «Друг за другом» у остальных иконок и они выстроятся в одну линию.

zagolovok stil.zagolovok.rasshirennye.poziczionirovanie.shirina. drug za drugom 005
Виджеты выстроились в одну линию друг за другом.

Настройка ширины «Друг за другом» применима ко всем виджетам Elementor.

Произвольно.

Устанавливает произвольную ширину виджета в px, % и vm. Значения ширины можно установить перемещением ползунка слева или ввести цифровое значение в поле справа.

zagolovok stil.zagolovok.rasshirennye.poziczionirovanie.shirina. proizvolno
Вертикальное выравнивание.
zagolovok stil.zagolovok.rasshirennye.poziczionirovanie.shirina. vertikalnoe vyravnivanie

Допускаются следующие значения:

  • начало;
  • центр;
  • конец.

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

zagolovok stil.zagolovok.rasshirennye.poziczionirovanie.shirina. vertikalnoe vyravnivanie 001
Вертикальное выравнивание по верхнему краю, по центру и по нижнему краю

Позиционирование.

zagolovok stil.zagolovok.rasshirennye.poziczionirovanie.shirina. poziczionirovanie

Отвечает за размещение элемента на странице по оси-x и по оси-y.

В Элементоре существуют 3 вида позиционирования элементов:

  • по умолчанию;
  • абсолютное;
  • фиксированное.
По умолчанию.

Позиционирует элемент относительно его первоначального расположения.

Абсолютное позиционирование.

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

zagolovok stil.zagolovok.rasshirennye.poziczionirovanie.shirina. poziczionirovanie.absolyutnoe
Как видите, иконка открепилась от секции и справа появился специальный символ, указывающий на включение абсолютного позиционирования.

Элемент с абсолютным позиционированием возможно разместить в любом месте в пределах страницы.

Фиксированное позиционирование.

0

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

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

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

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

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

Граница. В данном разделе находятся настройки, связанные с границей (обводкой, border’ом) секции. Сюда входят: тип границы; скругление углов; тень объекта (в данном

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

Заголовок

Новые статьи

Блог о Веб-разработке на 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.