Closer Look At

GenerateBlocks

WordPress Blocks does not always get the love it deserves.

Page Builders became a huge success thanks to their drag-and-drop function and ready-to-use templates. They made it easy for almost anyone to build a website without tinkering around with any code.

While they are great from a usability point of view, one major drawback is the impact on the website’s performance.

Page Builders Slow Down Websites

In general, Page Builders tend to add more bloated code and in turn, slow down the website loading times.

Lightweight Blocks

This is where GenerateBlocks comes in. A simple plugin that truly adds much-needed flexibility to the native block editor.

It’s the LEGO building blocks of WordPress. You can build almost anything imaginable with only a handful of blocks.

When I say a handful of blocks, it’s literally 4 Blocks!

Container

Container block provides the foundation to building block based layouts. You can create simple or really advanced layouts with few adjustments

This is a Container.

It’s simple enough. You can do the following:

  • Set width (full screen or limit to specific width)
  • Add padding and margin
  • Background colour or images
  • Border size and colour
  • Add effects (transition, opacity, box-shadow, etc)

Grid

Grid Block allows you to build advanced columns. When you add a Grid Block, the Container Block is automatically inserted as the grid column.

Column Spacing

Added 40x of padding all around. Control the spacing between columns as well.

Adjust the colours and borders as needed.

Column Alignment

Place the content at the Top, Middle, or Bottom.

Headline

Headline is a much more feature-rich version of the WordPress Heading Block. It is ideal for headings, call to action, or one-line features. The Element option allows you to choose what kind of text your headline is going to be.

Change Typography

You can do the following:

  • Change font size, weight, spacing, line-height
  • Add in SVG icons
  • Change colours
  • Adjust spacing
  • Add effects (transition, opacity, box-shadow, etc)

Buttons

As with Headline, Buttons Block is a much more feature-rich version of the default Button block offered by WordPress. Each individual button has a lot of options you can use for full customization.

Buttons

You can do the following:

  • Change colors, add gradients
  • Adjust borders
  • Add icons
  • Adjust spacing
  • Add effects (transition, opacity, box-shadow, etc)

Combine them together and you can create simple or complex blocks that can be reused endlessly.

So, ready to find out what you can do with these 4 blocks?

Create your next website with Blocks.

Rounded corners with a border to enhance the block. Hover effect on the button as well.

Nullam turpis tempus fringilla pulvinar adipiscing tempor odio auctor, litora parturient vivamus fusce non quisque lacinia fermentum class, vel per eget convallis nulla bibendum integer.

Get Started
MORE BLOCKS

Build awesome pages quickly.

View Sites

Pre-Made Templates

Nullam turpis tempus fringilla pulvinar adipiscing tempor odio auctor, litora parturient vivamus fusce non quisque lacinia.

Infinite possibilities

Mattis vitae egestas amet feugiat purus euismod praesent integer sapien phasellus ligula vivamus, nibh auctor hac dapibus quam aliquet nostra.

Modify Anything

Mattis vitae egestas amet feugiat purus euismod praesent integer sapien phasellus ligula vivamus, nibh auctor hac dapibus quam aliquet nostra.

Prototyping

Dapibus sociosqu ullamcorper himenaeos inceptos malesuada lobortis enim aliquet mattis, vestibulum facilisis maximus.

Brand Identity

Augue congue felis ligula lorem posuere nunc sodales porta semper a penatibus odio, natoque pulvinar viverra himenaeos facilisi montes adipiscing neque eros.

Prototyping

Dapibus sociosqu ullamcorper himenaeos inceptos malesuada lobortis enim aliquet mattis, vestibulum facilisis maximus.

Brand Identity

Augue congue felis ligula lorem posuere nunc sodales porta semper a penatibus odio, natoque pulvinar viverra himenaeos facilisi montes adipiscing neque eros.

Product Launch

Dapibus sociosqu ullamcorper himenaeos inceptos malesuada lobortis enim aliquet mattis, vestibulum facilisis maximus.

Showcase Ideas

Augue congue felis ligula lorem posuere nunc sodales porta semper a penatibus odio, natoque pulvinar viverra himenaeos facilisi montes adipiscing neque eros.

Oh So Delicious!

Nullam turpis tempus fringilla pulvinar adipiscing tempor odio auctor, litora parturient vivamus fusce non quisque lacinia fermentum class, vel per eget convallis nulla bibendum integer.

