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 for 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 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)
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?
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.
MORE BLOCKS
Build awesome pages quickly.
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!
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 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
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
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;
}
This is a great explanation of what can happen with GenerateBlocks. Have you published the blocks you used as you mentioned?
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.
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.
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.
Thanks for your reply Math.