How to get this type of layout in the homepage

Hi there,

Do you just need the layout or the actual loop that fetches the posts?

I tried to view your website to check the current layout, but it redirects to localhost.

It seems like you removed the screenshot. Could you re-add it?

Can you provide the screenshot of the example layout as well? I need that as a reference.

Create a new page and switch to the Code Editor, then paste this markup:

<!-- wp:generateblocks/query-loop {"uniqueId":"e4f9ddde","query":{"per_page":10,"post_type":"post","orderby":"date"}} -->
<!-- wp:generateblocks/grid {"uniqueId":"3a5ed7e7","columns":1,"horizontalGap":0,"verticalGap":20,"isDynamic":true,"blockVersion":3,"isQueryLoop":true,"lock":{"remove":true}} -->
<!-- wp:generateblocks/container {"uniqueId":"a5fefe06","isGrid":true,"isQueryLoopItem":true,"gridId":"3a5ed7e7","backgroundColor":"#fafafa","isDynamic":true,"blockVersion":4,"sizing":{"width":"50%","widthMobile":"100%"},"spacing":{"paddingTop":"0px","paddingRight":"0px","paddingBottom":"0px","paddingLeft":"0px"},"lock":{"remove":true,"move":true}} -->
<!-- wp:generateblocks/grid {"uniqueId":"f441e7a3","columns":2,"isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/container {"uniqueId":"6398fcf4","isGrid":true,"gridId":"f441e7a3","bgImageInline":true,"isDynamic":true,"blockVersion":4,"sizing":{"width":"50%","widthMobile":"100%","height":"175px"},"spacing":{"paddingTop":"0px","paddingLeft":"0px","paddingRight":"0px","paddingBottom":"0px","marginTop":"0px","marginLeft":"0px","marginRight":"0px","marginBottom":"0px"},"useDynamicData":true,"dynamicContentType":"featured-image"} /-->

<!-- wp:generateblocks/container {"uniqueId":"b2d8c12e","isGrid":true,"gridId":"f441e7a3","isDynamic":true,"blockVersion":4,"sizing":{"width":"50%","widthMobile":"100%"},"spacing":{"paddingTop":"10px","paddingLeft":"10px","paddingRight":"10px","paddingBottom":"10px"}} -->
<!-- wp:generateblocks/headline {"uniqueId":"971f7d2d","blockVersion":3,"typography":{"fontSize":"19px"},"spacing":{"marginBottom":"20px"},"useDynamicData":true,"dynamicContentType":"post-title","dynamicLinkType":"single-post"} -->
<h2 class="gb-headline gb-headline-971f7d2d gb-headline-text"></h2>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"7da6e693","element":"p","blockVersion":3,"typography":{"fontSize":"13px","lineHeight":"0px"},"spacing":{"marginBottom":"30px"},"useDynamicData":true,"dynamicContentType":"post-date"} -->
<p class="gb-headline gb-headline-7da6e693 gb-headline-text"></p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"342eafe4","element":"div","blockVersion":3,"typography":{"fontSize":"14px","lineHeight":"18px"},"useDynamicData":true,"dynamicContentType":"post-excerpt","excerptLength":"5"} -->
<div class="gb-headline gb-headline-342eafe4 gb-headline-text"></div>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/query-loop -->

You should be able to use that as a starting point.

Now you just need to adjust the spacing, font size, color, etc., as we cannot assist with those customizations.

Let’s start over again. Scrap the previous markup I provided and add this instead:

<!-- wp:generateblocks/query-loop {"uniqueId":"323f49ad","query":{"per_page":"6","post_type":"post","include":[77,110,78,151]}} -->
<!-- wp:generateblocks/grid {"uniqueId":"cd993fe4","columns":1,"horizontalGap":20,"verticalGap":20,"isDynamic":true,"blockVersion":3,"isQueryLoop":true,"lock":{"remove":true}} -->
<!-- wp:generateblocks/container {"uniqueId":"1cef8b64","isGrid":true,"isQueryLoopItem":true,"gridId":"cd993fe4","backgroundColor":"#fafafa","isDynamic":true,"blockVersion":4,"sizing":{"width":"50%","widthMobile":"100%"},"spacing":{"paddingTop":"0px","paddingRight":"0px","paddingBottom":"0px","paddingLeft":"0px"},"lock":{"remove":true,"move":true}} -->
<!-- wp:generateblocks/container {"uniqueId":"9927ad8a","isDynamic":true,"blockVersion":4,"display":"flex","sizing":{"maxWidth":"590px","maxHeight":"175px","height":""},"borders":{"borderTopLeftRadius":"","borderTopRightRadius":"","borderBottomLeftRadius":"","borderBottomRightRadius":""}} -->
<!-- wp:generateblocks/container {"uniqueId":"0d971e56","bgImageInline":true,"isDynamic":true,"blockVersion":4,"sizing":{"width":"237px","height":"175px"},"borders":{"borderTopLeftRadius":"5px","borderBottomLeftRadius":"5px"},"useDynamicData":true,"dynamicContentType":"featured-image"} /-->

<!-- wp:generateblocks/container {"uniqueId":"bafef6fd","backgroundColor":"#1a1b1f","isDynamic":true,"blockVersion":4,"display":"flex","flexDirection":"column","justifyContent":"space-between","sizing":{"width":"353px","height":"175px"},"spacing":{"paddingTop":"15px","paddingLeft":"15px","paddingRight":"15px","paddingBottom":"15px"},"borders":{"borderTopRightRadius":"5px","borderBottomRightRadius":"5px"}} -->
<!-- wp:generateblocks/headline {"uniqueId":"24c4ccfc","blockVersion":3,"typography":{"fontSize":"16px","lineHeight":""},"spacing":{"marginBottom":"5px"},"textColor":"#ffffff","useDynamicData":true,"dynamicContentType":"post-title"} -->
<h2 class="gb-headline gb-headline-24c4ccfc gb-headline-text"><strong>How to Uninstall Bloatware from HyperOS</strong></h2>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"2721384f","element":"p","blockVersion":3,"typography":{"fontSize":"12px"},"spacing":{"marginBottom":"5px"},"textColor":"#dedede","useDynamicData":true,"dynamicContentType":"post-date"} -->
<p class="gb-headline gb-headline-2721384f gb-headline-text">August 8, 2024</p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"a1209778","element":"p","blockVersion":3,"typography":{"fontSize":"13px","lineHeight":"18px"},"spacing":{"marginBottom":"5px"},"textColor":"#dedede","useDynamicData":true,"dynamicContentType":"post-excerpt","excerptLength":15} -->
<p class="gb-headline gb-headline-a1209778 gb-headline-text">Are you tired of bloatware on your Xiaomi handset and wish to know if you can uninstall Bloatware from HyperOS update? If yes, then...</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/query-loop -->

You should now get this layout: https://cln.sh/cKGhP4pc

Just a note, the layout may slightly differ on your site depending on your site’s layout settings, so you’ll need to fine-tune it to get it just right.

To adjust the Excerpt, select the excerpt block, then under the Block Settings sidebar, go to Dynamic Data > Excerpt Length, and enter your preferred length.

We can figure out the CSS for the title hover effect once everything else is in order.

I double-checked the HTML markup, and there appears to be no issue. Could you try that again?

That’s odd. How many posts do you currently have published on the site? Since that markup uses the Query Loop block, it might be related to the number of posts.