Как сделать выделение цветом слов в заголовке в Elementor

В стандартном функционале элемента “Заголовок” возможно выбрать только один цвет для всего заголовка.

При необходимости выделение отдельных слов можно использовать следующий код:

CSS-код для Elementor Pro

1) Вариант заголовка другого цвета:
Этот текст с кодом нужно вставить в поле элемента «Заголовок» в Elementor

<span class="main-red">Текст другого цвета</span> в элементе заголовок

Этот код нужно вставить во вкладке «Расширенные настройки» элемента «Заголовок» в поле «Custom CSS» (Пользовательские CSS):

selector .main-red {
    color: #cc0000;
}

2) Это вариант для заголовка с фоном и другим цветом:
Этот текст с кодом нужно вставить в поле элемента «Заголовок» в Elementor

Выделяем часть заголовка <span class="main-lilac">с изменением фона и цвета</span>

Этот код нужно вставить во вкладке «Расширенные настройки» элемента «Заголовок» в поле «Custom CSS» (Пользовательские CSS):

selector .main-lilac {
    background-color: #AF2056;
    color: #ffffff;
    display: inline-block;
    padding: 5px 10px;
}

CSS код для добавления в тему (Дополнительный код):

1) Вариант заголовка другого цвета:

.main-red {
    color: #cc0000;
}

2) Это вариант для заголовка с фоном и другим цветом:

.main-lilac {
    background-color: #AF2056;
    color: #ffffff;
    display: inline-block;
    padding: 5px 10px;
}