1. Home
  2. Tutorials
  3. Pages
  4. Personalise the image style

Personalise the image style

Easily add styles to your images to display them differently. Apply different effects to your images, choosing from polaroid effect, rounding or display your image in a round. You also have the freedom to apply the class of your choice on an image, but it is an advanced mode of use.

Let's see in this tutorial how to customize your images in the pages.

Perfect for responsive websites

 

This option works only if you have applied a responsive theme if you have not applied a responsive theme we encourage strongly to do it now. We have simplified the process to integrate these image classes easily on your images!

To test this option, we are going to do so in a Page, but you can apply styles to all images.

 

Bird02 green

Image style = Polaroid

Bird03 blue

Image style = Round

Bird01 yellow

Image style = Rounded corners

Add styles to an image

Let's see how to add a picture to your pages or blog articles.

  • If the image is on your computer, it must be downloaded to your file storage space first
  • You will be prompted to fill in some information, and then you will have the choice to select the style you want to give to your image (Round, Rounded corners or Polaroid).
  • Insert your image and it's over! The styles can be added from both from the Image widget and from the visual editor.

We encourage you to use the image widget.

Select the style

For users that can do CSS

From the moment you have the possibility to modify the HTML code, it is possible to apply a class on an image.

In Settings> Design> Personalise you will scroll to the bottom to find a section dedicated to additional CSS and declare your class or ID.

You can then insert this class in the "style" field from the Image widget as the "Advanced" mode allows you to add a custom style (class or ID).

Personalize image