[Resolved] Front page blog roll with elements

[Earl]

Hi all,

I’d like to create a simple straightforward blog homepage using elements similar to this page:

This is a simple horizontal layout with the featured image to the left, title of the post with the description below.

I’ve already created the hero section so I’m good there. The biggest thing is adding the blogroll similar to the site I included, but I’m not worried about the ‘read more’ button.

[David]

Hi there,

is your home page set to display the latest posts? Or will it have static content on the page as well?

[Earl]

Hi Dave, sorry for the delay.

No the home page isn’t set to show latest blog posts. I’m in the process of trying to build my own home page, and wanted to include a typical horizontal style blog roll.

I’ve included a link to the page

[Ying]

Hi Earl,

You can give query loop block of GenerateBlocks a try:
https://generateblocks.com/generateblocks-1-5-dynamic-data-query-loops-image-blocks/

And the structure would be something like this:
https://www.screencast.com/t/O3BuAhro

[Earl]

hi Ying,
is there an instruction doc on how to use query loop?

[Earl]

I also forgot to ask…
in the snagit image is it showing building the whole thing in elements (I assume so)

[Ying]

Here’s the documentation of query loop block:https://docs.generateblocks.com/article/query-loop-overview/

The screenshot was taken from a page editor, if your homepage is a static page, you don’t need create an element to insert the query loop block, you can directedly add it to the page.

[Earl]

Ok. What you showed in the screenshot is exactly what I’m trying to do, but I don’t know how to make it look like that.

[Ying]

Just give it a try, and let me know what the difficulty is.

[Earl]

still struggling with this… Query loop is easy, but I can’t figure out how to style it like to the screen shot. Are there more instructions on how to do that?

Also… Looks like I need some css code to remove the bottom border on the headline link

[Ying]

Here’re the overviews of GB blocks:

Container: https://docs.generateblocks.com/article/container-overview/
Buttons: https://docs.generateblocks.com/article/buttons-overview/
Headline: https://docs.generateblocks.com/article/headline-overview/
Grid: https://docs.generateblocks.com/article/grid-overview/
Image: https://docs.generateblocks.com/article/image-overview/

You can add any of the above blocks into a query loop block to create your desired layout.

Also… Looks like I need some css code to remove the bottom border on the headline link

Did you activate the underline at customizer > general > Underline Links?
Do you only want to remove this underline but not the others inside post content?

Can you link me to your site?

And a quick tip, you can drop and drag the blocks in WP’s list view.

[Earl]

here is the link to the staging website

[Fernando]

Hi Earl,

Here’s a setup you can try:

1. Set the Container paddings to 0: https://share.getcloudapp.com/E0uylXLv
2. Add an opaque Background color to the title: https://share.getcloudapp.com/d5uOzgJO
3. Set the margin to 0: https://share.getcloudapp.com/yAu1oJn5
4. Add class my-post-title: https://share.getcloudapp.com/Z4uAZnpZ
5. Set image block margin to 0: https://share.getcloudapp.com/xQuw9Rod
6. Add class my-query-container to the Container Block: https://share.getcloudapp.com/jkuXJApg
7. Add this CSS in Appearance > Customize > Additional CSS:

.gb-headline.my-post-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.gb-headline.my-post-title a {
    text-decoration: none;
}

.gb-container.my-query-container {
    position: relative;
}

Result: https://share.getcloudapp.com/P8uQW2ON

Hope this helps!

[Earl]

Hi Fernando,
Thanks for the help.

I’ve set up my home page as good as it’s going to get for now. What I would like to do is remove the
underline from the blog title links.

[Ying]

Hi there,

Try this CSS:

h2 a {
    text-decoration: none;
}

[Author]

Posts