PostX Gutenberg block review & tutorial

I’ve been utilizing WordPress for a very long time. After I began, WordPress turned a fairly critical various to internet hosting your weblog on Blogspot (or Blogger).

Then it morphed and morphed and now it has change into a one-stop platform for blogs, firm pages and even e-commerce web sites.

Statistics present that WordPress is changing into the platform of selection for an rising share of internet sites.

WordPress is to web sites what Trivago is to motels. Lodge? Trivago. Web sites? WordPress.

In case you are within the PostX plugin, then you might be in all probability searching for one thing that makes your internet growth expertise straightforward and easy.

You don’t need to go fiddle with the PHP information on the backend or write your individual Gutenberg blocks with React. If the earlier sentence looks as if Greek, that’s as a result of these two languages are in impact mumbo-jumbo written in English.

You might need thought of Wix, Squarespace and for some motive you’ve settled on WordPress. Now, how straightforward is it to start out a weblog?

postx gutenberg starter blocks

What’s PostX?

PostX is known as a bunch of Gutenberg blocks that make it straightforward so that you can construct pages that look trendy {and professional}.

It’s a bit like sending WordPress’s default blocks to Pimp My Experience after which getting one thing that’s customizable and full of glitz options. PostX gon’ give it to ya.

On the coronary heart of it’s PostX’s fashion toggles. As a substitute of writing CSS, you’ll be able to toggle a couple of checkboxes, sliders and buttons to alter issues like font measurement, color, hover results, and many others.

For the posts associated blocks, there’s a Question editor that you need to use to filter out posts. If about The Loop, this is able to be the place you’d ship completely different parameters to The Loop to ask for posts that match a particular question. In different phrases, let’s say you solely need posts which might be tagged “pizza”, you’ll be capable of inform PostX to seek out all posts tagged pizza and checklist them on the submit block.

Listed below are the classes of blocks that you just get:

Heading

postx titles

Heading blocks will let you fashion your headings. WordPress does include a Heading block however PostX’s heading block provides you extra choices.

The default WordPress heading block solely permits you to change typography, color and H2-H6 tags, whereas PostX’s heading block permits you to change much more.

It could possibly do the whole lot the default heading block can do, however you may also change the font household, font measurement, color, spacing.

postx headings

The power to go wild and create way more than the default heading blocks will let you do actually permits for creativity. It additionally permits you to put hot-pink Comedian Sans in your content material, so needless to say with energy comes duty.

PostX additionally gives a couple of default designs for headings and people are way more in-line with what you may use this block for. I simply made a design that went off the deep finish simply to show that you could additionally make one thing that appears very off-brand.

Photos

The default picture block in WordPress permits for minimal customization. You may align it to the left, centre or proper. It’s also possible to put a body, border or rounded crop in your picture. It’s purposeful for a weblog.

postx images

Enter the souped-up picture block from PostX. You may overlay a button on the picture, put a hover animation, put a greyscale filter.

Submit Grid

In a default WordPress setup, you’ll be able to select to checklist a web page or your weblog roll as your entrance web page.

postx

When you select a web page, you’ll be able to’t show your weblog roll (until you know the way to jot down the WordPress Loop in a customized house web page file).

What the Submit Grid permits you to do is to checklist your posts in a gorgeous approach.

In comparison with the default weblog roll format the place your submit are listed sequentially, Submit Grid permits you to put them in several grids.

There are seven Submit Grid layouts within the free model.

Plus, you’ll be able to modify their kinds comparable to how massive a font you’d like on the submit titles, colors and plenty of different issues.

Submit Record

postx post list

Submit Record is… err… lots like Submit Grid however extra list-like.

In all honesty, they aren’t that a lot completely different. They only checklist a bunch of posts in a extra sequential approach than the Submit Grids.

Wanting on the starter layouts that include PostX, I feel the builders envisioned these being utilized in a two column format.

Assuming you employ a format with the Submit Slider block or Submit Grid block, the Submit Record block might be used on the sidebar to characteristic particular posts that you really want pinned. I can see this getting used if you would like particular tutorials or essays being listed on the aspect.

