Gutenberg Pricing Table Block Tutorial

Introduction

Gutenberg Pricing Table Block tutorial by Premium Blocks is a comprehensive guide tailored for WordPress website owners aiming to enhance their online presence with clear and engaging pricing tables. It details the creation process within the Gutenberg editor, emphasizing customization to fit various business models using nested blocks. This tutorial not only assists in making pricing plans more attractive but also focuses on improving visitor conversion rates. Step-by-step instructions ensure that users can easily apply these practices, regardless of their technical skill level.

Visit Demo Page

Free Download

Requirements

To get this Gutenberg block on your WordPress website, make sure to install and activate the following plugin(s).

Premium Blocks for Gutenberg – The Free WordPress Plugin.
Recommended* Kemet Full-Site-Editing WordPress Theme.

How to Use Gutenberg Pricing Table Block?

Gutenberg Pricing Table Block Support Inner Blocks. You can add more fields with essential display options to capture your audience’s attention including:

Price
Text
Heading
Badge
Bullet List
Buttons

Style Settings

Background Color: Adjust the table’s background color. The icon suggests the ability to select a color and possibly set a transparent background.
Box Shadow: Apply and customize a shadow around the table, likely with settings for color, blur, and spread.
Border: Choose the border style (solid, dotted, dashed, etc.) for the table.
Border Radius: Configure the roundness of each table corner, with individual settings for the top, right, bottom, and left.
Padding: Adjust the space between the cells’ content and their borders. Units for adjustment include pixels (PX), ems (EM), or percentages (%), with separate values for each side of the cell.

Gutenberg Pricing Table block's style with 3 column examples. — Gutenberg Pricing Table Block – Style Settings

Gutenberg Price Block

Container Settings

Align: Set the alignment of the price to be left, middle, or right.
Slashed Price: Add the price to be slashed if you have a sale on your item.
Currency: Select the price currency.
Price: Add the price in text or numbers.
Divider: Select the divider between the price and the currency.
Duration: If the price is for a subscription, you can add the duration of this subscription.

Gutenberg Price Style Settings

Container Style Settings

Margin: Adjust the margin around the container wrap.
Padding: Adjust the space between the container and its borders.

Gutenberg Price Block Components Style Settings

Here are the style settings controllers for Gutenberg Price Block’s components including the slashed price, currency, price, divider, and duration:

Vertical Alignment: Choose the vertical alignment of the Gutenberg Price Block’s components. You can align it to the top, center, or bottom of the container.
Typography: Customize the typography settings such as font size, weight, and style. For example, set the font weight to “400” to make it bold.
Color: Set the color of the Gutenberg Price Block’s components text to match your website’s design.
Background Color: Choose a background color for the Gutenberg Price Block’s components area to make it stand out.

Gutenberg Price Block's components style settings controllers.

Conclusion

In conclusion, Gutenberg Pricing Table Block tutorial is a thorough guide for leveraging Gutenberg blocks within the WordPress editor to construct versatile and engaging pricing layouts. Whether you’re a novice or an expert, the step-by-step guidance ensures that you can seamlessly integrate nested blocks and utilize the diverse layout settings provided by the Gutenberg page builder. By capitalizing on these tools, you can effectively display pricing plans, enhance visitor engagement, and potentially improve conversion rates. Discover the full capabilities by checking out the available demo.

Need Further Help?

Have a question or need assistance? Our dedicated support team is here to help! Explore our contact options to ensure you get the support you need. We’re committed to making your Gutenberg website-building experience seamless and resolving any queries you may have.

Contact Support

Facebook Group