Frustrated with WordPress Page Builders?! Your frustrations are over!
Prior to the release of GenerateBlocks Pro Plugin, page builders, like Elementor, filled the two main missing gaps in the new WordPress Block Editor paradigm: Media Queries and the Box Model. A Media Query asks the question how wide is the browser’s window, which is the essence of Responsive Design. Today, there is a veritable plethora of form factors and device sizes on which we consume the Internet and the Web. Responsive Design addresses that issue directly. The Box Model allows for more precise page layout. Gone forever are the days of trying to design Web pages using tables and other magic sauce like page builders, which often slow the page load time, thus impacting SEO, and can lock you into a theme or framework. I say, “Good riddance!”
The breakpoints (screen width) for Media Query in GenerateBlocks are:
- Desktop > 1025px
- Tablet 768px to 1024px
- Mobile < 767px
These settings will cascade from Desktop > Tablet > Mobile. So if you don’t put any specific settings in Mobile or Tablet, they will just inherit the settings from Desktop.
The padding set above helps facilitate the Box Model:
- Padding
- Border
- Margin
GenerateBlocks was designed to work hand in hand with the GeneratePress Theme, however, the good news is that it will work with any theme of your choice!
GenerateBlocks comes with just four blocks and with them you can build almost any layout imaginable:
Container
Kind of like the Group Block but much more flexible. Allows you to organize your content into rows and sections. This block can contain any other block including WordPress native blocks.
Grid
Kind of like the Columns Block but much more flexible. Allows you to create advanced layouts with flexible grids. The Grid block gives you the ability to create any kind of layout you can imagine.
Headline
Contains Headings, paragraphs, div, and SVG icons. Craft text-rich content with advanced typography. Everything from headings to paragraphs – take full control of your text.
Buttons
Also contains a Button block and is much more flexible than the integral Block Editor Button Block including the ability to add SVG icons. Drive conversions with beautiful buttons.
It is always best to start with a Container block. Every block comes with desktop, tablet, and mobile controls, giving you total control of your responsive design using padding, border, margin on each.
Created for the Control Freaks
Convert your designs into stunning websites with precision controls.
Typography
Select from Google or Local fonts and fine-tune every aspect with sizes, weights, and spacing.
Colors
Cascade colors from containers to content. Adjust backgrounds, borders, links, and text.
Backgrounds
Add background images and control their size and position like a CSS Ninja.
Spacing
Adjust padding, margins, and borders for pixel precision control over your layouts.
Gradients
Extend your color range with custom gradients to add clever shading or subtle overlays.
SVG Icons
Use your own custom inline SVGs in your buttons and headlines.
The team at GenerateBlocks, which is the same team at GeneratePress, is all about performance. Minimal CSS is generated only for the blocks you need thus improving page load time, and the HTML structure is as simple as possible while allowing for maximum flexibility.
Performance in its DNA
Built to outperform the competition
From the same development house as GeneratePress, you know the code of this plugin is secure, stable, and super lightweight.
GenerateBlocks Documentation
Performance
Deliver lightning-fast sites built with clean HTML5 code, dynamic CSS, and without code dependencies.
Endlessly Flexible
With these four blocks, you can build almost any layout, style any content, and produce any design.
Responsiveness
Create stunning sites designed for any screen with device-level controls and advanced flexbox grids.
Coding Standards
Built to the highest coding standards for security, stability, and future compatibility.
The GenerateBlocks documentation is very thorough and extensive, and it includes many videos and animated gifs by way of demo and explanation. At the top of the documentation of each feature, they indicate if the feature is for the Pro Version only. They even include things to be careful of while using that feature. The GenerateBlocks Pro Version is a veritable page builder without all the bloat and without locking you into any specific theme or framework.
Features Offered in GenerateBlocks Pro
The notable features offered in the PRO version are: Template Library, Local Templates, Advanced Backgrounds, Copy & Paste Styles, Global Styles, Container Links, Device Visibility, Effects, Asset Library, and Custom Attributes, to name a few.
One fascinating feature of GenerateBlocks Pro for all the blocks is Device Visibility found in the Advanced Panel of the Block which allows you to hide their blocks on specific devices using CSS. Per the documentation:
Toggling these options will hide the block in the editor and on the front-end using CSS. If you need to access the block in the editor, you can either select it viewing a device where it’s visible or use the Block Navigation feature to select it.
GenerateBlocks Documentation
The UseCase that immediately comes to mind is a CTA (Call To Action) Button. On Desktop and Tablet the button should say, “Contact Me” with a link to the Contact Page. On Mobile the button should say “Call Me” with a link to the Phone Number.
Desktop/Tablet
Get Your Discount!
Mobile
Get Your Discount!
Below, you will only see the Desktop/Tablet version of the CTA on a Desktop or Tablet Browser. To see the Mobile version of the CTA below view this page on your phone, or you can resize your browser smaller to the width of a phone, or you can use the DEV tools on Desktop and toggle the Device Toolbar to Mobile. You may need to refresh the page.
Desktop/Tablet
Get Your Discount!
Mobile
Get Your Discount!
Okay, let’s try one more technique that is often needed in design – Overlapping Containers. We’ll start with a Container. Place a two column grid inside of the Container with each part of the Grid at 50%. You need a light gray background color and use transparency on the left Container and a Z-Index of 2. On the right Container, you need to use a negative left margin.
Rocky Mountain High
High altitude means scenic scenes like this one. The grandeur of the mountains can not be overstated, and it must be seen to be believed!
Summary
There is so much more to explore and to design with GenerateBlocks Pro. Your imagination is the limit to your new page and/or Website. Using the right tools makes the task so much easier and rewarding. In future Blog Posts, I will do a Deep Dive into a specific feature of the PRO version. GenerateBlocks Pro is engineered to evolve with the WordPress Block Editor, so embrace the change!