Hi Steve,
That’s a good question. Now that WordPress 5.8 allows us to add blocks into the widget area, it opens up a lot more options. I couldn’t find any good widgets for this either, but there are a lot of plugins that add customizable post grids via blocks. One you might want to check is Stackable: https://wordpress.org/plugins/stackable-ultimate-gutenberg-blocks/
Might be overkill unless you find it useful for other parts of your site, but there is a Recent Posts block that is highly customizable and could be added into the Before Main Content widget area.
Thanks Ben, I’ll check that out. Is it possible to use Gutenberg on the main blog page? I was under the impression it was on individual pages only… or do you mean it’s possible to use Gutenberg blocks within widgets themselves now? If so, is this something that is an obvious feature, or is it something I’ll have to root around for?
Thanks again
Steve
So, I’ve been messing around with widgets and blocks… for some reason, whenever I add one in, it shows like it’s really crammed up to one side with a huge black background and all the columns so narrow the text is written vertically. Weird. Not sure if it’s something in CSS clashing with me or what? I’ve deleted all for now anyway, and will try again another time.
Any further help or suggestions would be v. welcome.
Thank you
Steve
The blog page can’t be edited with blocks yet. That is actually something they’re going to add by WP 6.0 I think, but I was referring to adding blocks in the widget areas.
Please try adding this CSS to remove all of the styling that shows for the Before Main Content widget area:
.sidebar-before-main-content {
background: none;
padding: 0;
}
That will remove the black background and give you more space to work with.
I was able to get pretty good results using the Posts block from Stackable by removing all of the post elements besides the Featured Image: https://share.getcloudapp.com/8Lu5Gdob
Ben, that’s great – it seems to have worked! Thanks so much for your excellent help, as always.
Steve
Agh, having said that… do you know how to select which pages/posts the widget shows on now? The options don’t seem to be available when using blocks and I only want it on the front page.
Thanks
Steve
Good question. I normally recommend the Widget Options plugin, but it looks like it’s not compatible with the new widgets screen yet.
Instead, you can add this CSS:
.sidebar-before-main-content {
display: none;
}
.home .sidebar-before-main-content {
display: block;
}
That’s going to hide the Before Main Content widget area on all pages except for the homepage.
Thanks again, Ben – that worked brilliantly too. I think I finally have it all set up with the exception of the 3rd image, which seems to load differently to the others (it kind of blurs in, as opposed to just appearing…) Not sure what that’s about.
Steve
Nice! That looks good.
I’m not 100% certain this will fix the blurry image, but there does look to be some competition between Jetpack and Optimole trying to lazy load the images. I would recommend disabling lazy loading in Jetpack and letting Optimole handle that. It will be good for the site even if it doesn’t address the blurry image yet.
Thanks Ben, that seems to have done it. Huge appreciation for all your help.
Steve
Awesome, glad to hear it!
