[Resolved] Help with ZEAL theme

Home Forums Support Help with ZEAL theme

  • This topic has 8 replies, 2 voices, and was last updated 1 year ago by David.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1212944
    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?

    #1213121
    David
    Staff
    Customer Support

    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;
    }
    #1222376
    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?

    #1222396
    Diego

    Edited above due to incorrect formatting of Element page text

    #1222407
    David
    Staff
    Customer Support

    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>
    #1222417
    Diego

    Hi David, thank you!

    One last question, the CSS

    .hero-highlight {
        color: #ff0000;
    }

    Where would I add this?

    #1222422
    David
    Staff
    Customer Support

    In Customizer > Additional CSS

    #1222426
    Diego

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

    Seems to look right

    #1222795
    David
    Staff
    Customer Support

    Awesome – glad to hear that 🙂

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.