White Label End User Guide
Markdown FilesDeveloper DocsDeveloper Login
  • Quick Start Guide for Content Builder
  • Builders
    • Design Builder Overview
    • Page Builder
      • Internal Links for Page Navigation
  • Manage Files
    • File Manager
      • How to Move Files
  • Design Tools
    • Undo, Redo, and History
    • Mobile Optimization Options
    • Mobile Design Mode
    • Configuring Settings
    • Borders
    • Padding
    • Hover Effect for Buttons
    • Content Area Padding
    • Line Height
  • Dynamic Content
    • Display Conditions
  • Content Blocks
    • Table
    • Forms
      • Form Layout Customization
    • Video
    • Icons
    • GIF Animations and Animated Stickers
    • Custom HTML
    • Paragraph and List Content Blocks
    • Titles
    • Menus
    • Images
    • Dividers and Spacers
    • Letter and Paragraph Spacing
  • Reuse Content
    • Saved Rows
    • Hosted Saved Rows
      • Glossary of Common Terms
    • Synced Rows
  • Structure Content
    • Row vs. Content Block Selection
    • Row Properties
    • Column Management
  • Design for any Language
    • Multi-language Templates
  • Preview Options
    • Preview Designs
    • Dark Mode Preview
  • Team Collaboration
    • Co-editing in the Builder
    • Content Locking
  • AI Tools for Content Creation
    • Apply a Brand Tone
    • AI-Generated Images
    • AI-Generated Metadata
    • Bulk Generate Alt Text with AI
    • AI Writing Assistant
    • Automatic Translations
Powered by GitBook

GitHub

  • Edit on GitHub
On this page
  • Overview
  • How to Use Icons
  • Customizing Icon Properties

Was this helpful?

Export as PDF
  1. Content Blocks

Icons

Last updated 1 year ago

Was this helpful?

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.