Table of contents
What are half-size cards in WordPress?Why use the Columns block to create half-size cards?How to create half-size cards with the Columns blockEnhancing half-size cards with Group blocksHow to create responsive half-size cardsUsing plugins or themes for more advanced half-size cardsAdding custom CSS for professional half-size cards (optional)Common mistakes to avoidAlternative method: manual FAQ schema with custom JSON-LD (advanced)Common issues and how to fix themExamples of effective half-size cardsFinal tips for great-looking half-size cardsNext stepsAdditional resources
Get the industry’s fastest hosting for WordPress◦ 99.999% uptime
◦ Comprehensive security
◦ 24/7 support
Explore options

WordPress Guide → Build → Create Half Size Cards

How to create half size cards in WordPress

godaddy exits dedicated hosting

Want to display content side-by-side in a clean, compact way? Half-size cards are an easy, stylish solution in WordPress. Let’s look at how to create them.

Get fast, reliable hosting for WordPress

Power your site with the industry’s fastest, most optimized WordPress hosting

WordPress.org hosting

What are half-size cards in WordPress?

Half-size cards in WordPress are two content sections displayed side-by-side, each taking up about 50% of the page width. They usually include elements like images, text, buttons, or icons neatly arranged inside a “card” with defined spacing, borders, or backgrounds.

People often use half-size cards to highlight services, feature portfolio items, tease blog posts, or display products in a grid layout. They help organize information visually and keep visitors engaged without overwhelming them.

Why use the Columns block to create half-size cards?

The Columns block is the easiest and most beginner-friendly way to create half-size cards because it’s built right into WordPress. You don’t need to install any extra plugins or mess with coding. 

The Columns block is also highly flexible, allowing you to adjust how much space each column takes up, and it’s responsive—meaning your cards will stack neatly on smaller screens like tablets and phones. Most modern WordPress themes support it seamlessly, so it’s a reliable starting point.

How to create half-size cards with the Columns block

Creating half-size cards using the Columns block only takes a few steps. Here’s a full breakdown.

1. Add a Columns block

Open the WordPress page or post where you want to add half-size cards. Click the “+” button to add a new block. In the search bar, type “Columns” and select the Columns block from the list. 

This block is part of WordPress’s core Gutenberg editor, so you’ll find it on any standard installation without needing extra plugins.

2. Choose a two-column layout

Once you add the Columns block, WordPress will show you a few preset layouts. Choose the one with two equal columns (50/50 split). This creates the structure needed for each card to take up half the available space. 

If you don’t pick the 50/50 option now, don’t worry—you can adjust it later under the block settings.

3. Insert content into each column

Now you have two empty columns side-by-side. Click inside the first column and start adding content. You can add a Heading block for a title, a Paragraph block for a description, an Image block to showcase a photo, or even a Button block for a call to action. 

Repeat the same inside the second column. Keep the content in each card relatively balanced—meaning similar amounts of text and image size—so that the overall layout looks even and clean.

If you want a more complex design inside each card, you can add multiple blocks inside each column. For example, an image at the top, a heading below it, some text, and a button at the bottom.

4. Style the cards

Once your content is in place, it’s time to make the cards look like actual “cards.” First, select each column individually and go to the Styles panel on the right sidebar. Here you can:

  • Add a background color or background image to each card.
  • Adjust padding to create space inside the card so the content isn’t pressed against the edges.
  • Add margin to separate the two cards slightly.
  • Apply a border or a subtle box shadow to create a lifted “card” effect.

These little visual tweaks help separate the cards from the background and make them more noticeable and attractive.

Enhancing half-size cards with Group blocks

For even better styling control, you can use Group blocks inside each column. Here’s how:

  1. After adding your content to a column, select all the blocks (text, images, etc.) inside that column.
  2. Click the three dots in the toolbar and select “Group.”

This wraps your content inside a Group block. Now, instead of styling each individual element, you can style the entire group—applying a background, padding, margins, borders, or shadows uniformly. Using Group blocks helps your cards look more consistent and keeps your design organized, especially as your page becomes more complex.

How to create responsive half-size cards

By default, the Columns block is mobile-responsive. When viewed on smaller screens, WordPress will automatically stack the two cards vertically instead of side-by-side. However, it’s still a good idea to double-check the mobile layout.

  1. Use the “Preview” button in WordPress and select “Tablet” and “Mobile” views.
  2. Make sure your content doesn’t look squished or unbalanced when stacked.
  3. Adjust padding or margins as needed for smaller screens to keep everything visually clean.

If your theme or customizations interfere with responsiveness, you might need to tweak additional settings or add custom CSS, but most themes handle this well.

Using plugins or themes for more advanced half-size cards

If you want fancier designs without manually adjusting styles, you can use WordPress plugins or choose a theme with built-in layout options.

  • Spectra (formerly Ultimate Addons for Gutenberg) offers pre-designed card layouts that you can easily customize. It’s a free plugin that extends the default Gutenberg editor.
  • Kadence Theme and GeneratePress Theme both have built-in design systems that make creating professional-looking cards very easy.

These options are great if you want more styling flexibility, hover effects, or animation features without writing code.

Adding custom CSS for professional half-size cards (optional)

If you know a little CSS, you can take your half-size cards to the next level. Here’s a basic example:

  • Click on the Group block inside each column.
  • In the Block settings, add a custom class like “half-card.”
  • Go to “Appearance” > “Customize” > “Additional CSS” in WordPress and paste this code:
.half-card {
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0px 2px 8px rgba(0,0,0,0.1);
}

This CSS adds a clean background, soft rounded corners, subtle borders, and a light shadow to create a “lifted” card look. It’s a simple tweak that can dramatically improve the overall polish of your design.

Common mistakes to avoid

When creating half-size cards, beginners often run into these common problems:

  • Not checking mobile responsiveness: Always preview your layout on tablet and mobile views to ensure your cards don’t overlap or look awkward.
  • Forgetting padding and margins: If you skip padding and margins, your cards will look cramped and uncomfortable to read.
  • Unbalanced card content: If one card has lots of text and the other has only a tiny image, the overall layout will look lopsided. Try to keep your content balanced.

Examples of effective half-size cards

Half-size cards are popular in many types of websites. Here are a few examples where they work beautifully:

  1. Services section: Two service descriptions with icons, titles, short blurbs, and “Learn More” buttons.
  2. Blog teasers: Two recent blog posts each showing a featured image, title, excerpt, and a “Read More” link.
  3. Feature highlights: Two key features of a product or company side-by-side with short explanations and call-to-action buttons.

Final tips for great-looking half-size cards

To make your half-size cards really shine, remember these best practices:

  • Keep content balanced and minimal. Too much text or too many images can make cards feel heavy.
  • Use consistent colors, fonts, and spacing across all cards.
  • Allow for generous whitespace inside and around cards to create a clean, modern aesthetic.

Additional resources

How to build a WordPress site →

A complete beginner’s guide that covers 9 key steps to a successful launch

How to convert Figma to WordPress →

Learn how to efficiently convert Figma designs into fully functional WordPress websites without losing design fidelity.





















How to use WordPress Gutenberg blocks →

A complete beginner’s guide to Gutenberg blocks