[Support request] How to create space between sections on home page

[Leif]

On my home home page I want to let my background color show through around my blog posts and my other content above my blog posts. Like a have a picture on the page and I would want the picture to be on a white box with some spacing showing the background color before getting to the next part of the page (some random text).

Like the apple news site

https://www.apple.com/ca/newsroom/

Generatepress has a spacing thing but i dont know how to seperate things such that it applies itself…if thats even the right way to do this.

[David]

Hi there,

the spacing controls only apply the theme containers like spacing between the content and sidebars or the articles on the theme blog page.

You can use this CSS to get 90% of the way there:

.home.separate-containers .inside-article {
    background-color: transparent;
}
.home .wp-show-posts-inner {
    background-color: #fff;
}
.home .wp-show-posts-image img {
    object-fit: cover;
}
.home .wp-show-posts-entry-header {
    padding: 15px;
}

As there is no built in container block there is not a simple way to put a background behind the image and text blocks you have added.

For the Header background you can set the color to transparent in Customizer > Colors > Header.

[Leif]

Hmmm, I implemented that CSS to the page using the SimpleCSS metabox for that one page but nothing changed 🙁

Also there is the sections plugin I see in the premium page which seems like it would let me pad around certain areas but I can’t find a way to turn it on (in the video there is a sections on-off slider which I dont have).

[Leif]

Oh I figured out how to turn on sections but it also doesn’t let me pad around the section like I want.
The way I’m trying to space my featured post from my article is exactly the way it looks in the ‘spacing’ video.

Also the CSS that I added does seem to have the proper effect but only on the ‘latest posts’ list I have not on any other sections including the ‘featured posts’ and only works when I have sections enabled. 😐

[Tom]

I just made a small adjustment to the CSS David provided above – can you give it another shot?

Let me know 🙂

[Leif]

Oh thanks that’s better! I’m almost there!
I was trying to get the white padding around the image on the home page and that the white included the accompanying text as well.
I made a picture here (I thought ‘sections’ was going to do this when I looked at the video but I couldnt make it work out).

http://www.screencast.com/t/1GuiiZhtX

Edit: I’ll also mention for the ‘featured article’ text. I’m also fine if that is above the articles title within the current white box. Maybe thats easier.?.but I also dont know how to do that.

[Leif]

An idea I had but I’m not sure if its smart.
If I made a seperate page for each of the sections that I have:
featured post – newsletter – as seen in media – a bunch of blog posts

would it then be easier to use show posts and make a list of the pages? or would the formatting get crazy (e.g. can a show post element be a table of blogs?)

[David]

So WP Show Posts can only output lists of posts ( including pages ). It can of course output a single post or page as a feature. So what you suggest for featured content is doable although a little bit overkill 🙂

The problem you’re experiencing is that aside of the Columns Block there is not a container block (yet) in Gutenberg. We have a GP Section Block in development but we discovered a bug in Gutenberg that could lead to content being locked in or lost. Once this bug is fixed then this will be super simple.

In the meantime – use the Columns Block – to put your content in. This has a container, so if you do that and add back the CSS we provided we can give you some more CSS to style them.

Rather hackish but you can force the Columns Block to be a single column, in the Settings sidebar with that block selected you can type 1 in the field. Its a bit naff in the editor as it’ll only be 50% wide but on the front end it will display correctly. Again we can help style this.

The only alternative to this is to write some HTML, which if need be we can assist with that.

[Leif]

Ok im game with this. It seems like a pretty simple back…but when I try to edit the columns I only get to access the settings for the block inside the column and not the column itself. So I cant figure out how to set it to 1 column 😐

http://www.screencast.com/t/6OG8Z4dPB75

[Tom]

Gutenberg doesn’t make it super easy to select the container block right now.

You can use the Block Navigation icon to select the container block. It’s the icon on the far right here: https://www.screencast.com/t/x9sSFp2md

[Leif]

Ok neat I set it to 1 column
I made a test page for this

https://fiveyearfireescape.com/test-page/

Doesnt work with the previous code but I think that was expected 🙂

[David]

Looks like you placed everything in side the Column.
What i meant was to use the Column as container for the parts of the page that the above CSS didn’t work on 🙂

[Author]

Posts