Create an "Image" block.

This tutorial will show you how to put an image in your page.

Click the "+" button

When you are in the "Layout" tab, there is a big blue button with a +. Click this button to create a new block.

Créer un bloc Image

Then you have to choose the block type.

When you click the plus button, a window appears with a choice of block type. In this tutorial, we will talk about the "Image" block. Click the "Image" button to create the block.

Créer un bloc Texte et photos

Enter your image.

You can now enter your image. Click the "Browse" button to fetch an image.

Créer un bloc Image

Choose your image.

Now you have to choose your image. You can either take an image already in the system (images in the library), or add an image from your computer. For the example, we will add a new one from our computer. Then click on the blue button "Upload one or more file(s) from your computer".

Créer un bloc Image

Select your image.

You can simply drag your image into the zone, or click the "Manually select Files" button. Once the image has been chosen, the image will be uploaded to the server. Add a title, which you can use in the future if you are looking for this image in the library. For example, we will call it "Couple à vélo". Then click the "Send" button.

Créer un bloc Image

Options of the "Image" block

There are some possible options for an "Image" block. You can crop the image here, by clicking on the "Crop" tool.

You can also add a link. If you click "Yes", the image will be clickable, and you have 2 choices for this link.

  • "Enlarge the image of the block", which will make the image appear larger on top of the site.
  • "Link to a web page" will direct the site user to the web address listed in the "URL" field just below.

The "Inner Margin" fields are not used for the image block.

The "Outer Margin" fields are used to put a white outline around the block. The thickness of this contour can be adjusted for each side. In fact, this margin will still be inside the block, but we will have the impression that it is outside. This margin will make the size of the image smaller in the block.

You also have the option to display or not the image on the mobile version of the site, ie on the version for phones.

And finally, you can add a rollover effect by clicking yes in the "RollOver" field.

Créer un bloc Image

Position your image.

Now you only have to change the size of the block and move it to the desired location. If necessary, you can click on the image to crop it.

Créer un bloc Image

Check the result on the online site.

When adding content, be it pictures or text, videos, no matter what kind of content, it's important to go check the result online on the real site. Take note that it is better to have good quality picture, and make sure you have the copyrights!

Créer un bloc Image