[Support request] Editing Library Page Hero

[Christopher]

I’m a bit new to this.

I *think* what I’m wanting to know is if I can edit the ‘Page Hero’ on the homepage when I import Mellow (also tried Avery) from the library?

I want to be able to put a logo in different places, poss put a block of black under the menu navagation with some words on one side and a photo on the other. Add additional sections to the front page under the latest blog posts or between the header and the blog posts.

I can’t do any of that with the customizer and the page editor is available with Avery but not Mellow but even then doesn’t seem to be able to edit the Page Hero.

Am I able to do that, or realistically if I don’t like the exact layout of the page hero’s/home page layout in the library items do I have to start from scratch with Generate Blocks?

I’d prefer to do it with the editor as I don’t code (sorry)… I guess I can cut and paste though if that helps! But if it’s possible via customizer or Generate Blocks I’d much rather that.

[Ying]

Hi Christopher,

The front page of Mellow theme is the blog page which is an index page, the content is not built manually but generated automatically. It’s editable, but not as editable as a static page.

You can edit or disable the page hero of current front page in Appearance > Elements > Home Hero.
https://docs.generatepress.com/article/header-element-overview/
​https://docs.generatepress.com/article/how-to-create-a-page-hero/

If you want to insert other sections to the homepage, block element is what you are looking for. You can insert sections to different locations by choosing different hook type.
https://docs.generatepress.com/article/block-element-overview/
​https://docs.generatepress.com/article/hooks-visual-guide/
​
You can also create a brand new page by using Generateblocks, and assign it as Homepage in Setting > Reading > Your homepage displays > Homepage.

If you can link me to an example site that you would like to achieve, I can be more helpful 🙂

[Christopher]

Thanks,

Example wise something like:
Site 1
– With a simple menu along the top and logo able to be put in the far left side and blend with the bar
– A section below which is able to have text, button and picture that flow with the menu above
– Latest post pulled
– And then separate sections underneath that can be added to or taken away

OR

Something like the picture with menu overlay on:
Site 2
– Where you have a picture and navigation menu on top with a logo, possibly with the transparant overlay
– I’d then pross want to add different things underneath as it’s just that part I’m interested in style wise.
– I got close to this idea with Mellow but couldn’t add other sections underneath – is that because it’s an index page rather than a static page?

[David]

Hi there,

for sample 1 – we can avoid using the Page Hero Header element for now:

1. The Site Header and Navigation:
a. set your Logo in customizer > site identity.
b. set your Customizer > Layout > Primary Navigation >>> Location to Float right. And enable the Navigation search if you wish>
c. You can set the Colors for the Site Header and Navigation in the Customizer > Colors Panel

2. The hero section below the Navigation
a. Install the GenerateBlocks Plugin
b. Edit your Home Page ( which must be set as a Static Page in Dashboard > Settings > Reading ) and set the Content Container to Full width.
c. Use the GenerateBlocks Container to create your container with background image.
d. Inside that add a Grid Block that you can the populate with the Headline and Buttons blocks

3. Rest of the page – as it is full width you can add additional Container Blocks below the hero section, inside the first one you can use a plugin called to WP Show Posts to list your latest posts: https://wordpress.org/plugins/wp-show-posts/

Keep adding containers for your other content sections.

[Christopher]

That’s useful thanks.

I’m a little stuck on David’s “part 1” answer.

Specifically:
1) I can’t seem to make one of the primary navigation menu links to look either like a button or a color over that one link (like in the site sample 1).
2) The Logo/site title still doesn’t seem to float all the way over to the edge.
3) Is there a way to decreade the paddging/space between navigation links and push it to the far left?
4) Can I make the title menu and logo that I put in site identiy to link back to my homepage?

Also will this “site identity” be at the top of all the pages in my site as deafult?

Thanks again.

[Ying]

Hi Christopher,

1) Here’s an article on how to add button look to your menu item:
https://docs.generatepress.com/article/adding-buttons-navigation/

2) Set Header Width/ Inner Header Width to Full.
https://www.screencast.com/t/0DJytQQ6ao
If you want it even more to the edge, set the Header Padding left to a smaller value depends on your needs.

3) Use Menu Item Width to control the spacing:
https://www.screencast.com/t/dGUd6UkeNd1h
If you want the menu items all align left next to the logo, set the Navigation Location to Float left instead of Float right, then add this CSS in customizer > additional CSS:

.site-branding-container {
    order: -99;
}

4) I don’t quite get your meaning, the logo link is set to home by default. Can you specify what do you mean by “title menu”?

Yes, site identity will be at the top of all pages in your site.

Let me know 🙂

[Author]

Posts