[Resolved] How to achieve a custom fullscreen home pg header with columns?

[Ria]

I’m trying to design a custom page header that looks like this on desktop/wider screens:

and like this on tablet/mobile and smaller screens:

I’m using the GP Premium “Page Header” function.

The easy part: I’ve set the page header background color to blue and coded two flex columns into the custom html area of the page header to get the right column text + cta buttons:

I’d like to get an image to appear as a left column that takes up the entire merged header top to bottom including behind the logo/nav much the same way as if selecting a background image for the page header would do, except I don’t want it to cover the entire page header, only appear on the left side (see my first two images above).

I’ve tried various things so far, including background-positioning, which didn’t do well with responsive and because it needs to act like a grid/column would, i.e. appear above the blue-background text/cta block on smaller screens (see my second image).

Is something like this even possible to do this with the “Page Header” function, or should I figure out how to just hard code this into the child theme, or a hook, or right into the home page itself?

[Tom]

Hi Ria,

Interesting layout! Can you try uploading a background image to that page header, then share the URL with me so I can play with it?

Thanks! 🙂

[Ria]

Hi Tom,

Sure thing. I’m developing it locally, but I put a copy of it up here for you to play with. 🙂 Do you need admin access to back end, as well?

Thanks!

[Tom]

I wonder if it would be better to:

1. Remove the automatic paragraphs.
2. Remove the top/bottom padding.

Then you could apply padding to the two column elements within your Page Header. That way you could add the static image into the first column with no padding, and it will take up the entire area.

It may need some CSS, but if you can set up the above I can give it a try 🙂

[Ria]

Hi Tom,

Your suggestions here got the ball rolling! I’m pretty proficient with CSS, so I was able to take the start you gave me here and did some CSS work and got the results I need.

As of this moment I haven’t yet done all the browser testing, but take a look and let me know what you think?

I used a different image (1/2 width of the original full width bg image) as the bg image for the left column, eliminated padding on some divs, added padding to the columns, then fine-tuned things until I got the look and behavior I was looking for.

Thank you for being a catalyst unlocking my brain cells on this. I’m glad it was as simple as adjusting the html/css!

[Tom]

Looks great! Glad I could give you a little spark 🙂

[Author]

Posts