Jessica Madsen Photography

Gutenberg Blocks

Hazel is compatible with the Gutenberg editor, and we want to show you everything it can do! You’ll be able to edit colors, font size; easily add buttons, quotes and, pull-quotes. Note that to enable full-width and wide-width content, you’ll need to select the layout without a sidebar. We also made sure that your experience is the same on the blog as on the editor, so the colors and fonts you pick will transfer over to the editor for a smooth experience.

This is the cover block

It works great at the top of a page. Add more important information down here! This is great to catch your reader’s attention.

Add a button too!

This block is a gallery

You can use the gallery either in standard width, wide-width or full-width. You can also add more images if you wish to! This block is great to add a lot of images to your blog, while spacing some space.

Here’s a Wide-Width Image

This type of image is larger than the standard width of the blog, but it’s not full-width (unless you have a smaller screen size, then it can look full-width). This is great if you want an image to pop a bit.

Let’s look at other important elements

Heading H1

Heading H2

Heading h3

Heading h4

Heading h5
Heading h6

Create as many buttons as you want! They can come in all kinds of colors, the limits are your imagination.

Something Great!
Get Started
Learn More

This is a styled paragraph block. All you have to do is give it a background color and it’ll pop! This is perfect for special content you want your readers to pay attention to. Believe me, with this colorful background, they’ll be interested in reading it!

This is a column block with a picture on one side.

I love this type of block, it works great on blogs! Share some content with an image beside it, without having to code anything.

Let’s add a bit of filler so it looks better:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mollis tempus ligula ut pulvinar. Morbi auctor magna ac molestie sollicitudin. Maecenas ut ligula rhoncus, vulputate eros nec, ultricies nulla. In ac pulvinar metus. Etiam aliquam, libero non posuere molestie, nisi ligula sagittis mi, quis pulvinar felis ligula ultricies velit. Praesent vestibulum, dolor ut congue elementum, dolor velit blandit nulla, sollicitudin ultrices leo purus et neque.

Yup, you can have a styled paragraph box in the middle!

Vivamus eu nunc ornare, accumsan nisl lacinia, euismod felis. Donec in justo ligula. Pellentesque felis ex, ornare tristique scelerisque sed, bibendum et est. Mauris interdum urna vitae urna aliquet, sed mattis lacus maximus. Proin condimentum vel neque ac ultrices.

Quote blocks available

There are three types of quotes available in Gutenberg. The first one is the “standard” quote. You can also use the “large” style, and make it bigger! This is perfect for text that you want to emphasize.

Standard Quote

I am a simple quote. People love me because of my simplicity.

Anonymous

Large Quote

I am a large quote. If you don’t notice me, we have a problem.

Anonymous

Pullquote

This is last type of quote available. It comes with lines that separate it better from the rest of the content, so use this as much as you want!

Hey, I’m a pullquote and I repeat your best content.

Me, Myself & I

Categories & Latest Posts Blocks

You can also link to all your categories and latest posts from the Gutenberg editor! This is great if you want to have an archive-type page

Categories

Latest Posts Block

Insert all kinds of media

If you’re also a vlogger or a podcaster, you can add all that content using Gutenberg. Embed your awesome videos and audio content with just a few clicks.