Image block editing with the new Design editor

Let’s start with uploading the Image. It’s pretty simple – after you drag the image element into the block, the image library will pop out.

In order to import your own image, press ‘Browse’ on the left bottom corner or simply drop the image file to the upload section.

By the way, the Image Library has integrations with ‘Giphy!’ and ‘Unsplash!’, you can also get images and GIF from them:

After you’re done with uploading the image, there are two main ways to style it –  via the ‘Content’ and ‘Customize’ options.

The content part consists of the ability to Replace the image itself, to change where it links to and to change the alternative text. The alternative text shows up when the mouse cursor is dragged on the image.

The ‘Customize’ part has way more utility. You can adjust the image size, the corner type, and also the horizontal and vertical spacing in the block settings.

There’s also an advanced mode which, in addition, will allow you to adjust image alignment, corners by pixel, to edit the column vertical alignment and to change the background color.