How do you use the Image block in Loopia Sitebuilder?

The Image block (Images) shows a single full-width image on the page.

Ways to use the Image block:

  • Add a featured image: insert the Image block between two Text blocks to add visual appeal to your content.
  • Banner image: use this block as a custom banner alongside Call to action blocks.
  • Combine with other blocks: insert Image blocks between other functional blocks such as Booking, Contacts or About us.

Adding the Image block

  1. Choose where you want the block and click Add a block (+).
  2. In the Block library, select Images to see the ready-made layouts.
  3. Click the layout you like to add it to your page.

Customising the block settings

Click the block, then the Block settings icon. The menu has two tabs: Layout and Appearance.

In the Layout tab you can switch layouts and choose which elements appear – remove the blue tick next to an element to hide it.

In the Appearance tab you can change:

  • Replace image: edit or swap the background image, if the block has one.
  • Block style: the block’s colour scheme.
  • Block spacing: the space above and below the block.
  • Background settings: add a black-and-white filter to the block background.
  • Media settings: add a black-and-white filter and an overlay to the image or video in the block.

Click Save when you’re done.

Editing the image

You can replace demo images with your own photos. To change the Image block’s background image, hover over the block and click the Edit image icon in the control panel.

Duplicating the Image block

  1. Hover over the Image block to activate the control panel.
  2. Click the Duplicate icon.
  3. An identical block appears below the original.

Deleting the Image block

  1. Hover over the Image block to activate the control panel.
  2. Click the Delete icon. You can undo this with the Undo button or Ctrl+Z.
Was this article helpful?

Related Articles