How to Change Block Height and Width in WordPress

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.



Or, the ‘Full Width’ alignment option will make the block the entire width of the page.

Use alignment settings to resize an image

Note: SeedProd also offers a free version, but we will be using the premium version for this tutorial.

Once you are done, simply click the ‘Publish’ button to store your changes.

For more detailed instructions, please see our guide on how to create a landing page with WordPress.

You can also adjust the width and height of blocks using the Group block. It allows you to group different blocks and style them together.

It is the best WordPress page builder on the market that allows you to create landing pages using blocks. These blocks are also super easy to customize and resize according to your needs.

For more detailed instructions on how to use the Cover block, you may want to see our beginner’s guide on Cover Image vs. Featured Image in the WordPress block editor.

Bonus: Create Beautiful Pages Using Advanced Blocks in SeedProd

Below that, you can also adjust the block’s size by percentage.

Resize an image using block panel settings

You can also resize a block by going to the ‘Block Settings’ panel on the right and scrolling down to the ‘Settings’ section. From here, you can resize a block from the ‘Image Size’ dropdown menu.

Changing the layout will also change the different block sizes. You can configure these settings until you are happy with the result.

Configure the block settings of the Group block

First, you will need to install and activate the SeedProd plugin. For more details, you can read our guide on how to install a WordPress plugin.

You can also change the width and height of other blocks in the same way, including the Video, Heading, and Button blocks.

Once you are done, don’t forget to click on the ‘Save’ button.

Change width of the button block

Then, just click on the Spacing panel to expand its settings.

Visit the Spacing panel by switching to the Advanced tab

First, you can change the alignment of the Image block by clicking on the ‘Align’ button in the toolbar above the block.

Finally, don’t forget to click on the ‘Save Changes’ button to store your settings.

First, you will need to locate and add the ‘Spacer’ block from the left column. Then, click on it to open its settings.

Add the Spacer block

By adjusting the width and height of the blocks, you can make your posts and pages look more aesthetically pleasing.

In this tutorial, we will be adding and resizing a Heading block, a Paragraph block, and an Image block.

Add a heading block to the Group block

Once you have done that, you will be asked to choose a color or upload an image from the WordPress media library. This image or color will be used as the background for the Cover block.

Add the Cover block

However, sometimes you may want to change the width or height of a specific block to improve its appearance or the layout of the overall content.

In this article, we will show you how to easily change block height and width in WordPress.

How to change block height and width in WordPress

Why Change Block Height and Width in WordPress?

Currently, WordPress does not offer the same resizing options for all of the blocks. However, the block editor provides many ways to resize the height and width of different blocks.

You can also adjust the block’s width and height by typing the preferred pixel size into the ‘Width’ and ‘Height’ boxes in the ‘Image dimensions’ section.

Next, you need to visit the SeedProd » Landing Pages screen from the admin sidebar to start creating a landing page.

Next, simply click on the Image block to open its block settings in the left column. From here, you can upload an image from your media library.

Simply find the Button block in the left column and drag it onto your page.

Add the Button block to the website

This is how the Group block looked on our demo website.

Group block preview

Method 4: Change the Block Height Using the Cover Block

The spacer block can help you create a clutter-free website.

Use the height slider to adjust Spacer block

Next, you can change the block’s height and width using pixels or percentages.

Change the block size in SeedProd

From here, switch to the ‘Advanced’ tab from the top. You can change the height of the block by dragging the ‘Vertical Padding’ slider.

Changing height of the button block

First, you will need to drag the Image block from the block panel on the left and drop it anywhere you like on the page.

Choose the image block in the SeedProd

If the block you want to resize does not come with alignment buttons or resize settings, then this method is for you.

First, you will need to click on the ‘Add Block’ (+) button in the top left corner of the screen.

We hope this article helped you learn how to change block width and height in WordPress. You may also want to see our article on how to add and align images in the WordPress block editor and our top picks for the must-have WordPress plugins to grow your site.

This resizing method is for you if you want to use the Cover block. It enables you to display text and other content on top of an image or video.

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

