As a web developer with over 15 years of experience building WordPress sites, I‘ve seen the platform evolve rapidly from a simple blogging engine to a sophisticated CMS powering over 40% of all websites.
The latest addition of the block editor (aka Gutenberg) ushered in a new paradigm of creating content with modular blocks. While the block approach makes building pages more visual, it also requires adapting existing workflows.
One key skill in the block editor is customizing the size and appearance of blocks for aesthetics and conversions. In this comprehensive guide drawn from my experience with WordPress over the years, we’ll explore why you should resize blocks and exactly how to do it like a pro.
Contents
- Why Should You Customize Default Block Sizes?
- How to Resize Blocks in WordPress
- Resizing Images in WordPress
- Adjusting Text Block Sizes
- Tips for Other Common Blocks
- Maintaining Proper Content Flow
- Leveraging Plugins Like SeedProd (Pro Tips)
- Troubleshooting Block Resizing Issues
- Best Practices for Resizing Blocks
- Conclusion
Why Should You Customize Default Block Sizes?
Since adopting the block editor in 2018, WordPress has seen over 20 million sites switch to using it. The entire editing process is now centered around blocks of content rather than dealing with raw HTML.
While blocks make content layout very visual, the predefined heights and widths may not always fit what you want for your pages. Here‘s why you should resize them:
Make designs look perfect on any device
Some default blocks can span the entire width of the content section. While they look fine on desktop, scaling down to mobile can make them appear too stretched out:
Adjusting block widths ensures they display nicely across all devices for optimal responsive design.
Enhance visual hierarchy on pages
Changing heading and media block sizes can better direct user focus and create visual hierarchy:
Fit more content without overflow
Certain blocks may overflow their boundaries if you add more content than the default size accommodates.
Increasing height prevents messy overflow so all content is visible:
Maintain stylistic consistency
Varying default block sizes can look disjointed. Enforcing consistent dimensions for similar blocks promotes rhythm.
As you can see, default block sizes don‘t always meet needs. Let‘s look at ways to resize them.
How to Resize Blocks in WordPress
Based on years of using WordPress and experimenting with blocks, here are the main methods I recommend for resizing:
1. Use Individual Block Settings
The easiest way is to tweak size values directly in a block‘s settings:
- Pros: Simple and quick for individual blocks.
- Cons: Limited to blocks with size options in settings.
For example, Image and Video blocks let you set pixel widths and alignments. Use these built-in settings first before exploring more complex methods.
2. Wrap Blocks in Columns
The Columns block allows placing other blocks into adjustable column containers:
- Pros: Granular control over width by resizing columns.
- Cons: Only adjusts width, not height.
This technique works for any block type and gives you very precise width control.
3. Use the Group Block Method
Groups let you cluster blocks together and resize the entire group:
- Pros: Single resize handle for multiple blocks. Controls both width and height.
- Cons: Requires adding the Group wrapper block first.
For example, group together a heading, image, and text blocks to maintain their size relationships.
4. Custom CSS Code
For maximum flexibility, inject custom CSS to override block sizes:
- Pros: Not limited to built-in settings. Reusable CSS classes.
- Cons: Requires CSS skills. More setup time.
Use this when you need sizes beyond what the block itself allows. We‘ll explore some reusable CSS snippets next.
5. Installsizing Plugins (Advanced)
Plugins extend block styling options beyond the core editor‘s capabilities:
- Pros: Precise resizing with advanced controls. Animate blocks, save styles.
- Cons: Additional setup time and cost for premium plugins.
Tools like SeedProd add advanced customization for creating high converting pages and landing pages.
Now let‘s look at resizing some common blocks in more detail.
Resizing Images in WordPress
Images often need resizing to fit nicely into layouts. Here are a few ways to customize image block sizes:
Easy built-in settings
The Image block provides direct width, height, and alignment settings:
Quickly test different alignments and pixel sizes to get images sized appropriately.
Anchor resizing
Click the image to reveal drag-and-drop anchors for live resizing:
Anchors provide responsive visual feedback as you resize so you can dial in the perfect size.
Reusable CSS classes
For reusable image sizes, define CSS classes like:
/* Small image */
.small-image {
width: 200px;
height: auto;
}
/* Large image */
.large-image {
width: 100%;
height: auto;
}
Then assign these classes to image blocks:
Classes give you consistency and let you size images responsively.
Adjusting Text Block Sizes
Resizing headings, paragraphs, lists, etc also helps perfect page layouts.
Use the Columns block
Wrap text blocks in columns to control their widths:
Reducing column widths shrinks contained text blocks proportionally.
Custom CSS classes
Redefine text block sizes with CSS:
/* Small text */
.small-text {
width: 75%;
font-size: .9rem;
}
/* Large text */
.large-text {
width: 100%;
font-size: 2rem;
}
Add these classes to text blocks:
This gives you reusable, responsive control over font sizes and widths.
Manual formatting
Select text inside a block and use the formatting toolbar to resize:
Manual sizing works well for small tweaks to standalone text.
Line height
Adjust line height in block settings to increase text block spacing:
Line height prevents multi-line content from looking cramped.
Tips for Other Common Blocks
Here are some tips for resizing specific block types:
Cover Block
Adjust height via slider, add spacing with background color.
List Block
Increase line height for spacing. Wrap in columns to constrain width.
Quote Block
Shrink font size and width with CSS classes.
Video Block
Use alignment options to fit width to column or go full width.
Button Block
Control height and width using the padding sliders.
Spacer Block
Only has height setting. Adjust to space other blocks vertically.
Column Block
Change columns and gutters to resize contained blocks.
Group Block
Use layout options to distribute contained blocks. Adjust overall height/width.
Maintaining Proper Content Flow
When resizing blocks, keep these tips in mind:
- Don‘t cramp text content with narrow widths.
- Allow images and videos enough space to shine.
- Use consistent sizes for similar blocks like headings.
- Watch for content overflow issues and increase height.
- Resize responsively for smaller mobile widths.
- Group related blocks before resizing.
- Preview across device sizes.
Careful resizing creates aesthetically pleasing layouts that adapt well responsively.
Leveraging Plugins Like SeedProd (Pro Tips)
While the WordPress block editor has come a long way, third-party page builders like SeedProd offer advanced customization options that serious designers need.
After trying several top page builders over the years, I find SeedProd to be the best for creating high-converting landing pages and sales funnels quickly.
Compared to the WordPress editor, SeedProd provides more granular control over resizing any block on the page:
Key features that make block resizing easier:
- Pixel and percentage size inputs for all blocks.
- Individual padding, margins, and border sizing.
- Global styles to batch edit multiple blocks.
- Reuse column layouts and styles.
- Animate blocks with entrance effects.
- Rollback changes if needed.
These advanced customization options ensure your blocks remain precisely sized no matter how complex your layouts get. You can create pixel-perfect block layouts to maximize conversions.
If you want to get serious about converting visitors beyond what the WordPress editor allows, SeedProd is a worthwhile investment for creating landing pages.
Troubleshooting Block Resizing Issues
While resizing blocks is fairly straightforward, here are some common issues to watch for:
Content overflowing block boundaries
This occurs when reducing width too much. Try increasing block size, changing layouts, or splitting into multiple blocks.
Unresponsive blocks
If full width blocks appear too stretched on mobile, reduce to constrained widths or percentages.
Disappearing padding or styles
Some added padding, colors etc may get overridden when resizing. Recheck and reapply if needed.
Spacing and alignment problems
Use margin settings or Spacer blocks to fix gaps between resized blocks.
Unexpected image distortions
When images become pixelated or warped from stretching, use appropriate image sizes instead.
Weird sizes
For consistency, use pixel units, percentages, or CSS media queries when resizing groups of blocks.
Pay attention to how content reflows on size changes. Adjust until the responsive behavior is right.
Best Practices for Resizing Blocks
Here are a few closing tips for resizing blocks successfully:
- Favor mobile-first percentage widths before adding larger desktop sizes.
- Pick image sizes matching rendered block widths to avoid pixelation.
- Use EM units and relative sizes for better responsive scaling.
- Don‘t just rely on anchors. Also tweak toolbar and sidebar settings.
- Find the right balance of white space and snug content.
- Change parent layouts before resizing child blocks for flexibility.
- Test on all device sizes and make incremental changes until satisfied.
While it takes experimentation to resize blocks perfectly, these practices will help guide you through the nuances and intricacies of block sizing in WordPress.
Conclusion
Whether you‘re a long-time WordPress user getting to grips with the new block editor or just starting out, mastering block resizing is a must for creating pixel-perfect page designs.
Use the techniques covered in this guide – from built-in block settings and using groups/columns to custom CSS and plugins – to gain complete control over block dimensions on your site.
Fine-tuning blocks for the right sizes across devices keeps users focused on your content, not distracted by messy layouts. Combining aesthetics with conversion optimization leads to increased traffic, engagement and sales.
Hopefully these tips distilled from my many years of experience help you resize blocks flawlessly. Let me know if you have any other sizing questions!