Replicating the Screenshot

Replicating our theme screenshot using the free version of GeneratePress is super easy. This article will go through the necessary steps.

Set the Front Page

The first thing we need to do is set a static front page. By default, WordPress will use the posts page (blog) as your front page.

To create a static home page, you first need to create a page within the “Pages” area of your Dashboard.

Once it’s published, go to “Settings > Reading” and set the “Front page displays” option to “A static page”, and choose the page you created above.

Adding the Logo

Next we’ll add the logo to our site. You can learn how to add your logo to GeneratePress in this article.

Creating the Menu

We created our menu inside WordPress (see these instructions), and then activated the navigation search option in Customize > Layout > Primary Navigation.

The Content

We used the block editor along with our very own free block plugin, GenerateBlocks, to build our content. However, you can achieve the same look with the core blocks if you want.

The first thing we did is disable our content title, which can be done by clicking the eye icon within the title area.

The first section is a Container block (or Group block in core WP), with a hard gradient applied to it to create the angled color.

Then, we have a Grid block (or Columns block in core WP) to create the three columns.

Inside the columns, we have some Headline blocks (or Heading block in core WP), and an image block.

If you’re using GenerateBlocks, you can copy the below code into your page and it will build the entire layout for you:

<!-- wp:generateblocks/container {"uniqueId":"18c0e2dd","paddingTop":"80","paddingRight":"40","paddingBottom":"80","paddingLeft":"40","backgroundColor":"#f4f7fc","gradient":true,"gradientDirection":175,"gradientColorOneOpacity":1,"gradientColorStopOne":70,"gradientColorTwo":"#f4f7fc","gradientColorTwoOpacity":1,"gradientColorStopTwo":70,"isDynamic":true} -->
<!-- wp:generateblocks/grid {"uniqueId":"b3fb021e","columns":2,"verticalAlignment":"flex-start","isDynamic":true} -->
<!-- wp:generateblocks/container {"uniqueId":"3800e590","isGrid":true,"gridId":"b3fb021e","width":40,"paddingTop":"0","paddingRight":"0","paddingBottom":"0","paddingLeft":"0","isDynamic":true} -->
<!-- wp:generateblocks/headline {"uniqueId":"99cc4b2f","textColor":"#85919a","showAdvancedTypography":true,"fontSize":25,"marginBottom":"0"} -->
<h2 class="gb-headline gb-headline-99cc4b2f gb-headline-text">Welcome to</h2>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"2d60b730","element":"h1","highlightTextColor":"#1e72bd","showAdvancedTypography":true,"fontSize":60,"marginBottom":"20"} -->
<h1 class="gb-headline gb-headline-2d60b730 gb-headline-text"><strong>GeneratePress</strong></h1>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"efcb7e12","element":"p","marginBottom":"40","paddingRight":"15","paddingUnit":"%"} -->
<p class="gb-headline gb-headline-efcb7e12 gb-headline-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porttitor tellus sed ex pulvinar tempor. Suspendisse ullamcorper dapibus tristique.</p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/button-container {"uniqueId":"fb49a7f3","isDynamic":true} -->
<!-- wp:generateblocks/button {"uniqueId":"7be00dcb","hasUrl":false,"hasIcon":true,"backgroundColor":"#1e72bd","textColor":"#ffffff","backgroundColorHover":"#222222","textColorHover":"#ffffff","marginRight":"10","paddingTop":"12","paddingRight":"24","paddingBottom":"12","paddingLeft":"24","borderRadiusTopRight":"4","borderRadiusBottomRight":"4","borderRadiusBottomLeft":"4","borderRadiusTopLeft":"4"} -->
<span class="gb-button gb-button-7be00dcb"><span class="gb-icon"><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="svg-inline--fa fa-power-off fa-w-16" data-icon="power-off" data-prefix="fas" aria-hidden="true"><path d="M400 54.1c63 45 104 118.6 104 201.9 0 136.8-110.8 247.7-247.5 248C120 504.3 8.2 393 8 256.4 7.9 173.1 48.9 99.3 111.8 54.2c11.7-8.3 28-4.8 35 7.7L162.6 90c5.9 10.5 3.1 23.8-6.6 31-41.5 30.8-68 79.6-68 134.9-.1 92.3 74.5 168.1 168 168.1 91.6 0 168.6-74.2 168-169.1-.3-51.8-24.7-101.8-68.1-134-9.7-7.2-12.4-20.5-6.5-30.9l15.8-28.1c7-12.4 23.2-16.1 34.8-7.8zM296 264V24c0-13.3-10.7-24-24-24h-32c-13.3 0-24 10.7-24 24v240c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24z" fill="currentColor"></path></svg></span><span class="gb-button-text">Get Started</span></span>
<!-- /wp:generateblocks/button -->

