Image block

  • Add a featured image: you can insert the Image 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 Image section in the menu on the left and click on the block.  

Screen_Shot_2020-07-28_at_11.04.55.png

 

Customizing the Image block

Insert the block as described above and hover over any element to bring up the dialog box. Click on the “gear” Settings icon and the Block Settings menu.

You can change the following settings in the Appearance tab:

  • Full-screen: when you tick this option, your image will display in its full size, filling the block with no margins left on either side.
  • Add B/W filter: Easily make the image black-and-white:

Screen_Shot_2020-07-28_at_11.09.31.png

Once you are done customizing the Block Settings, click Save to confirm the changes.

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 Image blocks, simply duplicate it! 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 Image 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. 

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