Submit Module

The Submit Module block is one other approach to checklist posts.

There are two choices within the free model: one itemizing a submit with its picture, excerpt and writer’s particulars and one other itemizing simply the title and writer’s particulars.

postx post slider

Submit Slider

That is one factor that I’m fairly enthusiastic about as a result of it’s one thing that actually enhances the person expertise.

With the Submit Slider block, you’ll be able to put a dynamic submit slider up in only a click on.

By default the slider will robotically animate with a fade-in-fade-out animation. You may management the period of time it stays on display by means of the slider’s editor. It’s also possible to management different issues just like the variety of posts listed and the main points positioned on the display.

Wrapper

After I first positioned the Wrapper block within the block editor, I used to be a bit confused as to what its use was.

It’s only a container with a background color. I think about that folks would use this to separate the completely different submit blocks that that they had. So, you may put the slider on the high of your house web page, after which one other part within the wrapper with a color, after which one other part in a wrapper with a special color.

The PostX’s documentation doesn’t recommend any use circumstances for this.

The method of beginning up a web site with PostX

Let’s take the state of affairs the place I’m establishing a brand new weblog and I need to use PostX.

PostX guarantees that you could get a good weblog in lower than two minutes. That is their video testifying to that:

PostX’s touchdown web page, they do provide fairly a tempting promise.

Prior to now, you selected your WordPress theme and also you had been locked into its construction until you’re prepared to fumble with the theme information.

With the introduction of Gutenberg blocks in WordPress 5.0, you are actually capable of do a a lot less complicated course of to customise your web site. Gutenberg blocks are like constructing blocks that you just use to assemble varied sections of your web site.

Granted, you’re nonetheless locked-in with the bottom theme that you just’ve chosen. For equity’s sake, I’m utilizing Twenty Twenty-One, which is the latest theme that’s Gutenberg appropriate.

The aim of responsive design is to permit a single design to work on cellular, tablets and desktops.

First downside: responsive design breaks

On the Twenty Twenty-One theme, PostX’s default weblog format fails to have the ability to stretch from edge to edge at desktop decision. As a substitute, it’s only a skinny column.

Testing it with older themes comparable to Twenty Twenty or Twenty Nineteen didn’t work both.

So I went to Google and came upon that I wanted to make use of the “PostX Template” moderately than the “Default Template”.

postx  post slider

After I discovered that this was the case, I instantly went to RTFM (SFW model: “Actually Strive Discovering the Handbook”). It was a little bit of a ache to seek out the documentation as a result of it’s not instantly apparent on the obtain web page. I needed to go to the product’s web site’s footer to seek out it. On your comfort, it’s right here https://docs.wpxpo.com/postx/

Second downside: multi-column format calls for correct picture sizing

postx uneven columns

As an internet developer, I’m nicely conscious that in relation to layouts with photographs that span a number of columns, one massive downside is protecting the pictures and textual content aligned.

This can be a bit tough, sadly, for an internet developer to take action particularly if the pictures uploaded are of an unknown measurement and unpredictable ratio.

So, to be able to preserve PostX’s post-listing blocks from going awry, you should make sure that photographs are of a particular measurement in order that they current nicely on the submit blocks. It will be fairly the sin to overlook to add a picture as a result of it will throw the design off.

Ease of setup

Set up of the PostX plugin is fairly straightforward. You simply have so as to add it within the plugins display within the WordPress CMS system.

PostX doesn’t change something in your system so you’ll be able to work with it instantly and combine it into your present web site.

So, in case you aren’t spinning up a brand new web site, you possibly can use this to combine the Submit Slider block to your house web page, for instance.

Studying curve

There isn’t a lot of a studying curve with PostX assuming you’re conversant in the block editor and also you perceive CSS.

PostX is nice as a result of it takes away all of the tedious CSS writing. As a substitute, you’d simply toggle a couple of issues and the whole lot that you’d have executed in CSS is finished for you thru the PostX Gutenberg block.

