I have been playing around with the latest version of Gutenberg which makes it easy to create some common and not so common layouts. Although there is a lot of room for improvement for many of the features, the latest version has some cool features.

I made a couple of layouts using only the Gutenberg blocks. There was no extra CSS added for either of these layouts.

Portfolio Layout

Here is a portfolio layout using only the column and the image blocks. I created a simple template to display my portfolio on this site. I wanted to replicate that page using Gutenberg. It was very simple and easy. With this new layout, it is easy to switch the portfolio pieces and arrange them anyway I want.

Click here to view the actual page.

Portfolio Layout with Gutenberg - Front end
Portfolio Layout using Gutenberg

Portfolio layout with Gutenberg - back end
Portfolio edit screen

The post edit screen and the front end page look very similar. This makes it very easy to visualize the page layout while you are building the page. 

Landing Page Layout

The blocks used for this layout are the cover block, the text and media block, header block and button block. These make it very easy to edit and move the content around. 

Click here to view the actual page. 

So far, I have mostly used the image and column blocks in my layouts. I am working on a couple of other layouts like the pricing table layout and a magazine style layout. 

Leave a Reply

%d bloggers like this: