Icons

Overview

The addition of the icon content block in the builder has made it more convenient to use text and images together, offering a cohesive way to enhance your designs. Icons serve as small, expressive elements that can accentuate your content, making the layout more interactive and visually appealing. Icons can replace or accompany traditional bullet points for a more visually compelling list.

How to Use Icons

To start incorporating icons into your project, follow these steps:

  1. Drag an Icon Block: Drag an icon content block into the row where you'd like the icon to appear. A placeholder icon will initially fill the block.

  2. Access Icon Options: Click on the placeholder to open the icon customization options in the sidebar.

  3. Add or Replace Icon: Click 'Add new icon' to insert a pre-loaded icon into the builder stage. Alternatively, you can change the existing icon by clicking the 'Change image' button, which will open your file manager.

  4. Image Editing: Should you need to modify your icon, the 'Apply effects & more' option allows access to an image editor.

  5. Additional Settings: Under 'More options', you'll find settings that are unique to the icon content block, like icon text and positioning options.

Customizing Icon Properties

You can customize the following icon properties:

  • Icon Text: Entering text into the 'Icon text' field will add a text label near the icon. A new field in the sidebar will appear, giving you the option to adjust this text.

  • Text Position: You can specify where the text should appear relative to the icon—above, below, or to the sides—using the 'text position' dropdown menu.

  • Reorder Icons: If you've included multiple icons, you can easily rearrange their order by clicking and dragging them.

  • Icon Size and Spacing: Two specific settings allow you to resize the icons and set the space between them.

  • Additional Settings: These are standard settings you'll find in other content blocks, like padding, border, alignment, etc., and apply to the entire content block.

Last updated