- This topic has 16 replies, 2 voices, and was last updated 4 months, 3 weeks ago by
Leo.
-
AuthorPosts
-
August 26, 2020 at 10:03 am #1419328
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
August 26, 2020 at 10:14 am #1419343Leo
StaffCustomer SupportHi 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/August 26, 2020 at 10:44 am #1419387Joe
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
August 26, 2020 at 10:46 am #1419389Joe
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
August 26, 2020 at 10:59 am #1419408Leo
StaffCustomer SupportCan 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/August 26, 2020 at 11:03 am #1419419Joe
August 26, 2020 at 11:04 am #1419420Leo
StaffCustomer SupportDid 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/August 26, 2020 at 11:41 am #1419457Joe
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.
August 26, 2020 at 11:43 am #1419463Leo
StaffCustomer SupportI’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/August 26, 2020 at 12:01 pm #1419492Joe
You should be able to see the website now. You may have to clear your browsing cache.
August 26, 2020 at 12:07 pm #1419498Leo
StaffCustomer SupportSo 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/August 26, 2020 at 12:20 pm #1419511Joe
The text is centered but the color is still off using
h1.hero-heading a {
text-align: center;
}August 26, 2020 at 12:30 pm #1419516Leo
StaffCustomer SupportDid 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/August 26, 2020 at 12:44 pm #1419529Joe
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?
August 26, 2020 at 12:50 pm #1419534Leo
StaffCustomer SupportYou 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/ -
AuthorPosts
- You must be logged in to reply to this topic.