GeneratePress Theme Home Page Customization

In this video 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.

This video is a continuation of previous video. So before watching the below video, make sure to watch my previous blog creation video.

It’s a quick and short video, so please watch the video without skipping.

Table of Contents

Recommended Hosting

Required Theme

Required Plugins

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.

Repeat the steps for all remaining buttons on the home page.

I regularly post videos about building WordPress Websites from scratch using free and premium themes. If you like to watch more similar contents, please subscribe to my YouTube channel!