In this Blog tutorial, I will show you, how to build a custom home page using GenerateBlocks plugin for GeneratePress free theme. You can download the latest version of GeneratePress free theme from WordPress repository or from the GeneratePress website directly.
Home Page Gutenberg Blocks (GenerateBlocks)
1. Banner (Displays Featured Post)
<!-- wp:generateblocks/container {"uniqueId":"fcb71e2a","backgroundColor":"var(\u002d\u002dbase)","isDynamic":true,"blockVersion":3,"sizing":{"width":"","maxWidth":""}} -->
<!-- wp:generateblocks/container {"uniqueId":"657bc838","backgroundColor":"var(\u002d\u002dbase)","isDynamic":true,"blockVersion":3,"sizing":{"maxWidth":"1200px"},"marginTop":"0","marginRight":"auto","marginBottom":"0","marginLeft":"auto"} -->
<!-- wp:generateblocks/query-loop {"uniqueId":"647966ab","query":{"post_type":"post","per_page":"1"}} -->
<!-- wp:generateblocks/grid {"uniqueId":"864421e0","columns":1,"horizontalGap":20,"verticalGap":20,"isDynamic":true,"blockVersion":3,"isQueryLoop":true,"lock":{"remove":true}} -->
<!-- wp:generateblocks/container {"uniqueId":"ccacf2a0","isGrid":true,"isQueryLoopItem":true,"gridId":"864421e0","isDynamic":true,"blockVersion":3,"display":"block","flexDirection":"row","sizing":{"width":"100%","widthMobile":"100%"},"paddingTop":"20","paddingRight":"20","paddingBottom":"20","paddingLeft":"20","lock":{"remove":true,"move":true}} -->
<!-- wp:generateblocks/grid {"uniqueId":"16b69590","columns":2,"horizontalGap":20,"verticalGap":20,"verticalAlignment":"center","isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/container {"uniqueId":"a865d1e3","isGrid":true,"gridId":"16b69590","isDynamic":true,"blockVersion":3,"display":"block","flexDirection":"column","sizing":{"width":"50%","widthMobile":"100%"}} -->
<!-- wp:generateblocks/headline {"uniqueId":"5bc1b900","element":"h3","blockVersion":2,"display":"inline-block","fontWeight":"500","textTransform":"uppercase","fontSize":15,"letterSpacing":0.05,"paddingTop":"10","paddingRight":"10","paddingBottom":"10","paddingLeft":"10","paddingSyncUnits":true,"borderRadiusTopRight":"5","borderRadiusBottomRight":"5","borderRadiusBottomLeft":"5","borderRadiusTopLeft":"5","backgroundColor":"var(\u002d\u002dborder)","textColor":"var(\u002d\u002dcontrast)","linkColor":"","linkColorHover":"","borderColor":"var(\u002d\u002dcontrast)"} -->
<h3 class="gb-headline gb-headline-5bc1b900 gb-headline-text">Featured</h3>
<!-- /wp:generateblocks/headline -->
<!-- wp:generateblocks/headline {"uniqueId":"43ce9ba8","blockVersion":2,"fontSize":30,"marginBottom":"5","useDynamicData":true,"dynamicContentType":"post-title","dynamicLinkType":"single-post"} -->
<h2 class="gb-headline gb-headline-43ce9ba8 gb-headline-text"></h2>
<!-- /wp:generateblocks/headline -->
<!-- wp:generateblocks/headline {"uniqueId":"c4764ae4","element":"p","blockVersion":2,"fontSize":14,"marginBottom":"30","useDynamicData":true,"dynamicContentType":"post-date"} -->
<p class="gb-headline gb-headline-c4764ae4 gb-headline-text"></p>
<!-- /wp:generateblocks/headline -->
<!-- wp:generateblocks/headline {"uniqueId":"5c229f9d","element":"div","blockVersion":2,"display":"block","backgroundColor":"","textColor":"","useDynamicData":true,"dynamicContentType":"post-excerpt","useDefaultMoreLink":false,"excerptLength":30} -->
<div class="gb-headline gb-headline-5c229f9d gb-headline-text"></div>
<!-- /wp:generateblocks/headline -->
<!-- wp:generateblocks/button {"uniqueId":"444a99c9","hasUrl":false,"blockVersion":3,"display":"inline-flex","alignItems":"center","fontWeight":"normal","fontSize":18,"marginTop":"25","paddingTop":"5","paddingRight":"30","paddingBottom":"5","paddingLeft":"30","backgroundColor":"var(\u002d\u002daccent)","backgroundColorHover":"var(\u002d\u002daccent)","textColor":"var(\u002d\u002dbase-3)","textColorHover":"var(\u002d\u002dbase-3)","borderColorHover":"var(\u002d\u002dcontrast)","gradient":true,"gradientDirection":164,"gradientColorOne":"rgba(255, 255, 255, 0.1)","gradientColorTwo":"rgba(0, 0, 0, 0.41)","iconSize":1.5,"useDynamicData":true,"dynamicLinkType":"single-post"} -->
<span class="gb-button gb-button-444a99c9 gb-button-text">Read More</span>
<!-- /wp:generateblocks/button -->
<!-- /wp:generateblocks/container -->
<!-- wp:generateblocks/container {"uniqueId":"9d5d6345","isGrid":true,"gridId":"16b69590","isDynamic":true,"blockVersion":3,"display":"block","flexDirection":"column","sizing":{"width":"50%","widthMobile":"100%"}} -->
<!-- wp:generateblocks/image {"uniqueId":"dde084dc","sizeSlug":"full","marginBottom":"30","borderRadiusTopRight":"30","borderRadiusBottomRight":"30","borderRadiusBottomLeft":"30","borderRadiusTopLeft":"30","useDynamicData":true,"dynamicContentType":"featured-image"} /-->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/query-loop -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->2. Display Latest Post
<!-- wp:generateblocks/container {"uniqueId":"99a30a7f","width":50,"isDynamic":true,"blockVersion":3,"flexDirection":"column","sizing":{"height":"","maxWidth":"1200px","width":"","widthTablet":""},"alignment":"left","marginTop":"40","marginRight":"auto","marginBottom":"0","marginLeft":"auto","paddingTop":"20","paddingRight":"20","paddingBottom":"20","paddingLeft":"20","paddingTopMobile":"20","paddingRightMobile":"20","paddingBottomMobile":"20","paddingLeftMobile":"20","paddingSyncUnits":true} -->
<!-- wp:generateblocks/grid {"uniqueId":"09d84326","columns":2,"isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/container {"uniqueId":"3265262f","isGrid":true,"gridId":"09d84326","isDynamic":true,"blockVersion":3,"sizing":{"width":"75%","widthMobile":"100%"}} -->
<!-- wp:generateblocks/headline {"uniqueId":"c8601859","element":"h3","blockVersion":2,"display":"flex","alignItems":"center","justifyContent":"flex-start","textTransform":"uppercase","alignment":"center","fontSize":22,"letterSpacing":0.02,"backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","iconColor":"","className":"section-title"} -->
<h3 class="gb-headline gb-headline-c8601859 gb-headline-text section-title"><strong>Latest from Blog</strong></h3>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- wp:generateblocks/container {"uniqueId":"1df36ddf","isGrid":true,"gridId":"09d84326","isDynamic":true,"blockVersion":3,"sizing":{"width":"25%","widthMobile":"100%"},"alignment":"right"} -->
<!-- wp:generateblocks/button {"uniqueId":"d8180dbd","hasUrl":true,"blockVersion":3,"display":"inline-flex","alignItems":"center","justifyContent":"flex-end","textTransform":"uppercase","letterSpacing":0.05,"paddingTop":"7","paddingRight":"20","paddingBottom":"7","paddingLeft":"20","backgroundColor":"#0366d6","backgroundColorHover":"#222222","textColor":"#ffffff","textColorHover":"#ffffff","gradient":true,"gradientDirection":90,"gradientColorOne":"rgba(255, 255, 255, 0.1)","gradientColorTwo":"rgba(0, 0, 0, 0.30)","hasIcon":true,"iconLocation":"right","iconPaddingRight":"","iconPaddingLeft":"0.5","iconSize":0.9} -->
<a class="gb-button gb-button-d8180dbd" href="#"><span class="gb-button-text">View All</span><span class="gb-icon"><svg viewBox="0 0 509 511.54" clip-rule="evenodd" fill-rule="evenodd" image-rendering="optimizeQuality" text-rendering="geometricPrecision" shape-rendering="geometricPrecision" xmlns="http://www.w3.org/2000/svg"><path d="M447.19 347.03c0-17.06 13.85-30.91 30.91-30.91 17.05 0 30.9 13.85 30.9 30.91v87.82c0 21.08-8.63 40.29-22.51 54.18-13.88 13.88-33.09 22.51-54.18 22.51H76.69c-21.09 0-40.3-8.63-54.18-22.51C8.63 475.14 0 455.93 0 434.85V76.69c0-21.09 8.63-40.3 22.51-54.18C36.39 8.63 55.6 0 76.69 0h86.98c17.06 0 30.9 13.85 30.9 30.9 0 17.06-13.84 30.91-30.9 30.91H76.69c-4.07 0-7.82 1.69-10.51 4.37-2.68 2.69-4.37 6.44-4.37 10.51v358.16c0 4.06 1.69 7.82 4.37 10.5 2.69 2.68 6.44 4.38 10.51 4.38h355.62c4.07 0 7.82-1.7 10.51-4.38 2.68-2.68 4.37-6.44 4.37-10.5v-87.82zm0-243.56L308.15 244.28c-11.91 12.12-31.45 12.28-43.56.37-12.11-11.91-12.28-31.45-.37-43.56L401.77 61.81H309.7c-17.06 0-30.9-13.85-30.9-30.91 0-17.05 13.84-30.9 30.9-30.9h168.4C495.15 0 509 13.85 509 30.9v165.04c0 17.06-13.85 30.9-30.9 30.9-17.06 0-30.91-13.84-30.91-30.9v-92.47z" fill-rule="nonzero"></path></svg></span></a>
<!-- /wp:generateblocks/button -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- wp:separator {"className":"home-page-separator"} -->
<hr class="wp-block-separator has-alpha-channel-opacity home-page-separator"/>
<!-- /wp:separator -->
<!-- wp:paragraph {"align":"left"} -->
<p class="has-text-align-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc imperdiet rhoncus arcu non aliquet. Sed tempor mauris a purus porttitor, ac convallis arcu venenatis. Donec lorem erat, ornare in augue at, pharetra cursus mauris.</p>
<!-- /wp:paragraph -->
<!-- wp:generateblocks/query-loop {"uniqueId":"e476f638","query":{"post_type":"post","per_page":"6"}} -->
<!-- wp:generateblocks/grid {"uniqueId":"65c503d9","columns":1,"horizontalGap":20,"verticalGap":40,"isDynamic":true,"blockVersion":3,"isQueryLoop":true,"lock":{"remove":true}} -->
<!-- wp:generateblocks/container {"uniqueId":"3494c524","isGrid":true,"isQueryLoopItem":true,"gridId":"65c503d9","backgroundColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":3,"sizing":{"width":"33.33%","widthMobile":"100%","height":"100%","maxWidth":"","widthTablet":"50%"},"lock":{"remove":true,"move":true},"className":"home-grid"} -->
<!-- wp:generateblocks/container {"uniqueId":"f100e0fa","isDynamic":true,"blockVersion":3,"sizing":{"maxWidth":""},"useGlobalMaxWidth":true,"marginRight":"auto","marginLeft":"auto","paddingTop":"20","paddingRight":"20","paddingBottom":"0","paddingLeft":"20"} -->
<!-- wp:generateblocks/grid {"uniqueId":"8a35207c","columns":1,"isDynamic":true,"blockVersion":3,"useLegacyRowGap":true} -->
<!-- wp:generateblocks/container {"uniqueId":"6be80a2b","isGrid":true,"gridId":"8a35207c","isDynamic":true,"blockVersion":3,"useInnerContainer":true,"sizing":{"width":"100%","widthMobile":"100%"}} -->
<!-- wp:generateblocks/image {"uniqueId":"d32bf7bd","sizeSlug":"full","marginBottom":"30","useDynamicData":true,"dynamicContentType":"featured-image"} /-->
<!-- wp:generateblocks/headline {"uniqueId":"7ce81ddc","element":"h3","blockVersion":2,"fontSize":20,"lineHeight":24,"lineHeightUnit":"px","marginBottom":"5","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","iconColor":"","useDynamicData":true,"dynamicContentType":"post-title","dynamicLinkType":"single-post"} -->
<h3 class="gb-headline gb-headline-7ce81ddc gb-headline-text"></h3>
<!-- /wp:generateblocks/headline -->
<!-- wp:generateblocks/headline {"uniqueId":"aac028b2","element":"p","blockVersion":2,"fontSize":15,"marginBottom":"10","backgroundColor":"","textColor":"var(\u002d\u002dcontrast-2)","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","iconColor":"","useDynamicData":true,"dynamicContentType":"post-date","useDefaultMoreLink":false,"excerptLength":15} -->
<p class="gb-headline gb-headline-aac028b2 gb-headline-text"></p>
<!-- /wp:generateblocks/headline -->
<!-- wp:generateblocks/headline {"uniqueId":"1dcd18d1","element":"p","blockVersion":2,"fontSize":15,"marginBottom":"30","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","iconColor":"","useDynamicData":true,"dynamicContentType":"post-excerpt","useDefaultMoreLink":false,"excerptLength":15} -->
<p class="gb-headline gb-headline-1dcd18d1 gb-headline-text"></p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/query-loop -->
<!-- /wp:generateblocks/container -->3. Display Posts Grouped by Category
<!-- wp:generateblocks/container {"uniqueId":"a6f1411a","width":50,"isDynamic":true,"blockVersion":3,"sizing":{"height":"","maxWidth":"1200px","width":""},"marginTop":"35","marginRight":"auto","marginBottom":"0","marginLeft":"auto","paddingTop":"20","paddingRight":"20","paddingBottom":"20","paddingLeft":"20","paddingTopMobile":"20","paddingRightMobile":"20","paddingBottomMobile":"20","paddingLeftMobile":"20","paddingSyncUnits":true} -->
<!-- wp:generateblocks/grid {"uniqueId":"4d3cd40c","columns":2,"isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/container {"uniqueId":"7be7b8a3","isGrid":true,"gridId":"4d3cd40c","isDynamic":true,"blockVersion":3,"sizing":{"width":"75%","widthMobile":"100%"}} -->
<!-- wp:generateblocks/headline {"uniqueId":"d765505e","element":"h3","blockVersion":2,"display":"flex","alignItems":"center","textTransform":"uppercase","fontSize":22,"letterSpacing":0.02,"backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","iconColor":"","className":"section-title"} -->
<h3 class="gb-headline gb-headline-d765505e gb-headline-text section-title"><strong>Enter category name</strong></h3>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- wp:generateblocks/container {"uniqueId":"2ddac8d3","isGrid":true,"gridId":"4d3cd40c","isDynamic":true,"blockVersion":3,"display":"flex","justifyContent":"flex-end","sizing":{"width":"25%","widthMobile":"100%"}} -->
<!-- wp:generateblocks/button {"uniqueId":"73473320","hasUrl":true,"blockVersion":3,"display":"inline-flex","alignItems":"center","textTransform":"uppercase","letterSpacing":0.05,"paddingTop":"7","paddingRight":"20","paddingBottom":"7","paddingLeft":"20","backgroundColor":"#0366d6","backgroundColorHover":"#222222","textColor":"#ffffff","textColorHover":"#ffffff","gradient":true,"gradientDirection":90,"gradientColorOne":"rgba(255, 255, 255, 0.1)","gradientColorTwo":"rgba(0, 0, 0, 0.30)","hasIcon":true,"iconLocation":"right","iconPaddingRight":"","iconPaddingLeft":"0.5","iconSize":0.9} -->
<a class="gb-button gb-button-73473320" href="#"><span class="gb-button-text">View All</span><span class="gb-icon"><svg viewBox="0 0 509 511.54" clip-rule="evenodd" fill-rule="evenodd" image-rendering="optimizeQuality" text-rendering="geometricPrecision" shape-rendering="geometricPrecision" xmlns="http://www.w3.org/2000/svg"><path d="M447.19 347.03c0-17.06 13.85-30.91 30.91-30.91 17.05 0 30.9 13.85 30.9 30.91v87.82c0 21.08-8.63 40.29-22.51 54.18-13.88 13.88-33.09 22.51-54.18 22.51H76.69c-21.09 0-40.3-8.63-54.18-22.51C8.63 475.14 0 455.93 0 434.85V76.69c0-21.09 8.63-40.3 22.51-54.18C36.39 8.63 55.6 0 76.69 0h86.98c17.06 0 30.9 13.85 30.9 30.9 0 17.06-13.84 30.91-30.9 30.91H76.69c-4.07 0-7.82 1.69-10.51 4.37-2.68 2.69-4.37 6.44-4.37 10.51v358.16c0 4.06 1.69 7.82 4.37 10.5 2.69 2.68 6.44 4.38 10.51 4.38h355.62c4.07 0 7.82-1.7 10.51-4.38 2.68-2.68 4.37-6.44 4.37-10.5v-87.82zm0-243.56L308.15 244.28c-11.91 12.12-31.45 12.28-43.56.37-12.11-11.91-12.28-31.45-.37-43.56L401.77 61.81H309.7c-17.06 0-30.9-13.85-30.9-30.91 0-17.05 13.84-30.9 30.9-30.9h168.4C495.15 0 509 13.85 509 30.9v165.04c0 17.06-13.85 30.9-30.9 30.9-17.06 0-30.91-13.84-30.91-30.9v-92.47z" fill-rule="nonzero"></path></svg></span></a>
<!-- /wp:generateblocks/button -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- wp:separator {"className":"home-page-separator"} -->
<hr class="wp-block-separator has-alpha-channel-opacity home-page-separator"/>
<!-- /wp:separator -->
<!-- wp:paragraph {"align":"left"} -->
<p class="has-text-align-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc imperdiet rhoncus arcu non aliquet. Sed tempor mauris a purus porttitor, ac convallis arcu venenatis. Donec lorem erat, ornare in augue at, pharetra cursus mauris.</p>
<!-- /wp:paragraph -->
<!-- wp:generateblocks/query-loop {"uniqueId":"189ff0f5","query":{"post_type":"post","per_page":"3"}} -->
<!-- wp:generateblocks/grid {"uniqueId":"734166cf","columns":1,"horizontalGap":20,"verticalGap":20,"isDynamic":true,"blockVersion":3,"isQueryLoop":true,"useLegacyRowGap":true,"lock":{"remove":true}} -->
<!-- wp:generateblocks/container {"uniqueId":"96f58cb7","isGrid":true,"isQueryLoopItem":true,"gridId":"734166cf","backgroundColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":3,"sizing":{"width":"33.33%","widthMobile":"100%","height":"100%","maxWidth":"","widthTablet":"50%"},"lock":{"remove":true,"move":true},"className":"home-grid"} -->
<!-- wp:generateblocks/container {"uniqueId":"243398f0","isDynamic":true,"blockVersion":3,"sizing":{"maxWidth":""},"useGlobalMaxWidth":true,"marginRight":"auto","marginLeft":"auto","paddingTop":"20","paddingRight":"20","paddingBottom":"20","paddingLeft":"20"} -->
<!-- wp:generateblocks/grid {"uniqueId":"3ee15696","columns":1,"horizontalGap":20,"isDynamic":true,"blockVersion":3,"useLegacyRowGap":true} -->
<!-- wp:generateblocks/container {"uniqueId":"38e4f0de","isGrid":true,"gridId":"3ee15696","isDynamic":true,"blockVersion":3,"useInnerContainer":true,"sizing":{"width":"100%","widthMobile":"100%"}} -->
<!-- wp:generateblocks/image {"uniqueId":"722b467d","sizeSlug":"full","marginBottom":"30","useDynamicData":true,"dynamicContentType":"featured-image"} /-->
<!-- wp:generateblocks/headline {"uniqueId":"9d60922b","element":"h3","blockVersion":2,"fontSize":19,"lineHeight":24,"lineHeightUnit":"px","marginBottom":"5","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","iconColor":"","useDynamicData":true,"dynamicContentType":"post-title","dynamicLinkType":"single-post"} -->
<h3 class="gb-headline gb-headline-9d60922b gb-headline-text"></h3>
<!-- /wp:generateblocks/headline -->
<!-- wp:generateblocks/headline {"uniqueId":"1b7b1055","element":"p","blockVersion":2,"fontSize":15,"marginBottom":"10","backgroundColor":"","textColor":"var(\u002d\u002dcontrast-2)","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","iconColor":"","useDynamicData":true,"dynamicContentType":"post-date","useDefaultMoreLink":false,"excerptLength":15} -->
<p class="gb-headline gb-headline-1b7b1055 gb-headline-text"></p>
<!-- /wp:generateblocks/headline -->
<!-- wp:generateblocks/headline {"uniqueId":"cf4eb4cf","element":"p","blockVersion":2,"fontSize":15,"marginBottom":"30","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","iconColor":"","useDynamicData":true,"dynamicContentType":"post-excerpt","useDefaultMoreLink":false,"excerptLength":15} -->
<p class="gb-headline gb-headline-cf4eb4cf gb-headline-text"></p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/query-loop -->
<!-- /wp:generateblocks/container -->How to Update Button Colors
Navigate to Pages > Home
Step 1: Select the Button as shown in below image.
Step 2: Under Blocks tab, go to Spacing section and update the padding as shown below.
Step 3: Go to Colors section and update button colors.
Color 1: #55555e
Color 2: #3f4047
Step 4: Uncheck the Use Gradient option if needed.