[Support request] Customize Homepage

[russel]

I don’t want to open multiple threads for each problem/roadblock so I’ll post it here

I need to accomplish this design

Can I achieve this using GP?

https://imgur.com/usk8GEi

[Leo]

Hi there,

Yes – the Query Loop block would be what you need:
https://docs.generateblocks.com/article/query-loop-overview/

[russel]

So I watch some tutorials on how to use query loop but it seems only applicable to “pages”

I need to edit my homepage. is there some workaround to use it on the homepage?

[Fernando]

Hi Russel,

I believe your homepage is a Blog page. If so, you can use a Block Element – Content Template instead: https://docs.generatepress.com/article/block-element-content-template/

There’s a video here showing how to implement that.

Alternatively, if you want to use a Query Loop Block, you can use a Block Element – Loop Template instead. Reference: https://docs.generatepress.com/article/block-element-loop-template/

[russel]

Would you be able to provide a design pattern to achieve this or do I need GenerateBlock Pro first (the red circle)?

[img]https://i.imgur.com/YcF8bDu.jpg[/img]

[Fernando]

There are a couple of free Patterns here you can copy and paste: https://generateblocks.com/library/?pattern-category=query-loop

You can also avail GB Pro to use the Premium patterns in the link I shared.

Alternatively, you can also opt to build the Query from scratch. It seems fairly doable.

[russel]

Can’t see any design that has a long underline underneath the text similar to design I provided

How can I do that?

[Fernando]

You can add a bottom border size to the Headline Block for the text “Dark FAQ’s…” Reference: https://docs.generateblocks.com/article/headline-overview/#border-size

We can also do it through custom CSS. If you can provide the link where we can see this, we can try to assist you with the code.

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[russel]

see message below

[Fernando]

There seem to be 4 different “titles” for your reference site for that section.

Are you looking for something similar? Or do you just need to query the 4 latest posts?

[russel]

I would like to make that block as a “cornerstone/featured” section where I can put 4 featured article of my choice instead of latest post

[Fernando]

What did you go with? Did you use a Loop Template or a Content Template?

Do you already have the Query setup?

Can you provide the link to your site where we can view what you have right now?

[russel]

I went through your suggestion yesterday to use a block element – content template, and I’ve been following this video that you also provided:

I only have a draft of the element section since I encountered a roadblock already (the underline thing).

So I won’t be able to provide any design. But I can provide the login if you want.

[David]

Hi there,

remove what you have in your Element so far ( or create a new one ).
From the 3 dot menu, select the Code Editor.
Copy and Paste the following code in:

<!-- wp:generateblocks/container {"uniqueId":"b373b9fe","paddingTop":"40","paddingRight":"40","paddingBottom":"40","paddingLeft":"40","paddingSyncUnits":true,"backgroundColor":"var(\u002d\u002dcontrast)","textColor":"var(\u002d\u002dbase-3)","linkColor":"var(\u002d\u002dbase-3)","linkColorHover":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"688bb3b6","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","paddingBottom":"5","borderSizeBottom":"2","iconColor":""} -->
<h2 class="gb-headline gb-headline-688bb3b6 gb-headline-text">You're H2 Headline</h2>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/query-loop {"uniqueId":"80d3970f","columns":1,"query":{"post_type":"post","per_page":10}} -->
<!-- wp:generateblocks/grid {"uniqueId":"6893b420","columns":1,"horizontalGap":20,"verticalGap":20,"isDynamic":true,"blockVersion":2,"isQueryLoop":true,"lock":{"remove":true}} -->
<!-- wp:generateblocks/container {"uniqueId":"3e374e8b","isGrid":true,"isQueryLoopItem":true,"gridId":"6893b420","width":25,"widthMobile":100,"paddingSyncUnits":true,"isDynamic":true,"blockVersion":2,"lock":{"remove":true,"move":true}} -->
<!-- wp:generateblocks/image {"uniqueId":"8b817089","sizeSlug":"full","useDynamicData":true,"dynamicContentType":"featured-image","marginBottom":"10"} /-->

<!-- wp:generateblocks/headline {"uniqueId":"b0eff81e","element":"h3","backgroundColor":"","textColor":"","linkColor":"","fontSize":"20","marginBottom":"5","useDynamicData":true,"dynamicContentType":"post-title","dynamicLinkType":"single-post"} -->
<h3 class="gb-headline gb-headline-b0eff81e gb-headline-text"></h3>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/query-loop -->
<!-- /wp:generateblocks/container -->

Switch back to the Visual Editor.

NOTES:

1. The parent Container Block is where i have set the colors for background, text and link. The Headline blocks inside the container will inherit them. Or you can edit the colors of each headline.

2. The underline is on the Headline Block, where i set the Spacing > Border Bottom value. The border color will inherit the above text color or you can set the Headlines > Color > Border.

[russel]

it works now, but now it shows multiple queries.

see here: https://darkfaqs.com/

[Author]

Posts