Image Block

The Image block displays a single full-width image on the page. Here’s how you can use the Image block: 

• Add a feature 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 Booking, Contact, 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.

2. In the Block Library, navigate to the Image section in the menu on the left and click on the block.  

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 will appear. You can change the following setting:

• 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.

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. Choose the new image from your computer.
4. Click Open in your browser window.
5. Crop the image using a pre-formatted grid to choose a rectangular area of your image. The grid helps you choose the fragment of the image that would look best in this block and on all devices. 

6. Click Submit and your image will be inserted on the page.

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 Delete icon to remove the image.

 

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