[Resolved] Having Issues With Navigation & Page Hero Goals

[Marty]

Hi, despite searching the documentation, the forum, and trying many things I couldn’t find adequate answers that could help me.

Goal:

• I’m wanting to modify my current GP Premium layout and move to a style like this as an example: https://ahrefs.com/blog/seo-basics/. (With the navigation & logo left-aligned if possible).

• Using the post/page featured image in the page hero as well, similar to the example’s layout. H1 & misc. similarly as shown, too.

I can’t get past these issues in general, despite searching and trying everything:

1. There’s no Use Navigation As Header option available no matter what I try. The documentation seems to refer to an older GP version about this.

2. I found a GP video about moving legacy header items to an Element(s). However, within Elements, there aren’t legacy headers shown.

3. If I create a new Element and a Page Hero, then what to do about the old header/navigation/logo etc.? I’m confused.

4. I tried creating a test Page Hero to see the result of using the featured image there, but wasn’t successful in getting the image normally sized and looking good.

Thanks for your help in advance as I’m a bit flustered at this point.

[David]

Hi there,

do you have the Menu Plus module enabled in Appearance > GeneratePress ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Marty]

Hi David and thanks for your response. No I don’t actually. I was wondering if that had anything relevant needed.

[David]

Yeah, enable that as it will add a lot more functionality to the navigation, including that Navigation as Header option in Customizer > Layout > Header.

See if that works, then we can look at the next steps.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Marty]

Ok, understood and I’ve done that. I see how to deal with the navigation menu now. But as far as the page hero goes, still not sure how to handle that.

[David]

Cool.
Ok, so we will handle the Hero in two parts.

1. The Hero section using a Block Element.
2. Merging the Hero with the Navigation.

1. The Hero section
In Appearance > GeneratePress make sure you have the Elements module enabled.

1.1 Appearance > Elements -> Add New –> Block Element.
1.2 In the element sidebar set the Element Type to: Page Hero

https://docs.generatepress.com/article/block-element-page-hero/

To start with you can select one of the Page Hero templates. Just to get a feel for how they work.

1.3 Set the Elements > Display Rules > Locations to where you want the hero displayed eg. Posts > All Posts.

Once thats done we can look at #2 to do the merge. Let me know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Marty]

Hi David. Ah, I assume I’ll have to install Generate Blocks for that? I don’t have those options in 1.1 above once a Block has been created. I currently don’t use Generate Blocks or Gutenberg, either.

Thanks.

[David]

Yes, you will need GenerateBlocks, the Free version will do 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Marty]

Hi again. I don’t use Gutenberg and I’m seeing another user saying GenerateBlocks requires it for installation, so that’s a no-go I think.

What else can I do? Thank you.

[Ying]

Hi Marty,

If you don’t use Gutenberg, you can use the header element which allows you to add HTML and the built-in template tags.

Just so you know, WP has already stopped supporting or updating the Classic editor, and all the themes and plugins are moving toward Gutenberg.

[Marty]

 

[Marty]

Hi, thanks. I tried using the Header element myself, however, was unable to accomplish much aside from getting full-width hero with the desired background color and a stretched featured image.

I’m also confused about the inclusion of the navigation options in the Header element since it’s already present elsewhere (not sure what to use or not use in that case).

So if you could please assist me with using this I’d really appreciate it! 🙂

[David]

So a little more work but do this. First will get the hero built, then we’ll do the merged header if required.

1. Create a new Header Element in Appearance > Elements.
2. Go to the Page Hero tab and add the following code to the Text Area:

{{custom_field._thumbnail_id}}
<h1>{{post_title}}</h1>
{{post_author}} • {{post_date}}

This is going to output the Featured Image, the post Title, followed by the author and date.

3. Set the Padding eg. 100px Top and Bottom, 40px Left and Right.

4. Set the Colors for the Background, Text, link etc.

5. Go to the Display Rules tab and set the Location to: Posts > All Posts.

Once thats done check one of your posts, and let me know

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Marty]

Hi, I have that done now. (Note: For some reason the featured image is appearing as 300x rather than full at 788x, by the way.)

Thanks. 🙂

[David]

by default we output the medium size thumbnail.
To change that you can add this PHP Snippet to your site:

add_filter( 'generate_hero_thumbnail_id_size', function() {
    return 'full';
} );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts