How to Build a Captivating Product Grid With Kadence Blocks

In this tutorial, I’m going to teach you step-by-step how to build a five-column product grid using Kadence Blocks which can be placed at the top of your blog post as a full-width section.

Using this five-column product grid is a fantastic way to showcase products at the very top of your post, give a brief description about each one, and then include a button for the user to visit the site.

This can grab clicks early for those readers and will ultimately give you more clicks and more affiliate commissions.

Here is an example of a full-width product grid we will build with Kadence Blocks:

So, without further ado, let’s get right into it.

Use the Kadence Blocks product grid tutorial guide below to jump around as you need:

Import Product Box With Start Blogging Blocks

In order to import this design instantly to your website, do the following:

1. Go to Start Blogging Blocks and purchase a plan (this product grid is a pro template)
2. Once you have your license, you can connect to our cloud library in 30 seconds.
3. Lastly, go to your Kadence Design Library on a blog post or page, click on the ‘SB Blocks‘ tab to access our library, and then find this Product Box design which will be imported instantly when you click on it.

It’s that simple! No need to spend time going through the rest of this tutorial and building the five-column product grid yourself. 🙂

Not to mention, this full-width product grid is only one of hundreds of prebuilt templates that we offer that you’ll get access to.

If you prefer not to use Start Blogging Blocks and would rather build the full-width product grid yourself, then keep reading and follow along!

Setup – Install Kadence Blocks Plugin

First and foremost, you’ll have to make sure that you install and activate the free Kadence Blocks plugin on your website.

We’ll be able to build the entire five-column product grid using the free version of Kadence Blocks.

That being said, having the pro version of Kadence is going to give you much more flexibility as you’ll read in the “Product Grid Placement Options” section.

If you want to include this full-width product grid above your blog post content while also having a sidebar, you’ll have to have the pro version of the Kadence Theme enabled because it uses hooked elements. The pro version of the Kadence Theme is included in the Kadence Bundles.

If you want to include this full-width product grid in your blog post that does NOT have a sidebar, then you won’t need Kadence Theme Pro.

1. Build Five-Column Row Layout

The very first step to build this product grid is to add a five-column Row Layout which will create the structure for our full-width product grid.

A quick way to add a Row Layout with Kadence Blocks is to type a forward slash ‘/‘ in the editor and then type the block you want. So, you would type /row layout like so:

After you choose the “Row Layout” block, you’ll see an area to select your layout which will be the number of columns you want your row to have.

Choose the option that has 5 columns (second from the right on the bottom). Also, if you only need 3 or 4 columns, you could also choose that option instead.

Once we have the five-column Row Layout added to our editor, the very next thing we need to do is to force the Row Layout to be full-width.

This is especially important if creating a blog post because the blog post content section is more narrow.

Make sure you’re on the Row Layout level and then click on the “Change alignment” button in the toolbar that shows above the block.

In the options, choose the “Full width” option to force your Row Layout to be full-width.

If your editor is a narrow width due to creating a blog post, you’ll notice that changing the alignment causes the Row Layout to “break out” of the narrow confines and take up the full-width. Nice!

Once we have our five-column Row Layout set to be full-width, we need to set the content width to match your site’s max-width.

In the “Block Settings” in the right-hand sidebar, open the “Structure Settings” section.

Find the setting that says “Content Max Width Inherit from Theme?“

If you toggle this setting on, the content of the row layout will automatically match the max-width set in your Kadence customizer for your website.

Make sure to toggle on the “Content Max Width Inherit from Theme?” option.

You’ll also want to toggle on the “Inner Column Height 100%” option.

Enabling the “Content Max Width Inherit from Theme?” option sets your Row Layout content width to match your site’s max-width which is set in the Kadence customizer.

Also, enabling the “Inner Columnn Height 100%” option will make sure that all five of your columns will stay the same height no matter how much content is in each one.

The last thing that we’re going to do is to set our column gutter.

With the Row Layout block still chosen, find the “Column Gutter” dropdown at the top of the block settings and set it to “Skinny: 10px.”

Now that we have our five-column Row Layout added, the alignment is set to full-width, and we have it configured to match our site’s max-width, it’s time to move on to step 2!

2. Style Inner Sections

The next step is to style our inner sections which are the five columns that we chose from step one.

One really convenient thing with Kadence Blocks is we only have to set the styling on one of the sections and then we can copy the section styles over to all the rest of our sections. I’ll show you how to do that when we get there!

