Change class of widget title to H2

[lobsterass]

I love the underlined look of the automatic widget titles. However, I want to make sure they are classified as H2:s for the purpose of SEO. Currently they don’t seem to be.

So, I’m trying to solve this by leaving the box for widget title empty and by manually writing the code:

<h2>[fullwidth_text title=”Tjänster vi erbjuder” alt_background=”alt-eight” el_class=”mb0 no-arrow” width=”1/1″ el_position=”first last”]</h2>

The only problem with this is the class that seems to make grey lines above and under the headline. How do I remove these?

Or do you suggest me to solve the whole issue differently? The headlines I wanna do this to are H1:s and H2:s.

Cheers!

[lobsterass]

This reply has been marked as private.

[Kyle – SUPPORT]

Hi

If you want to manually add in the titles as h2 then you should do it within the shortcode, don’t make the whole shortcode h2.

For example:

[fullwidth_text title="Tjänster vi erbjuder" alt_background="alt-eight" el_class="mb0 no-arrow" width="1/1" el_position="first last"]

<h2>heading here</h2>

[/fullwidth_text]

Hope this helps!

– Kyle

[lobsterass]

OK, but please answer the whole question:

If I do the headlines with manual shortcode, how do I make it underlined with the same distance to the line underneath just the way it is in “Tjänster vi erbjuder” and “Grafisk Design i Stockholm”? Please see image.

[Kyle – SUPPORT]

Hi

You would have to add the same styles, this could be quite complicated. To help you with this I would need to see the site live so that I can use firebug to find the correct css.

– Kyle

[lobsterass]

This reply has been marked as private.

[Kyle – SUPPORT]

Hi

Please could you set up the heading again so that I can try and style it up ion the same way?

– Kyle

[lobsterass]

This reply has been marked as private.

[Kyle – SUPPORT]

Hi

Try this css:

.full-width-text h1, .full-width-text h2 {
  border-bottom: 2px solid #222222;
  display: inline-block;
  font-size: 18px;
  font-weight: normal;
  line-height: 24px;
  margin-bottom: 20px;
  padding-bottom: 10px;
}

– Kyle

[lobsterass]

Hi!

It almost works. 🙂 It needs to be centered too and closer to the body copy of text underneath. Please see images.

I tried to do this with this code but it doesn’t center H1 or H2:

.full-width-text h1, .full-width-text h2 {
 border-bottom: 2px solid #222222;
 display: inline-block;
 font-size: 18px;
 font-weight: normal;
 line-height: 24px;
 margin-bottom: 20px;
 padding-bottom: 10px;
text-align: center;
}

I included images of how these two pages look both back and front end because I didn’t know which way I was supposed to put in my H1 and H2 – as their own text block (with WAY TOO MUCH SPACE UNDERNEATH) or as part of the body copy text block (which makes H1 and H2 part of the body text)?

[Kyle – SUPPORT]

To centre the text, wrap it in a div with the class ‘heading-wrap’ for e.g.

<div class="heading-wrap">		
<h2 style="text-align: center;">Grafisk design i Stockholm OWN TEXT BLOCK</h2>
</div>

To remove the spacing, make sure you have pb0 added to the extra class field for the heading and for the text below make sure you have pt0.

– Kyle

[lobsterass]

YEEAAAAH! Great! Finally! Thank you so much, Kyle!

While I have you on the line, there’s another old question nobody in the support team has answered yet. On that same index page, my portfolio’s “Välj kategori” doesn’t show the individual categories. Please see attached image.

Just to check this, I’ve added the portfolio to one of the individual project pages (Porträtt väggdekor) and the categories do show there.

Why no categories on index?

Thanx again. Very happy girl here. I’ve been struggling with those headers for 6-7 hours.

<3

A

A

[Kyle – SUPPORT]

Hi

Please can you double check that your portfolio items are in categories?

– Kyle

[Kyle – SUPPORT]

Also please update to 1.67, this may fix it.

– Kyle

[lobsterass]

This reply has been marked as private.