Paste license key in the field

Once you are done, click on the ‘Update’ or ‘Publish’ button to store your settings.

After that, the column layout will be displayed on the screen, and you can now add the block you want by clicking on the ‘Add Block (+)’ button inside a column.

You can also adjust the image size and position by switching to the ‘Advanced’ tab at the top of the settings panel.

You can easily create beautiful and aesthetically-pleasing pages using the SeedProd plugin.

Next, you will need to click on the Button to open up its block settings.

Here, choosing the ‘Wide Width’ option will make the block the same width as the container.

From here, simply locate and add the Columns block to the content editor. Then, you will be asked to choose a variation.

Choose the column block

After that, the ‘Add Block’ button will be displayed on the screen. You can now add any block you want.

After you have selected a template, you will be asked to provide a name and URL for your landing page.

You will now be taken to the ‘Choose a New Page Template’ page. SeedProd offers many pre-made templates that you can pick from.

By default, WordPress makes it easy to create beautiful content layouts for your posts and pages using blocks. However, sometimes you may want to resize blocks to make them look better.

Adjusting block sizes can also ensure that your content is responsive and displays properly on all devices, including phones, tablets, and laptops.

After that, you need to click on the Cover block to open up its block settings in the right column.

This will launch SeedProd’s drag-and-drop page builder, where you can now start editing your page.

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

Column block preview

Method 3: Change the Block Height and Width Using the Group Block

Next, simply drag and drop any block you want into the Cover block.

Here, simply add values to adjust the block’s margin and padding according to your needs.

For this method, we will place our block inside the Columns block. It acts as a container where you can add blocks in each column. Then, you can resize those blocks by adjusting the height and width of the columns.

For this method, we will show you how to change a block’s height and width using the default settings offered by WordPress.

That being said, let’s see how you can easily change block height and width in WordPress.

Method 1: Change the Block Height and Width Using Block Settings

Clicking on the ‘Select Group’ button also opens up the block settings in the right column. From here, you can easily adjust the layout, justification, and orientation of all the blocks.

The block editor enables you to add content to your WordPress website using different blocks, including headings, paragraphs, images, videos, audio, and more.

Do you want to change block height and width in WordPress?

Once the block has been added, you can resize it by using the ‘Column settings’ located in the right panel.

Add Block using column

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

Add multiple blocks in Group

Then, simply drag these anchors to change the height and width of the image block.

Resize Image block using anchors

Once you do that, the Group block will display three different layout options that you can choose from. For this tutorial, we will use the ‘Group’ layout.

Choose the Group block and select a layout

From here, scroll down to the ‘Dimensions’ panel, where you can adjust the height of the Cover block using pixels.

Change the Cover block height

With Seedprod, you can also add a Spacer block between two different blocks to put some space between them.

To change the width, drag the ‘Horizontal Padding’ slider in the left column.

For example, you may have uploaded an image in the content editor, but it is too large and makes the page look unappealing.

Preview of an image

Another way to resize an Image block is by clicking on the image itself to bring up a blue border with circular anchors.

Upon adding these details, simply click on the ‘Save and Start Editing the Page’ button to continue.

Enter your page details

First, you will need to click on the ‘Add Block’ (+) button at the top. Next, you must locate and add the Group block to the content editor.

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

First, you will need to click on the ‘Add Block’ (+) button at the top and find the Cover block.

Upon activation, you must go to the SeedProd » Settings page from your WordPress dashboard and enter the license key in the ‘License Key’ box.

For this tutorial, we will be adding and resizing an Image block and a Button block.

Let’s start with the Image block in WordPress.

You can adjust the margin and padding for the top, bottom, left, and right areas of the block.

Ajust the margin and padding of the block

Or, you might want to change the size of the heading block to align it better with the content.

Now, you can control the height of the spacer using the ‘Height’ slider.

From here, just click on the ‘Add New Landing Page’ button.

Click the Add New Landing Page button

Once you are done, click on the ‘Update’ or ‘Publish’ button to store your settings.

Method 2: Change the Block Height and Width Using the Columns Block