Are you wondering how to add and align images in WordPress Block Editor? Look no further: this blog gives you a detailed guide.
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, your content may look unprofessional and confusing.
Fortunately, WordPress 5.0 introduced a new block editor called the Gutenberg editor. This block editor is completely different from the Classic editor. You can read our Gutenberg Editor vs Classic Editor comparison to get more useful information.
WordPress’s new default editor has fixed many image issues of 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 the 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
Let’s start with the Image block as an example.
You can click on the “+” symbol and then search for the “image” block to insert it.
Now, three buttons are 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 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 the toolbar at the top of your image. To align your image, you will need to click on the Change Alignment button in the toolbar.
The image block offers the following alignment options, which you can choose from the drop-down menu.
- Align Left
- Align Center
- Align Right
- Wide Width
- Full Width
If your image is narrow, you can select Align left or Align right option to align it to the left or right. This option will wrap 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 width of the browser screen. However, you should only choose this option when your image is large and high-resolution.
How to align an image next to text?
You may have spent a lot of time trying to align an image perfectly next to text. 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 text alignment will automatically adjust to fit the height of the image.
How to align a gallery in the WordPress Block editor?
The Gutenberg editor comes with a wide range of blocks, including the image gallery block. This block enables you to showcase plenty of eye-catching images in a grid of rows and 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 want more functionality for your website, such as aligning images in your photo galleries or showing them in a 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 can 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 hope that this article will be valuable for your website. Moreover, you can read about more image-related problems in 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 give your site an impressive look, let’s visit our website and get one.
