[Support request] Adding a Page Hero to home page

[Cynthia]

I’ve added a Site Header element and cannot seem to get the hero image to show. I selected Merge with header but nothing is showing. I don’t know what settings are wrong.

Ideally I would like the same image to be used on all the site pages however only full screen on home page and merged with header and will set a unique logo to with the navigation below.

The other pages would be created as normal (no elements) applied.

:/

[Leo]

Hi Cynthia,

Try Front Page instead of Page > Home for the display rule.

And you shouldn’t need to add any exclusion rule either if you are selecting specific.

Let me know if this helps 🙂

[Cynthia]

Hi Leo – ok I changed it and it is now showing the logo but still no background image. An how can I use css to resize that huge logo.

And the logo doesn’t appear to be positioned above the content, it’s infront of it.

Please see site link again.

[Leo]

Do you happen to have an example of the layout you are trying to achieve?

Also are you using GenerateBlocks and the block editor?

[Cynthia]

I am not using generate blocks or the block editor. I’m using Page Builder by SiteOrigin and have the Classic Editor plugin installed.

I’ve provided access below and the desired layout. I don’t want full screen since I still want to add footer widgets and footer bar.

[Leo]

If you are using a page builder then I would recommend creating everything using the page builder then just a simple header element for merge:
https://docs.generatepress.com/article/transparent-header-and-navigation/

A background image is not required to create a merged header.

[Cynthia]

I can’t get it to work. Those instructions are for block editor which I am not familiar with. 🙁

And I’m not creating posts or post pages. I’m creating a home page.

[Leo]

Those instructions are for block editor which I am not familiar with.

The step is exactly the same and here is what you need to do:

– Create the “page hero” as the first section of your content using the page builder. This would make sense as the rest of your content will be coming from the same page builder.

– Create a header element and turn on merge as the documentation instructed.

[Cynthia]

“– Create the “page hero” as the first section of your content using the page builder.”

I am unable to use GP “Sections” with SiteOrigin Page Builder. I can only use one or the other. :/

Actually GP Sections is not even there anymore when I “Revert to Editor”

I’ve added my image as a background image in the first section of my content and I did set the header element to merge……you can see the image only though in the header area, it is NOT merging.

I am missing a step here

[Leo]

I’m not talking about GP’s section here – create the page hero using the page builder as the first section of the content of that page.

[Cynthia]

I have attached a video recording of what I am trying to achieve with SiteOrigin Page builder and GP Element and the trouble I am having

[Leo]

So this is what you are trying to create for the home page:
https://www.screencast.com/t/iYpOM1cp1jr

What would the header/navigation look like for the rest of the pages?

Please show me a screenshot:
https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

[Cynthia]

links below

[Leo]

The full width vs contained width header makes it a little more difficult to configure.

Can you try this CSS first?

.home .site-header {
    background-size: cover;
}

[Author]

Posts