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

К сожалению, в стандартных настройках элемента «Заголовок» во вкладке «Стиль» есть возможность установить только 1 цвет для текста. Если вам необходимо выделить часть текста другим цветом, фоном или сделать изменение цвета текста при наведении курсора, то уверен, следующая инструкция вам поможет.

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

Пример:

Заголовок, в котором часть текста другого цвета

Как сделать:

В содержимом элемента заголовок обернуть часть текста в <span> (добавить следующее):

				
					Заголовок, в котором <span class="colortitle-blue">часть текста</span> другого цвета
				
			

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

				
					selector .colortitle-blue {
    color: #0612C3;
}
				
			

Для изменение цвета текста только при наведении курсора

Добавьте в «Пользовательский CSS» следующий код:

				
					selector .colortitle-blue:hover {
    color: #0612C3;
}
				
			

Часть текста в заголовке выделена фоном

Пример:

Заголовок, в котором часть текста другого цвета и с фоном

Как сделать:

В содержимом элемента заголовок обернуть часть текста в <span> (добавить следующее):

				
					Заголовок, в котором <span class="colortitle-bluebg">часть текста</span> другого цвета и с фоном
				
			

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

				
					selector .colortitle-bluebg {
    background-color: #0612C3;
    color: #ffffff;
    display: inline-block;
    padding: 10px 10px 10px 10px;
}
				
			

Поделись с друзьями или сохрани себе:

VK
Facebook
Telegram
WhatsApp

Комментарий

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

Привет! Я - Андрей. Занимаюсь обучением и разработкой сайтов на CMS WordPress и Elementor.

Мой ТОП хостингов в РФ

Мой ТОП хостингов в РБ

Хостинг за крипту в Европе