Landing pages used to be owned by the Page Builders
The power of WordPress page builders, like my favorite Beaver Builder, were most brilliantly demonstrated on landing pages. Building landing pages with them was fast and easy and they looked great. Now, as more and more folks are embracing the block editor (Gutenberg), landing pages may be the first place people put it to the test.
You can build a landing page with any theme. I use Blocksy on this site, but what I'll show you here has nothing to do with my theme.
GenerateBlocks makes it easy
What you may want to grab, because of how easy it makes everything, is the GenerateBlocks blocks. I'm using the Pro version, which I love.
They offer four blocks. Nothing fancy.
- The Container
- The Grid
- The Header
- The Button
But it's amazing what you can do with them.
Building with GenerateBlocks Pro
Let's take the hero space at the top of a landing page, and see how these four blocks can deliver everything we need when building landing pages.
These days it's common to see a two-column approach with a photo or video on one side, and a title, text, and two buttons on the other.
Here's what we'll be putting together:
- Container
- Grid (2 Columns)
- Container
- Image
- Container
- Heading
- Paragraph
- Buttons
- Button One
- Button Two
- Container
- Grid (2 Columns)
How this Works
The original container holds the background color and allows me to define the padding. Then the Grid does the work of creating a two-column area where I can put the rest of my work. It lets me define the vertical alignment, as well as the gap between the columns.
On the right side I can place my header, paragraph text, and two buttons. The GenerateBlocks button block allows me to define two buttons, and have them stack vertically or not (and take up the whole horizontal space or not).
That's pretty nice, right? And it doesn't require a ton of custom blocks or nuances. In fact, it's very fast and easy to build something like this.
Content Blocks in Blocksy
I have written several posts already about reusable and dynamic content:
But one thing to note is that the same work I'm doing above, to create this nice pattern in Gutenberg for a landing page, can also be used as an “ad” dynamically placed across my site.
To do that, I can use Blocksy Pro's Content Blocks.
First I click on Add New.
From there I'll be taken to the main area to create my design. That's where I can put this hero version. Though I would likely name it for a specific ad (like I did when I created the one for Smart Quiz Builder).
And as I showed you in that other video on dynamic placement, I could have it inserted on specific kinds of posts. Which means the work I do on landing pages also becomes useful across the site.
Building Landing Pages in Gutenberg
The truth is that building landing pages in Gutenberg isn't as challenging as I initially felt like it was. The use of GenerateBlocks makes it really fast and easy. And every day it will get easier and easier to use the block editor for just about anything I need or want.