Eget curae accumsan velit massa purus ridiculus urna at, risus aptent est cras facilisis primis finibus dictum nam, quis mi proin conubia dolor placerat mus.

Motivation In The Morning

Nullam turpis tempus fringilla pulvinar adipiscing tempor odio auctor, litora parturient vivamus fusce non quisque lacinia fermentum class, vel per eget convallis nulla bibendum integer.

Eget curae accumsan velit massa purus ridiculus urna at, risus aptent est cras facilisis primis finibus dictum nam, quis mi proin conubia dolor placerat mus.

Wake Up

Mattis vitae egestas amet feugiat purus euismod praesent.

Things To Do

Mattis vitae egestas amet feugiat purus euismod praesent.

Large Image & Narrow Text

Since its inception in 2013, Unsplash garnered huge praise for the quality of photos and still remains the best place for awesome photos. There’s no other site that comes close to the variety and quality of photos offered by Unsplash.

Prototyping

Dapibus sociosqu ullamcorper himenaeos inceptos malesuada lobortis enim aliquet mattis, vestibulum facilisis maximus.

Brand Identity

Augue congue felis ligula lorem posuere nunc sodales porta semper a penatibus odio, natoque pulvinar viverra himenaeos facilisi montes adipiscing neque eros.

Product Launch

Dapibus sociosqu ullamcorper himenaeos inceptos malesuada lobortis enim aliquet mattis, vestibulum facilisis maximus.

Showcase Ideas

Augue congue felis ligula lorem posuere nunc sodales porta semper a penatibus odio, natoque pulvinar viverra himenaeos facilisi montes adipiscing neque eros.

Page Builder

GenerateBlocks Pro

A small collection of lightweight WordPress blocks that can accomplish nearly anything. This is specifically made for those who want more control over how each blocks works and appears.

Free and Pro versions are available. The Pro version gives you more options and a template library (similar to Elementor).

Journal

Published Articles

Dapibus sociosqu ullamcorper himenaeos inceptos malesuada lobortis enim aliquet mattis, vestibulum.

Augue congue felis ligula lorem posuere nunc sodales porta semper a penatibus odio, natoque pulvinar viverra himenaeos facilisi montes adipiscing neque eros.

backstage

Behind The Scenes

Dapibus sociosqu ullamcorper himenaeos inceptos malesuada lobortis enim aliquet mattis, vestibulum.

Augue congue felis ligula lorem posuere nunc sodales porta semper a penatibus odio, natoque pulvinar viverra himenaeos facilisi montes adipiscing neque eros.

Awesome

Gradients.

You can add some opacity to the text. There are much more effects you can add on to make your design stand out.

Let’s Go
Dark Mode!

Oooh-yeah

1

One step at a time. Create step-by-step guides based on blocks.

Stand out from the crowd and refine your process.

Checklist

Flexible design. So perfect for building out beautiful and functional layouts.

Custom Typography

Modify Icons Colors

Fine Tune Spacing

Rounded Corners

Process

Step-by-Step. So perfect for building out beautiful and functional layouts.

1

Install Blocks

2

Build custom blocks

3

Showcase your work

Prototyping

Dapibus sociosqu ullamcorper himenaeos inceptos malesuada lobortis enim aliquet mattis, vestibulum.

Mobile View

Augue congue felis ligula lorem posuere nunc sodales porta semper a penatibus odio.

Performance

Nullam turpis tempus fringilla pulvinar adipiscing tempor odio auctor, litora parturient vivamus fusce.

Support

Dapibus sociosqu ullamcorper himenaeos inceptos malesuada lobortis enim aliquet mattis.

Flexible

Eget curae accumsan velit massa purus ridiculus urna at, risus aptent est cras facilisis primis finibus dictum nam.

SVG Icons

Augue congue felis ligula lorem posuere nunc sodales porta semper a penatibus odio.

Change

Typography

Elegance of Simplicity

Nullam turpis tempus fringilla pulvinar adipiscing tempor odio auctor, litora parturient vivamus fusce non quisque lacinia.

Built for Performance

Nullam turpis tempus fringilla pulvinar adipiscing tempor odio auctor, litora parturient vivamus fusce non quisque lacinia.

Play & Create

Nullam turpis tempus fringilla pulvinar adipiscing tempor odio auctor, litora parturient vivamus fusce non quisque lacinia.

Share Ideas

New Feature Requests

