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

Задача следующая: в стандартном элементе «Заголовок» плагина Elementor сделать часть текста другим цветом.

1 вариант реализации — отдельные слова другого цвета:

В поле «Заголовок» необходимо добавить следующее:

Пример заголовка с <span class="main-red">разными цветами</span> слов

В Расширенных настройках в «Пользовательский CSS» добавить следующий код:

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

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

В поле «Заголовок» необходимо добавить следующее:

Заголовок с <span class="main-textfon">фоном и другим цветом</span> слов

В Расширенных настройках в «Пользовательский CSS» добавить следующий код:

selector .main-textfon {
    background-color: #0013c8;
    color: #ffffff;
    display: inline-block;
    padding: 0px 10px 10px 10px;
}

Вариант реализации через «Дополнительный код» темы:

.main-red { color: #cc0000; }

.main-textfon { background-color: #0013c8; color: #ffffff; display: inline-block; padding: 0px 10px 10px 10px; }