How to Build Content Boxes the Right Way in WordPress (+ Templates!)

Chances are, you’ve been building content boxes the wrong way on your websites.

What are content boxes, you may ask? Content boxes are one of the most common sections used in building websites.

Imagine a website with a hero section at the top. Below it, individual content boxes showcase various products, services, or information.

How many websites have you been on with content boxes like this?

The vast majority of websites that use content boxes look like this. I don’t know about you, but that makes my eye twitch looking at it. Perhaps it’s the perfectionist in me. 🤷‍♂️

They have uneven heights, and it looks unprofessional.

A partial solution is to set the column height to 100%, forcing the containers to be even heights.

However, this poses another problem. The content boxes look good with even heights, but our buttons are at different heights and aren’t aligned on the bottom.

What you actually want to do is this:

• Make all boxes even height
• Bottom-align the buttons so they all match up

As you can see, with even container heights and the buttons aligned to the bottom of the content boxes, our design looks much more professional.

Even better, I would suggest having roughly the same number of words in each content box so the boxes look more uniform.

In this tutorial, I’ll teach you how to build content boxes the right way in WordPress using Kadence Blocks.

Plus, I’ll give you access to 36 free content box templates all built the right way that you can start using on your website within minutes.

Let’s get right into it.

Use the WordPress content boxes tutorial guide below to jump around as you need:

Kadence Blocks Content Boxes Video Tutorial

If you’re a visual learner, then check out my detailed video tutorial teaching you how to build content boxes the right way in WordPress using Kadence Blocks:

WordPress Content Boxes – Free Templates

Before I teach you how to build content boxes correctly in WordPress, I have built 36 content box templates for you that are 100% free to access forever.

In fact, you don’t even need to take the time to build the content boxes themselves because I have templates for nearly every use case (2-column, 3-column, and 4-column).

They’re all built using Kadence Blocks and are all part of the Start Blogging Blocks library, which you can connect to in 30 seconds after receiving your free license.

Get your free Start Blogging Blocks license at the button below and unlock all these content box templates for your website.

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.

You can build these content boxes using the free version of Kadence Blocks.

That being said, purchasing a Kadence Bundle gives you access to Kadence Theme Pro and Kadence Blocks Pro, giving you even more blocks and customization options.

1. Add Row Layout

The first step to building content boxes on your website with Kadence Blocks is to add a Row Layout block, which will be our top-level container.

In the WordPress block editor, a shortcut to add any block is to type a forward slash ‘/‘ and then the name of the block.

So, in this case you can type “/row layout” in the editor and you’ll see the Kadence Row Layout block show up. Choose that.

After choosing the Row Layout, you can select the layout you’d like.

In this tutorial, I’m going to be creating three content boxes. Therefore, I’m going to choose the layout with three equal columns.

As soon as you choose the number of columns you’d like, the first thing we’re going to do is set the Row Layout’s max width to match your site’s max width.

At the Row Layout level, go to the Layout tab and open the section that is labeled “Content Max Width.”

Within there, enable the toggle that says, “Inherit Max Width from Theme?“

Enabling this option will set the inner content of your Row Layout to match your global max width set in your theme’s customizer settings.

After enabling that option, the next thing we’re going to do is add vertical padding to the top and bottom of our content boxes.

Still at the Row Layout level, hover over the top and bottom of the block. You’ll see the padding value show up.

Click and drag to set the top and bottom vertical padding to be “2X Large” or whatever value you’d like.

You can see in the image below, I have set both the top and bottom vertical padding of our Row Layout to be 2X Large which is using the Kadence Blocks 3.0 variable padding values.

If you don’t want to click and drag to set your padding, you can set your padding at the Row Layout level inside the Advanced tab.

I have the Top and Bottom padding set to “XXL” in the Advanced tab for our top-level Row Layout.

We have finished adding our Row Layout!

To recap, we did the following:

1. Add three-column Row Layout
2. Enable “Inherit Max Width from Theme?” in the Layout tab
3. Add top and bottom vertical padding of “XXL”

Time to move on to step 2, where we will style our sections.

2. Style Sections

With our top-level Row Layout container added and configured, it’s time to style our sections which will become our content boxes.

One really nice thing with Kadence Blocks is that we only have to style the first section and then we can copy and paste those styles instantly across the remaining sections.

Click just inside the blue border to select the first Section block of our Row Layout.

Otherwise, you can open the List View in the upper-left of the WordPress block editor, expand the Row Layout block, and choose the first Section block.

