[Support request] Content title Vs. H1 title

[Marina]

Hi Guys,

Does the content title functions as H1 title so I don’t need to add H1 for each page/post and start with H2 titles from the begining?

If so how do I align all to the center?

And also if I disable the content title does it mean the H1 is not valid from SEO perspective?

[David]

Hi there,

thats correct the content title is output as H1 on each post and page. So you don’t ( and shouldn’t ) add a H1 to the content.

You can align the entry title with this CSS:

h1.entry-title {
    text-align: center;
}

If you disable the content title then yes you’re removing the only H1 from the page, so not advisable unless you are adding it manually to the content.

[Marina]

Thanks! that helps!
How do I manage to align differently for different pages though? Is it even possible?

I have 3 more questions please:

1. How do I add breadcrumbs to pages? I manged to do it to posts only.. :\
2.How do I move the site title in the navigation bar to be more on the right and not on the edge of the left side of the navigation bar?
3. how do I close the “Leave a Comment” text box and so if someone would like to leave a comment they can click the link?

Thanks!!

[David]

If you want to change alignment on a page by page basis you would be better off Disabling the Content title in the Theme and adding it directly to the editor. You can remove it using the Disable Elements metabox in the post editor, or apply it with display rules using the Layout Element:

https://docs.generatepress.com/article/layout-element-overview/

1. Breadcrumbs would be generated by your SEO plugin heres how to add those for Yoast:

https://docs.generatepress.com/article/adding-breadcrumbs/

2. Add this CSS:

.main-navigation .navigation-branding {
    margin-left: 40px;
}

3. Do you have an example of this so i can better understand?

[Marina]

Thanks David!

1. As I mentioned before it does appear on posts but not on pages although I’ve added pages as well
2. How do I differentiate between mobile and web view? At the moment it looks good on Desktop but not on mobile
3.yes, here for example
https://www.giftbasketdiy.com/family-gift-baskets-for-christmas/

[David]

1. This is probably the hook you have chosen is not available on the Page. You can see all of the main hooks here:

https://docs.generatepress.com/article/hooks-visual-guide/

2. This:

/* Desktop */
.main-navigation .navigation-branding {
    margin-left: 40px;
}
/* Mobile */
@media (max-width: 768px) {
    .main-navigation .navigation-branding {
        margin-left: 20px;
    }
}

3. Not sure that helps lol – so the Comments form you want hidden by default and the user has to click a link/button to display it?

[Marina]

Thanks for 2!
Is there a way to increase the 3 lines of the off canvas menu icon on mobile/desktop? to make it thicker/bold?

3. Yes, that’s what I meant. Wht is it open by default its a bit strange..

I’ll try once more with the breadcrumbs on pages 🙂

[David]

2. Its default behaviour is to have the comments form display. To hide / show it will require some CSS:

#reply-title {
	cursor: pointer;
}

.comment-form {
	display: none;
}
.comment-form.visible {
	display: block;
}

And then some Javascript:

<script type="text/javascript">
const showComments = document.querySelector("#reply-title");
const commentsContainer = document.querySelector("#commentform");

showComments.addEventListener("click", ()=>{
    commentsContainer.classList.toggle("visible");
});
</script>

The JS you can add to a Hook Element, select the WP_footer Hook and set your Display Rules to All Posts.

[Author]

Posts