Announcements about the GenerateBlocks community and plugins. Share how you can build awesome blocks with GenerateBlocks.

Speed

Nullam turpis tempus fringilla pulvinar adipiscing tempor odio auctor, litora parturient vivamus fusce non quisque lacinia fermentum class.

Customer Service

Eget curae accumsan velit massa purus ridiculus urna at, risus aptent est cras facilisis primis finibus dictum nam, quis mi proin conubia dolor placerat.

Security

Augue congue felis ligula lorem posuere nunc sodales porta semper a penatibus odio, natoque pulvinar viverra himenaeos facilisi montes.

Affordability

MDapibus sociosqu ullamcorper himenaeos inceptos malesuada lobortis enim aliquet mattis, vestibulum facilisis maximus.

“I tried out effects and it just works.”

You can overlap the title over the image with precision. Oh, the wonderful things you can do with GenerateBlocks!

About Us

Convert your designs into stunning websites with precision controls. Add incredible versatility to your editor without bloating it with tons of one-dimensional blocks.

WordPress blocks that can accomplish nearly anything you want!

locations

123 Beach Ave.
Vancouver, BC

123 Main St.
Toronto, ON

contact

hello@skool.house
(416) 123-4567

Take the free plugin for a test drive and see what you think. If you like it, think about investing in the premium version for advanced features.

Backstory

I tried a few popular Page Builders and they were great at the beginning, but then I started running into issues:

1

Overall Performance

The overall performance of the website was poor and the loading times were just terrible. My site went from loading in under 2 seconds to loading in 9 seconds.

2

Quick Deployment

I couldn’t build and launch pages quickly as I would have liked, even using pre-made templates.

This isn’t the fault of any Page Builder, rather it’s on me. I didn’t save much time because I was obsessively tweaking every aspect of an element (typography, spacing, size, etc) until the page looked exactly the way I wanted it.

So I went back looking for a Page Builder that’s performance-focused.

My site was running on GeneratePress and discovered the same author offered a free plugin called GenerateBlocks which expanded the functionality of the core WordPress Blocks.

The initial reaction of looking through the website was a mere ‘meh’.

The plugin looked overly simplistic and nothing stood out. Even the premium version with pre-made templates didn’t impress at first glance. The design layouts looked dated.

In comparison, Elementor, Divi, and Oxygen really sold their product well and appeared to be much more feature-rich.

GenerateBlocks was a free plugin after all, so I gave it a try. I did notice it gave me much more flexibility to control width, padding, margins, and colours without having to create custom classes and constantly adjusting the CSS. It felt like a decent plugin but nothing great.

For months, I went back and forth trying out different page builders.

It was a vicious cycle where no progress was being made on the actual website. All my time was invested in tinkering around with different plugins and nothing to show for it.

Eventually, I hit a breaking point and gave up on page builders altogether due to continuous performance issues. I made a conscious effort to stick with WordPress core blocks much as possible.

It wasn’t until I forced myself to use only blocks to build pages I started to understand the potential of GenerateBlocks.

I looked through sites like Dribbble, Behance, and Webflow for modern design layouts. I challenged myself to replicate some of the design concepts using GenerateBlocks. I wanted to know if I can accomplish nearly anything as advertised on their website or if it was just another sales pitch.

After taking some time to learn most of the functions, I was able to replicate quite a number of designs layouts. The limitations were so few and far in between, it did not make a difference for me.

Final Words

GenerateBlocks has to be one of the most under-appreciated page builders out there.

I created this page to share what you can do with only 4 blocks and some creative problem-solving.

I do want to make it clear, this plugin isn’t for everyone!

It doesn’t have all the bells and whistles of traditional Page Builders. However, it is well-built with performance and simplicity in mind.

If you are like me and enjoy building websites with fine control over every detail, then give the free plugin a shot to see if you like it. If it goes well, then think about investing in the premium plugin. It expands on the functionality of the free plugin and it’s definitely worth the $39 investment.

For everyone using or will be using GenerateBlocks, I will be publishing these blocks as a free download, so you don’t have to spend time rebuilding them.

Credits

Character Illustrations
Open Peeps – Hand-Drawn Characters

Photos by Unsplash
Mae Mu – Cherry
Tavis Beck – Coffee
Atikh Bana – Woman In Yellow Background

Illustrations
unDraw – Multiple SVG Images

SVG Icons
Bootstrap Icons – Multiple SVG Icons

Leave a Reply