With our first section selected, the first thing we’re going to do is add a border and a box shadow to the section.

In the Style tab, open up the “Border Styles” dropdown.

Click on the circle color picker for the border and choose your border color (if you wish to add a border).

I chose the 3rd color from my Kadence global color palette.

Then, type how many pixels you would like the border to be. I used 1 px for this content box tutorial.

If you would like rounded corners for your content boxes, you can set a border radius here as well. I’m going to leave mine blank.

I will also add a box shadow here to give our content boxes some depth.

Enable the Box Shadow toggle to add a box shadow.

For the box shadow values, I have them set to 0 (X), 14 (Y), 25 (Blur), and -10 (Spread).

For the box shadow color, I have it set to black at 50% opacity.

To do that, you can set the Hex value to 000000 to get black and then set the alpha value to 0.5 as shown in the image.

With a border and box shadow set on our first section, the next thing we’re going to do is set padding for our section.

At the Section level, go to the Advanced tab.

Choose the link icon to add padding to all sides at once. You’ll see a slider show up. Set your desired padding.

I set my section padding to be Medium 32px (MD) across all four sides.

Our first content box section styling is complete! We have a border, box shadow, and padding set. It should look like this in the WordPress editor:

As I mentioned at the beginning of this step, we can now very easily copy this section’s styling and paste it into the remaining sections.

With our first section selected, click on the “Copy/Paste Styles” button in the toolbar that shows above the section and choose “Copy Styles.”

Now, hover over your second section and click just inside the blue border to select the second section block.

Otherwise, you can use the List View as shown before.

With the second section selected, click the “Copy/Paste Styles” button again and choose “Paste Styles.”

Choose the third section and paste the styles in that section as well.

All your sections should be styled the exact same now and look something like this:

With all our sections styled the way we want, we can move on to step 3, where we will add our content inside the boxes.

3. Add Content

It’s time to add the content inside our content boxes. We will add an icon, headline, paragraph, and button inside each box.

Once again, all we have to do is add content inside the first content box, and then we can copy and paste that content over to our remaining content boxes.

Content Box Icon

Click on the ‘+‘ button inside your first content box to add a block and choose the Kadence “Icon” block.

Over in the block settings in the General tab, you can select which icon you’d like to use.

You can also set the icon size, line width, color, etc.

One more quick thing we’re going to do is set some bottom margin to give a little bit of breathing room between our icon and the headline that we’ll be adding next.

With your icon chosen, go to the Advanced tab and add a bottom margin of XXS.

Our icon is done! Let’s add our content box headline.

Content Box Headline

Under our icon, let’s add a headline for our content box.

Add a Kadence “Advanced Text” block.

After adding an Advanced Text block, type in the headline you want your first content box to have.

You may notice some extra space between your icon and your headline. This is due to some default spacing that gets added in the WordPress editor.

With the Advanced Text block chosen, go to the Advanced tab and set the top margin to “None” to remove this extra spacing.

Now, let’s go over a couple of changes we will make to our content box headline.

In the toolbar above the headline, click on the “Align text” button and choose “Align text center” to center the headline in your content box.

You can also set the HTML Tag for your headline. This is up to you and depends on how your page is structured.

Headlines should follow the correct hierarchy. The main title on your page (usually in your hero section) should be an H1 element because there should only ever be one H1 title per page.

Therefore, do you want these content box headlines to be H2 elements? H3 elements? Paragraphs? You can set the HTML Tag directly in the toolbar or in the block settings in the General tab.

The last thing we will do is set our content headline font size and line height.

With the Advanced Text block chosen, go to the Style tab.

Here you can change your headline color or background color if you’d like.

Also, you can set a Font Size using the variable sizing values (small, medium, large, etc.)

One thing that I’m going to do for this tutorial is set the Line Height to 1.3 for our content headline.

Why set the Line Height to 1.3? This will help condense the vertical spacing between the lines if you have a lengthy headline and it breaks into more than one line.

Here’s an example of two headlines with different line heights. The first headline has a line height of 1.3, and the second has a line height of 1.6.

See how the headline with a line height of 1.3 looks much better than the second one? The vertical spacing between each line is much more condensed since the headline takes up two lines.

Our content headline is complete! Let’s move on to add our content box paragraph.

Content Box Paragraph

Add a new block below your content headline. In this case, I’m going to add another Advanced Text block, and I’m going to change it to a paragraph.

After adding your Advanced Text block, click the “Change heading tag” button in the toolbar and choose “Paragraph” from the list.

Otherwise, you can also change the HTML Tag in the block settings of your Advanced Text block in the General tab.

In the toolbar above the paragraph, click on the “Align text” button and choose “Align text center” to center the paragraph in your content box like we did with our headline.

Type in the content that you’d like for your content box that relates to the headline you added before.

For the sake of this tutorial, I’m going to use placeholder “lorem ipsum” text.

With your icon, headline, and paragraph complete, your first content box section should look something like this:

Looking good so far. 😎

All we have to do is add our CTA (Call To Action) button, and then we’ll copy the content from this first box to the others.

Content Box CTA Button

The last thing we need to do is add a CTA button below the paragraph we just added.

Add a new Kadence Advanced Buttons block underneath the paragraph.

When the button gets added, you’ll notice it automatically uses the primary global color from your theme.

You can immediately type what you want your button to say. In this case, I’m going to type “Learn More.”

After that, click the button directly, and let’s tweak a few block settings.

In the General tab, change the Button Width to Full, forcing the button to take up the entire width of our content box.

You can also add the Button Link from the settings here, or you can add the link using the Link icon in the toolbar above the button.

If you would like, you can bold the text using the toolbar or in the Typography Settings in the Style tab.

Congrats! All of our content is created for our first block.

Next, I will teach you how to copy all your content from the first content box and paste it to the others so we don’t need to rebuild everything again.

Copy Content to Other Boxes

Now, we will copy our icon, headline, paragraph, and button to the other boxes.

To do this, open up the List View. Expand the Row Layout containing your content boxes and the Section so you can see all the blocks.

Click on the Icon block, hold the ‘Shift‘ key, and then click on the Advanced Buttons block.

This will select the icon, headline, paragraph, and button.

Then, click on the three vertical dot menu in the toolbar above the blocks and choose “Copy blocks.”

With all our content blocks copied, click on the ‘+‘ button in the next section and add a simple “Paragraph” block to start.

Then, press Ctrl + V on Windows or Cmd + V on Mac to paste the blocks inside the section.

Do this for all your remaining sections.

Now, the last thing to do is change your icon, headline, paragraph, and button to whatever fits your remaining content boxes.

Circling back to the beginning of this content boxes tutorial, we’re now at the point where our content boxes are built, but they’ll be uneven heights depending on the content you have inside.

So, we have our WordPress content boxes built with Kadence Blocks, but now we are going to make a couple of changes to make them look even better.

4. Set Columns to Equal Height

This step is super easy. We want to set our content box columns to be equal height, regardless of the content length inside.

To do this, all we have to do is go to the top-level Row Layout which is containing all of our content boxes.

In the block settings, click on the Advanced tab and then expand the “Structure Settings.”

Enable the toggle that says “Inner Column Height 100%.”

When you do this, you’ll see that the bottom of the content box containers will all line up and be the same height.

This is a partial solution. It looks better, but the buttons aren’t aligned to the bottom of the content boxes. We are almost there!

5. Bottom-Align Buttons to Container

The last thing we need to do is bottom-align our buttons to the container so that the buttons line up.

To do this, we will need to add a little custom CSS.

Fortunately, Kadence Blocks allows you to add custom CSS to any container you’d like, which is one huge advantage Kadence Blocks has over other Gutenberg block plugins.

At the Row Layout level, go to the Advanced tab in the block settings and open up the “Custom CSS” dropdown. Click on the “Edit in Modal” button to open up a modal where we can write CSS.

Copy and paste the following code into the Kadence Blocks custom CSS modal:

selector .wp-block-kadence-column .kt-inside-inner-col { 
  display: flex;
  flex-direction: column;
  flex: 1; 
}
  
selector .wp-block-kadence-column .kt-inside-inner-col .wp-block-kadence-advancedbtn {
  margin-top: auto;
}

Close out of the modal after adding your code.

Even though you may not see the changes take effect in the WordPress editor, preview your page on the front end.

You’ll see that all your CTA buttons are correctly aligned on the bottom of each content box container despite each box having different lengths of text.

Nice! You just learned how to build content boxes the right way in WordPress using Kadence Blocks.

Pretty easy, huh? 🙂

---

So, there you have it! I hope this tutorial helped teach you how to build content boxes correctly on your website.

Also, don’t forget to grab all the 100% free content box templates I’ve built that you can use on your website instantly.

Until next time,
Jake ✌️