Eclectic: How to use the marker highlight feature

In Eclectic, you have the option to highlight specific words within a sentence by adding a circle doodle around them or an underline doodle beneath them. This tutorial will guide you through the process of adding these highlights and customizing your doodle, whether you wish to change its color or use your own graphics.

How to use marker highlights in your texts

In your page editor, select any portion of text within your existing Text (Adv) Block that you want to highlight. This action will bring up the side panel. Then, click on the ‘Advanced’ tab.

Scroll down, and you should see another ‘Advanced’ tab; click on it. Then, insert ‘marker‘ into the ‘Additional CSS Class(es)’ field, as indicated in the picture below.

Insert ‘underline‘ if you want to add an underline instead of circle doodle.

Insert ‘cross‘ if you want to use a cross doodle instead.

Finally, on the Text (Adv) Block’s toolbar, click on the downward arrow icon as shown below.

Then select ‘Advanced Highlight‘.

How to customize the color or graphic of marker highlights

The graphics use static images. To replace their color and shape, you will need to customize them in Canva and save them in a format with a transparent background. Then, upload them to the Customizer area on your WordPress dashboard.

How to replace the marker highlight graphics on the Customizer

On your WordPress dashboard, navigate to Appearance > Customize > Eclectic Settings

Click the ‘Change Image‘ button to replace the existing image with one of your own, or click the ‘Remove‘ button if you wish to eliminate this feature.

Hit ‘Publish‘ to save your changes.