Introducing Gutenberg Templates Library

I am super excited to introduce the one of its kind Gutenberg Templates Library to the awesome WordPressers.

This is going to be a vast templates library for Gutenberg users. It already has 100 section templates spread over 12 most needed section types for any websites.

The best part of this library is that you do not need any extra WordPress plugin to import these templates. Just Browse the templates, copy the one you want to use and paste it in Gutenberg, that’s it.

Spread a word if you like the idea. 😇

Section Templates for Gutenberg

I’ve organized these templates into well thought popular section types. Filter the templates using the section categories and pick the one you like.

  • Hero
  • Testimonial
  • Team
  • Stats
  • Pricing
  • Logos
  • Gallery
  • Features
  • FAQ
  • Content
  • Contact
  • Card

I may add more categories if needed. Let me know your suggestions.

How to Import a Gutenberg Template

There is no trouble required to download a template file and then import it to your website. Neither I ask you to install a WordPress plugin to be able to import or insert a Gutenberg Template. Simple browse the templates, copy one you like & paste it in the editor.

I have also prepared a quick instructional video if that helps.

Some Templates use Custom CSS

Some templates may require custom CSS code which needs to be added to your page or website.

To make it super easy for you, I recommend you install Block CSS plugin. This is a nice addon for Gutenberg that lets you apply custom CSS code to any Gutenberg block.

If you have this plugin installed and activated, you are all good and nothing to worry about the custom CSS code. This will automatically get loaded for you when you copy a template in the editor.

However, if you decide not to use this plugin, you may need to copy the CSS code as well from the template page and paste it on your website your way. I’ve also written a tutorial on How to apply custom CSS code in Gutenberg, which demonstrates a few methods.

Templates Adapt Your Theme Styles

I tried to make almost no use of custom CSS for the styles and typography in the templates added by myself (we may add 3rd party templates in the future). That means you may experience a little different design of a template as opposed to the screenshot in the library.

Whatever theme you are using templates will adapt most of the typography and styles from it.

3rd Party Blocks & Plugins

Although at the launch, I’ve not used any 3rd party blocks/plugins for the 100 templates I have created. Except for the contact sections, which required a form plugin, and for that, I’ve used Gutenberg Forms.

But, in the future, templates may require 3rd party blocks/plugins to be installed. Make sure to check for the details of the required plugins for the template you wish to use.

What’s Next?

Well, the goal of this templates library is to keep it growing and adding a variety of FREE Gutenberg templates. And I may also open it for the public to submit a template to be added to this library. If you are interested in contributing, get in touch.

Update: Browser Extension Released

We have just released a browser extension for this Templates Library. Find out the details in the following post.

Gutenberg Block Library
Gutenberg Patterns Library

Leave a Reply