Видео
В текущем видео-уроке расскажу и покажу вам, как сделать двухцветный заголовок с помощью Elementor.
Изначально в конструкторе Elementor не предусмотрена данная возможность, однако есть несколько путей для решения данного вопроса: один бесплатный, другой платный. Я покажу вам оба способа.
Двухцветные заголовки — это отличный способ сделать акцент и добавить динамичности дизайну вашего сайта. Elementor предлагает ряд инструментов для работы с текстом, и с его помощью вы можете легко создать двухцветные заголовки. Давайте рассмотрим, как это сделать шаг за шагом.
Добавление нового заголовка
Первым делом добавьте виджет заголовка на вашу страницу в редакторе Elementor.
Выбор текста и базовые стили
Введите текст вашего заголовка. Допустим, ваш заголовок звучит так: «Дизайн и Разработка». Вы хотите сделать слово «Дизайн» одного цвета, а слово «Разработка» — другого. Перед тем как применить двухцветность, установите основной стиль текста: размер, шрифт, жирность и так далее.
Инлайн стиль
Добавьте HTML-разметку к вашему заголовку: <span style=»color: red»>Дизайн</span> и Разработка
После применения данного кода, слово «Дизайн» должно стать красного цвета.
Используем class и пользовательские CSS:
Второй способ — это использовать стили с разделе «Пользовательские CSS».
Добавьте class к вашему заголовку: <span class=»red»>Дизайн</span> и Разработка
Перейдите в раздел «Расширенные» вашего виджета заголовка и найдите поле «Пользовательские CSS».
Вставьте следующий код: .red { color: red; }
Вы можете адаптировать этот метод, добавляя разные CSS-стили, такие как градиенты, тени и так далее, для дополнительной стилизации вашего заголовка.
Заключение
Двухцветные заголовки могут придать вашему сайту уникальный и профессиональный вид. С помощью Elementor и небольшого количества пользовательского CSS вы можете легко достичь этого эффекта и выделить свой контент на фоне конкурентов.