Tutorial

Elementor Highlighting Text Parts

Video

Description

This tutorial describes a way to redefine the <mark> and <slot> tags to highlight text parts.

Since creating this video I have realised that <slot> cannot have any block-level attributes, so due to that I probably wouldn’t use it.

Please just focus on using <mark> tags

A <mark> tag by default places a light yellow background behind the enclosed contents. We will create CSS classes to change this behaviour. This can be very effective for changing the colour is a text part, underlining it or putting a block color behind it.

Site Custom CSS

Edit any Elemenotor page

Click the top-left hamburger

Click Site Settings

Click Custom CSS

Copy CSS from below and paste it there.

Click Update and exit Site Settings.

Add text to the page and test markup

Drag any Heading or Text Widget to the page and enter some text.

Surround a word with <mark>YourWord</mark> - It should look yellow.

Now add either class "to-primary-mark", "to-secondary-mark" or "to-accent-mark " to the Widget (Advanced -> CSS Classes)

You will see any <mark> tags change to your desired color.

Code (click to copy)

CSS (css)

Place it in Site Settings -> Custom CSS to use site wide.

To use in an HTML Widget paste inside <style> </style>

    .to-primary-mark mark {
        background-color: unset;
        color: var(--e-global-color-primary);
    }

    .to-secondary-mark mark {
        background-color: unset;
        color: var(--e-global-color-secondary);
    }

    .to-accent-mark mark {
        background-color: unset;
        color: var(--e-global-color-accent);
    }