[Resolved] Help with ZEAL theme

[Diego]

Hi generate press team,

I am currently using the ZEAL theme, and I curious as to how I would color a certain word in the hero image.

For example, on the top page, how would I color just one word instead of changing the color for the entire sentence?

[David]

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

[Diego]

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?

[Diego]

Edited above due to incorrect formatting of Element page text

[David]

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>

[Diego]

Hi David, thank you!

One last question, the CSS

.hero-highlight {
    color: #ff0000;
}

Where would I add this?

[David]

In Customizer > Additional CSS

[Diego]

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

Seems to look right

[David]

Awesome – glad to hear that 🙂

[Author]

Posts