Topic: Best Approach for Creating a Homepage with Query Loops

hichb
August 11, 2023 at 6:04 am

I have a general question regarding the setup for my homepage. As I’m working on a publication, I’ll be using query loops. In your opinion, should I:

-Create an element and display it on the front, similar to how I managed the posts?
-Directly set up the homepage using block elements within that specific page?

I value your insights and would appreciate any guidance you can offer.

Thank you,
David
August 11, 2023 at 6:22 am

Hi there,

if you want full freedom to edit the contents of the home page, and in particular use multiple query loops then i would:

1. create a static page for your home page.
2. build out the page with GenerateBlocks
hichb
August 15, 2023 at 6:58 am

Great thank you! I hope you’re doing well. I’m currently in the process of setting up the homepage and I’m quite inspired by the grid layout of (site in private). In their particular design, they seem to be utilizing grid-template-columns: repeat(4, 1fr); for the layout.

I’d appreciate guidance on how to achieve a similar grid structure for my homepage using GeneratePress. Specifically, I’m aiming to understand the best approach in setting up this kind of grid and if there are any nuances or recommendations you might have to ensure it’s responsive and visually appealing.

Thank you in advance for your assistance. Looking forward to your response.
Ying
August 15, 2023 at 8:23 am

Hi there,

I would recommend you try importing a site template like Info, and check how its homepage built, that will definitely help you understand how to use Grid and Flexbox.
hichb
August 27, 2023 at 8:33 am

hank you for the insights! I’ve successfully imported the site template, and it’s been invaluable. However, I’m aiming to replicate a specific layout, which you can view here: https://tinyurl.com/2ak8xzyy.

The design seems to employ a two-column layout with a central featured post. The main image sits in the center, flanked by its headline/content on the left. To the right, there appears to be another loop, showcasing a quote and a link to the respective post. I’m considering utilizing custom fields for this, but for the moment, my primary focus is emulating the layout from the link.

Could you check the hierarchical structure, detailing containers, grids, and query loops? Here is what I have achieved so far (link in private)

Your assistance and continued support are deeply appreciated.
hichb
August 27, 2023 at 9:49 am

I’ve managed to set up the structure, but I’m encountering some alignment challenges. Within the two columns on the homepage, I want the content to be centrally aligned and restricted to a maximum width of approximately 1260px. Additionally, for the left column adjacent to the image, the headlines, text, and category should align vertically.
Another element I want to insert is a border line between the content (image and text on the left) and the headline right. The column height actually is only taking the height of the title and not dividing properly the left container from the right.

Could you assist with these adjustments?
Fernando
August 27, 2023 at 4:26 pm

Hi Hichb,

Yes, we can assist with these adjustments. Here are a few steps to follow:

1. To set a max-width and center the Grid –

a. Set the inner Container Block holding your Grid Block to a max-width of 1260px. Reference: https://docs.generateblocks.com/article/sizing-options-overview/#max-width

b. Set the left and right margins of this inner Container Block to auto. Reference: https://docs.generateblocks.com/article/spacing-options-overview/#margin

2. To align the left Column’s text vertically –

a. Set the Container Block holding the Headline Blocks to display: flex. Reference: https://docs.generateblocks.com/article/layout-options-overview/#flex

b. Then, set the flex-direction to column.

c. Then, set the alignment.

d. Lastly, set it’s height to 100%.

3. To clarify, are you referring to adding a “border” in these locations?: https://share.getcloudapp.com/6quJ68bq
hichb
August 28, 2023 at 3:19 pm

Thank you! that is extremely helpful.

I’m looking to make a few adjustments to the content in the right column of my site. Specifically, I’d like to top align the featured image in the right column with the content on the left, similar to what’s demonstrated in the link I’ve provided below:

https://tinyurl.com/2ct2o67a

Additionally, I’m keen on introducing a border line to visually separate the content on the right from that on the left, as depicted in the reference image.

Could you guide me on how best to achieve this?

Fernando

August 28, 2023 at 4:39 pm

1. Can you change the Vertical Alignment of the GB Grid Block to top?

2. Remove this code you have:

border-left: 1px solid #e6e5dc;

Then add this:

@media(min-width: 769px) {
    .gb-container.gb-container-fbed845e::before {
        content: "";
        position: absolute;
        right: -20px;
        width: 1px;
        background-color: #e6e5dc;
        height: 100%;
        top: 0;
        transform: translateX(-50%);
    }

    .gb-container.gb-container-fbed845e {
        position: relative;
    }
}

hichb
August 30, 2023 at 2:24 am

Thank you for the CSS code provided. I have now a new section and looking to make some modifications to the borders as illustrated in the attached image:

https://tinyurl.com/2a8q4zvp

Additionally, I’m interested in adding a bottom border to each item. However, I’d prefer to exclude the last item from having this border.

Could you advise me on how to accomplish this?
David
August 30, 2023 at 3:11 am

Hi there,

1. for the vertical border, select the middle column Container Block, and set its Sizing > Height to 100% then it, and its border will fill the height of the grid.

2. you can add the border to Query Loop Post template. Then give the Query Loops Grid Block a CSS class of has-custom-border.

Then let me know and ill provide the CSS to remove the border from the last post in that loop.
hichb
August 30, 2023 at 3:26 am

Amazing, how simple is the solution provided while I was struggling to understand why the border does not reach the bottom. Given this, would it make more sense to apply the borders to the second (or middle) container?

I’ve gone ahead and added the CSS class as you instructed.

Thanks for your patience and continued support!!
David
August 30, 2023 at 4:32 am
Yes, i would apply both borders to the middle column, it keeps the styles in one place.

Add this CSS:
```
.has-custom-border > div:last-child > .gb-container {
    border-bottom: 0 !important;
}
```
then edit the Query Loop, select the Post Template block inside and add your Border to the bottom of the blokck. That CSS will remove the border on the last item on thr front end.
hichb
August 30, 2023 at 7:24 am

Please have a look and let me know if I have correctly applied the CSS as the border is still visible in the last item.
David
August 30, 2023 at 1:04 pm

I updated my CSS above to fix that
hichb
August 30, 2023 at 1:35 pm

Thank you so much! The code worked now! Below that section:

I’m currently working on the “mindful living” section which features four horizontally aligned query loop items. I’ve been trying to add a border to separate these items. However, when I introduce a border to the right of each item and adjust the padding, it seems to disrupt the alignment. Specifically, the items don’t line up with the parent container above, as demonstrated in the image I’ve provided: https://tinyurl.com/279j9xew.

How to resolve this?

Another question, the query loop comes with some repetition in the posts displayed within the items. How can I set it up so that the same post doesn’t appear multiple times in the section?

Viewing 16 posts - 1 through 16 (of 17 total)

1 2 →

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Best Approach for Creating a Homepage with Query Loops