<!-- wp:generateblocks/button {"uniqueId":"9ba93fb7","hasUrl":false,"hasIcon":true,"backgroundColor":"","textColor":"#000000","backgroundColorHover":"#222222","textColorHover":"#ffffff","paddingTop":"12","paddingRight":"24","paddingBottom":"12","paddingLeft":"24","borderRadiusTopRight":"4","borderRadiusBottomRight":"4","borderRadiusBottomLeft":"4","borderRadiusTopLeft":"4"} -->
<span class="gb-button gb-button-9ba93fb7"><span class="gb-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" aria-hidden="true"><path d="M328 256c0 39.8-32.2 72-72 72s-72-32.2-72-72 32.2-72 72-72 72 32.2 72 72zm104-72c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm-352 0c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72z" fill="currentColor"></path></svg></span><span class="gb-button-text">Learn More</span></span>
<!-- /wp:generateblocks/button -->
<!-- /wp:generateblocks/button-container -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"bb194967","isGrid":true,"gridId":"b3fb021e","width":60,"paddingTop":"0","paddingRight":"0","paddingBottom":"0","paddingLeft":"0","isDynamic":true} -->
<!-- wp:image {"id":360,"width":807,"height":493,"sizeSlug":"full"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://tomusborne.com/gp-screenshot/wp-content/uploads/sites/3/2020/08/gfx-min.png" alt="" class="wp-image-360" width="807" height="493"/></figure>
<!-- /wp:image -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"89d80ae4","containerWidth":1200,"paddingTop":"40","paddingRight":"40","paddingBottom":"80","paddingLeft":"40","backgroundColor":"#f4f7fc","gradientColorOneOpacity":1,"gradientColorStopOne":10,"gradientColorTwo":"#f4f7fc","gradientColorTwoOpacity":1,"gradientColorStopTwo":80,"isDynamic":true} -->
<!-- wp:generateblocks/grid {"uniqueId":"a5c190b8","columns":3,"horizontalGap":60,"verticalGapTablet":80,"isDynamic":true} -->
<!-- wp:generateblocks/container {"uniqueId":"ed2e36d9","isGrid":true,"gridId":"037ab13b","width":33.33,"widthTablet":100,"paddingTop":"","paddingRight":"","paddingBottom":"","paddingLeft":"","isDynamic":true} -->
<!-- wp:generateblocks/headline {"uniqueId":"36a5e46d","element":"h3","fontWeight":"bold","hasIcon":true,"iconLocation":"above","iconPaddingRight":"","iconPaddingBottom":"1","iconSize":2} -->
<h3 class="gb-headline gb-headline-36a5e46d"><span class="gb-icon"><svg aria-hidden="true" data-prefix="fas" data-icon="feather-alt" class="svg-inline--fa fa-feather-alt fa-w-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M512 0C460.22 3.56 96.44 38.2 71.01 287.61c-3.09 26.66-4.84 53.44-5.99 80.24l178.87-178.69c6.25-6.25 16.4-6.25 22.65 0s6.25 16.38 0 22.63L7.04 471.03c-9.38 9.37-9.38 24.57 0 33.94 9.38 9.37 24.59 9.37 33.98 0l57.13-57.07c42.09-.14 84.15-2.53 125.96-7.36 53.48-5.44 97.02-26.47 132.58-56.54H255.74l146.79-48.88c11.25-14.89 21.37-30.71 30.45-47.12h-81.14l106.54-53.21C500.29 132.86 510.19 26.26 512 0z"></path></svg></span><span class="gb-headline-text">Who We Are</span></h3>
<!-- /wp:generateblocks/headline -->

<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed dignissim diam, a interdum justo. Suspendisse placerat ligula justo, ac sagittis arcu convallis at.</p>
<!-- /wp:paragraph -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"df35cdce","isGrid":true,"gridId":"037ab13b","width":33.33,"widthTablet":100,"paddingTop":"","paddingRight":"","paddingBottom":"","paddingLeft":"","removeVerticalGapTablet":true,"removeVerticalGapMobile":true,"isDynamic":true} -->
<!-- wp:generateblocks/headline {"uniqueId":"6497a84a","element":"h3","fontWeight":"bold","hasIcon":true,"iconLocation":"above","iconPaddingRight":"","iconPaddingBottom":"1","iconSize":2} -->
<h3 class="gb-headline gb-headline-6497a84a"><span class="gb-icon"><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="svg-inline--fa fa-shield-alt fa-w-16" data-icon="shield-alt" data-prefix="fas" aria-hidden="true"><path d="M466.5 83.7l-192-80a48.15 48.15 0 0 0-36.9 0l-192 80C27.7 91.1 16 108.6 16 128c0 198.5 114.5 335.7 221.5 380.3 11.8 4.9 25.1 4.9 36.9 0C360.1 472.6 496 349.3 496 128c0-19.4-11.7-36.9-29.5-44.3zM256.1 446.3l-.1-381 175.9 73.3c-3.3 151.4-82.1 261.1-175.8 307.7z" fill="currentColor"></path></svg></span><span class="gb-headline-text">What We Do</span></h3>
<!-- /wp:generateblocks/headline -->

<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed dignissim diam, a interdum justo. Suspendisse placerat ligula justo, ac sagittis arcu convallis at.</p>
<!-- /wp:paragraph -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"0fc903d5","isGrid":true,"gridId":"037ab13b","width":33.33,"widthTablet":100,"paddingTop":"","paddingRight":"","paddingBottom":"","paddingLeft":"","removeVerticalGapTablet":true,"removeVerticalGapMobile":true,"isDynamic":true} -->
<!-- wp:generateblocks/headline {"uniqueId":"30ad7191","element":"h3","fontWeight":"bold","hasIcon":true,"iconLocation":"above","iconPaddingRight":"","iconPaddingBottom":"1","iconSize":2} -->
<h3 class="gb-headline gb-headline-30ad7191"><span class="gb-icon"><svg viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg" class="svg-inline--fa fa-cogs fa-w-20" data-icon="cogs" data-prefix="fas" aria-hidden="true"><path d="M512.1 191l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0L552 6.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zm-10.5-58.8c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.7-82.4 14.3-52.8 52.8zM386.3 286.1l33.7 16.8c10.1 5.8 14.5 18.1 10.5 29.1-8.9 24.2-26.4 46.4-42.6 65.8-7.4 8.9-20.2 11.1-30.3 5.3l-29.1-16.8c-16 13.7-34.6 24.6-54.9 31.7v33.6c0 11.6-8.3 21.6-19.7 23.6-24.6 4.2-50.4 4.4-75.9 0-11.5-2-20-11.9-20-23.6V418c-20.3-7.2-38.9-18-54.9-31.7L74 403c-10 5.8-22.9 3.6-30.3-5.3-16.2-19.4-33.3-41.6-42.2-65.7-4-10.9.4-23.2 10.5-29.1l33.3-16.8c-3.9-20.9-3.9-42.4 0-63.4L12 205.8c-10.1-5.8-14.6-18.1-10.5-29 8.9-24.2 26-46.4 42.2-65.8 7.4-8.9 20.2-11.1 30.3-5.3l29.1 16.8c16-13.7 34.6-24.6 54.9-31.7V57.1c0-11.5 8.2-21.5 19.6-23.5 24.6-4.2 50.5-4.4 76-.1 11.5 2 20 11.9 20 23.6v33.6c20.3 7.2 38.9 18 54.9 31.7l29.1-16.8c10-5.8 22.9-3.6 30.3 5.3 16.2 19.4 33.2 41.6 42.1 65.8 4 10.9.1 23.2-10 29.1l-33.7 16.8c3.9 21 3.9 42.5 0 63.5zm-117.6 21.1c59.2-77-28.7-164.9-105.7-105.7-59.2 77 28.7 164.9 105.7 105.7zm243.4 182.7l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0l8.2-14.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zM501.6 431c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.6-82.4 14.3-52.8 52.8z" fill="currentColor"></path></svg></span><span class="gb-headline-text">How We Do It</span></h3>
<!-- /wp:generateblocks/headline -->

<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed dignissim diam, a interdum justo. Suspendisse placerat ligula justo, ac sagittis arcu convallis at.</p>
<!-- /wp:paragraph -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->