To move to our first “Section” (which is our first column), go to the upper-left of your editor and choose the “List View” icon to open up the list view.

This List View is a super convenient way to see the structure of your entire layout broken down block-by-block and allows for easy navigation.

After you open the List View, expand the “Row Layout” and click on the first “Section” nested underneath.

You’ll know you’re in the right area because your block settings on the right-hand side will change to show you the Kadence section settings.

With the first section chosen, we are going to add a border and a box-shadow.

Open up the “Border Styles” dropdown and do the following things:

• Set a border color (I set it to my 3rd global color palette color)
• Add a 1 px border on all sides
• Enable the “Box Shadow” toggle
• Set a box shadow color (I set it to my 6th global color palette color)
• Set the box shadow values to 0(X), 14(Y), 25(Blur), and -10(Spread)

Now, we’re going to give the section padding so that the content within our product grid has some breathing room.

Open up the “Padding/Margin” dropdown and add 25px of padding to all sides of your section.

Now that our first section has a border, box shadow, and padding, we have it styled the way we want.

It’s time to style the remaining four sections.

But wait! Before you go and do the same styling to all the rest of the sections, all we have to do is just copy the styles from the first section and paste the style to the remaining sections.

With your section chosen, find the double page icon (Copy/Paste Styles) in the toolbar above it.

Click it and choose “Copy Styles.”

Now, go back into your List View and click on the second section. Otherwise, another way to choose the section is to click on the “+” in the section, add a paragraph block and then go to the section level using the breadcrumb bar in the lower left of your editor.

With your next section selected, go back up to the Copy/Paste Styles button, click it and choose “Paste Styles.”

Your section will instantly get the same exact border, box shadow, and padding as the first section.

Pretty neat, huh? Simply do that for the remaining four sections and you will have all your sections appropriately styled.

It’s time to move on to step 3 where we will add our pill callout section!

3. Add Pill Callout Section

The next step to building our Kadence Blocks product grid is to add the pill callout section.

This is the pill callout that says “Best Overall,” “Best Value,” “Premium,” etc.

Similarly to step 2, we’re only going to build one of these pill callout sections and then we’ll copy it and paste it into the remaining four sections.

Building this pill section is the trickiest part of the product grid since it requires an additional section being added. That being said, I’ll make it really easy for you to understand and explain it step-by-step.

The very first thing we need to do is add an additional section within our containing section that will hold our pill.

Click on the ‘+‘ in the first section and search for “Section” and add a section block. Yes, this will be an additional section within our containing section.

You can see the new section is nested within our first section using the List View. I have also placed a box around the inner section that we added.

Now, within that new section, we want to add an Advanced Text block which will become our pill.

Click on the ‘+‘ button within our inner section, search for the “Advanced Text” block and add it.

Once you have the Advanced Text block added, click the “Change heading tag” button in the toolbar and choose “DIV” to change from a heading to a div.

Now, where it says “Write something…“, type what you want your callout pill to say. I like having the first column say “Best Overall.”

Once you have that typed out, we need to style our Advanced Text block to look like a pill.

Make sure you have the Advanced Text block chosen, go to the main block settings and change the following things:

• Set the HTML Tag to “DIV” (we just did this)
• Set the Text Alignment to Center
• Set the Color to white (I used my 9th global palette color)
• Set the Background Color to your first accent color from your global palette
• Set the Font Size to 0.9 rem

Next, open up the “Advanced Typography Settings” section and change the following things:

• Set Text Transform to “Uppercase“
• Set Font Weight to “Bold 700“

Then, open up the “Spacing Settings” dropdown and change your “Padding” to 5px (Top), 10px (Right), 5px (Bottom), and 10px (Left).

This will give the text some breathing room for our pill.

The last thing we have to do to style our pill is to make the corners rounded.

Unfortuantely, the Advanced Text block doesn’t currently have the option to add a border raidus, so we’re going to have to write a little custom CSS.

Go back to the “Section” level. Make sure you’re on the Section that is holding your Advanced Text block and open up the “Custom CSS” dropdown in the block settings.

Copy and paste the following code into the editor:

selector .wp-block-kadence-advancedheading {
  border-radius: 20px;
}

After you add the custom CSS, you’ll see that your callout pill now has rounded corners and is completed!

