Widgets

Icon Box

Step-by-Step Tutorial on Using the Icon Box Widget of Zyre Addon

The Icon box Widget of Zyre Addon combines functionality with style, ensuring your website is both informative and visually captivating. With sleek layouts, unique effects, and complete customization, it transforms simple lists into impactful design elements.

Learn How To Use Icon Box Widget:

Exploring the Features of Icon Box Widget

Step 1: Drag the widget

From the left panel, search or choose the Icon Box of Zyre Addon and simply drag it into your desired section.

Step 2: Content tab

General Content:

  • Icon Box Style : You can choose a predefined style from here
  • Icon : Pick an icon or SVG.
  • Title : Set a title.
  • Title HTML Tag : Choose the HTML tag for title.
  • Subtitle : Set a subtitle.
  • Description : Add a description.

Button Content:

  • Text : Add text of the button
  • Link : Add a link to the button
  • Icon : Set an icon (including SVG)
    • Icon Position : Adjust the icon’s position (before/after text)
    • Icon Spacing : Control the space between icon and text
  • Button ID : Assign a unique ID to the button.
  • Custom Class : Add custom CSS class.
  • Onclick Event : Set a JavaScript action on button click.

Step 3: Style tab

In the Style section, you can customize the Box, Icon, Content, Title, Subtitle, Description, Button, Button Icon — but make sure you have added them first.

Box:

  • Spacing : Adjust spacing between media icon and content.
  • For both normal and hover states:
    • Background Type : Set unique background colors or gradients for normal and hover states. Explore full background settings here.
    • Border Type : Define border style, width, and color for both states.
    • Box Shadow : Apply drop shadow, with separate settings for hover interaction.
  • Border Radius : Apply rounded corners to each item.
  • Padding : Add inner space.

Icon:

  • Icon Size : Adjust the size of the icon.
  • Icon Position : Set the icon position (left, top, right)
  • Horizontal Alignment : Position the icon horizontally.
  • For both normal and hover states:
    • Icon Color : Set the icon color.
    • Background Type : Set background colors or gradients.
  • When hover over the Box : Enable hover style only when hover over the Box.


Icon Border

  • Border Type : Define border style, width and color.
  • Border Radius : Control corner roundness.
  • Box Shadow : Apply drop shadow of the icon box.
  • Padding : Add inner spacing of the icon box.


Icon Wrapper

  • Background : Set the background color of the full icon area. Explore full background settings here.
  • Border Type : Define border style, width and color.
  • Border Radius : Control corner roundness.
  • Padding : Add inner spacing of the icon wrapper.
  • Box Shadow : Apply drop shadow of the icon wrapper.

Content:

  • Content Spacing : Adjust spacing between content and button.
  • Content Alignment : Set text content alignment.
  • Border Type : Define border style, width and color.
  • Padding : Adjust inner spacing around content area.

Title:

  • Typography : Adjust font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing. Explore full typography settings here.
  • Text Color : Set the Title text color.
  • Margin : Add outer spacing of the title.

Subtitle:

You’ll find the same design options for the Subtitle as in the Title — giving you full freedom to style it just the way you imagine.

Description:

You’ll find the same design options for the Description as in the Title — giving you full freedom to style it just the way you imagine.

Button:

  • Width : Set the overall button width.
  • Height : Define the button height.
  • Justify Content : Control the alignment of button content.
  • Typography : Adjust font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing. Explore full typography settings here.
  • Text Shadow : Apply shadow effect to the button text.
  • For both normal & hover States:
    • Text Color : Set button text color
    • Background Type & Color : Choose solid, gradient, or image background.
    • Box Shadow : Add drop shadow effects for both normal and hover states.
  • Border Type : Define border style, width and color.
  • Border Radius : Control corner roundness.
  • Padding : Control inner spacing of the button.
  • Margin : Adjust outer spacing around the button.

Button Icon:

  • Icon Size : Adjust the size of the button icon.
  • Background Width & Height : Define the dimensions of the icon container.
  • For both Normal & Hover States:
    • Icon Color : Choose the icon color.
    • Background Type : Set background colors or gradients.
  • Border Type : Define border style, width and color.
  • Border Radius : Control corner roundness.

Step 4: Advance tab

If you want to customize the layout, backgrounds, or make your design more engaging, head over to the Advanced section. The Advanced panel is a default Elementor feature. Check out this document to learn more about its features.

Finally, hit the Publish button and watch your stunning Icon Box come to life on your webpage!

You’re all set!

Share: