Icon Box Widget Tutorial

Intro

Elementor Icon Box widget for Elementor Page Builder lets you show a short brief about the services you provide, together with a title and icon. Add a call-to-action with an external link that shows the full details of each service.

Click here to check Premium Icon Box Widget demo.

Requirements:

  • You will need Premium Addons PRO plugin installed and activated on your website.
  • Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
  • Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Elementor Icon Box

Elementor Icon Box Widget
Elementor Icon Box Widget

Key Features – Elementor Icon Box

  • General
  • Icon
  • Title
  • Description
  • Link
  • Back Icon

1. General

  • Enable Mouse Tilt: Enable tilt effect for the icon box on mouse hover.
  • Reverse: Reverse tilt effect direction.
Elementor Icon Box Widget General Settings
Elementor Icon Box Widget General Settings

2. Icon

  • Icon Type: Select or upload a custom image via the Media Library, select from a list of Font Awesome Icons or paste Lottie Animations JSON URL.
  • Loop: Enable loop to run the animation infinitely.
  • Reverse: Reverse animation direction.
  • Icon Size: Adjust the icon size in pixels or em.
  • Hover Animation: Select between the following hover animations:
    • None
    • Pulse
    • Rotate
    • Buzz
    • 3D Rotate
    • Drop Shadow
    • Wobble Vertical
  • Icon Position: Select between left, center and right.
  • Vertical Alignment: Select between Top, Middle or Bottom.
Custom Image Icon in Elementor's Icon Box Widget
Custom Image Icon in Elementor’s Icon Box Widget

2. Title

  • Title: Enable or disable a title that is visible below the icon.
  • Title: Add the title text.
  • HTML Tag: Select which tag to display the title with. Choose from H1 to H6 where H1 is the largest and H6 is the smallest. The default is “H3”.
  • Label: Add small text beside the title.
Elementor's Icon Box Widget Title
Elementor’s Icon Box Widget Title

3. Description

  • Description: Enable or disable the description.
  • Description: You can add your description directly in the Richtext editor. In the editor, you can edit the text visually or with code, and add images from the Media Library.
  • Alignment: Align the text to the left, center or right.
Icon Box Widget for Elementor Description Settings and Controls
Icon Box Widget for Elementor Description Settings and Controls

4. Link

  • Link: Enable or disable a link.
  • Whole Box Link: Make the whole box clickable.
  • Keep Button Link: Enable it will keep the button link showing even when the whole box is linked.
  • Text: Enable or disable a clickable link and it’s link text.
  • Position: Select button position left, right and bottom.
  • Vertical Alignment: Select button position vertically.
  • Icon: Enable or disable a clickable icon:
    • Select from a list of Font Awesome icons.
    • Position: Before or after the text.
    • Size: Adjust the icon size in pixels or em.
  • Link Type: Select an existing page, or enter a custom URL.
Elementor Icon Box Link Settings and Controls
Elementor Icon Box Link Settings and Controls

5. Back Icon

  • Show Back Icon: Enable or disable a second copy of the icon that was selected in the Icon option. The icon is larger and visible behind the content as a background.
  • Horizontal Offset: Adjust the icons horizontal position in pixels, em or %.
  • Vertical Offset: Adjust the icons vertical position in pixels, em or %.
  • Hover Effect: Enable or disable a hover effect that is applied to the icon.
Elementor Icon Box Back Icon Main Settings
Elementor Icon Box Back Icon Main Settings

Style

  • Icon
  • Title, Description and Link
  • Inner Container
  • Outer Container

1. Icon

Adjust the style settings for the normal and hover status respectively.

  • Color: Select a color for the icon.
  • Background Color: Select the background color behind the icon.
  • Border Type: Select between the following border types, as well as the color and the width of the border on each side of the section:
    • None
    • Solid
    • Double
    • Dotted
    • Dashed
    • Groove
  • Border Radius: Increasing the border-radius will add circular corners to the area with the background behind the text. You can adjust the border-radius in pixels, % or em.
  • Shadow -Add a shadow behind the icon. Adjust the following options:
    • Color
    • Horizontal Position
      Vertical Position
    • Blur
  • Margin: Margin is the space between the icon and the rest of the content. Adjust the margin in pixels, em or %.
  • Padding: Padding is the space between the icon and the edge of the icon’s container. Increasing the padding will make the background larger. Adjust the padding in pixels, em or %.
Elementor Icon Box Widget Icon Styling Options in Normal and Hover Modes
Elementor Icon Widget Icon Styling Options in Normal and Hover Modes

2. Title, Description and Link

The style options for the title, description and link are identical.

  • Text Color: Select a text color.
  • Text Hover Color: Select a color that is used when the visitors hovers over the text.
  • Typography: Adjust font settings according to your needs.
  • Text Shadow -Add a shadow behind the text. Select from the following options:
    • Color
    • Horizontal Position
    • Vertical Position
    • Blur
  • Background Color: Select a background color and it’s opacity.
  • Border Type: Select between the following border types, as well as the color and the width of the border on each side of the section:
    • None
    • Solid
    • Double
    • Dotted
    • Dashed
    • Groove
  • Border Radius: Increasing the border-radius will add circular corners to the area with the background behind the text. You can adjust the border-radius in pixels, % or em.
  • Margin: Margin is the space between the text and the rest of the content in the widget. Adjust the margin in pixels, em or %.
  • Padding: Padding is the space between the text and the edge of the text block’s container. Increasing the padding will make the background larger. Adjust the padding in pixels, em or %.
Elementor Icon Box Title Customization Options
Elementor Icon Box Title Customization Options
Elementor Icon Box Widget Description Styling Settings
Elementor Icon Box Description Styling Settings
Link Customization Options for Elementor Icon Box Widget
Link Customization Options for Elementor Icon Box Widget

3. Inner Container

Adjust the style settings for the normal and hover status respectively.

Background Type: The available background type options are:

  • Color and opacity
  • Gradient
  • Image: Select or upload an image via the Media Library. If an image is selected, the following options become available:
  • Position:
    • Default
    • Top Left
    • Top Center
    • Top Right
    • Center Left
    • Center Center
    • Center Right
    • Bottom Left
    • Bottom Center
    • Bottom Right
    • Custom: Adjust the image’s X and Y positions using pixels, em % or vw.
  • Attachment -Default, Scroll or fixed.
  • Repeat:
    • Default
    • No-repeat
    • Repeat
    • Repeat-X
    • Repeat-Y
  • Size:
    • Default
    • Auto
    • Cover
    • Contain
    • Custom: Adjust the image width using pixels, em % or vw.
  • Border Type – Select between the following border types, as well as the color and the width of the border on each side of the section:
    • None
    • Solid
    • Double
    • Dotted
    • Dashed
    • Groove
  • Border Radius: Increasing the border-radius will add circular corners to the inner container. You can adjust the border-radius in pixels, % or em.
  • Box Shadow: Add a shadow around the container. Select the color and the following settings:
    • Horizontal Position
    • Vertical Position
    • Blur
    • Spread
    • Position: Outline or Inset
  • Margin: Margin is the space between the inner container and the outer container. Adjust the margin using pixels, em or %.
  • Padding: Padding is the space between the content and the edge of the inner container. Increasing the padding will make the background larger. Adjust the padding using pixels, em or %.
Inner Container Customization Settings For Elementor Icon Box Widget
Inner Container Customization Settings For Elementor Icon Box Widget

4. Outer Container

  • Back Icon Color: Select a color for the icon that is visible in the background.
  • Background Type: The available background type options are:
  • Color and opacity
  • Gradient
  • Image: Select or upload an image via the Media Library. If an image is selected, the following options become available:
  • Position:
    • Default
    • Top Left
    • Top Center
    • Top Right
    • Center Left
    • Center Center
    • Center Right
    • Bottom Left
    • Bottom Center
    • Bottom Right
    • Custom: Adjust the image’s X and Y positions using pixels, em % or VW.
  • Attachment: Default, Scroll or fixed.
  • Repeat:
    • Default
    • No-repeat
    • Repeat
    • Repeat-X
    • Repeat-Y
  • Size:
    • Default
    • Auto
    • Cover
    • Contain
    • Custom: Adjust the image width using pixels, em % or vw.
  • Border Type: Select between the following border types, as well as the color and the width of the border on each side of the section:
    • None
    • Solid
    • Double
    • Dotted
    • Dashed
    • Groove
  • Border Radius: Increasing the border-radius will add circular corners to the container. You can adjust the border radius in pixels, % or em.
  • Box Shadow: Add a shadow around the container. Select the color and the following settings:
    • Horizontal Position
    • Vertical Position
    • Blur
    • Spread
    • Position: Outline or Inset
  • Margin: Margin is the space between the outer container and the rest of the page content. Adjust the margin using pixels, em or %.
  • Padding: Padding is the space between the inner container and the edge of the outer container. Increasing the padding will make the background larger. Adjust the padding using pixels, em or %.
Outer Container Customization Settings for Elementor Icon Box Widget
Outer Container Customization Settings for Elementor Icon Box Widget

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 20+ Elementor Widgets Totally Free of charge.