How to quickly Add and Align Images in WordPress Block Editor(Gutenberg)

Are you wondering how to add and align images in WordPress Block Editor? Look no further, let’s access this blog to get a detailed guide right now.

Introduction

As you know, images play an important role in making your website look more impressive and engaging. However, if you don’t know how to align them to fit your content, it may make the structure of your content not professional and confused.

Fortunately, WordPress 5.0 released a new WordPress Block editor that is called the Gutenberg editor. This block editor is completely different from the Classic editor. You can visit Gutenberg Editor vs Classic Editor comparison to get more useful information.

The new default editor of WordPress has fixed many issues related to images with the old editor including image alignment problems.

Therefore, in today’s tutorial, we will give you a detailed guide on how to add and align images in WordPress Block editor to help you create eye-catching content. Now, let’s start.

How to add and align images in WordPress Block Editor?

As we mentioned, Gutenberg is a new default editor of WordPress that allows you to create rich content by using a lot of useful blocks. Therefore, you can use one of the following blocks to add many beautiful images to your WordPress posts and pages.

• Image
• Inline image
• Gallery
• Media & Text
• Cover

Now we will give an example with image block first.

You can click on the “+” symbol and then search for the “image” block to insert it.

Now, there are three buttons being displayed inside the image block. The first button ” Upload” allows you to upload an image from your computer. When you click on the Media Library button, you can select many uploaded images from the media library. In addition, you can insert an image by clicking on the Insert from URL and providing the image file URL.

In our case, we are going to click on the Upload button to choose an image from our computer.

As soon as you choose the image, WordPress will immediately upload it to your media library and insert it into the image block.

Now let’s click on that image and take a look at a toolbar on the top of your image. To align your image, you will need to click on the Change Alignment button being displayed in the toolbar.

The image block will offer you the following image alignment options that you choose from the drop-down menu.

• Align Left
• Align Center
• Align Right
• Wide Width
• Full Width

In case your image is smaller in width, you can select Align left or Align right option to align it to the left or right. This option will bring up text next to the image. This makes the structure of your post better organized.

You can also align it to the center. This way allows you to showcase the image on its own row with no text on either side.

In addition, when you choose the Full-width option, your image will fit the browser screen. However, you should only choose this option when your image comes with a large size and high resolution.

How to align an image next to text?

If you used to spend a lot of time aligning an image next to text perfectly. Now, with the introduction of the WordPress Block editor, everything will be easier than ever. You can use the Media & text block.

After inserting the Media & Text block, you will see a two-column area including one column for adding images and another for text content.

Simply insert your beautiful image and add text next to the image.

After inserting the image and text, have a look at the toolbar above the image. You will see some options for the block. You can switch the image and text sides or make the whole block wider or full width.

The image’s alignment will automatically adjust to the height of text to fit the height of the image.

How to align gallery in WordPress Block editor?

Gutenberg editor comes to a wide range of blocks including image galleries block. This block enables you to showcase plenty of eye-catching images in a grid of rows columns.

WordPress post editor also comes with a block to add image galleries. This allows you to easily display images in a grid of rows and columns.

You can choose from gallery alignment options in the toolbar to align the gallery to the left, center, or right. Moreover, you can also make it wider or change it to a full-width row.

Although the gallery block also comes with a lot of good features, there are still some restrictions. If you enhance the functionality for your website to align images in your photo galleries, showcase them in the popup, you can use one of the best WordPress Image Gallery plugins.

How to add two images side by side in WordPress?

In order to add two images side by side in WordPress, you simply use Gallery Block.

After uploading 2 images, the gallery block will automatically display both images next to each other. You can enable the crop images option to make sure that both images have the same size.

Wrap up

We have just shared with you a detailed guide on how to add and align images in WordPress. We expect that this article will be valuable for your website. Moreover, you can refer to more problems related to images by accessing our tutorial on how to fix common image issues in WordPress.

Last but not least, our Free WordPress themes offer a wide range of high-quality designs for your website. If you want to make an impressive appearance for your site, let’s visit our website and get one.

5/5 - (1 vote)

The post How to quickly Add and Align Images in WordPress Block Editor(Gutenberg) appeared first on LTHEME.