Help with ZEAL theme

Hi there,

you can use <span> tags to highlight part of the text eg.

<h1>This is my hero<span class="hero-highlight"> with some different color </span>text in the middle </h1>

Then add this CSS to style the hero-highlight span:

.hero-highlight {
    color: #ff0000;
}

Hi David, thank you for the speedy reply. This is what my homepage element currently look like:

1. <div class="main-hero-wrap">
 2.	<h1>SAMPLE TEXT</h1>
 3.	<span class="hero divider"></span>
 4.	<p>LITTE SAMPLE TEXT</p>
 5.	<a href="#About" class="btn">View Services</a>
 6. </div>
 7.
 8. <div class="scroll-more">
 9.	<a href="#introduction"><i class="fa fa-level-down"></i></a>
 10. </div>

Could you please guide me as to where your text would go in the elements above.
Also, where would I add the CSS?

Edited above due to incorrect formatting of Element page text

It would look something like this - changes made to line 2:

<div class="main-hero-wrap">
    <h1>This is my hero<span class="hero-highlight"> with some different color </span>text in the middle </h1>
    <span class="hero divider"></span>
    <p>LITTE SAMPLE TEXT</p>
    <a href="#About" class="btn">View Services</a>
</div>

<div class="scroll-more">
    <a href="#introduction"><i class="fa fa-level-down"></i></a>
</div>

Hi David, thank you!

One last question, the CSS

.hero-highlight {
    color: #ff0000;
}

Where would I add this?

In Customizer > Additional CSS

I added the piece of text for coloring to Additional CSS within the Hero section of Additional CSS.

Seems to look right

Awesome - glad to hear that :)