Icons play a crucial role in improving website readability and user experience. If you’re using Bricks Builder, you might be wondering how to create a custom icon list that fits your design needs.
The good news? With the Max Addons Icon List element, you can effortlessly build a fully customizable icon list without writing a single line of code.
In this guide, I’ll walk you through the entire process of creating a custom icon list using Bricks Builder and Max Addons.
Why Use the Icon List Element from Max Addons?
Before we start, let’s quickly address a common query that you might have: Why should you use the Icon List element from Max Addons?
Icon List element from Max Addons for Bricks Builder is a powerful and flexible element that enhances your website’s design while improving readability. Unlike plain bullet points, Icon List element lets you create well-structured lists using icons, images, or text-based symbols.
One of the best things about the Max Addons Icon List is its extensive customization and styling options—you can:
- Choose from different icon types: Use standard icons, images, or text symbols to match your design.
- Add custom links: Easily link to internal pages, external URLs, categories, or taxonomy items.
- Highlight important items: Use the Highlight Label feature to draw attention to key points like best-selling features or important notices.
- Style every aspect: Customize colors, typography, backgrounds, padding, margins, borders, and more to ensure the list blends seamlessly with your website.
- Separator options: Add solid, dashed, or dotted separators to improve content organization.
Now that you know the key features of the Icon List element, let’s quickly proceed to our tutorial!
Create a Custom Icon List Using Bricks Builder and Max Addons
Step 1: Install and Activate Max Addons
Before we proceed, make sure you have installed and activated Max Addons on your WordPress website.
Step 2: Create or Edit a Page
Once you activate the addon, the next step is to decide where you want to place your custom icon list.
If you’re working on a new page, go to Pages >> Add New, enter a title, and save it as a draft.
If you want to add the icon list to an existing page, simply go to Pages >> All Pages and find the page you want to edit.
Step 3: Add the Icon List Element
Once your page is ready, click the EDIT WITH BRICKS button. This will open the Bricks Builder editor, where you can design your page.
Inside the editor, search for the Icon List element in the left-hand Elements Panel. Once the element appears, add it to your page.
Check the “Max” tag on the icon to confirm you’re using the Max Addons element.
Step 4: Configure Icon List Items
Once you add the element, next is to add items to your list. Each list item consists of an icon, text, and a link. You can choose a pre-designed icon from the Icon library, use an image or add the text.
You also have full control over link settings. Whether you want to link to a custom URL, an internal post/page, a taxonomy, or a category, you can do it directly from the settings panel.
If you want to emphasize a specific list item, you can enable the Highlight toggle and define a custom Highlight Label. This feature is perfect for showcasing key benefits, best-selling products, or featured content.
Step 5: Customize the List Items’ Appearance
Once your items are in place, it’s time to style them. To make your list visually appealing, you can
- adjust margins and padding,
- choose different background colors for odd and even items
- add borders for clean design
Step 6: Customize the Highlight Label
If you’ve enabled the Highlight Label, you can customize it further to ensure it stands out. The options allow you to:
- Change the label background color to make it more eye-catching.
- Adjust the label padding and border styles for a well-structured look.
- Modify typography settings like font style, size, and weight.
- Customize the content background and text color to match your website’s theme.
Step 7: Customize the Icon
Icons are a key part of the list, so it’s important to style them correctly. Bricks Builder gives you complete control over:
- Icon Size & Color: Adjusting these helps ensure they fit seamlessly with your design.
- SVG Customization: Set the height, width, stroke width, and stroke color.
- Image Adjustments: If using an image as an icon, tweak the object fit, height, and width for better proportions.
- Text Styling: If you’re using text instead of an icon, alter the typography settings to match your website’s branding.
Step 8: Customize Icon List Text
In the settings panel, you can adjust the margin, select the appropriate HTML tag (H1, H2, H3, P, etc.), and modify the typography settings (font size, weight, letter spacing, etc.).
Step 9: Style the Separator (Optional)
If you want to add extra clarity between list items, you can enable the Separator toggle. You can choose from different styles like solid, dotted, dashed, double, and more.
You can also adjust the separator’s width, height, and color to ensure it matches your design seamlessly.
Next Read: How To Create a Pricing Comparison Table in Bricks Builder
Creating a Custom Icon List in Bricks Builder with Max Addons is a simple yet powerful way to improve your website’s readability and design.
With the easy options to customize icons, text, spacing, and even highlights, you can create interactive and functional lists.
Next, you might be interested in learning how to create a pricing comparison table in Bricks Builder.
Max Addons offers 50+ creative elements to enhance your website-building process using Bricks Builder. These elements can streamline your workflow, saving you time and resources. Are you ready to elevate your website creation journey? Get Max Addons today!
What do you think about this tutorial? We’d love to hear from you—drop a comment below!
