Web5X - Готовые сайты

Блог о создании сайта, конструкторе сайтов и Elementor

Заголовок — виджет Elementor

При создании сайта мы часто используем заголовки и отдельные тексты. Обычно для этого используют текст обрамленный тегом 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 вы можете посмотреть на странице Виджеты
=======================================================================

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Блог о создании сайта, конструкторе сайтов и Elementor.
Авторские права © 2017-2020 . Все права защищены.
Готовые сайты на web5x.ru
Политика конфиденциальности