Now that our callout pill is complete, all we have to do it copy the section over to the remaining columns.

Once again, make sure you are at the “Section” level, and then go to the vertical 3 dot menu and choose “Copy” or use the copy shortcut on your keyboard.

You should see a message that says “Copied ‘Section’ to clipboard.“

With your pill section copied, go and click on the ‘+‘ button in each of your columns, add a basic paragraph block, and then go to the menu and choose “Paste” or use the paste shortcut on your keyboard.

Do this for the remaining four columns.

Lastly, change the text for each of the pills to say whatever you want to say.

I use the following five pills: Best Overall, Best Value, Premium, Runner Up, and Hidden Gem. However, you can have yours say whatever you would like!

Now that all of our pill callouts are completed, it’s time to add all our product information in step 4!

4. Add Product Information

Our sections are all styled and we have the pills added. It’s time to add all of the product information which will be our product title, product image, and product description.

Product Title

The first thing we’re going to do for our product information is add the product title.

In the first column, make sure you’re on the “Section” that is holding your Advanced Text pill that we just built and then hit ‘Enter‘ to add a block after it.

Add another “Advanced Text” block and use the “Change heading tag” to change it to an H3 heading. I use H3 headings for the product titles, but you can use whatever you would like.

If you don’t want the product titles to be headings, you can change the Advanced Text block to be a paragraph instead.

Type your product name.

Then, the only two things we’re going to change are the font size and the margin.

1. Change the Font Size to 1.25 rem
2. Open the “Spacing Settings” dropdown and set the margin to 1 rem (top) and 1 rem (bottom)

Your product title should look like this underneath the pill.

Our product title is done. Let’s move onto adding the product image!

Product Image

Add a new block after the Advanced Text block you used for your product title.

For the product image, we have a couple of options of how we’re going to add it. Let’s go over each option.

Embedded Image

If you use something like Amazon Associates, you will have a code that you have to embed in order to show the product image from Amazon.

In this case, you will want use a Custom HTML block to add it.

Add a Custom HTML block and paste in the code for your product image. It will look something like this:

And then once you view your page on the front end, it will look like this:

Looking good!

Regular Image

If you have a product image that you have the proper rights to use, then you would use an Advanced Image block to add your image.

Add an Advanced Image block and upload the image you want to use. The nice thing about the Advanced Image block from Kadence is that it gives you a bunch of additional options to customize your image.

So, if you want to set a max image width, make the image a circle, turn the image caption off, or a number of other things, you can do all of that! Much better than the regular WordPress image block.

We now have the product image added. Time to move on to adding the product description!

Product Description

The last piece of our product information is the product description. This will be a brief explanation of the product and how it compares to the other products in your grid.

Add one more Advanced Text block underneath your product image and use the “Change heading tag” to change the block to a paragraph.

There are two things we are going to change in the main block settings:

• Set the Text Alignment to Center
• Set the Font Size to 0.9 rem

Once that is done, open up the “Spacing Settings” dropdown and set the margin to 0 rem (top) and 1 rem (bottom).

Now, type out your product description to describe the product! Once you’re done, your first product grid column with the pill callout, product image, and product description should look like this:

Our Kadence product grid is coming together!

If you’re wondering about all the content in the other columns, don’t worry! We will copy all the content from our first column to the other columns once we build out the buttons.

Speaking of buttons, let’s move on to step 5 where we will add our CTA button.

5. Add CTA Button

We’re almost done with the first column of our Kadence product grid! But first, we have to add our CTA button that will get users to click.

Add a new Advanced Button block after your product description. The Advanced Button block is the Kadence version of the button block which gives you a ton of customization options to make your buttons stand out.

Once your button is added, click inside the button where it says “Button…” and type what you want your button to say.

For this tutorial, I’m going to have the CTA button say “Learn More,” but you can use whatever you like such as “Buy Now,” “Go to site,” etc.

Now, let’s add the link to our button.

If you’re using Amazon Associates, I’ll teach you how to add that. Otherwise, if you already have the affiliate link for your product, you can add it now!

Go to Amazon’s site. Make sure you have the product page up for the product that you want to link to.

If you’re an affiliate for Amazon, you will see a SiteStripe bar at the top which is where we will get our affiliate link.

Click the “Text” option within the “Get Link” section.

Personally, I like to use the “Short Link” option rather than the “Full Link,” but choose whichever option you prefer.

Copy the link that Amazon provides and then head back to the WordPress editor.

In the block settings for your Advanced Button under “Button 1 Settings,” do the following two things:

1. Add the link you copied from Amazon into the “Button Link” area and press the ↩︎ icon. 
2. Set the Button Width to Full.

This will make sure that your affiliate button links to your Amazon product and will also set the width of your button to take up the full width of the product grid column.

After you have done those two things, expand the “Button Link” area using the dropdown arrow on the right and set these three button link settings:

1. Change Link Target from Same Window to New Window.
2. Enable No Follow toggle.
3. Enable Sponsored toggle.

Setting the Link Target to open in a new window means your visitor will get a new tab when they click on your button which is what you want.

Then, you also want to make sure your button is set to “No Follow” and “Sponsored” since you are specifically using an affiliate link.

Keep in mind that for any page or blog post with affiliate links in it, you will need an affiliate disclaimer. 

You can read my article on how to easily add an affiliate disclaimer to all the appropriate posts using Kadence Elements if you are using Kadence Theme Pro.

The next thing we have to do is style our button. We’re going to give our button a cool gradient effect that uses your main accent colors and looks awesome with your brand.

Under the “Color Settings” section, change the following items.

Normal Color Settings:

1. Set Text Color to White (9th color in global color palette).
2. Change Background Type from Solid to Gradient.
3. Set Gradient Color 1 to first accent color in your global color palette.
4. Set Gradient Color 2 to second accent color in your global color palette.
5. Set Gradient Angle to 135.
6. Set Border Color to White. 
7. Enable Box Shadow.
8. Set Box Shadow values to 0 (X), 2 (Y), 4 (Blur), and 0 (Spread).
9. Set Border Radius to 30.

Hover Color Settings:

1. Set Hover Text Color to first accent color in your global color palette.
2. Keep Background Type as Solid. 
3. Set Background Color to White (9th color in global color palette). 
4. Set Hover Border Color to first accent color in your global color palette.
5. Enable Hover Box Shadow. 
6. Set Box Shadow values to 0 (X), 2 (Y), 10 (Blur), and 0 (Spread).

Once you have your button styled, the last thing you need to do is open up the “Container Margin” dropdown and set the bottom container margin to 0.5 rem.

You are now finished with your CTA button!

Your first product grid column should look like this, but with your own branding:

Nice. Time to move on to step 6 where we will will add our “Read Review” button!

6. Add “Read Review” Button

At this point, you have your pill callout, product title, product image, product description, and your CTA button.

If you want, you can skip to step 7 where we will copy all of our content to the other sections. However, if you want to add a “Read Review” button, then follow this step and I’ll show you how to do it!

An example of using this product grid might be to write a post that’s called “5 Best Air Fryers for Your Kitchen” and you would list your top 5 choices at the top in this product grid.

Then, you may have separate product reviews written for each of those air fryers. In that case, you could add this “Read Review” button at the bottom of each of the product grid columns and get users to check out your review if they want!

Add another Advanced Button block after your CTA button.

Once your button is added, click inside the button where it says “Button…” and type “Read Review.”

Now, let’s add your review link to the button. Click on the button and enter the URL of your review post that you want to link to.

Since this will likely be a review on your own site, I would have the link open in the “Same Window.”

In the block settings for your Advanced Button under “Button 1 Settings,” do the following things:

1. Set Font Size to 1 rem
2. Change Button Size to Custom (using ⚙️ icon)
3. Set Top and Bottom Padding to 5
4. Set Left and Right Padding to 10
5. Keep Button Width set to Auto

You’ll see your “Read Review” button starting to take shape.

The next thing we are going to do is turn this Kadence button into a text-only button where it has no border and no background – only text.

Under the “Color Settings” section, change the following items.

Normal Color Settings:

1. Set Text Color to the third color in your global color palette
2. Make sure Background Color is transparent
3. Set Border Width to 0

Hover Color Settings:

1. Set Hover Text Color to the third color in your global palette
2. Make sure Background Color is transparent (you can click the arrow next to the color to remove any previously set color)

With our “Read Review” button styled to be a text-only button, the very last thing we are going to do is add the right arrow icon.

Under Icon Settings, open the dropdown and choose the right arrow (→) icon on the first page. Otherwise, you can add whichever icon you would like to add.

You can also choose your Icon Location to be either Left or Right of the text within your button.

