Use GenerateBlocks plugin to help you build better WordPress websites. GenerateBlocks gives you 6 lightweight blocks that help you create cool looking designs within your content. It’s great for non-designers like myself and other people who need to concentrate on writing content but also want their website to look visually pleasing.
I use GenerateBlocks in this article and throughout my website. It’s great in combination with GeneratePress WordPress theme, they both have the same principles of being lightweight and simple to use.
Table of Contents
Blocks available with GenerateBlocks
You get six blocks which can be used separately or combined to make bigger visual elements. The six blocks below are added to your block editor in WordPress:
Organize your content into rows and sections.
Create advanced layouts with flexible grids.
Add static or dynamic images to your content.
Craft text-rich static or dynamic content.
Drive conversions with beautiful buttons.
Build a list of posts from any post type.
It can be useful to start your content sections with a Container block. Set the container width, padding and margin, which helps when building content areas.
Advanced Backgrounds and Effects
Containers let you set an advanced background. As you can see in this section I’ve added background effects to the container.
This is available in the GenerateBlocks Pro version. You can add an image background or a color gradient, as I’ve used here.
The Grid block lets you split your content area into columns and rows. When you select the Grid you get the options below:
After you select the layout for your grid you can then individual fill the cells with your content.
Add an image to your content. You can do this with the standard block editor but I prefer the GenerateBlocks version because of the improved settings. In particular I can easily set the padding and margin around the image.
You get the following options when adding an image:
- Settings – image size and object fit
- Spacing – padding, margin, border size and border radius
- Colors – set border color
- Dynamic Data
- Effects (GenerateBlocks Pro) – Opacity/Blend, Transitions, Box Shadow, Transform and Filter
- Advanced – add additional CSS classes and hide on mobile, tablet or desktop
Use the Headline block for headers or blocks on a single link of text, e.g. calls to action.
The GenerateBlocks Headline block is better than the standard header block because of the improved settings provided, particularly the margin and padding settings.
You can also add an SVG icon next to the headline which can be useful for tips or other content that you want to stand out.
In addition to the H1-H6 headers you can also select paragraph, div and figcaption. I only realised that recently. That’s useful when you don’t want a headline but need the extra options you get with a headline block, e.g. adding an SVG icon to the text.
The Buttons block allows you to easily add one or more buttons to your content. Add spacing and margin to each button.
Stack the buttons vertically or space them out horizontally.
You can add a link to a button.
Once you enter a URL in the button block you will get more options:
You can select a font family and size for each button you add.
Effects and Background Gradient options are available for the GenerateBlock Pro version.
The Query Loop block allows you to display posts based on some criteria.
You get plenty of options to filter the list of posts that appear in the grid.
You can stack parameters that all have to be satisfied for the post to appear in the grid.
In the example here I add the following filters:
- SEARCH set to “Mobile”
- Post appears in the “Blogging” category
This block is useful if you want to add a “Related Posts” section in your content.
Just set the conditions to show only related posts.
The GenerateBlocks Pro version gives you more options and a pattern library of over 200 patterns you can easily add to your content.
To select from the pattern library select it from the block menu in your WordPress editor.
Selecting the Pattern Library will show a pop up dialog showing all the patterns available to choose from. You can filter the list of patterns by type using the drop down. Clicking on a pattern will add it to your page.
Each pattern is a collection of pre-made blocks. You can modify any of the blocks to customize the display. Images are not imported so you will need to add your own images from the Media Library or upload them.
With over 200 patterns available you can find a suitable pattern usually.
Common patterns can be saved as a local pattern. Use local patterns to easily add common content (like this tip box).
You will usually find yourself using the same pattern or layout on multiple pages. Rather than having to create this pattern each time you can save it as a local pattern and easily drop it into future pages.
For instance, the tip pattern I just used in the previous section.
Once I have defined and saved this pattern it is now available for me to used from the pattern library.
Clicking the pattern will add it to your content. Then you just need to edit the text and you have added a tip! Easy.
Creating local patterns helps keep your content and styles consistent.
GenerateBlocks Pro Prices
$39 / year
For 1 Site
Build local patterns
$69 / year
For 10 Sites
Build local patterns
$99 / year
For 250 Sites
Build local patterns
30 Day Money Back Guarantee
For peace of mind you get a 30 day money back guarantee on new sales when you purchase GenerateBlocks Pro version.
I use GenerateBlocks on this site. At first I used the free version of the plugin then I noticed the set of patterns that can be used on the Pro version.
For me, as a non-designer, I’m not able to create good looking designs easily so I benefit from using the many good designs available in the pattern library.
If you found this article helpful, please consider sharing it with your network by using the social media sharing buttons below. Thank you for your support!