The Icon Box block allows you to combine a Font Awesome icon with a heading and descriptive text in a single, unified layout. This block is ideal for highlighting features, benefits, services, or any content that benefits from a visual symbol paired with a short explanation.
With full control over icon size, color, alignment, spacing, and typography, the Icon Box block is one of the most versatile blocks for building feature sections and value proposition layouts.
Adding the Icon Box Block to Your Pages
Follow these steps to add an Icon Box block to your SeedProd page:
Step 1: Add the Block
Under Design > Blocks, drag and drop the Icon Box block into the desired section of your page.
Step 2: Configure Content Settings
Once added, click on the Icon Box block to open its settings. The Content tab is organized into two sections: Icon/Image and Text.
Icon:
- Icon: Click the icon picker to browse and select from thousands of available Font Awesome icons.
- Color: Set the color of the icon using the color picker.
- Size: Set the size of the icon from 10 to 150px using the slider.
- Icon Gap: Set the spacing between the icon and the text content from 10 to 150px.
- Alignment: Set the horizontal alignment of the entire Icon Box within its section — Left, Center, or Right. Supports per-device values for desktop, tablet, and mobile.
- Vertical Alignment: Set how the icon aligns vertically relative to the heading and text — Top, Middle, or Bottom.
Text:
- Header Text: Enter the heading for your Icon Box using the rich text editor. Supports bold, italic, underline, strikethrough, and inline links.
- Level: Choose the HTML heading tag for the header — H1, H2, H3, or H4 — to maintain proper document structure.
- Text: Enter the body description text for your Icon Box. Supports basic rich text formatting including bold, italic, underline, strikethrough, and links.
Step 3: Customize the Design
In the Advanced tab, you can customize the typography, colors, and spacing of your Icon Box block.
Styles:
- Header Typography: Fine-tune the heading font family, font weight, line height, letter spacing, and text transform. Supports per-device values for desktop, tablet, and mobile.
- Header Color: Set the text color of the heading using the color picker.
- Typography: Fine-tune the body text font family, font weight, line height, letter spacing, and text transform. Supports per-device values for desktop, tablet, and mobile.
- Color: Set the text color of the body description using the color picker.
Spacing:
- Margin: Control the outer spacing around your Icon Box block (Top, Right, Bottom, Left). Supports per-device values for desktop, tablet, and mobile.
- Padding: Adjust the inner spacing within your Icon Box block (Top, Right, Bottom, Left). Supports per-device values for desktop, tablet, and mobile.
Attributes:
- CSS ID: Displays the auto-generated unique identifier for your Icon Box block, created automatically by SeedProd for custom styling or JavaScript targeting.
- Custom Class: Add custom CSS classes to apply specific styles from your theme or custom CSS.
- Custom Attributes: Add any HTML attributes to the block wrapper element. Enter each attribute on a new line using the format: attribute-name|value.
Device Visibility:
- Hide on Desktop: Hide the Icon Box block on desktop screens.
- Hide on Tablet: Hide the Icon Box block on tablet devices.
- Hide on Mobile: Hide the Icon Box block on mobile devices.
Animation Effects:
- Entrance Animation: Choose an animation effect that plays when the Icon Box block scrolls into view, such as Bounce, Fade In, Zoom In, Rotate In, and many more.
Step 4: Save Your Changes
Once you have finished configuring the Icon Box block and customizing its appearance, make sure to save your work.
You’ve successfully added an Icon Box block to your page! Icon boxes are one of the most effective ways to present features, benefits, and services in a scannable, visually engaging format. Experiment with icon choices, heading levels, and typography settings to create icon boxes that align with your brand and communicate your value clearly.