Half-Size Cards

How to Create Half-Size Cards in WordPress

Posted on by Prakash Tiwari

Cards are a popular design style on websites today. You see them everywhere — blog layouts, product listings, and portfolio sections. They usually look like small boxes with text, images, or buttons. Sometimes, you don’t want a full-width card. You may want half-size cards instead. These fit two cards side by side on the same row.

The good news is that you can create half-size cards in WordPress with minimal effort. Let’s explore how.

What Are Size Cards?

Half-size cards are blocks that take up 50% of the page or container width. Instead of stretching across the entire row, they sit next to another card. This creates a clean, balanced layout. It’s perfect for:

  • Showcasing blog posts
  • Highlighting services
  • Displaying product features
  • Building modern portfolio grids

Method 1: Using the WordPress Block Editor (Gutenberg)

If you use the built-in block editor, you can make half-size cards with columns.

Steps:

  1. Open the page or post where you want the cards.
  2. Add a Columns block.
  3. Choose the two-column layout (50/50 split).
  4. Inside each column, add a Group block or Cover block.
  5. Add your image, heading, text, and button.
  6. Style the background and borders to look like a card.

Now you’ll have two half-size cards side by side.

Pro Tip: Use the “Group” block with a background color and padding to make it look more like a card.

Method 2: Using a Page Builder Plugin

Plugins like Elementor, Beaver Builder, or Divi make this even easier.

Steps in Elementor:

  1. Create a new section.
  2. Choose two equal columns.
  3. Drag in a Card widget (or use Image + Heading + Text + Button to build one).
  4. Style each column card with padding, border, and shadow.

You’ll get perfect half-size cards without touching code.

Method 3: Using Custom CSS

If you prefer to build your own style, you can use CSS.

Steps:

  1. Add two Group blocks or Div containers inside a parent container.
  2. Add this CSS in your theme’s Customizer > Additional CSS:

.card-container {

  display: flex;

  gap: 20px;

}

.card {

  width: 50%;

  background: #f9f9f9;

  padding: 20px;

  box-shadow: 0 2px 5px rgba(0,0,0,0.1);

}

  1. Add the class card-container to the parent block and card to each item.

Now, both cards will take up half the width.

Method 4: Use a Theme That Supports Cards

Some modern themes (like Astra, GeneratePress, or SEOWP theme) come with built-in card layouts. You can use their customization settings or starter templates. Many of them let you choose grid layouts that create half-size cards automatically.

Best Practices for Half-Size Cards

  • Keep text short: Cards work best with small chunks of text.
  • Use strong headings: Make the title clear and readable.
  • Add images or icons: Visuals make cards more attractive.
  • Keep spacing equal: Use padding and margin for a neat look.
  • Mobile test: Half-size cards usually stack into full width on small screens. Please make sure they look good on phones.

FAQs

Q: Can I create half-size cards without a plugin?
 Yes. You can use the block editor’s column block and group blocks.

Q: Do half-size cards work on mobile?
 Yes. On mobile, they usually stack vertically into full width. This is normal and improves readability.

Q: Which is the easiest way for beginners?
 Using Elementor or the built-in WordPress column block is easiest.

Q: Can I create more than two cards per row?
 Yes. You can make 3-column or 4-column layouts for smaller cards.

Final Thoughts

Half-size cards in WordPress give your site a clean and modern layout. You can build them using the block editor, page builders, CSS, or theme settings. Choose the method that matches your comfort level. Start with a two-column layout, add your content, and style it into neat cards.

This small design choice can make your website look more professional and user-friendly.