Image block

  

Text and image are the two essential elements of a website. The choice and the position of the images have a huge impact on the impression your website makes on internet users. Therefore, the Image block is the best component to attract your website visitors.

The options of the Image block

It’s easy to add an image to the SiteW editor: you just need to drag and drop an Image block on the page and then select the image file in the SiteW file selector.

Image format

The SiteW editor supports many image formats: JPG, PNG, GIF, SVG, WebP (and BMP even if this format is inadvisable on the internet).

Crop the image

The following video shows the different available options to fit the image to the size of the Image block:

Image weight

To optimize your website load time, our system uses the “lazy loading” technic, and our servers duplicate your files at the exact size of your blocks.

Click on the image

When you click on the Image block, several actions can be launched:

1. Full screen on click: the image is displayed in full-screen size above the page (cf. the video above)

2. Images on full screen: instead of displaying the image in full-screen size, this button enables you to choose one or several images that will be displayed as a full-screen gallery by clicking on them 

3. Choose a link: it enables you to add a link to the image. You can choose between the different types of links that are available in our editor (website page, external URL, downloadable file…).

Image size

Our editor ensures the image optimization according to the block size. Regarding the full-screen display, if the image is smaller than the screen, it’s displayed in its original size. For the size of full-screen images, it would be better to be based on a Full-HD resolution (1920×1080).

Mouseover image

Two effects are available during image mouseover:

1. Mouseover image: another image replaces the current one

2. Mouseover menu: a menu displays over or near the image

Don’t forget mobile users!

On a touch-sensitive screen, mouseover is no more working. The mouseover effects just affect browsing on desktop. Therefore, the sections of a mouseover menu must be available thanks to other ways (menus, buttons, links…).

The video below shows an example of these mouseover effects:

Add a filter to the images

The Design tab of the Image block offers filters you can add to your images (blur, contrast, greyscale…) and different shapes (curve, circle, star…):

To summarize

You have many possibilities with the Image block. Finally, the most difficult thing will probably be to choose carefully the images that best illustrate your website. To go further, you can also use the Illustration block or the Gallery block.