Woohoo! You’re finished creating all the content for your first Kadence product grid column.

Your design should now look like this:

That’s looking good. 😍

Let’s move on to step 7 where we are going to copy the content to the remaining sections.

7. Copy Content to Other Sections

Now that one of our product grid columns is complete, the next step is to take all of the content in that first column and copy it to the remaining four columns so we don’t have to rebuild everything.

This will save a massive amount of time.

We don’t need to copy the pill since we already copied that over to each section in step 3.

In order to copy the rest of our content (the title, image, description, and buttons), I find it easiest to use the List View.

Open up the List View and choose the Advanced Text block that is your product title. Now, hold the ‘Shift‘ key on your keyboard and click the bottom-most Advanced Button (which in this case is the “Read Review” button).

If done correctly, it will look like this:

You can see that everything on the inside of our product grid container is selected. There is a blue box highlighting the title, image, description, and both buttons.

With all of that selected, go to the vertical three dot menu and choose “Copy.”

If done correctly, you should see a message pop up saying “Copied 5 blocks to clipboard.“

With all of your content copied, go to the next Section and make sure you are at the Section level that is holding the callout pill.

Then, press enter or choose “Insert after” from the vertical three dot menu and enter a basic paragraph block.

You’ll know you’re at the right level because you’ll see the paragraph block is at the same level as the Section block holding the pill.

Once you have the paragraph added, press Ctrl + V on Windows or Cmd + V on Mac, otherwise you can go to the vertical three dot menu and choose “Paste.”

You’ll see all of your content copies over to the new section. Do this for the remaining sections in your Kadence product grid.

Voila! Now you have your product grid filled out with all the info you need.

The last thing you obviously need to do is change all of the content in the remaining sections so you have all the information for each of the products you’re going to highlight.

Once you’re done, you should have a completely finished product grid that looks something like this:

The nice thing is that there are so many use cases for this Kadence product grid! You can link to Amazon products, digital products, courses, or anything you want.

It’s a perfect template to display at the top of a blog post. I’ll teach you how to place this in your blog post very soon. But first, let’s make sure our product grid is mobile responsive in step 8!

8. Make Mobile Responsive

Before I teach you how to place this Kadence product grid in your blog post, we need to make sure it’s mobile responsive so it looks good on all screen sizes.

The nice thing about Kadence Blocks is that it makes it really easy to make designs mobile responsive.

You’ll notice that on desktop and mobile, our product grid looks really good by default. On desktop, it shows all five columns and there’s plenty of space to show everything.

Also, on mobile, you’ll notice that each column collapses down and they all stack on each other. This also looks great as is and doesn’t need any tweaking.

The one area where we run into issues is in the tablet view. You’ll see on a tablet that the five columns are too narrow and they don’t stack on top of each other.

We can easily change this so that the five columns stack on top of each other.

Go to the top-level Row Layout which is holding all five of your columns.

Then, at the top of the block settings, choose the “Tablet” icon so you can edit the tablet view.

From there, choose the option with all five of the items stacked on top of each other and you’ll see that the product grid changes for tablet view.

That’s it! It’s that simple to change our layout so that all five columns stack on top of each other for tablet view.

Our Kadence product grid is now fully mobile responsive!

Let’s move on to step 9 where I’ll teach you how to place your product grid in your blog post.

9. Product Grid Placement Options

Congratulations! Give yourself a huge pat on the back because you just created an entire full-width product grid using the free version of Kadence Blocks.

That wasn’t so bad, was it? 😉

The last thing I want to go over in this tutorial is figuring out how to place your product grid depending on your Kadence blog post layout.

There are two scenarios that I will go over:

• How to add a full-width section to a blog post with NO sidebar
• How to add a full-width section to a blog post with a sidebar

Let’s go over the scenario with no sidebar first since it’s the easier one.

Full-Width Section With No Sidebar

The first scenario we’ll go over is how to place a full-width section in a blog post or page with no sidebar in Kadence.

It’s really easy to place a full-width section in a blog post or page with no sidebar because all you have to do is force a Row Layout block to be full-width.

We already did this in step 1, however I’ll go over it again quick.

Once you have added a Row Layout in your editor, the very next thing you need to do is to force the Row Layout to be full-width.

This is especially important if creating a blog post because the blog post content section is more narrow.

Make sure you’re on the Row Layout level and then click on the “Change alignment” button in the toolbar that shows above the block.

