Images block

  • Add a featured image: you can insert the Images block between two Text blocks to add visual appeal to the content.
  • Banner image: insert this block as a custom banner in addition to Call to action blocks.
  • Works well with other blocks: you can insert Image blocks between other functional blocks such as BookingContact, or About.

 Here’s how to add the Image block:

  1. Choose a location where you want to add your contact details and/or contact forms and click on the Add a block + button.
  1. In the Block Library, navigate to the Images section in the menu on the left and click on the block.  

Screen_Shot_2020-07-28_at_11.04.55.png

Customizing block settings

You have several options to make the Images block truly yours. To activate the control panel, click anywhere on the block and then click the Block Settings icon:

Screenshot_2021-06-08_at_23.43.19.png

In the Layout section, you can fully switch the block layout or hide some of the block elements. To fully switch the block layout, simply click the respective button and select a new block content layout:

userlmn_c75e18d2c6f72e92bbc5be9dcb74674f.png

To hide a specific block element (for example, if you want to remove a button), remove the blue tick next to its name.

In the Appearance tab, you can make the following changes:

  • Block style: Change the color scheme of the block.
  • Block spacing: Change the whitespaces on the top and bottom of the block.
  • Background settings: Add a black & white filter to the background of this block.
  • Media settings: Add a black & white filter to the video within this block.

Once you are done customizing block settings, click Save.

Editing the image

To replace the demo images in the Image block with your own or stock photographs:

  1. Hover the demo image in the block.
  2. Click the Edit image icon.
  3. In the Image resizer tool, click on the"arrow" Upload Image icon.
    Screen_Shot_2020-01-29_at_12.07.05.png
  4. Choose the new image from your computer.
  5. Click Open in your browser window. The image will open in the Image Resizer window.
  6. Resize or refocus the image using the round lever in the Image Resizer tool.

    Screen_Shot_2020-01-29_at_12.10.25.png
  7. Click the "check" Submit icon and your image will be inserted on the page.

    Screen_Shot_2020-01-29_at_12.12.02.png

Editing the image

Hover over the image block to activate the Edit Image menu. Right-click your mouse or long-press on the trackpad to access the menu:

Screen_Shot_2020-08-12_at_15.08.51.png

Read these tutorials to learn how to:

Make images clickable

Add image alt text

Need to add more images?

If you would like to display more Images blocks, simply duplicate them! Here’s how you can do it:

  1. Hover over the top of the block to trigger the appearance of the dialog box.
  2. Click on the Duplicate icon. 
  3. The identical block element will appear below the original one. 

Deleting the Image block

If you would like to delete the Images block, here’s how you can do it:

  1. Hover over the image in the Image to trigger the appearance of the dialog box.
  2. Click on the Delete icon to remove the image. 

This action can be reversed by pressing the Undo button or Ctrl-Z on your keyboard. 

Other helpful articles

Choosing the image format

Adding image alt text

Recommended image sizes

Using free stock images on your website

Was this article helpful?
0 out of 0 found this helpful