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

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

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

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

Заголовок с ссылкой на другой сайт в сети.

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

Открыть в новом окне.
Является ничем иным, как атрибутом ссылки target = “_blank”, выведенным в настройки для удобства. Банально открывает ссылку заголовка, если она назначена, в новом окне.
Добавить nofollow.
Добавляет ссылке атрибут nofollow, который запрещает поисковикам индексировать ссылку. Подробнее о значении атрибута можно прочитать здесь.
Произвольные атрибуты.
Для других атрибутов разработчики предусмотрели специальное поле, в которое эти атрибуты прописываются в формате ключ|значение.
Размер.

Устанавливается размер заголовка. имеет 6 значений.
- по умолчанию (30px);
- маленький (15px);
- средний(19px);
- большой(29px);
- огромный(39px);
- гигантский(59px).

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

Позволяет установить несколько значений:
- h1;
- h2;
- h3;
- h4;
- h5;
- h6;
- div;
- span;
- p
Данный пункт полезен для настройки семантичной структуры страниц.
Например, на странице должен быть только один заголовок <h1>. Для каждого важного блока на странице можно указать заголовок <h2>, под которым разместить колонки с подзаголовками <h3> с текстовым описанием в теге <p>.

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

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

Устанавливает выравнивание заголовка:
- лево (по умолчанию);
- центр;
- право;
- по ширине.
При необходимости, настройки выравнивания устанавливаются отдельно для устройств с разным размером экрана.

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

Включает в себя:
- цвет текста;
- типографика;
- тень текста;
- режим наложения.
Цвет текста.

Устанавливает цвет заголовка при помощи стандартной палитры Elementor. Доступен выбор глобальных цветов по клику на значок “глобус”.
Типографика.
Отвечает за настройку шрифта заголовка.

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

Настраивает css-свойство font-family, т. е. семейство шрифта.
Для пользователей доступно большое количество шрифтов на любой вкус, но можно загрузить и свои шрифты, если встроенных не хватает для ваших задач. Все шрифты отсортированы в алфавитном порядке, а также, для удобства, есть поле поиска, в котором вы можете ввести нужный шрифт, и если он есть в списке, то он отобразится в результатах поиска.
Размер.
Является ничем иным, как настройкой свойств css font-size, т. е. размер шрифта. Поддерживается установка размера в px, em, rem и vm.
Размер устанавливается или ручным вводом значения в поле справа, или движением ползунка изменения размера слева.

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

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

Включает несколько типов преобразования текста:
- по умолчанию;
- верхний регистр;
- строчные;
- первые заглавные;
- обычный.
По умолчанию.
Заголовок отобразиться так, как вы его написали.
Верхний регистр.
Активирует значение 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, наклонное начертание, наклоняет знаки вправо без имитации рукописного текста.
Оформление.

Изменяет css-свойство text-decoration – оформление шрифта.
Включает следующие значения:
- по умолчанию;
- подчеркнутый;
- линия над;
- перечеркнутый;
- нет.
По умолчанию.
Отображает текст, как есть.
Подчеркнутый.
Активирует значение text-decoration: underline. Устанавливает линию под текстом.

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

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

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

Устанавливает межстрочный интервал в px или в em. Соответствует свойству line-height в css. Отрицательные значения не допускаются.
Регулировка интерлиньяжа осуществляется путем ввода значения в поле справа или передвижением ползунка слева.
Для устройств с разным размером экрана возможна установка своих значений межстрочного интервала.
Межсимвольный интервал.
Устанавливает интервал между символами. Соответствует свойству letter-spacing в css. Допускаются отрицательные значения, но необходимо следить за читабельностью изменяемого текста.
Для устройств с разным размером экрана возможна установка своих значений межсимвольного интервала.
Тень текста.

Данный пункт отвечает за css-свойство text-shadow. Добавляет тень к тексту в Elementor.
Включает в себя настройку нескольких свойств:
- цвет;
- размытие;
- горизонтальное смещение;
- вертикальное смещение;
Цвет.
Устанавливает цвет тени при помощи стандартной палитры Elementor.
Размытие (blur).
Устанавливает радиус размытия в px. Отрицательные значения не поддерживаются, чем больше значение радиуса размытия, тем больше размыт край тени текста.


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


Вертикальное смещение (y-offset).
Устанавливает смещение тени относительно оси Y. Положительное значение смещает тень вниз, отрицательное — вверх.


Режим наложения (mix-blend-mode).

Определяет режим смешивания цвета элемента с нижележащими слоями (например с фоном).
Включает в себя несколько режимов:
- обычное;
- multipy;
- screen;
- overlay;
- darken;
- lighten;
- color dodge;
- situation;
- color;
- difference;
- exclusion;
- hue;
- luminosity
Вкладка Расширенные.
Данный блок объединяет очень важные расширенные настройки отображения заголовка:
- расширенные;
- эффекты движения;
- фон;
- граница;
- позиционирование;
- адаптивность;
- атрибуты;
- пользовательские css
Расширенные.
Данный раздел отвечает за внутренние (padding) и внешние (margin) отступы заголовка, за положение заголовка по оси Z (z-index), а также позволяет присвоить уникальный идентификатор (id) и класс (class).
Список всех настроек ниже:
- отступ снаружи;
- отступ внутри;
- z-index;
- css ID;
- css класс.
Отcтуп снаружи.
Отступы (в css – margin) снаружи заголовка. Регулирует расстояние, на которое одна секция отделена от другой.
Отступ указывается как в абсолютных (px), так и в относительных (em, %, rem) единицах измерения.
Для заголовка можно задать отступы сверху справа, снизу, и слева. Значения в поля вводятся или с клавиатуры, или по клику на стрелки вверх/вниз, нажатие на которые или увеличивает значение, или уменьшает.

