[arefsParticipant]

I want to wrap the headline text in the first slider on my homepage inside an H1 tag for SEO purposes.

The problem is when I do that, it changes the style of the text.

Here is a 45 second video showing you the issue – https://dl.dropboxusercontent.com/u/17713251/2016-01-28_1123.swf

How can I wrap the slider text in an h1 tag but still maintain the same text style?

Note – I don’t want to make a global site change to the way h1 tags are displayed.

Thank you.

My login details are in the following post if needed.

[arefsParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Thanks for writing in! If you use H1 tag then of course the style will be changed and it’s pretty expected. You can add a custom class and add your CSS to style this or you can also use the Advanced CSS option – http://prntscr.com/9vt16c

Hope this helps.

Cheers!

[arefsParticipant]

Thanks.

Can you help me write a custom class for my layer so it uses h1 tags but displays with the following style attributes:

Font – Raleway
Size – 70px
Line height – 75px
Font weight – 700

I’ve tried doing this myself by consulting various forum threads on how to write custom classes but it’s not working for me.

Appreciate it if you can help me out here.

[ChristopherModerator]

Hi there,

Please update slide layer to :

<h1 class="custom-heading">Customized, Comprehensive
Set & Forget<br>
Piracy Protection</h1>

Add this code in customzer :

h1.custom-heading {
    font-family: "Raleway",sans-serif !important;
    font-size: 70px !important;
    line-height: 75px !important;
    outline: 1px solid;
    font-weight: 700 !important;
}

Hope it helps.

[arefsParticipant]

Thanks you for help.

I added the code and it did change the text to the correct font and size. However, it also threw up the following problems.

– Changes the color from white to grey
– Changes the positioning of the text block even though I haven’t adjusted this
– Creates a boarder round the text

Here is a screenshot of how it looks – https://dl.dropboxusercontent.com/u/17713251/2016-02-01_10-51-53.jpg

Here is a screenshot of how I’d like it to look – https://dl.dropboxusercontent.com/u/17713251/2016-02-01_10-53-43.jpg

Could you have another look at this. I think the code just need one or to tweaks and it will work fine.

Thanks again.

[RupokMember]

Hi there,

Thanks for updating. I am seeing this – http://prntscr.com/9xi1pi

So it seems working fine although I am not sure you followed the last reply correctly or not as I can’t see the h1 with custom class there.

Cheers!

[arefsParticipant]

The reason you are seeing it working fine and you can’t see the h1 class is because I have removed the code you gave me so it displays properly! That’s why I provided you with screenshots.

Please watch this 60 second video which provides proof that I’ve added the code correctly, it isn’t working and is displaying like in my screenshot above:

https://dl.dropboxusercontent.com/u/17713251/2016-02-03_1311.swf

Again, after making this video I removed the code again so visitors to my site see a good slide.

[ChristopherModerator]

Hi there,

Please update your HTML code to :

<h1 class="custom-heading man rev">Customized, Comprehensive
Set & Forget<br>
Piracy Protection</h1>

Also update CSS to :

h1.custom-heading.man.rev {
    font-family: "Raleway",sans-serif !important;
    font-size: 70px !important;
    line-height: 75px !important;
    font-weight: 700 !important; 
     color:#fff !important;
}

Hope it helps.

[arefsParticipant]

That works. Thank you 🙂

[Rue NelModerator]

You’re welcome!
Thanks for letting us know that it has worked for you.

[Author]

Posts