marharytakaplia
Marharyta Kaplia
Copywriter
Updated on
Tutorials

Gutenberg Portfolio with No Pain: JetGridBuilder Comes to Rescue

Currently, Gutenberg is going through a complex and unambiguous path of development. Love it, or hate it, the new WordPress editor is here to stay for a very long time. And so far, at this stage, there are the tasks that are quite problematic to solve using Gutenberg alone.

Of course, to build a portfolio website with the new editor is much more convenient if to compare it with the possibilities of the Classic Editor. Still, building grids with Gutenberg is an issue right now because the process is quite time-consuming and complicated; you need to use many blocks and even apply some CSS knowledge that contradicts the developers’ idea about the simplicity of editing.

So, at the moment, Gutenberg doesn’t have a single solution that can display the posts conveniently and flexibly. But, lucky you, Crocoblock has the one. JetGridBuilder will rock your portfolio website because building beautiful grids has never been easier. So, let’s get the show on the road. 🚗

Table of Contents

Functionality of JetGruidBuilder 

JetGridBuilder is a feature-rich plugin that is geared to creating highly customizable grids. Its uniqueness is in drag-n-drop builder and the possibility to move the card along the backing grid freely, to resize it right away, and to get the portfolio you need. Check an awesome demo and try everything by yourself.

Yet, JetGridBuilder plugin has some more features and settings. Let’s overview them briefly. ☝️

JetGridBuilder offers two widgets — Posts Grid Builder and Terms Grid Builder. Each of them can be easily adapted according to your needs. With Posts Grid, you can display every project separately in your portfolio, and Terms Grid can be applied to organize the projects in categories.

You have three tabs with settings, General (refers to the whole look of the grid), Post Item (to customize the look of each post separately), and Advanced (but forget about it because it requires additional CSS classes). 

In the General setting sections, you can set the number of columns for the future Gutenberg portfolio grid, apply specific Gutter, choose the Item Style, etc. Also, it provides the unique Vertical Compact feature that aligns all the cards to the top automatically. Here in this tab, you can choose the Loading Spinner type.

In the second tab, that is Post Item, choose the Thumbnail and its size, toggle on or off the elements you want to see on each card (Title, Autor, Date, etc.).

JetGridBuilder works flawlessly with WooCommerce, so both tabs contain WooCommerce settings too. Toggle Stars rating, Categories, Price, and Add to Cart button. Read the detailed overview of the JetGridBuilder settings in our Knowledge base.

Organize the Projects Step by Step  

With JetGridBuilder plugin, you can make cool grids for the portfolio website because it can display all types of posts.

If you already have the posts with your projects created by all possible tools and you only need to showcase them in the well-structured portfolio grid, follow the simple algorithm:

1 Step — tap the “Add Block” button designated with “+.”

2 Step — find Posts Grid Builder there. Click on it and add to the Gutenberg Editor.

3 Step — press an “Add Posts” button to choose the projects you need to display.

4 Step — organize the cards by dragging them to the necessary place.

5 Step — don’t forget about the look of your portfolio. Jump to the “Displaying projects” section in the article to find out more about the visual component of JetGridBuilder.

6 Step — if you have a single-page portfolio and want to display all the projects in a row, apply the Loading spinner to show the animated icon while the posts are loading.

7 Step — click an “Update” or “Publish” button to save the changes.

Creating Gutenberg Portfolio from Scratch

If you don’t know where to start designing the portfolio website, here’s a detailed instruction on how to do this with Crocoblock tools — JetGridBuilder and JetEngine. I’ll take you step by step through the whole process of creating, for instance, an architect’s portfolio website on WordPress. 🚶

Wrapper

Building Header and Footer

In a usual scenario, I would start by telling you how to make a header and footer for your portfolio website. However, Gutenberg doesn’t allow creating such blocks manually yet. The header and footer are pre-built, and you can only apply some minimal changes if you know HTML. And even in that case, all other elements that are displayed with the posts and pages are controlled by the theme. It’s okay in case you don’t need something extraordinary in the header and footer, except for “About Me,” “My Projects,” “Contact Me,” “Privacy Policy,” and copyright sections. Otherwise, probably, you will need to use Elementor to personalize the header and footer.

Core

  1. Managing projects

First thing firsts, you need to create a CPT for each of your projects and add the meta fields to them, using JetEngine plugin. Look through the detailed guidelines from the Knowledge base to know more about it. Also, we have a full-fledged tutorial on how to use JetEngine widgets in Gutenberg.

  1. Displaying projects

On the step of displaying projects in a clear-cut portfolio, JetGridBuilder comes into play. It also should not go unspoken that JetEngine can also help you to organize the posts in the grid — you can display created listing, apply its style and order the cards.

However, I’m here to tell you more about JetGridBuilder because it is stunning in its absolute flexibility. You can create any possible portfolio layout to showcase the projects because only your fantasy is the limit for it. 🚀 For example, as an architect, you can combine the images of the objects with different width and height freely, put high towers and skyscrapers along with low-height buildings. With the help of such flexibility, you can highlight the primary projects and make them the first ones the visitors see.

  1. Personalizing portfolio grids

In order to make your Gutenberg portfolio look unique, you can do the following:

  • define number of columns for backing grid to scale the the cards and layout in general;
  • resize each tile — you only need to pull its corner;
  • move the cards along the grid freely — the width and height of others will adapt automatically;
  • set the required gap between the tiles to form the seamless grids or, on the contrary, the one with the particular break;
  • add customizable Loading Spinner (choose one of 25 amazing spinner types).

Move further to style the card a bit.

NOTE:

Gutenberg is not that cool in terms of stylization. The well-known page builders’ approach is not applied here — everybody using Gutenberg adheres to the idea that any add-ons overload the website and decrease the page speed.

And most probably, you will not get the result any visual builder can provide. Yet, Gutenberg in combo with JetGridBuilder is capable of something.

Look at the Item Style settings. This feature defines how the thumbnail on the tile will look like. Here you will find two options: Standard and Content Overlay. Use the first option to place the thumbnail over the text info, or apply the second one to make the content overlay the image.

In the Post Item section, you can choose whether to show a thumbnail or not. Also, add or remove the following elements: Title, Author, Date, Post Type, and Divider. It will also give a new look to the card. At least, you can always opt for CSS to style each tile of the portfolio.

Provide clear navigation. 🤓People like controlling things, and they will appreciate the nice level of control while looking through your Gutenberg portfolio website. Apply the navigational capabilities of JetEngine that is ready to provide arrows for your slider, dots for carousel, and pagination, in case you are not interested in Loading Spinner.

Along with presenting your projects/photos/designs, you can also sell the items. For instance, you want to monetize your handiwork and advertise or distribute handmade items. With the help of JetGridBuilder, you can build a product grid too. 

Last but not least, you can assign a category to every project (or product) and display them on the separate page, utilizing Terms Grid Builder that features all the same settings Post Grid Builder has.

How to Get JetGridBuilder?

The good news is that JetGridBuilder is totally free. 🤗 Download the plugin, add it to the admin panel of your portfolio website, and start using it right away. Also, check the JetEngine prices and enjoy the perfect combo of both plugins.

Bottom Line

That’s it for our Gutenberg portfolio and the process of its creation. As you can see, JetGridBuilder helps to put all the projects together effortlessly in the form of an elaborated grid. This tool is flexible and feature-rich, so you can easily create amazing layouts that drive your idea and demonstrate experience through the projects you display in your Gutenberg portfolio. 

Have you already tried our JetGridBuilder? Was it easy to create the grid you required or you had issues? Do you find it useful for you? Share your feedback in the comments below.