If you have ever visited a modern website and noticed those neat little boxes showing blog posts, products, team members, or services – those are called cards. Cards are one of the most popular design elements on the web today. They make content look clean, organized, and easy to scan.
But what if you do not want full-width cards or single-column layouts? What if you want cards that take up only half the width of your page – sitting neatly side by side in two columns? That is exactly what half-size cards do, and they are incredibly useful for creating visually balanced layouts.
In this guide, you will learn everything you need to know about creating half-size cards in WordPress. Whether you are a complete beginner or someone with a bit of WordPress experience, this article will walk you through multiple easy methods, styling tips, and practical examples. By the end, you will be able to build beautiful two-column card layouts on your WordPress site with confidence.
Table Of Contents
1. What Are Half-Size Cards in WordPress?
Before jumping into the how-to part, it is important to understand what half-size cards actually are.
In web design, a card is a self-contained box of content. It usually includes an image, a title, some text, and sometimes a button or link. Cards are used to display information in a structured, visually appealing way.
A half-size card is simply a card that takes up 50% of the available width in its container. When you place two half-size cards next to each other, they fill the full width of the page or section – creating a clean two-column layout.
You might use half-size cards for things like:
- Blog post previews displayed two at a time
- Product listings in a two-column grid
- Team member profiles shown side by side
- Service or feature highlights in pairs
- Portfolio items arranged in a two-column gallery
The term “half-size” simply refers to the card being 50% wide – taking up half the row. This is a popular layout choice because it strikes a nice balance between showing enough content and keeping the design from feeling cluttered.
2. Why Use Half-Size Cards on Your WordPress Site?
You might be wondering – why not just use a single column or a full-width layout? The answer comes down to design goals and user experience. Half-size cards offer a number of important advantages.
Better Use of Screen Space
Full-width layouts can sometimes feel too stretched or sparse, especially on wider screens. Half-size cards allow you to show two pieces of content side by side, making better use of the horizontal space available on desktop and laptop screens.
Improved Scannability
When visitors land on your page, they do not read every word. They scan. Two-column card layouts make it easier for users to quickly compare options, browse multiple items at once, or find what they are looking for without scrolling endlessly.
Clean and Modern Aesthetic
Card-based layouts are a staple of modern web design. Half-size cards give your site a polished, professional look that visitors associate with well-designed websites. This can increase trust and encourage people to stay on your site longer.
Flexibility Across Content Types
Half-size cards work well for almost any type of content – blog posts, products, portfolios, services, testimonials, and more. Once you know how to create them, you can apply this layout pattern across different pages of your site.
Responsive by Design
When built correctly, half-size cards can be made fully responsive. This means they display as two columns on larger screens and collapse into a single column on smaller devices like mobile phones – giving every visitor a great experience regardless of their screen size.
3. Understanding the Basics Before You Start
Creating half-size cards in WordPress does not require coding knowledge in most cases, but it helps to understand a few basic concepts first. This will make the process much smoother and help you troubleshoot any issues that come up.
What is a Container?
A container is the parent element that holds your cards. Think of it like a shelf – the cards are the items on the shelf, and the shelf defines how much total space is available. When a card is half-size, it takes up 50% of the container’s width.
What is CSS Flexbox or Grid?
Flexbox and CSS Grid are two layout systems used in web design to position elements side by side. You do not need to know how to write them yourself – most WordPress page builders handle this for you. But understanding that these systems exist helps you understand why cards line up the way they do.
What is Responsive Design?
Responsive design means your website adapts to different screen sizes. A two-column half-size card layout looks great on a laptop, but on a phone, those same cards should stack vertically so they are still readable. Good responsive design handles this automatically.
Block Editor vs Page Builders
WordPress gives you two main ways to build pages. The first is the built-in Block Editor (also called Gutenberg), which uses a block-based system where you drag and drop content blocks. The second approach uses page builder plugins like Elementor, Divi, or Beaver Builder, which offer more visual drag-and-drop control. Both methods can be used to create half-size cards – this guide will cover both.
| Quick NoteYou do not need to use a page builder to create half-size cards in WordPress. The built-in Block Editor is capable of creating beautiful two-column card layouts, especially with a few simple CSS tweaks. |
4. Method 1: Using the WordPress Block Editor (Gutenberg)
The WordPress Block Editor is the default editing experience in modern WordPress installations. It uses blocks – individual units of content like paragraphs, headings, images, and groups – to build pages visually. You can create half-size cards using built-in blocks without installing any extra plugins.
Step 1: Create a New Page or Post
Log into your WordPress dashboard and navigate to Pages or Posts. Click Add New to create a new page, or open an existing one you want to edit.
Step 2: Add a Columns Block
In the Block Editor, click the + icon to add a new block. Search for Columns in the block search box. The Columns block is a built-in WordPress block that lets you place content side by side in multiple columns.
Once you click on the Columns block, you will be prompted to choose a column layout. Select the 50/50 layout, which gives you two equal columns – perfect for half-size cards.
Step 3: Add a Group Block Inside Each Column
Click inside the left column. Add a Group block inside it. The Group block acts as a container for your card content and allows you to style it with a background color, padding, and border.
To add a Group block, click the + inside the column and search for Group. Select it and you will see an empty container appear.
Step 4: Build Your Card Content
Inside the Group block, add the content elements that make up your card:
- Add an Image block at the top for a card thumbnail or featured image
- Add a Heading block for the card title
- Add a Paragraph block for a short description or excerpt
- Optionally add a Button block for a call to action like Read More or Learn More
Step 5: Style the Group Block
Click on the Group block to select it. In the right sidebar, you will see block settings. Here you can:
- Set a background color to give the card a distinct look
- Add padding to create space between the card content and its edges
- Add a border and border radius to give the card rounded corners
- Add a box shadow using the Additional CSS Class option
Step 6: Duplicate for the Second Column
Once your first card Group block is set up, you can click on it and use the Duplicate option from the block menu. Then move or paste the duplicate into the right column. Update the content (image, title, description) in the second card to make it unique.
Step 7: Add More Row Pairs as Needed
If you want more than two cards, simply add another Columns block below the first one, following the same process. Each Columns block gives you a new row of two half-size cards.
| Pro TipAfter setting up your first Columns block with both cards, you can save it as a Reusable Block (or Pattern in newer WordPress versions). This lets you insert the same card layout on multiple pages with just one click, saving you time. |
5. Method 2: Using Elementor Page Builder
Elementor is one of the most popular WordPress page builder plugins in the world. It offers a drag-and-drop visual editor with a wide range of widgets and design options. Creating half-size cards with Elementor is very intuitive, even for complete beginners.
To use Elementor, install and activate it from your WordPress Plugins menu. The free version of Elementor includes all the features you need for half-size cards.
Step 1: Open Elementor Editor
Create or open a page, then click Edit with Elementor. The page will reload in the Elementor editor, showing a visual canvas on the right and a panel of widgets on the left.
Step 2: Add a Two-Column Section
In Elementor, the layout is built using Sections, Columns, and Widgets. Click the + icon on the canvas to add a new section. When prompted to choose a structure, select the two-column layout (the option that shows two equal columns side by side).
Step 3: Use the Inner Section Widget for Better Control
For more flexibility, drag the Inner Section widget into one of your columns. This gives you a nested column structure where you have full control over the card’s inner layout. However, for basic cards, you can skip this step and work directly in the two columns.
Step 4: Add Card Widgets to Each Column
Inside the left column, drag and drop the following widgets to build your card:
- Image widget – for the card’s visual
- Heading widget – for the card title
- Text Editor widget – for the description
- Button widget – for a call-to-action link
Repeat this process for the right column.
Step 5: Style the Column as a Card
Click on the column (not the section) to select it. Go to the Style tab in the left panel. Here you can:
- Set a Background Color (solid, gradient, or image)
- Add Border settings – choose a style, width, and color
- Set Border Radius for rounded corners (a value of 8px to 16px looks great)
- Add a Box Shadow for a floating card effect
- Set Padding to add inner spacing
Step 6: Adjust Spacing Between Cards
Click on the outer Section to select it. In the Layout tab, you can adjust the Column Gap setting. This controls the space between the two columns – and therefore between the two cards. A gap of 20 to 30 pixels works well for most card layouts.
Step 7: Set Responsive Behavior
Click on the Responsive Mode icon at the bottom of the Elementor panel. Switch to Tablet and Mobile views to check how your cards look on smaller screens. In mobile view, you can change the column layout to stack vertically by going to the Section’s Layout settings and adjusting the Column Direction for mobile.
6. Method 3: Using a WordPress Card Plugin
If you prefer a dedicated solution for cards, there are several WordPress plugins designed specifically for creating card-based layouts. These plugins give you ready-made card templates and styling options without needing to build cards from scratch.
Popular Card Plugins for WordPress
Here are some well-regarded WordPress plugins you can use to create half-size cards:
- PostX – A powerful block plugin that lets you display posts in grid layouts with customizable card designs. It works inside the Gutenberg editor and supports two-column grid layouts.
- Cards for Beaver Builder – If you use Beaver Builder, this plugin adds card-style modules you can arrange in multi-column layouts.
- Ultimate Addons for Gutenberg (UAG) – A block add-on for the Gutenberg editor that includes a dedicated Card block with image, title, description, and button options.
- Kadence Blocks – A popular Gutenberg block extension that includes Row Layout blocks perfect for building two-column card grids.
How to Use a Card Plugin
The general process for using a card plugin is:
- Install and activate the plugin from the WordPress Plugin Directory
- Open your page or post in the editor
- Find the plugin’s card block or widget in the block/widget panel
- Drag it onto your page and choose a two-column layout
- Fill in the content for each card (image, title, text, button)
- Use the plugin’s settings to adjust colors, spacing, borders, and fonts
- Save and preview your page
| Good to KnowCard plugins often come with pre-built templates and color schemes, which can save you a lot of time. Many also include hover animations and transitions that make your cards more interactive and engaging. |
7. Method 4: Adding Custom CSS for Half-Size Cards
If you want full control over how your cards look without relying on page builder settings, you can write your own CSS. This approach is more flexible and allows you to fine-tune every detail of your card design.
Do not worry if you have never written CSS before – this section will walk you through it step by step with clear explanations.
Where to Add Custom CSS in WordPress
There are two main places to add custom CSS in WordPress:
- Go to Appearance > Customize > Additional CSS in your WordPress dashboard. This is the easiest option and works with most themes.
- If you are using a block theme, go to Appearance > Editor, then add a Custom CSS block or use the Style section.
The HTML Structure for Half-Size Cards
Before writing the CSS, you need a basic HTML structure. If you are using the Gutenberg editor, you can use a Custom HTML block to insert raw HTML. Here is a simple structure for a two-card row:
<div class=”cards-row”>
<div class=”half-card”>
<img src=”image1.jpg” alt=”Card Image 1″>
<div class=”card-body”>
<h3>Card Title One</h3>
<p>This is a short description for the first card.</p>
<a href=”#” class=”card-btn”>Read More</a>
</div>
</div>
<div class=”half-card”>
<img src=”image2.jpg” alt=”Card Image 2″>
<div class=”card-body”>
<h3>Card Title Two</h3>
<p>This is a short description for the second card.</p>
<a href=”#” class=”card-btn”>Read More</a>
</div>
</div>
</div>
The CSS for Half-Size Cards
Now add this CSS in Appearance > Customize > Additional CSS:
/* The row container that holds both cards */
.cards-row {
display: flex;
flex-wrap: wrap;
gap: 24px;
padding: 20px 0;
}
/* Each individual half-size card */
.half-card {
flex: 0 0 calc(50% – 12px);
background: #ffffff;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Hover effect */
.half-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
/* Card image */
.half-card img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
}
/* Card body (text area) */
.card-body {
padding: 20px;
}
/* Card title */
.card-body h3 {
margin: 0 0 10px 0;
font-size: 1.2rem;
color: #1E293B;
}
/* Card description */
.card-body p {
font-size: 0.95rem;
color: #475569;
line-height: 1.6;
margin: 0 0 16px 0;
}
/* Card button */
.card-btn {
display: inline-block;
padding: 10px 20px;
background: #2563EB;
color: #ffffff;
border-radius: 6px;
text-decoration: none;
font-size: 0.9rem;
transition: background 0.2s ease;
}
.card-btn:hover {
background: #1D4ED8;
}
/* Responsive: stack on mobile */
@media (max-width: 768px) {
.half-card {
flex: 0 0 100%;
}
}
Breaking Down the CSS
Let us look at what each part of this CSS does, so you understand it rather than just copying it blindly.
display: flex – This tells the row container to arrange its children (the cards) in a row side by side.
flex-wrap: wrap – This allows cards to wrap onto the next line if they do not fit, which helps on smaller screens.
gap: 24px – This adds 24 pixels of space between the cards.
flex: 0 0 calc(50% – 12px) – This makes each card exactly 50% wide, minus half the gap, so both cards fit perfectly in the row.
border-radius: 12px – This rounds the corners of the card for a modern look.
box-shadow – This adds a subtle shadow beneath the card, making it appear to float slightly above the page.
transition – This creates smooth animations when the card is hovered.
@media (max-width: 768px) – This is a media query that applies special styles on screens smaller than 768 pixels (mobile phones). At this size, the cards become full-width and stack vertically.
8. Styling Tips for Beautiful Half-Size Cards
Now that you know how to create half-size cards, let us talk about how to make them look great. Good card design is about more than just getting the layout right – it is about visual harmony, readability, and a polished finish.
Tip 1: Keep Your Cards Consistent
All cards in a row should have the same height and structure. Inconsistent card heights make the layout look messy and uneven. You can enforce equal heights by adding align-items: stretch to the cards-row container, which stretches all cards to match the tallest one.
Tip 2: Use High-Quality Images
Cards with images look far more appealing than text-only cards. Use images that are the same aspect ratio for all cards. The object-fit: cover property in CSS ensures images fill the card image area without distortion, regardless of the original image dimensions.
Tip 3: Choose a Harmonious Color Palette
Stick to two or three colors for your card design – a background color, a title color, and an accent color for buttons and links. Too many colors make cards look chaotic. If your site has a brand color, use it as the accent color in your cards.
Tip 4: Use Adequate Padding
Padding is the breathing room inside your card. Without enough padding, text feels cramped and unprofessional. A padding of 20 to 24 pixels on all sides is a good starting point. Do not be afraid to increase it if your cards feel too tight.
Tip 5: Add Hover Effects
Hover effects make your cards feel interactive and responsive to user actions. The CSS in the previous section included a gentle upward movement (translateY) and a stronger shadow on hover. These small details signal to users that the card is clickable and alive.
Tip 6: Pay Attention to Typography
Your card title should be noticeably larger than the description text. A good rule of thumb is to use a font size of 1.2rem to 1.5rem for the title and 0.9rem to 1rem for the body text. Make sure the line-height of your body text is between 1.5 and 1.7 for comfortable reading.
Tip 7: Add a Clear Call to Action
Every card should guide the user toward a next step. Whether it is a Read More button, a Buy Now link, or a View Project label – include a visible call-to-action element. Use a button style with enough contrast from the background so it stands out.
Tip 8: Test on Multiple Devices
Always check how your half-size cards look on a phone, tablet, and desktop. Use your browser’s developer tools (press F12 in most browsers) to simulate different screen sizes. Make sure your cards stack properly on mobile and do not overflow horizontally.
9. Making Half-Size Cards Responsive
Responsiveness is one of the most important aspects of modern web design. A layout that looks perfect on a desktop but breaks on a mobile phone is not an acceptable result in today’s world.
For half-size cards, the core responsive challenge is this: two cards side by side works well on wide screens, but on narrow mobile screens, those same cards become too small to read comfortably.
The solution is to switch from a two-column layout to a single-column layout at a certain screen width threshold. In CSS, this is done using media queries.
Setting the Breakpoint
A breakpoint is the screen width at which the layout changes. For half-size cards, a breakpoint of 768 pixels is a common choice – this is roughly the width of a tablet in portrait mode.
The media query you already saw in the CSS section handles this:
@media (max-width: 768px) {
.half-card {
flex: 0 0 100%;
}
}
This tells the browser: when the screen is 768 pixels wide or narrower, make each card 100% wide instead of 50%. The cards will automatically stack on top of each other.
Responsive Settings in Page Builders
If you are using Elementor, Divi, or another page builder, you do not need to write media queries manually. Page builders have built-in responsive controls where you can change the column layout for tablet and mobile screens separately. Look for settings labeled Responsive Mode, Mobile View, or Device Settings in your page builder.
Testing Responsiveness
To test your card layout on different screen sizes:
- Open your page in a web browser (Google Chrome is recommended)
- Right-click anywhere on the page and choose Inspect
- Click the device toggle icon at the top of the developer tools panel
- Select different device sizes from the dropdown (iPhone, iPad, etc.) or drag the edge of the preview window to resize it manually
- Check that your cards stack properly on small screens and look good on all sizes
10. Displaying WordPress Posts as Half-Size Cards
One of the most common uses of half-size cards in WordPress is to display blog posts in a grid layout. Instead of showing posts in a single-column list, you show them two at a time in cards – making your blog page look much more polished and modern.
Using the Query Loop Block
In the Gutenberg Block Editor, there is a block called the Query Loop block. This block fetches posts from your WordPress database and displays them using a layout you choose. Here is how to use it for half-size cards:
- Add a Query Loop block to your page
- When prompted to choose a pattern, select one that shows posts in a grid (look for a two-column grid option)
- Customize the inner template blocks – you will see blocks for Post Title, Post Excerpt, Post Featured Image, and Post Date inside the loop
- Wrap these blocks in a Group block if you want to style them as a card
- Use the Style tab on the Group block to add background, border, padding, and border radius
- The Query Loop block will automatically pull your posts and display them in the card layout
Using a Blog Post Plugin
Several WordPress plugins are specifically designed to display blog posts in card grids. Plugins like PostX, Otter Blocks, or GenerateBlocks offer dedicated blog post grid blocks with two-column layout options and card-style templates. These are excellent choices if you want a professional-looking post grid without custom coding.
Using WooCommerce for Product Cards
If you are running a WooCommerce store, you can display products as half-size cards. WooCommerce’s built-in product grid shortcode and the Products block both support column settings. Set the number of columns to 2 and your products will display as half-size cards automatically. WooCommerce also supports custom CSS for card styling, so you can apply the same techniques discussed in this guide.
11. Common Problems and How to Fix Them
Even with the best instructions, things do not always work perfectly the first time. Here are some common issues people encounter when creating half-size cards in WordPress, along with their solutions.
Problem: Cards Are Not Sitting Side by Side
If your cards are stacking vertically instead of appearing side by side, it is likely a CSS issue. Make sure your container element has display: flex applied. Also check that your cards have the correct flex-basis value (50% minus half the gap).
Problem: One Card Is Taller Than the Other
This happens when one card has more content than the other. To fix this, add align-items: stretch to the flex container. Each card will stretch to match the tallest card in the row. If you want the card content to align to the top and the button to stick to the bottom, use display: flex and flex-direction: column on the card itself, then add margin-top: auto to the button.
Problem: Images Are Distorted or Not the Right Size
If card images look stretched or squished, set a fixed height on the image element and use object-fit: cover in your CSS. This crops and centers the image to fill the space cleanly without distortion, regardless of the original image’s dimensions.
Problem: Cards Overflow Their Container on Mobile
If cards are too wide on mobile and cause horizontal scrolling, check your media queries. Make sure you have a responsive breakpoint that sets cards to flex: 0 0 100% at small screen widths. Also check that you are not using a fixed pixel width on cards – use percentages or the calc() function instead.
Problem: Card Spacing Looks Inconsistent
Inconsistent spacing often happens when you mix margin and gap settings. Try to use only the gap property on the flex container to handle spacing between cards, and use padding on the cards themselves for inner spacing. Avoid setting individual left and right margins on cards as this can create uneven spacing.
Problem: Hover Effects Are Not Working
If your hover effects are not appearing, check that your CSS transition property is set correctly. Make sure the transition is on the base state of the element (not just the hover state) so the animation plays in both directions – when hovering in and when hovering out.
12. Advanced Styling Ideas for Half-Size Cards
Once you have the basics down, you can take your card designs further with some more advanced styling techniques. These are not difficult to implement, but they make a big visual impact.
Gradient Backgrounds
Instead of a flat background color, try a gradient. Gradients add depth and visual interest to cards. In CSS, you can apply a gradient background like this:
.half-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #ffffff;
}
Dark Mode Cards
Dark mode is increasingly popular. You can create dark-themed cards by using a dark background and light text. Pair this with a colored border or glowing box shadow for a sleek, modern look:
.half-card {
background: #1E293B;
color: #E2E8F0;
border: 1px solid #334155;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
Image Overlay Cards
A popular design pattern is to show the full image as the card background, with text overlaid on top. This creates a bold, visually striking card style often used in magazine-style layouts and portfolio sites.
Card Flip Effect
With some more advanced CSS, you can create a card flip effect where the card spins around on hover to reveal content on the back. This is an eye-catching interaction that works especially well for portfolio items, team member cards, or features displays.
Icon Cards
Instead of an image, you can use an icon at the top of each card. This works well for service listings or feature highlights. Use an icon library like Font Awesome or Dashicons (which is built into WordPress) to add simple, clean icons to your cards.
13. Best Practices for Half-Size Cards in WordPress
To wrap up the practical knowledge in this guide, here is a summary of best practices to keep in mind whenever you create half-size cards on your WordPress site.
- Keep your card content concise. Cards are not meant for long text. Aim for a short title (5 to 8 words), a brief description (2 to 3 sentences), and one clear call to action.
- Use consistent image sizes. All card images should have the same dimensions or at least the same aspect ratio. This keeps the layout uniform and professional.
- Do not overcrowd the card. Leave enough white space inside the card. Crowded cards feel overwhelming and hard to read.
- Maintain a clear visual hierarchy. The image should catch attention first, then the title, then the description, then the button. Make sure font sizes and weights reflect this hierarchy.
- Optimize your images for the web. Large images slow down your page. Before uploading card images to WordPress, compress them using a tool like Squoosh, TinyPNG, or the Smush plugin for WordPress.
- Test on real devices. Browser developer tools are helpful, but testing on actual phones and tablets reveals real-world issues that simulations might miss.
- Ensure accessibility. Use descriptive alt text for card images. Make sure text has enough contrast against its background. Ensure buttons and links are large enough to tap comfortably on mobile screens.
- Keep hover effects subtle. Hover interactions should enhance the experience, not distract. Avoid animations that are too fast, too slow, or too dramatic.
Conclusion
Creating half-size cards in WordPress is one of the most rewarding design improvements you can make to your site. These two-column card layouts make your content more visually appealing, easier to browse, and more professional in appearance – all without requiring advanced technical skills.
In this guide, you learned what half-size cards are and why they are so useful. You explored four different methods for creating them: using the built-in Gutenberg Block Editor, using the Elementor page builder, using dedicated card plugins, and writing your own custom CSS. You also learned about styling best practices, responsive design techniques, common troubleshooting fixes, and advanced design ideas to take your cards to the next level.
Whether you choose a plugin approach or prefer to write CSS yourself, the most important thing is to start experimenting. Create a test page, try building a two-card row, and see how it looks. Adjust the colors, spacing, and fonts until it matches your vision. Every great WordPress site is built one step at a time, and half-size cards are a fantastic step toward a more polished, modern online presence.
Good luck with your WordPress journey, and enjoy building beautiful card layouts!
About the Author
Jay Patel is the Founder of XSquareSEO, a full-service SEO agency with experience in on-page SEO, eCommerce SEO, link building, technical SEO, SaaS SEO, and local SEO. For more information, feel free to contact us.
Explore More Guides
WordPress Download Button
Hreflang Tags WordPress
HTML Video Background WP
WP Navigation Bar Header
50 Plugins WordPress eShop
Replay Attacks WordPress
Free Broken Links WP Plugin
Nonprofit WordPress Site
Change WP Profile Gravatar
Copy HTML Code WordPress
