As website owners and designers, we oftentimes need to showcase a list of information or steps in a process. Whether it’s a tutorial or the process of how your services work, displaying information in a step-by-step format can be super helpful for visitors. It is an effective way to communicate complex concepts or processes to your audience in a clear and concise manner. By breaking down information into smaller, more digestible pieces, you can make it easier for your audience to comprehend your message. This is especially important in tutorial-style content, where users need clear and structured content to complete a task or learn new information. With Elementor Pro, there are a variety of ways to easily implement and customize a user-friendly list or process for your website. By displaying information in such ways, you can increase engagement, reduce bounce rates, and improve the overall effectiveness of your content. In this blog, we will discuss when and where they are commonly used and will show you how to create them in Elementor Pro.
How to Use Elementor Pro’s Icon List
Elementor Pro’s Icon List widget is a great way to display a list of information or steps in an engaging and visually appealing way. The Icon List widget allows you to combine icons and text to create a dynamic list that is easy to follow. It is used for a variety of purposes, including showcasing features or benefits, listing services or products, and displaying bulleted lists. You can easily create eye-catching icon lists that will help engage visitors with your content and take action. Let’s take a look at how to create your own icon list with Elementor Pro.
- Open the page in which you want to create an icon list in with Elementor.
- Search “Icon List” in Elementor’s page builder and drag and drop the widget from the sidebar onto the page where you’d like.
- You will see a default list with icons and text. You can edit them by clicking on each one under the “Items” section in the Content tab of Elementor’s editor. We will be teaching you how to customize the icon list in the next section!
- As always, make sure to publish or update your page to save any changes.
How to Customize an Icon List in Elementor Pro
Elementor Pro’s icon list widget is simple and easy to use. With a variety of customization and link options, there’s plenty you can do with this widget. Just like every widget, there’s a Content and Style tab that allows you to make adjustments where you see best fit. Let’s take a look at what you’re capable of doing in these tabs.
Content:
- Layout: This is where you can adjust the layout of the icon list between default or inline. Default will display your list in a stacked format while inline will display your list next to one another.
- Items: Items is where your list and content will be displayed. This is where you can edit the text, icon and include individual links too.
Style:
- List:
- Space Between: The “Space Between” option lets you control the amount of space between the items in your list.
- Alignment: “Alignment” lets you adjust your list to be aligned to the left, right, or center of the web page.
- Divider: A “Divider” is what separates the items in your list. If selected, you have the ability to change its style, weight, width and color.
- Icon:
- Color: Here is where you can change the color of your icons. You will also be able to change the color of the icons when visitors hover over them
- Size: Adjust the icons size.
- Gap: “Gap” is how you adjust the amount of space between your icon and text.
- Horizontal Alignment: Adjust your icons to be aligned to the left, right or center.
- Vertical Alignment: Adjust your icons to be aligned to the top, middle or bottom.
- Adjust Vertical Position: Here you can change the vertical position of the icons and offset them to your liking.
- Text:
- Typography: Here is where you can change your text. You will have the ability to adjust it’s font, style, sizing, spacing and much more.
- Text Shadow: “Text Shadow” allows you to add a shadow behind the text in your list. You can adjust the shadow’s blur and direction.
- Color: Adjust the color of your text. You will be able to add a color for when text is hovered over as well.
How to Create a List with Elementor Pro’s Icon Box
Elementor Pro’s Icon Box widget is a powerful tool that is often used to display a list of information in an attractive and engaging way. The Icon Box widget allows you to add an icon, title, and description text, as well as a button if needed, making it easy for visitors to quickly scan and find the information they came for. They can be used in a variety of ways, such as displaying services, benefits, and steps in a process. With Elementor Pro, you have complete control over the design and layout of your icon boxes, allowing you to create visually appealing and informative displays that will capture the viewer’s attention. Let’s take a look at how to create a list with icon boxes.
- Open up the page you wish to edit with Elementor.
- Create a new container by either dragging and dropping a container from the Elementor page builder on the left-hand side of your screen. Or, you can create a new container by clicking the “Plus” icon at the bottom of your screen. If you’d like your list to display left-to-right then make sure the direction is set to “Horizontal”.
- In Elementor’s page builder, search “Icon Box” and drag and drop it into your new container.
- To get a second or third icon box, simply repeat the previous step or duplicate the icon box by selecting the icon box -> right-clicking the pencil in the top-right corner -> then select duplicate.
- Most importantly, make sure to publish or update your page once finished to save all of your changes.
Now that the basics are over, let’s jump into the creative side of Elementor’s icon box widget.
How to Customize an Icon Box in Elementor Pro
Customizing your icon boxes not only makes your website look more professional, but it can also help your website visitors digest the information your are presenting. Let’s take a look at what you’ll find in the icon box editor.
Content:
- Icon: This is where you change the icon to your liking. You have the ability to choose from a range of icons from Elementor’s icon library.
- View: Once you have selected your desired icon, the “View” option is where you can adjust how your icon is displayed. Default will display your icon as shown. Stacked lets you put a circled or squared background. Framed allows you to add either a circled or squared frame.
- Title: Insert the title of your icon box here.
- Description: You can include a description below your title here, but it can also be left blank if necessary.
- Link: You can add links to each individual icon box as well. You can also decide whether or not it opens in a new window.
- Icon Position: Here you can adjust the icons positioning to either the left, top, or right of the text.
- Title HTML Tag: You also have the ability to choose the HTML tag of your title.
Style:
- Icon:
- Hover: This is where you change the color of your icon when hovered over. You can also include an animation to the icon as well.
- Primary Color: Adjust the icon color.
- Spacing: Control the space between your icon and title/description.
- Size: Adjust the icon size.
- Rotate: If needed, “Rotate” allows you to rotate your icon to your desired look.
- Content:
- Alignment: Adjust the alignment of your icon box to the left, right, center or have it justified.
- Vertical Alignment: If the icon box position is to the left or right, here is where you can adjust the vertical alignment of your icon.
- Title:
- Spacing: Control the spacing between your title and description text.
- Color: Adjust the color of your title.
- Typography: Here is where you can change your text. You have full range when it comes to adjusting your title font, style, sizing, spacing and much more.
- Text Stroke: “Text Stroke” lets you add a stroke of color around your title.
- Text Shadow: “Text Shadow” allows you to add a shadow behind your title. You can adjust the shadow’s blur and direction.
- Description:
- Color: Adjust the color of your description text.
- Typography: Here is where you can change your description text. You have a variety of customization options when it comes to adjusting your title font, style, sizing, spacing and much more.
- Text Shadow: “Text Shadow” allows you to add a shadow behind your description text. You can adjust the shadow’s blur and direction.
How to Change the Color of an Elementor Icon Box
Changing the background color on your widgets can be a great way to grab the audience’s attention and create visually appealing content. It does fall under the “Advanced” category in Elementor’s editor, however we want to show you how to do so in this blog. Be sure to check out our other blogs where we dive into the “Advanced” tab for Elementor Pro widgets. Now, let’s take a look at how to add color to your icon box’s background.
- Select the icon box you’d like to edit.
- In the Elementor editor on the left-hand side of the screen, select the “Advanced” tab.
- Scroll down until you see “Background”.
- Now, you will have the option to choose a background color as well as include a color for when the box is hovered over.
Conclusion
Elementor Pro’s icon box widget is a great tool for creating visually appealing and informative lists on your website. By customizing the content and style of each box, you can create a unique way to present information to your users. Whether you’re highlighting the benefits of your services or displaying product features, the icon box widget is a versatile tool that can adjust to your needs. With its easy-to-use interface and customization options, Elementor Pro makes it simple to create to professional-looking icon boxes.
