Closer Look At

GenerateBlocks

1 Who uses blocks v1

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!

2 4 whole blocks v5
GB Container

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)
GB Grid

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.

GB Headline

Headline

Headline is a much more feature-rich version of theWordPress 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)
GB Buttons

Buttons

As with Headline, Buttons Blockis 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?

3 dazzle me v3

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.

Mae Mu Cherry

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.

tavis beck mAAcR1LR0mo unsplash
undraw coming home 52 ir

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.

undraw creative woman re u5tk

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.

undraw book lover re rwjy

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.

undraw not found 60 pq

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.

yellow girl glasses

“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

4 thats pretty good v1

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 usingGenerateBlocks, 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

Comments (7)

  1. Hello friend, I see you used a very nice hover effect to underline the links. Can I ask you for information on how I can do this?
    Thank you
    Jan

    Reply
    • Hi Jan,

      You need to include the following in the CSS file. Then you can go to any link element (Advanced > Custom CSS Classes) and include “loud-link”.

      @media (min-width: 768px)
      .loud-link a:before {
      content: “”;
      position: absolute;
      display: block;
      bottom: -0.5em;
      width: 0%;
      height: 2px;
      background-color: currentColor;
      -webkit-transition: 0.3s width ease;
      transition: 0.3s width ease;
      }

      .loud-link a:after {
      content: ‘\21e2’;
      margin-left: 5px;
      }

      Reply
  2. This is a great explanation of what can happen with GenerateBlocks. Have you published the blocks you used as you mentioned?

    Reply
    • Hi William,

      Thank you. I have about 18 blocks ready to publish but I feel like it’s too small of a stack. My plan is to get to at least 25-30 blocks before I release it.

      Reply
  3. Very nice work. Can you explain how to set About us section? Thanks a lot. Hope your block will be publish in gb library. Very usefull.

    Reply
    • Hi zdendos,

      About us was created using a Grid, which was split into two columns. For each column Container, click on Colors and change the background colour (to your preference) of each column.

      Then go to Spacing on each Container and set the Border Radius to 30px for the top and bottom corners on one side only.

      Use Headline block inside the Container to write whatever you like. Click on Spacing for column to add 120px padding within each Container.

      As for the bottom Container with the social media icons, it’s also another Grid that was split into 5 columns and I placed the social media icons within it. I set the width to 250px for the entire container to limit the spacing. Then I set the margin to -68px to overlap with the About Us section.

      Lastly, for the animations, I followed the instructions on this website.

      Hope this helps and I am working on publishing the blocks soon.

      Reply

Leave a Reply