3 ways to use the Image block to bring your content to life

An image is a block with lots of possibilities. Get to know the options of its settings, they will help you to create attractive content.

Image cards as navigation

An image set as Poster will display text over the image. You can use this to create cards, for example.

The cards allow you to present a large amount of information in a digestible way. Each box can also link to a separate page with detailed information. A thumbnail image preview with a caption allows people to find the information they are looking for and click through to more detailed information.

You can change the layout of the images and use different aspect ratios to create mosaics.

The advantage of the cards is their flexibility. You can use different sizes and arrangements. By combining different sized boxes you can easily create a visual hierarchy.

TIP: You can add a link directly in the image layout to make the entire area clickable. This will make the interaction more pleasant for visitors, as they won't have to click exactly on the link to get to further information.

Image as an icon

Icons are another way to capture the user's attention and make content more visually interesting. Icons are easily recognizable, don't need to be translated, can complete the brand and are also easier to click.

However, only a small number of icons are universal enough to be understood in any situation without further explanation. That's why we often use them with descriptions. To work with icons, use the icon settings.

This way, the content will stay together even on smaller screens and always display correctly.

Alternating photos and text

The zigzag arrangement of content reflects one of the ways people scan the content of a page. This is the basis for places to put important page elements. The pattern also creates a rhythm that helps grab the visitor's attention.

It is based on the Z patter, which assumes that people first scan the content horizontally from left to right, then point diagonally down to the left, and then to the right edge. This creates the imaginary letter Z.

This layout is particularly suitable for pages with smaller amounts of text that are intended to emphasize a few key points. 

Try what you have just learned