Use Icons in Your Template

When designing a template, several layouts can be created by combining icons or small images, often with some copy. Other designs may require to have a set of images, e.g. logos, without the constrictions of row structures.

Here are a few layout examples created with the Icons block to give you an idea of how it can be used:

Properties and star ratings

Logos

Bullet List

 

How it works

You will find "Icons" in the "Content" panel. Drag it into your design to get started.

In the Content properties section of the editor sidebar, click on Add new icon to add the first icon for your collection.

 

Then, click on Change image to select an image from the file manager.

Once done, you may edit the image with our image editor. Repeat this process until you complete your icon collection.

 

Style icons

Click on More options to create an accompanying section of text that you can position on top, bottom, left, or right of the icon.

 

From this panel, you may also add a link for the icon and the image's alternate text.

If you need to reorder the collection, drag the icon box in the content properties area.

 

Scrolling down to the properties, you will see a few functions that are specific for Icons.

  • Icon size (16, 32, 64 and 128px)
  • Icon spacing (i.e. spacing between icons, from 0 to 20px)
  • Icon padding (padding applied to each icon)