Простой заголовок - это один блок текста в одном стиле. двойной заголовок разделяется, что заголовок на две части вы можете стилизовать самостоятельно, поэтому первые слова и вторые слова каждый получают свой собственный цвет, фон, и типографика. вот как вы строите двухцветный заголовок как Мастер Аддоны в одном цвете рядом Для Элементора в другом, не касаясь пользовательских CSS.
The Виджет с двумя заголовками в Мастер-аддоны для Elementor упаковывает обе части, дополнительный подзаголовок, и необязательный значок в единый виджет. это руководство охватывает каждый параметр во вкладках Содержимое и Стиль, используя тот же виджет, который поставляется бесплатно с Главными Аддонами.
Вот что получится, двухцветный заголовок с иконкой над ним и подзаголовком под ним:
Прежде чем начать #
- Элементор установлен и активен
- Установлены и активны главные дополнения для Elementor (руководство установки)
- Страница или шаблон, открытые в редакторе Elementor
Шаг 1: Добавьте виджет с двумя заголовками #
В редакторе Elementor откройте панель виджетов и выполните поиск Двойной заголовок. Перетащите его на свою страницу. виджеты Master Addons несут значок “MA”, поэтому их легко обнаружить в списке. Как только он окажется на странице, редактор откроет Редактировать двойной заголовок панель слева с тремя вкладками: "Содержимое", "Стиль" и "Дополнительно".
Шаг 2: Установите контент #
The Содержание вкладка - это место, где вы вводите текст и выбираете базовый макет. Что делает каждое поле:
- Стиль Пресет выбирает готовый вид для двух частей. Переключение предустановок меняет расположение первой и второй заголовков вместе.
- Выравнивание устанавливает весь блок влево, в центр или вправо.
- Первый заголовок является первой частью названия (например, “Master Addons”).
- Второй заголовок является второй частью (“For Elementor”).Это обычно часть, которую вы выделяете другим цветом.
- URL-адрес заголовка делает весь заголовок ссылкой, удобной для разделов героев.
- Подзаголовок это строка описания, которая находится под заголовком.
- Включить значок включает значок над заголовком.
- Тег заголовка устанавливает тег HTML, от H1 до H6. Используйте H1 для основного заголовка страницы и H2 для заголовков разделов, чтобы страница сохраняла чистую структуру заголовков.
Шаг 3: Добавьте значок (необязательно) #
Флип Включить значок чтобы Да и ан Икона поле отображается. Выберите любой значок из библиотеки или загрузите свой собственный SVG. Пакеты главных дополнений 8 премиальных библиотек значков, так что есть тысячи, чтобы выбрать из не покидая Элементор. значок находится над заголовком и следует той же выравнивание вы установили ранее.
Шаг 4: Создайте стиль первого и второго заголовка #
Переключиться на Стиль вкладка. здесь двойная рубрика получает свое имя. Вы получаете отдельные разделы для Первый заголовок и Второй заголовоккаждый со своим контролем:
- Цвет текста для этой части названия
- Фон цвет за этой частью (именно это создает двухцветный вид в коробке)
- Типографика для семейства шрифтов, размера, веса и расстояния
- Набивка и Маржа для контроля расстояния вокруг каждой части
Поскольку два раздела независимы, вы можете дать первой части темный фон, а второй красный, или точно соответствовать цветам вашего бренда. Установите фон второго заголовка на акцент бренда, и вы получите эффект выделенного слова, который люди используют в разделах героев. одно нужно посмотреть: если две части используют разную набивку, они могут выглядеть неравномерно, поэтому установите для обеих сторон одно и то же значение, когда вы хотите, чтобы коробки выстроились в ряд.
Шаг 5: Создайте подзаголовок по стилю #
The Описание раздел стилизует строку подзаголовка под заголовком Вы получаете Цвет текста, Типографика, и то же самое Набивка и Маржа управление. Опустите цвет на более мягкий серый для обычного субтитра или сопоставьте его с одним из цветов заголовка, чтобы связать блок вместе.
Шаг 6: Создайте иконку по стилю #
Если вы включили значок, Стиль значка раздел управляет им. Установите Размер значка в пикселях с помощью ползунка выберите Цвет значка для обоих Нормальный и Наведите курсор состояния. отдельный цвет наведения - приятный штрих, когда весь заголовок является ссылкой.
Когда заголовок выглядит правильно, нажмите Публиковать (или Обновить) для сохранения страницы.
Где помогает виджет с двумя заголовками #
- Разделы Героев, где двухцветное название привлекает внимание к важной части.
- Названия разделов для этого нужно одно выделенное слово, например “Our Лучший Рабочая”.
- Лендинги, сочетание жирного заголовка с вспомогательным подзаголовком в одном виджете.
- Цены или блоки функций, где двухцветный стиль в рамке обрамляет заголовок.
Часто задаваемые вопросы #
Что такое виджет с двумя заголовками в Elementor?
Это виджет Master Addons, который разделяет заголовок на две части, которые вы можете стилизовать отдельно. каждая часть получает свой цвет, фон и типографику, поэтому вы можете построить двухцветный заголовок, не записывая никаких CSS.
Как сделать двухцветную рубрику в Элементоре?
Добавьте виджет "Двойной заголовок главных дополнений", введите текст в "Первый заголовок" и "Второй заголовок", затем откройте вкладку "Стиль" и установите для каждой части другой цвет текста или фон. Это дает вам двухцветный заголовок.
Могу ли я добавить в заголовок подзаголовок и значок?
Да. поле Подзаголовок добавляет строку описания под заголовком, а переключатель Значок Включить помещает значок над ним. оба имеют свои собственные элементы управления стилем на вкладке Стиль для цвета, размера и типографики.
Какой тег заголовка мне следует использовать?
Установите тег заголовка на H1 для основного заголовка страницы и H2 для заголовков разделов. сопоставление тега с ролью заголовка сохраняет структуру вашей страницы чистой, что помогает как читателям, так и поисковым системам.
Нужен ли мне Elementor Pro для виджета с двумя заголовками?
№ Виджет Dual Heading работает с бесплатной версией Elementor, поэтому все его настройки контента и стиля доступны без Elementor Pro.
