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 Images block:

  1. Choose a location where you want to add the Images block and click on the Add a block + button.
  2. 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:

  • Replace image: if you choose a block with a background image, here you can edit or replace it
  • 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

You can replace demo images with your own photographs. Here’s how you can do it:

  1. Click on any demo image in your block. In the menu that appears, click Upload image.
  2. In the drop-down menu, choose one of the options: to use a file from your device or to use a free stock image.

For more information, visit this tutorial: Adding images.

You can also zoom in and out of the image using the Crop tool:Screenshot.png

Move the toggle to zoom in and out of the image you can also move the image up, down and to the sides by dragging and dropping it:

You can also assign a click-action to an image and add alt text. Read these tutorials for more information:

Need to add more images?

If you would like to display more Images blocks, you can duplicate them as follows:

  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. 

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