При создании сайта мы часто используем заголовки и отдельные тексты. Обычно для этого используют текст обрамленный тегом H, например h1 или h2 . Пример <h3>текст</h3>
А в конструкторе сайта Elementor для таких целей применяется виджет "Заголовок".
При создании сайта виджет заголовка используется не только для обычных заголовков, но может использоваться и как для многострочных текстов. Для таких целей есть возможность изменения свойства виджета (режим параграфа), т.е текст уже будет обрамлен не тегами h, а тегом p.
Разместив виджет заголовка в контентную часть мы увидим следующее.
Свойства виджета
Содержимое
- Заголовок - текст заголовка т.е сам текст виджета. Доступны html теги при необходимости.
- Ссылка - можно добавить ссылку для заголовка. При нажатии на шестеренку откроется окно дополнительных параметров
- Размер - размер заголовка. Выбор размера заголовка (если не указан размер на вкладке Сталь). При выборе данной опции добавляется к элементу класс, например elementor-size-large
- HTML-тег - изменения тега виджета. Т.е мы можем использвать виджет заголовок как параграф, строчный элемент span или как блок div
- Выравнивание - выравнивание текста.
Стиль
- Цвет - выбор цвета для текста виджета
- Типографика - выбор типографики текста (шрифт, размер, насыщенность, оформление итд)
- Тень текста - тень для текста (выбор цвета тени, размытия и смещения)
Внимание. Для возврата значений по умолчанию необходимо рядом с кнопкой выборы нажать на кнопку Вернуться к умолчанию
Расширенные
На данной вкладке расположены расширенные свойства виджета. Все свойства на данной вкладке применяются к блоку виджета. У всех виджетов данная вкладка практически одинаковая, поэтому мы рассмотрим ее один раз и только в данной статье.
Стиль элемента
- Отступ снаружи - отступ снаружи блока (в css это margin)
- Отступ внутри - отступ внутри блока (в css это padding)
- Z-индекс - индекс уровня слоя элемента (0 нижний и 9999 самый верхний)
- Анимация при появлении - выбор анимации появление блока
- CSS ID - css идентификатор блока т.е можно добавить сво id для блока
- CSS класс - css класс для блока
Фон
- Тип - типа фона (цвет или градиент). При выборе свойства доступны изменение параметров цвета, смещения итд.
- Цвет - выбор цвета для фона
- Изображение - изображение для фона. При установке изображения доступны стандартные свойства фона, такие как
- Позиция : как центрировать фон, например в центре справа
- Привязка : прокручивать фон или закрепить на месте)
- Повтор : разрешения повтора в указанных направлениях
- Размер : размер фона. Доступны три варианта. Автоматически (размер не изменяется), Перекрыть (фон растягивается по горизонтали) и Поместить (фон уменьшается при необходимости и полностью помещается в блок)Для фона доступен выбор разных значений для типов поведения, т.е обычное состояние и при наведении.
Граница
- Тип - тип границы (сплошная, пунктир, точки итд) После выбора типа границы, станут доступны его свойства, например цвет и толщина линии.
- Скругление - скругление углов границы блока.
- Тень - тень для блока виджета.
Адаптивность
- Скрыть на .... Выбор на каких устройства скрывать виджет
Пользовательские CSS
- Пользовательские CSS (доступно в версии Pro) - вы можете добавить свои стили к виджету. Не забывайте использовать селекторы selectorчтобы стили не распространились на все элементы.
=======================================================================
Список всех виджетов Elementor вы можете посмотреть на странице Виджеты
=======================================================================