Mastering WordPress: A Step-by-Step Guide to Adjusting Block Height and Width

Achieving the perfect size for your WordPress blocks used to involve custom CSS or complicated solutions.

We’ve invested countless hours assisting users with this specific challenge. Fortunately, recent updates to WordPress have made it much easier to manage block sizes.

Many users are surprised to learn that WordPress offers several built-in options for adjusting block sizes. Through extensive testing, we’ve pinpointed the most effective methods that work well across various situations and themes.

In this guide, we will outline the simplest techniques for modifying block heights and widths in WordPress.

Reasons to Adjust Block Height and Width in WordPress

While the WordPress block editor simplifies content addition, the default block sizes may not align with your design vision. Modifying a block’s height and width provides greater control over your page’s aesthetics.

Here are several important reasons to consider changing a block’s size:

• Enhance Visual Layout:By managing the precise size of your elements, you can create designs that are more balanced and visually appealing.
• Improve Readability:Adjusting the width of text blocks can enhance the readability of your content, particularly on larger screens.
• Ensure Your Content is Responsive:Properly sizing blocks ensures your content appears visually appealing across all devices, including desktops and mobile phones.
• Create Visual Emphasis:Adjusting the size of a block can highlight important calls to action or essential information.

Now, let’s explore how to effortlessly adjust block height and width in WordPress.

We will discuss several methods, and you can use the quick links below to navigate to your preferred option:

• Method 1: Adjust Block Height and Width Using Block Settings
• Method 2: Adjust Block Width Using the Columns Block
• Method 3: Adjust Block Height and Width Using the Group Block
• Method 4: Adjust Block Height Using the Cover Block
• Bonus: Design Stunning Pages with Advanced Blocks in SeedProd

Method 1: Adjust Block Height and Width Using Block Settings

In this method, we will demonstrate how to modify a block’s height and width using the default settings in WordPress.

Currently, WordPress does not provide uniform resizing options for all blocks. However, the block editor offers various ways to adjust the height and width of different blocks.

Let’s begin with the Image block in WordPress.

To adjust the alignment of the Image block, click the ‘Align’ button located in the toolbar above the block.

Selecting the ‘Wide Width’ option will expand the block to match the container’s width, while the ‘Full Width’ option will stretch the block to cover the entire width of the page.

To resize a block, navigate to the ‘Block Settings’ panel on the right and scroll down to the ‘Settings’ section. Here, you can select a new size from the ‘Image Size’ dropdown menu.

You can manually set the block’s width and height by entering your desired pixel dimensions in the ‘Width’ and ‘Height’ fields under the ‘Image dimensions’ section.

Additionally, you can adjust the block’s size using percentage values.

Another method to resize an Image block is by clicking on the image itself, which will display a blue border with circular handles.

Simply drag these handles to modify the height and width of the image block.

After making your adjustments, click the ‘Update’ or ‘Publish’ button to save your changes.

Method 2: Adjust Block Width Using the Columns Block

If the block you want to resize lacks built-in size controls, like the Paragraph block, this method is ideal for you. It serves as a workaround by placing your block within a container that you can manipulate.

In this method, we will embed our block within the Columns block. This container allows you to add various blocks in each column, enabling you to resize them by adjusting the height and width of the columns.

First, click the ‘Add Block’ (+) button located in the top left corner of the screen.

Next, find and add the Columns block to the Gutenberg editor. You will then be prompted to select a variation.

Afterward, the column layout will appear on the screen, allowing you to add the desired block by clicking the ‘Add Block (+)’ button within a column.

Once the block is added, you can control its width by adjusting the column it resides in.

Simply select the column, and in the block settings panel on the right, you can modify the column’s width in the ‘Settings’ section. This adjustment will resize the block contained within it.

When you are finished, click the ‘Publish’ button to save your changes.

This is how the content appeared on our demo website after resizing and aligning two paragraph blocks within a two-column block.

Method 3: Adjusting Block Height and Width with the Group Block

You can modify the height and width of blocks by utilizing the Group block, which enables you to combine your selected blocks and style them collectively.

Start by clicking the ‘Add Block’ (+) button at the top. Then, find and insert the Group block into the content editor.

After adding the Group block, you will see three layout options. For this tutorial, we will select the ‘Group’ layout.

Next, the ‘Add Block’ button will appear on the screen, allowing you to insert any block you wish.

In this tutorial, we will include and resize a Heading block, a Paragraph block, and an Image block.

