Creating highlight effect via html, etc

Ask the community
1

My question probably just boils down to a general one of how to edit an element’s html and the specifics of what I’m trying to do not that important, but I included pics anyway.

I’m definitely not a code person, but I can usually figure my way through copy/pasting desired html code. But I can’t figure out where to find where the code is, lol! I’ve been in dev mode and can find the section ID of my hero text box, but I don’t know how to specifically tell it that I want a certain word affected by this css/html code I found online.

2

I do not think that HTML could work for one specific word here.
Still for example you can highlight the words with text Editor:

1111×561 515 KB

at the same time this is not a hover effect or something, so could you clarify you only want to highlight a word, or make it as an effect?

3

@evesilberx maybe you have ideas in case of interaction?

4

Hi @christy_malone , here is an option for using code if you wish to do so. I shot a video for you and hope that it is of help:

https://www.screencast.com/t/rEGBadbDSzQ

Here is the code snippet I used:

$w ( ‘#text3’ ). html = <mark style="font-size: 50px">highlighted text</mark>

1 Like
5

@christy_malone if you’d like to have the highlighted text in the middle of regular text you can use and adjust the following code snippet:

$w ( ‘#text3’ ). html = <p style="font-size: 50px">This is a sentence with some <mark style="font-size: 50px">highlighted text</mark> which is awesome!</p>

6

I’m not quite sure how you would do it with interaction…but you could do some kind of mouse-in/mouse-out event manipulation using code ( but note that the mouse-in/out events would be for the entire text element, not when you hover only on the specific highlighted word):

$w ( ‘#text3’ ). html = <p style="font-size: 50px">This is a sentence with some highlighted text which is awesome!</p>

$w ( '#text3' ). onMouseIn (() => { 
    $w ( '#text3' ). html  =  `<p style="font-size: 50px">This is a sentence with some <mark style="font-size: 50px">highlighted text</mark> which is awesome!</p>` 
}) 

$w ( '#text3' ). onMouseOut  (() => { 
    $w ( '#text3' ). html  =  `<p style="font-size: 50px">This is a sentence with some highlighted text which is awesome!</p>` 
})
7

Would look like this:

https://www.screencast.com/t/DaO46lq3jWY5

8

Thank you guys!! I haven’t done the actual implementation yet, lol…but I wanted to say thank you. And yes, I should’ve specified that I was wanting the highlight effect to be static and click or hover-reliant and that I wanted it to be kinda ‘messy’ like a real highlighter might be. Fwiw, I also stumbled upon SVGBox site of vector icons, and he created several ‘pen brushes’. I included his tutorial and the brushes below.

Shubham Jain’s tutorial:

And his vector icon site:
https://svgbox.net/iconset/pen-brushes