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
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.
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.
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.
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.
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.
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.
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.
- Advanced Border Radius: Apply custom radius values for Elementor icon box widget. Get the radius value from here.
- Border Radius: Insert border radius values.
- 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 %.
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 %.
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 %.
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.
- Advanced Border Radius: Apply custom radius values for Elementor icon box widget outer container. Get the radius value from here.
- Border Radius: Insert border radius values.
- 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 %.