CMS Components

Highlighted text

PRO

Draw attention to key words in any heading. A simple CSS snippet that adds a coloured highlight to any text wrapped in a span — easy to customise and works anywhere.

Copy

Unlock with Pro

Category

Code, Text effects

Built with

Widgets

Container, Heading, Text editor, Image, Form

Need help?

Custom code

CSS

How it works

1. Wrap the word you want to highlight in a <span> tag in the Elementor heading widget

2. Example: Build and <span>launch</span> websites

3. Customise the styles below to match your brand */

Custom css

The CSS to make the effect for this power up is included in the widget settings in Advanced > Custom CSS. No additional setup needed. Just copy the component and the styles come with it.

selector span {
    background: #0093FF; /* Change highlight colour */
    padding: 0px 18px 0px 10px; /* Top, right, bottom, left spacing */
    border-radius: 8px; /* Rounded corners */
    color: white; /* Change text colour */
}