In the options, choose the “Full width” option to force your Row Layout to be full-width.

If your editor is a narrow width due to creating a blog post, you’ll notice that changing the alignment causes the Row Layout to “break out” of the narrow confines and take up the full-width.

Here’s what a full-width Kadence product grid looks like in a blog post that has no sidebar:

If you have a blog post or page that does have a sidebar and you want a full-width section, we’ll go over that scenario next.

Full-Width Section With a Sidebar

The second scenario we’ll go over is how to place a full-width section in a blog post or page that has a sidebar in Kadence.

In the first scenario, all we had to do was force the Row Layout block to be full-width. However, you’ll notice that if you have a sidebar in your blog post or page, it still doesn’t make the Row Layout full-width.

That’s because the Row Layout doesn’t have anywhere to go because there’s a sidebar blocking it.

So, how can you add a full-width section to a blog post or page with a sidebar in Kadence? The answer is Kadence Elements.

You will have to be using the pro version of the Kadence Theme in order to do this because Kadence Elements are a pro feature. Kadence Theme Pro is included with any of the Kadence Bundles.

If you don’t already have one of the Kadence Bundles, you can get 10% off using my exclusive code: sb10off

Once you have the pro version of the Kadence Theme installed as a plugin, you will have to go to Appearance → Kadence and enable Hooked Elements.

With Kadence hooked elements enabled, go to Appearance → Kadence and choose ↳ Elements beneath Kadence.

Once on the Elements page, click “Add New.”

You’ll see a modal pop up that says “Element Setup.” Choose “Content Section.”

Give your element a title. This is just for internal purposes, but it helps you be able to find this element in the future.

For example, I might title the element “5 Best Air Fryers Product Grid.”

Then, in the content area, that is where you would build your product grid that we built in this tutorial.

Otherwise, if you already have the product grid built, you can simply copy the entire Row Layout that contains the whole product grid and paste it into the content area for your element.

With our product grid built, the next thing we have to do is choose our element settings and set the placement.

In the upper-right of your editor, click on the “Element Settings” button.

At the top, you should see the “Element Type” set to “Content Section.”

Now, we have to choose our element’s placement.

This is the ✨magic✨ to get our full-width section to place between our header and our content.

For “Placement,” choose “Custom Hook.”

Then, in the “Custom Hook” box, type “kadence_hero_header” which is a custom hook that will place our full-width section exactly where we want it.

With our placement all set, the next thing we need to do is configure our “Display Settings.”

For this tutorial, I’m going to assume that you are choosing an individual blog post that you want to show this product grid on.

Open the “Display Settings” dropdown. Open the “Show On” dropdown and choose “Single Posts” from the list which means you are targeting all blog posts.

However, we don’t want to target all blog posts. So, open up the “Select Post By:” dropdown and choose “Individually.”

Now, you can click the button that says “Select Items” which will bring up a modal where you can choose which blog post you want to show this product grid on.

Select the blog post you want. Your display settings should look something like this once you’re done:

With our element placement and display settings configured, the next two sections are super quick to go through.

Open the “User Settings” section and choose “All Users” in the “Visible to” dropdown unless you want to limit which users see your product grid.

Lastly, under the “Device Settings” section, it should be set to “All” by default which is what we want. Unless you want to specifically prevent your product grid from showing on certain devices, keep it set to “All.”

WE ARE DONE! Hit “Publish” to publish your product grid and go check out the blog post that you targeted.

You will see that your blog post has a hero section with your blog post title, our full-width product grid is below it, and then we have our blog post content and sidebar beneath that.

How amazing is that?! 🙌

One quick note: I know that this isn’t the perfect solution. It’s a little bit of a pain to have to create a separate element for each blog post that we want to place our product grid in (if we have a sidebar).

That being said, hopefully in the future we will have even further customization options where we can create an entire blog post template with a product grid at the top and be able to choose that template if we want it, otherwise have a default template to fallback on.

Either way, this is an extremely powerful solution that Kadence provides and it’s a fantastic way to write better blog posts that will look better and make you more money.

---

So, there you have it! I hope you enjoyed this Kadence product grid tutorial teaching you how to create a full-width section in your blog posts.

Send me your blog posts with your Kadence product grids and perhaps I’ll feature them in this post!

Let me know if this tutorial helped you out or if you have any questions down in the comments below 👇

Until next time,
Jake ✌️