Справа от настроек отступов есть по умолчанию активный значок “Связать значения”. При его активации при вводе отступа в любом поле значение будет автоматически применено ко всем полям. Если Вы хотите указать разные отступы для верха и низа, нужно деактивировать данный переключатель.
Наличие значка устройства (desktop, tablet, mobile) указывает на то, что для устройств с разным размером экрана можно назначать свои отступы, которые будут меняться при просмотре с ПК, планшета или смартфона.
z-index.

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

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

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

В данном разделе для секции добавляется уникальный класс, который в дальнейшем Вы сможете использовать для обращения к нему при стилевом оформлении или при подключении скриптов.
Классов с одинаковым названием на странице может быть много . Используйте данную настройку для однотипных элементов, будь то секции, колонки или другие виджеты elementor.
Для классов (class) и идентификаторов (id) существует дополнительная настройка в виде динамических тегов, которые мы рассмотрим более подробно в отдельной статье.
Эффекты движения.
В эффектах движения добавляются красивые эффекты прокрутки и анимации элементов.
Эффекты движения включает в себя:
- эффекты прокрутки;
- прилипать;
- анимация при появлении;
- длительность анимации;
- задержка анимации.
Разберем каждый пункт более подробно.
Эффекты прокрутки.

При активации переключателя “Эффекты прокрутки” нам становятся доступны следующие настройки:
- вертикальная прокрутка;
- горизонтальная прокрутка;
- прозрачность;
- размытие;
- поворот;
- масштаб;
- применить эффекты (для устройств с различным размером экрана);
- эффекты относительно.
Вертикальная прокрутка.

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

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

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

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

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

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

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

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

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

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

Очень большой раздел со множеством настроек, каждую из которых не имеет смысла рассматривать. Он отвеает за красивое анимированное появление элемента при появлении его в области просмотра. Мы лишь перечислим все доступные эффекты.
Виды анимаций:
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 сек
Фон.
Здесь устанавливается фон заголовка: одним цветом или градиентом.

Тип фона.
Предусмотрена установка четырех типов фона:
- классический;
- градиентный;
Фон. Классический.
Классический фон предусматривает заливку цветом и установку картинки.

Цвет.

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

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

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

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

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

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

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

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


Выбрав изображение, внизу появятся дополнительные настройки фонового изображения.
Их всего четыре:
- позиция;
- привязка;
- повтор;
- размер.
Позиция.
Устанавливает фоновое изображение внутри относительно оси X и оси Y. Существует как предустановленные варианты, так и произвольное позиционирование.


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

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




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


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

Тип границы.
Элементор поддерживает создание границ пяти (5) типов, хотя в html их немного больше:
- сплошная;
- двойная;
- точечный пунктир;
- штриховой пунктир;
- выпуклость.

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

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

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

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



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

Скругление углов.
Данная настройка устанавливает css свойство border-radius, отвечающее за скругление углов.
Скругление можно установить как в абсолютных, так и в относительных единицах:
- в процентах %;
- в пикселях px.

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

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

Тень объекта включает следующие настройки:
- цвет;
- горизонтальное смещение;
- вертикальное смещение;
- размытие;
- размах;
- положение.

Регулируется каждая из них при помощи горизонтальных ползунков. Все настройки, кроме Размытия, регулируются в пределах от -100 до +100.
Рассмотрим каждую настройку отдельно.
Цвет.
Устанавливается при помощи стандартной палитры Elementor.
Горизонтальное смещение (x-offset).
Устанавливает смещение тени по оси X относительно элемента. Можно устанавливать отрицательное и положительное значение.


Вертикальное смещение (y-offset).
Устанавливает смещение тени относительно оси Y. Положительное значение смещает тень вниз, отрицательное — вверх.


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


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


Положение.
Устанавливает параметры отображения тени:
- внутренняя;
- внешняя.


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

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

Включает в себя настройки:
- ширина;
- вертикальное выравнивание (пункт отображается при активации настроек ширины, кроме значения по умолчанию);
- произвольная ширина (пункт появляется при выборе значения ширины “Произвольно”);
- позиционирование
Ширина.

Настройки ширины предполагают следующие варианты:
- по умолчанию;
- во всю ширину (100%);
- друг за другом (auto);
- произвольно.
По умолчанию заголовок занимает всю ширину блока, в котором он находится.
Во всю ширину.
Виджет заголовка занимает 100% ширины секции.
Друг за другом.
Очень полезная настройка, когда необходимо разместить несколько элементов в горизонтальную линию внутри секции. Вы можете, конечно же, сделать несколько колонок, в которых разместить нужные виджеты, но это не всегда удобно.
Рассмотрим эту настройку на наглядном примере.
Допустим, нужно разместить на странице несколько иконок в один ряд.
Если мы добавим иконки в колонку, они станут друг над другом, так как по умолчанию виджет занимает 100% ширины родительского блока.

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

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

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

Вертикальное выравнивание.

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

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

Отвечает за размещение элемента на странице по оси-x и по оси-y.
В Элементоре существуют 3 вида позиционирования элементов:
- по умолчанию;
- абсолютное;
- фиксированное.
По умолчанию.
Позиционирует элемент относительно его первоначального расположения.
Абсолютное позиционирование.
Позиционирует элемент относительно кона браузера. При активации этой настройки у элемента в появляется специальный значок и зажав левую кнопку мыши элемент перетаскивается в любое место страницы, независимо от первоначального размещения.

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