Category: User Tutorials for Gutenberg WordPress editor

Are you getting started with Gutenberg WordPress editor? We have curated the best Gutenberg user tutorials. Find out tutorials for the beginner and advanced WordPress users.

How to Create Interactive Scroll Effect to Columns in Gutenberg Editor

How about creating a scroll effect to your multi-column content? It's pretty easy and adds a nice visual attraction to your web page. So here is the sneak peek of what we are going to create in this quick tutorial. So let's learn how you can create this nice effect in Gutenberg. This is to work with multi-columns, so you may create any number of columns content as you like. And can have anything as… Read More »

How to Display Gutenberg Blocks in Other Page Builders (Elementor, Divi, etc)

Learn how to display any content or sections you have created in Gutenberg Editor into a Wordpress page builder like elementor, divi, beaver, etc. Why would you need to do that? Honestly, I am not sure. 😇I got this question via one of my plugins "ACF Blocks" support forum. So, I am creating this quick guide on how this can be achieved. Well, this is easily doable. We need to install a plugin which makes… Read More »

How to apply a gradient background in Gutenberg

You can easily apply a gradient background to any Gutenberg block via custom CSS. I have already explain how to add custom CSS to any Gutenberg block in a previous tutorial. Go through that tutorial as it explains it well, and you will need to know that to follow this one. Free Online CSS Gradient Code Generator Now you must be thinking that you must know CSS to create a gradient color, but worry not.… Read More »

How to apply custom CSS to any Gutenberg Block

What if you need to apply some custom styling using CSS to your content in Gutenberg editor. There are a few ways you can apply custom CSS to any Gutenberg block. Let's find out how to do it. 1. Via WordPress Customizer You can simply put your custom CSS into the Additional CSS section via WordPress Customizer targeting specific CSS class applied to the Gutenberg block. But, there is a downside to this approach. Your… Read More »

How to add icons in Gutenberg without any plugin

Icons obviously are one of the most needed elements for a web page. In WordPress Gutenberg editor there is currently no default block to easily insert an icon such as Font Awesome, Material Design Icons, Unicons, Dashicons and many other. So let's see an easiest way to add an SVG icon in Gutenberg as an Image. First of all, if you have images of your icons in any image format, that is already easy to… Read More »

Learn How to Update Your Old WordPress Posts with Gutenberg Block Editor

Are you looking to update your old blog to the new WordPress Gutenberg editor? Check out this step-by-step tutorial by WPBeginner on how to update your old blog posts to new Gutenberg editor properly. This tutorial covers the conversion process in detail. Check out the tutorial and start converting your old blog to the modern editor and start experiencing the benefits. Read More »

A Walk-through to Build a Sales Page with Gutenberg

A quick walk-through tutorial by Justin Tadlock on building a clean app sales page using in using Gutenberg. He built a complete sales page design using core Gutenberg blocks. There has been no 3rd party Gutenberg blocks used. Checkout and get inspired to build your own. Read More »

How to switch between WordPress Classic Editor and Gutenberg

Gutenberg, as you may already know, is the new Blocks editor for WordPress. It is a new approach to how you write your content in WordPress. While it is a great new editor, you might still be looking a way to use classic editor completely or partially. There are different ways you can disable Gutenberg editor, however, I highly recommend you to do not completely disable it. As this is the future of WordPress you… Read More »