Use circumstances

This can be a area of interest product that helps a sure subsection of WordPress customers.

It’s not a web page builder like Elementor or Beaver Builder is. For instance, Elementor can modify headers and footers, however PostX can’t.

custom home page postx

Use case 1: a customized house web page with a weblog roll

The primary use case for PostX, in my understanding of it, is that it helps you create a nicer house web page than what WordPress can provide.

WordPress provides you two choices: a static web page or a weblog roll. You may put no matter you need on that static web page, however you’ll be able to’t combine your weblog roll into the static web page (until you write some PHP).

So, that is the place PostX finds its first goal. Let’s say you need your house web page to have an introduction of your self, your contact data after which the weblog roll. You are able to do this with PostX by making a web page, writing your intro utilizing the usual WordPress blocks after which integrating the brand new blocks from PostX comparable to Submit Slider or Submit Grid.

What I’m notably happy about is the convenience of integrating a slider on the entrance web page. That’s certainly one of my favorite issues about this Gutenberg plugin.

Use case 2: put some snazz in your inner linking

It’s also possible to combine these new blocks into your posts.

When you’re a Yoast person, you’ll know that Yoast all the time berates you in case you don’t put inner hyperlinks in your posts. Yoast additionally makes use of a frown emoticon to guilt you into doing all of your search engine marketing duties. Who desires to see a pink frown?

post grid postx

With the PostX posts blocks, you’ll be able to simply add in some inner linking with out a lot effort. Simply throw in a Submit Slider block and your submit instantly has some inner hyperlinks. In fact, to make these inner hyperlinks extra eye-catching, you possibly can put a class filter to make sure you’re solely linking issues {that a} reader might be all in favour of.

I think about if you know the way to jot down PHP, you possibly can additionally ask WordPress to combine these blocks into all webpages created by submit.php.

Use case 3: combine into web page builder utilizing shortcode

postx shortcode

While you create a PostX customized Gutenberg block, it can save you it right into a shortcode that can be utilized in your web page builder.

PostX creators have cleverly considered a approach to sideload their block plugin into these web page builders’ editors.

With a purpose to do that, you should go to the Addons web page and make sure that the “Saved Templates” add on is turned on.

Then, you must go into the Saved Templates hyperlink after which click on Add New Template.

Sort in your title on your customized Gutenberg block after which add no matter you need in it, after which publish it.

Upon publication, you will notice a shortcode. You should utilize this shortcode wherever — traditional editor, Gutenberg editor, or web page builder.

Free vs Professional

Usually, I’d go straight for the professional model of stuff however not this time.

I discovered the free model to be enough for my makes use of.

The Professional model comes with extra Starter Packs (totally fleshed out layouts) and Readymade Blocks (layouts for itemizing posts).

One vital characteristic within the Professional model is the Fast Question Builder which is able to will let you create extra particular submit blocks. For instance, you’ll be able to checklist the posts that are hottest, most commented or the newest posts.

The opposite factor that’s helpful is the addition of lazy loading photographs. These assist enhance load occasions, a vital a part of person expertise and search engine marketing scores. They assist velocity up load occasions by not asking the browser to obtain these photographs till they become visible of the person, decreasing web page sizes within the first moments of web page hundreds.

I haven’t actually discovered that my expertise with PostX required the Professional model. It’s like shopping for the next trim degree of a automotive with a sunroof, heated seats and lane departure warnings. Some individuals may discover these value the additional price. Others, like myself, don’t.

I’d give the free model a go after which see in case you wanted the Professional model. PostX makes it apparent what the Professional model gives, so that you’ll by no means have to go attempting to find causes to purchase the Professional model.

Verdict

Free is sweet, proper?

So give it a attempt to see what you suppose.

I feel what PostX gives is sweet and also you may discover it very helpful for no matter use case you’ll be able to consider. The three above that I’ve written about are usually the place I feel they’ll work.

That stated, compatibility isn’t excellent. It’ll modify the