To add multiple blocks to the Group, click the ‘Select Group’ button from the block toolbar.

Once the Group is selected, simply click the ‘Add Block’ button (+) at the bottom.

After that, the block settings sidebar on the right will open, where you can easily adjust the layout, alignment, and orientation of all the blocks.

Changing the layout will also affect the sizes of the different blocks. You can customize these settings until you achieve the desired outcome.

When you are finished, click the ‘Update’ or ‘Publish’ button to save your changes.

Here’s how the Group block appeared on our demonstration site.

Step 4: Adjust the Block Height with the Cover Block

This resizing technique is perfect for those who want to utilize the Cover block and establish a specific minimum height for a section. It’s excellent for designing full-width banners or hero images that feature text and additional content.

First, click the ‘Add Block’ (+) button at the top and locate the Cover block.

After that, you will be prompted to select a color or upload an image from the WordPress media library. This image or color will serve as the background for the Cover block.

Next, simply drag and drop any block you wish to include into the Cover block.

Then, click on the Cover block to access its settings in the right-hand column.

From there, scroll down to the ‘Dimensions’ section, where you can modify the height of the Cover block in pixels.

Finally, remember to click the ‘Save Changes’ button to apply your settings.

For more comprehensive guidance on using the Cover block, check out our beginner’s guide comparing Cover Images and Featured Images in the WordPress block editor.

Bonus: Design Stunning Pages with Advanced Blocks in SeedProd

Easily design stunning and visually appealing pages with the SeedProd plugin.

This is the leading WordPress page builder available, allowing you to create customizable landing pages using blocks that can be resized to fit your preferences.

Many of our partner brands have utilized this tool to craft their entire websites, and their users have appreciated the contemporary and stylish design. For more information, check out our SeedProd review.

To get started, install and activate the SeedProd plugin. For detailed instructions, refer to our guide on installing a WordPress plugin.

After activation, navigate to the SeedProd » Settings section in your WordPress dashboard and input the license key in the ‘License Key’ field.

You can locate the license key on your account page on the SeedProd website.

Next, go to the SeedProd » Landing Pages area from the admin sidebar to begin creating a landing page.

Here, simply click the ‘Add New Landing Page’ button.

You will be directed to the ‘Choose a New Page Template’ screen, where SeedProd provides a variety of pre-designed templates for you to select from.

Once you select a template, you’ll need to enter a name and URL for your landing page.

After entering this information, click the ‘Save and Start Editing the Page’ button to proceed.

This will open SeedProd’s intuitive drag-and-drop page builder, allowing you to begin editing your page. For comprehensive guidance, refer to our tutorial on creating a landing page with WordPress.

In this tutorial, we will focus on adding and resizing an Image block and a Button block.

Start by dragging the Image block from the left block panel and dropping it anywhere on the page.

Next, click on the Image block to access its settings in the left column. Here, you can upload an image from your media library.

You can then modify the block’s height and width using either pixels or percentages.

To further adjust the image size and position, switch to the ‘Advanced’ tab at the top of the settings panel.

Click on the Spacing panel to reveal its settings.

Here, you can input values to customize the block’s margin and padding as needed.

You can modify the margin and padding for the top, bottom, left, and right sides of the block.

Using Seedprod, you can insert a Spacer block between two other blocks to create additional space.

Begin by locating the ‘Spacer’ block in the left sidebar and adding it to your layout. Click on it to access its settings.

You can adjust the height of the spacer by using the ‘Height’ slider.

The spacer block is useful for maintaining a clean and organized website layout.

Similarly, you can adjust the width and height of other blocks, such as Video, Heading, and Button blocks.

To add a Button block, find it in the left sidebar and drag it onto your page.

Next, click on the Button to open its block settings.

In the settings, navigate to the ‘Advanced’ tab at the top. You can adjust the block’s height by moving the ‘Vertical Padding’ slider.

To modify the width, use the ‘Horizontal Padding’ slider located in the left sidebar.

After making your adjustments, remember to click the ‘Save’ button to apply your changes.

We hope this guide has helped you learn how to adjust block width and height in WordPress. You may also find our article on adding and aligning images in the WordPress block editor helpful, along with our recommendations for the best Gutenberg-compatible WordPress themes.

If you enjoyed this article, consider subscribing to our YouTube Channel for insightful WordPress video tutorials. Connect with us on Twitter and Facebook for more updates.