Gutenberg – 8 Pages You Can Make in 15 Minutes
See how to easily create pages for Home, Landing, Optin, Products, and Events in less than 15 minutes with Gutenberg.
There’s no need for page builders or downloading templates.
And you can FULLY customize everything to suit your needs.
Gutenberg has come a long way
I don’t think anyone expected Gutenberg to become such a powerful page builder in its first year since launch.
But I was blown away by just how versatile it became and decided to build my entire woodworking site on it!
That includes pages for:
8 Page Examples
Boy, did I ever have fun creating these examples for my Gutenberg Ninja course!!!
Each one only took about 15 minutes to make.
See a snapshot the full pages below, including a description of what they feature.
The Gutenberg Ninja course makes it easy
Harness the full power of Gutenberg in this easy and fast course that makes it fun to learn Gute.
You’ll be amazed at what you can create!
Foodie, DIY, Craft Home Page
We start with a splash background image at the top.
Nested inside that block we have the site title and taglines.
And then we have the featured categories that are set off with a slightly opaque area that allows the main splash image to still show through.
That’s followed by a clean optin area.
And then we have another eye-catching area that can be used for:
- Post series
- more categories
- an optin
- or other CTA
Next are 4 of the most recent posts and every element of what is shown can be styled to suit.
Near the bottom we have a post carousel, which could also be used as a CTA for your social media platforms.
Heartwood Art Home Page
This really is the home page of my woodworking site!
The entire content area is Gutenberg.
At the very top I have a welcome message with my site name.
That’s followed by a colored background section with a picture and blurb about me and what folks will find on the site.
Then I have a very eye-catching optin.
Next are my latest posts.
And last I have a featured build how-to post series.
Instagram Landing Page
Why in the world would you send your Instagram followers to a 3rd party service?
Send them directly to your site!!!!!
This is the Instagram page I use for my woodworking site.
The top of this page has a welcome message for your IG followers.
And then it has your most recent post – and yes – it auto updates!!!!!
Then there are two sections for featured categories, or they could be a static area for a featured post series.
And last we have more posts. They could be a single category or all of your posts.
In fact, you could easily make a “play list” of all your top categories.
Optin Page
It’s great to have an optin on every post or page and in your sidebar.
But you can’t link to that.
Now you can easily create an optin page to send your followers directly to!!!!
First we have a nice splash image background.
And nested within that block is a heading for what folks will receive, followed by a little more info.
And then we have an eye-catching optin area with its own slightly opaque background to set it off, a call-to-action heading, followed by our optin form.
Below that are two info boxes with icons that give a little more info about what folks will receive.
And at the end we have a nice, colored privacy statement to finish off the page.
Home or About Page Example
Here we have a page that is a little more on the agency side.
But, the layout structure could easily be used for any kind of blog.
First we have a nice splash background image.
Nested inside is a big, bold tagline followed by a smaller tagline.
And then we have a set of nested columns with the proof of how many clients were helped.
That’s followed by a clean, info section break with more details about the site.
Then we have a super eye-catching colored background section with CTAs all over it to encourage folks to click on the service or info they want to see most.
Next we have a “meet the team” type section that humanizes the agency.
And finally, we have a CTA area and the background image has a parallax effect.
Event Page with Countdown Timer
It’s so easy to make your own landing pages in Gutenberg!!!
Here we have a splash image background.
Nested inside is info about an upcoming webinar, including the date and time and a countdown timer to emphasize urgency.
And then a big, colorful button that is sure to get clicks!
Next we have a nice triangle design element to draw our eyes down the page.
That’s followed by two info boxes with more details on the event.
Then we have another eye-catching CTA that repeats the urgency and button look.
And finally we have a testimonial carousel to help seal the deal.
Product Page with Price Tables
It’s so easy to make product or course landing tables with Gutenberg!
First we have a nice background section with an image and our site title, plus a CTA immediately.
Then we have four info boxes to tell more about what folks will get.
That’s followed by a nice pricing table. And if you want the middle one to stand out, that’s super easy to do!
In fact, I have a whole tutorial on how to create multiple different pricing tables in the Gutenberg Ninja course.
At the end is a nice client testimonial to show proof of just how great your product or course is.
Info or Upsell Page
Need a standalone product page?
Or do you have a signup form and want to redirect folks to an upsell page?
It’s super easy to create one!
First we have a big splash image background.
Nested within it is a heading that announces the product or offer, followed by a tagline or more info.
And then you have an eye-catching, big button for the CTA.
That’s followed by a triangle style element to draw our eyes down the page.
And there we find two info boxes with icons with more details on what folks will get.
And the last element is another CTA button that encourages folks to take action now.
What page do you want to build?
I have yet to see any type of template in a page builder that I can’t recreate in Gutenberg.
And I prove that in my Gutenberg Ninja course.
You’ll be empowered to completely customize any type of page to your exact needs.
It’s fast and fun and will save you loads on design costs.
And no need to buy templates that you can’t make match your theme either.
What are you waiting for? Get busy making pages with Gute!!
Care to Share?
Oh wow Gute has come on so much in such a short time Can’t wait to dive back into your course in the new year
Stunning, isn’t it? I don’t think anyone expected plugin and theme devs to embrace it and propel it at this pace!! I think the same will happen with Phase 2 they are working on now for making it a full theme builder.
LOVE THIS! Thank you, for these examples MaAnna – and for proving that page builders aren’t necessary in order to create a beautiful, functional website. Big fan here – thanks for all you do… love your podcast, too!
You’re most welcome!!! Aren’t they fun?! I figured I better stop just telling folks about the power of Gute and start showing them!!
You REALLY should explain that these layouts require using addon block plugins like Ultimate Addons for GB, Stackable, Atomic Block, Kioken or others.
Those layouts above are not possible by simply using the standard blocks in the Block Editor.
Not all of those layouts require more than the standard blocks. Some do. And I teach ALL of them, including the additional plugins, in my course. They are all free, so not like you have to buy anything to extend the functionality of core Gute.
And, I vet the best plugins and blocks to use too. Some add substantial weight to page load. I don’t advocate using those. I stick to what keeps your site fast and lean.