Tutorial

Elementor Highlighting Text Parts

Uses Plugins

Elementor PRO

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.

1

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.

2

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);
    }