[Resolved] Project Site Layout

[Simon]

I’m starting a really ambitious project today, I’m going to try and get my website to look how I always wanted it to but never had the confidence until now…

I’m sorry there are a couple of questions but I can open separate tickets if that’s better.

Q1. Right now I have a colour background image for my homepage. For all pages and posts, can I combine image background for header and content containers to get the effect of the background image behind the menu like below? Is it even possible?

Q2. It looks like I can only center both the content column and sidebar together. Is there a way to centre the content column and have the sidebar to the right, as in the image below?

Thank you so much in advance!

[David]

Hi there,

1. That full width merged header is currently best done with a Header Element:

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

But we’re about to release GPP 2.0 which will allow you to build dynamic heros ( and more ) using the Block Element. So maybe you will want to wait until its fully released?

2. Post Content / Sidebar layout first – try adding this CSS:

@media(min-width: 1024px) {
  .right-sidebar .site-content .content-area {
    width: 50%; /* Width of content minus width of sidebar */
    margin-left: 25%; /* width of sidebar */
  }
}

[Simon]

Thank you for the sidebar code. Really getting there now.

Just a few questions with the header element.

This is how it looks at the moment:

As you can see, not able to get the colour touching the menu. Maybe I’ll have to wait for the GPP 2.0 for that.

This is what I’m aiming for:

Is there a way for the background image to ‘overlap’ the main blog content column like above?

And I played around with author and comments link divs as shown in video on page you sent, but the comment code shows. It may be because I have this code in custom CSS:

`.single .entry-meta {
text-align: center;
}

.single .comments-link {
display: inline-block;
}`

[David]

So the example site is using a Shape Divider at the very top of the content to form the White slanted background color. With GPP 2.0 you will be able to use a Container Block with Shape to create that effect on your hero…. then its just a case of using the Header Element to merge the site header and set is backgrounds to transparent.

To pull the page content over the header element you can use this CSS:

@media (min-width: 769px) {
    .single-post .page-hero + #page {
        margin-top: -100px; /* adjust margin to suit */
    }
}

When the new update comes out and you use a Block Element, the main Container Block will need a CSS class of page-hero

[Simon]

I’m really looking forward to 2.0!

Just tried that code, it doesn’t seem to be working?

https://themakemoneyonlineblog.com/what-is-muncheye/

[David]

Doesn’t look like the CSS i added here:

https://generatepress.com/forums/topic/project-site-layout/#post-1670900

I did make an amend to just after i submitted my reply ….

[Simon]

Hey David,

Yes, I added it again. Sorry, took it off earlier as it doesn’t look good. Sorry, I’ll keep it on this time.

Here’s what it looks like:

Same happened when I tried the merging function earlier.

[Simon]

Got it! Content Layout was set at One Container instead of Separate Containers.

Thank you so much for your help today, I’ll try and leave you in peace for a while (no promises LOL!) 🙂

[Simon]

Hi again, just updated to 2.0, could you walk me through how to add block elements and shape dividers? Shall I just open a new topic?

[Elvin]

Hi there,

Adding Block elements is pretty much the same.

While the UI changed, its functionality prior to 2.0 is retained. Tom just added more things.

[Simon]

OK, can you give you me a step by step? I’ve lost track.

I’m just wanting to move single meta into header like so:

[Elvin]

Can you link us to this specific page? To have a better grasp of how its structured.

[Simon]

Yes sure, so every posts page. Here’s one:

https://themakemoneyonlineblog.com/what-is-muncheye/

[David]

This example shows the code you require to add the post meta inside the header element:

https://docs.generatepress.com/article/page-hero-examples/#example-2

[Simon]

Look at it though David, it looks terrible

https://themakemoneyonlineblog.com/from-0-to-100-in-24-hours-review-the-truth-exposed/

[Author]

Posts