- This topic has 16 replies, 2 voices, and was last updated 1 year, 2 months ago by
.
-
Posts
-
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
Customer Support
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/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
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
Can you try using my HTML structure only?
https://generatepress.com/forums/topic/embed-url-in-an-h1-heading-in-page-hero/#post-1419343It’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/Did you add the CSS part here as well?
https://generatepress.com/forums/topic/embed-url-in-an-h1-heading-in-page-hero/#post-1419343I’m unable to see your site due to this:
https://www.screencast.com/t/rDr2qNxA5ftDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/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.
I’m unable to see your site due to this:
https://www.screencast.com/t/rDr2qNxA5ftAre you able to unlock it for me?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/You should be able to see the website now. You may have to clear your browsing cache.
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/Wb21pQMWmmDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/The text is centered but the color is still off using
h1.hero-heading a {
text-align: center;
}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-1419498If 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/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?
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/
- You must be logged in to reply to this topic.