A graphical representation of the concept can be used to improve the user experience and user interface since it makes it easier for users to navigate the interface and communicate information more effectively. Here comes AI Addon with Icon elements to provide visual cues and improve the overall look and feel of your Website.
How to set up the Icon:
Step 1: Search and find Icon in the search box under the Elements Tab. After that, easily drag and drop the widget wherever you want inside the Elementor section.
Step 2: This is how the element will look after inserting Icon.
How to set up content for the Icon?
Hover your mouse pointer over the icon image under “Edit Icon” to choose an icon from the icon library or to upload an SVG image for an icon. Additionally, the icon’s view can be altered in three different ways. Click the menu and choose the appropriate option, such as Default, Stacked, or Framed, to alter the display. Stacked View lets you place your Icon above a layer and Frame lets you frame the stacked icon.
Shape lets you change simple geometric shapes like Squares and Circles. Place the required URL in the Link section. So clicking on the Icon will redirect you to the link. Using the Alignment tab, choose the location of the icon in the widget and preview how it will be displayed on the desktop/mobile/Tablet.
How to add style to the Icon?
Once the content part is completed navigate to the Style tab to design the icon. AI Addon lets you customize the Icon in normal and hover modes.
In Normal mode, you can customize Icon Color, Background Color, Size, Padding, Border Radius, Box Shadow, and Outer Margin. Also, rotate the icon for your convenience, and in some cases, rotating an icon can be used to represent a specific concept or idea.
In Hover Mode, it will provide further customization options to customize the Background color, color of the icon, size, padding, radius, and Box shadow while hovering and it also offers a variety of animation effects. You can add these effects to an icon by choosing your favorite from the Hover Animation dropdown menu.
We’ve set up a Live demo that showcases the different Icons available in the AI Addon. We encourage you to take a look and see what catches your eye.