Adding and Aligning Images in the Gutenberg WordPress Editor

Images enliven your WordPress posts and pages, making them more appealing. However, for many beginners, aligning images is quite a challenge. The Gutenberg block editor solves this problem by making it easy to add and align images in WordPress. In this article, we will show you how to add and align images in WordPress to create beautiful layouts. Image Alignment in WordPress When working with the old editor, users often faced the problem of image alignment.

There were options for alignment on the right edge, left edge, center, but far from always this led to a good result. Sometimes the images simply did not align, looked strange, Licence Key changed their size. WordPress 5.0 introduces a new Gutenberg editor. He fixed numerous problems typical of the old editor, including image alignment. Let’s see how to add and align images in the new editor to create attractive layouts for posts and pages. Adding and Frest v.2.1.1 Licence Key Aligning Images in WordPress The new editor comes with the following blocks, Download which you can use to add images to your posts and posts: Image Inline image Gallery Media & text Cover Let’s start with the very first and easiest block — Image.

Click Add new block or type / image in the record editor and paste the image block. Adding a new image block in WordPress post editor You will see three buttons inside an empty image block. You can download the image from your computer, select an already downloaded image from the media library, or insert the image by specifying the file URL. Then click on the «Upload» button and select the image that you want to nulled Download from your computer.

Once you select an image, WordPress will upload it to your media library and paste it into the appropriate block. Now you can use the toolbar at the top of your image, as well as some block settings in the right column. To align the image, you will need to use the toolbar at the top of it. The image block offers the following options for alignment: Align left Align center Align right Wide width Full width Aligning the image to the right or left edge will cause the text to be displayed on the side of the image.

Alignment to the center will cause the text to be torn — it will continue after the image. Selecting the «Wide Width» parameter will make your image wider than the text area, and the «Full Width» parameter will allow you to display the image in full width. How to align image next to text Usually, users are faced with the task of correctly aligning the image next to text content. The WordPress block editor allows you to do this using the Media & Text block. The block adds an area with two columns.

One column is reserved for images, and the other for text content. Just upload your image and then enter the text you want to display next to it. After adding the image and text, you can find more options for the block. You can change the width of the block, make it full-screen, change the position of the image and SNIP: Structured v.2.19.4.1 Data Plugin for The7 v.9.1.2.1 Download WordPress Download text. The image is automatically aligned depending on the height of the text in the column next to it. How to apply alignment to galleries in WordPress The WordPress Post Editor also comes with a block for adding image galleries.

With it, you can quickly display images in a grid of columns and rows. The Gallery block comes with similar alignment options in the toolbar. You can align the gallery block to the left, right edge, in the center. You can also make it wide or full screen. The basic gallery functionality in WordPress is pretty good.