Embed URL in an H1 heading in page hero?

[Joe]

Hi,

My issue is that I need to embed a URL in an H1 heading in a page hero set up in Elements. Is that possible and how do I do it? Here is the line that has the H1 heading:

<h1 style=”text-align: center;”><span style=”color: #ffffff;”>IT’S NATURAL</span></h1>

Looking forward and hope this finds you well.

Joe

[Leo]

Hi there,

Try this HTML structure:
<h1 class="hero-heading""><a href="https://LINKS-HERE">IT'S NATURAL</a></h1>

With this CSS:

h1.hero-heading a {
    text-align: center;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Joe]

I’m going to use the HTML structure. How do I blend

<h1 style=”text-align: center;”><span style=”color: #ffffff;”>IT’S NATURAL</span></h1>

into

<h1 class=”hero-heading””>IT’S NATURAL</h1>

Joe

[Joe]

Some code didn’t copy. Let me say this again:

I’m going to use the HTML structure. How do I blend

<h1 style=”text-align: center;”><span style=”color: #ffffff;”>IT’S NATURAL</span></h1>

into
<h1 class=”hero-heading””>IT’S NATURAL</h1>

Joe

[Leo]

Can you try using my HTML structure only?
https://generatepress.com/forums/topic/embed-url-in-an-h1-heading-in-page-hero/#post-1419343

It’s better than using your own structure with the inline style.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Joe]

Sorry. I can’t get

<h1 class=”hero-heading””>IT’S NATURAL</h1>

to center and be in white.

[Leo]

Did you add the CSS part here as well?
https://generatepress.com/forums/topic/embed-url-in-an-h1-heading-in-page-hero/#post-1419343

I’m unable to see your site due to this:
https://www.screencast.com/t/rDr2qNxA5ft

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Joe]

OK, I inserted the CSS. The H1 is centered but is coming up orange and then black once it is clicked.

Sorry for the confusion.

[Leo]

I’m unable to see your site due to this:
https://www.screencast.com/t/rDr2qNxA5ft

Are you able to unlock it for me?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Joe]

You should be able to see the website now. You may have to clear your browsing cache.

[Leo]

So couple of things:

– Currently, you are adding inline text-align: center; to every line. Instead of doing that, simply use the Horizontal alignment option in the header element so you can remove the inline style:
https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-5-position-the-content

– As for the link color, you can just use the Link Color option in the page hero setting as well:
https://www.screencast.com/t/Wb21pQMWmm

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Joe]

The text is centered but the color is still off using

h1.hero-heading a {
text-align: center;
}

[Leo]

Did you try using the option I suggested in the second point here?
https://generatepress.com/forums/topic/embed-url-in-an-h1-heading-in-page-hero/#post-1419498

If you follow my 2 steps above, you don’t need to add any inline style or CSS at all.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Joe]

Yes, I see. That’s good.

If I need to combine all three headings into one heading that keeps the three-lined, centered format I currently have and uses one URL, how would that go?

[Leo]

You could use the <br> tag like this:
<h1>line 1<br>line 2<br>line 3</h1>

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts