In this video tutorial, I will show you, how to build a simple blog using the premium version of GeneratePress theme. You can download the latest version of GeneratePress free theme from WordPress repository or from the GeneratePress website directly.
It’s a quick and short video, so please watch the video without skipping.
Table of Contents
- Recommended Hosting
- Required Theme
- Required Plugins
- Color Palette
- Home Page Gutenberg Blocks (GenerateBlocks)
- Custom CSS Code
Recommended Hosting
Required Theme
- GeneratePress (Pro/Premium Version)
Required Plugins
Color Palette
| CSS Variable Name | Hexa Code | Actual Color |
|---|---|---|
| contrast | #222222 | |
| contrast-2 | #575760 | |
| contrast-3 | #b2b2be | |
| base | #f0f0f0 | |
| base-2 | #f7f8f9 | |
| base-3 | #ffffff | |
| accent | #1e73be | |
| base-4 | #1b1f23 |
Home Page Gutenberg Blocks (GenerateBlocks)
1. About Me – Sidebar Widget
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:generateblocks/headline {"uniqueId":"577bb3a5","element":"h3","blockVersion":3,"typography":{"textAlign":"center"}} -->
<h3 class="gb-headline gb-headline-577bb3a5 gb-headline-text">About Me</h3>
<!-- /wp:generateblocks/headline -->
<!-- wp:generateblocks/image {"uniqueId":"317d7814","mediaId":1493,"sizeSlug":"thumbnail","alignment":"center","blockVersion":2,"spacing":{"marginBottom":"20px"},"borders":{"borderTopLeftRadius":"50%","borderTopRightRadius":"50%","borderBottomLeftRadius":"50%","borderBottomRightRadius":"50%"}} -->
<figure class="gb-block-image gb-block-image-317d7814"><img class="gb-image gb-image-317d7814" src="https://dummyimage.com/150x150/eeeeee/000000" alt="" title="person"/></figure>
<!-- /wp:generateblocks/image -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Hey, I'm John Doe a professional WordPress Developer from India, Mumbai. I share my WordPress knowledge to the community for free.</p>
<!-- /wp:paragraph -->
<!-- wp:generateblocks/button {"uniqueId":"34a74fc3","hasUrl":true,"blockVersion":4,"display":"flex","alignItems":"center","justifyContent":"center","spacing":{"paddingTop":"15px","paddingRight":"20px","paddingBottom":"15px","paddingLeft":"20px"},"borders":{"borderTopWidth":"2px","borderRightWidth":"2px","borderBottomWidth":"2px","borderLeftWidth":"2px","borderTopStyle":"solid","borderRightStyle":"solid","borderBottomStyle":"solid","borderLeftStyle":"solid","borderTopColor":"var(\u002d\u002dbase-4)","borderRightColor":"var(\u002d\u002dbase-4)","borderBottomColor":"var(\u002d\u002dbase-4)","borderLeftColor":"var(\u002d\u002dbase-4)","borderTopColorHover":"var(\u002d\u002dbase-4)","borderRightColorHover":"var(\u002d\u002dbase-4)","borderBottomColorHover":"var(\u002d\u002dbase-4)","borderLeftColorHover":"var(\u002d\u002dbase-4)"},"backgroundColor":"var(\u002d\u002dbase-3)","backgroundColorHover":"var(\u002d\u002dbase-4)","textColor":"var(\u002d\u002dcontrast)","textColorHover":"var(\u002d\u002dbase-3)"} -->
<a class="gb-button gb-button-34a74fc3 gb-button-text" href="#">Know More...</a>
<!-- /wp:generateblocks/button --></div>
<!-- /wp:group -->2. Connect With Us – Sidebar Widget
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:generateblocks/headline {"uniqueId":"9e645b9d","element":"h3","blockVersion":3,"typography":{"textAlign":"center"}} -->
<h3 class="gb-headline gb-headline-9e645b9d gb-headline-text">Connect With Us</h3>
<!-- /wp:generateblocks/headline -->
<!-- wp:social-links {"iconColor":"base-3","iconColorValue":"var(\u002d\u002dbase-3)","iconBackgroundColor":"base-4","iconBackgroundColorValue":"var(\u002d\u002dbase-4)","align":"center"} -->
<ul class="wp-block-social-links aligncenter has-icon-color has-icon-background-color"><!-- wp:social-link {"url":"#","service":"facebook"} /-->
<!-- wp:social-link {"url":"#","service":"instagram"} /-->
<!-- wp:social-link {"url":"#","service":"youtube"} /-->
<!-- wp:social-link {"url":"#","service":"wordpress"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group -->3. Recent Posts – Sidebar Widget
<!-- wp:group {"layout":{"type":"constrained"}} --><div id="sidebar-recent-post" class="wp-block-group"><!-- wp:generateblocks/headline {"uniqueId":"6b23084f","element":"h3","blockVersion":3,"typography":{"textAlign":"center"}} --><h3 class="gb-headline gb-headline-6b23084f gb-headline-text">Recent Posts</h3><!-- /wp:generateblocks/headline --><!-- wp:latest-posts {"displayFeaturedImage":true,"featuredImageAlign":"left","featuredImageSizeWidth":75,"featuredImageSizeHeight":75} /--></div><!-- /wp:group -->4. Recommended Tools – Sidebar Widget
<!-- wp:group {"className":"recommended-tools","layout":{"type":"constrained"}} -->
<div id="sidebar-recent-post" class="wp-block-group recommended-tools"><!-- wp:generateblocks/headline {"uniqueId":"f7c35372","element":"h3","blockVersion":3,"typography":{"textAlign":"center"}} -->
<h3 class="gb-headline gb-headline-f7c35372 gb-headline-text">Recommended Tools</h3>
<!-- /wp:generateblocks/headline -->
<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li><a href="#">GeneratePress</a> - Highly effective WordPress theme to run your website.</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="#">GenerateBlocks</a> - Build your custom layout using this page builder plugin.</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="#">Flying Press</a> - Best cache plugin for WordPress which takes care of your site speed.</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="#">Hostinger</a> - One of the best and reliable hosting providers if you're starting your blogging journey.</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="#">WP Rocket</a> - It is second best cache plugin I have used across all my client websites.</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list --></div>
<!-- /wp:group -->Custom CSS Code
.custom-title::after {
background-color: var(--contrast);
content: '';
display: block;
height: 3px;
margin: 30px auto 40px;
width: 60px;
}
.recommended-tools ol li {
margin-left: 20px;
}
#right-sidebar .widget {
padding: 30px;
border: 1px solid rgba(0,0,0,.05);
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
border-radius: 5px;
margin-bottom: 50px;*/
}
#right-sidebar .widget h3:after {
background-color: var(--contrast);
content: '';
display: block;
height: 3px;
margin: 30px auto 40px;
width: 60px;
}
.read-more {
margin-top: 5%;
float: right;
}
.separate-containers .inside-article {
border-bottom: 1px solid rgba(0,0,0,.05);
}
.post-image img, .featured-image img {
border-radius: 10px;
}
#sidebar-recent-post li {
margin-bottom: 25px;
}