Want to style your icons & texts together, easily do that with this Icon box element that has all the styling options that you will need.
In the Basic tab we have the following options:
- Admin Label- Add a custom label to the element to clearly identify it in the page back-end layout.
- Icon- Choose your desired icon for the element.
- Icon Position- Set the icon’s position wit respect to the text
- Title- Add the box title here.
- HTML Tag- Choose the required tag to be applied on the title.
- Description- Add a description on the box.
- Link- Add link to the box.
- Apply Link On- Choose where to apply the link on either the title, icon, button, full box or on both title & icon.
- Button Text- If you choose to apply the link either on the complete box or button, then enter the button text here.
Next is Icon Styling options, that are:
- Icon Size- Set the size of the icon in pixels.
- Icon Rotate- Rotate the icon to certain angles if required.
- Icon Color Options- Set the icon color, its background color & border color or even add a gradient to it.
- Icon Hover Color Options- Set the icon’s color on hover.
- Icon Padding- Adjust the icon spacing with respect to its background.
- Icon Background Shape- Choose the icon’s background shape circle, square or rounded. If you choose rounded then set its border radius values.
- Icon Border Type- Choose the icon’s border type from solid to groove.
- Icon Shadow- You can even set icon shadow to make it look more attractive.
Style the title under Title Styling tab that has the following options:
- Title Spacing- Adjust the space between title & icon.
- Title Colors- Add color to the title text.
- Typography- Manage the title’s font style, size, spacing or even line height via the typography field.
Style the description under Description Styling tab that has the following options:
- Description Spacing- Adjust the space between title & description.
- Description Colors- Add color to the description text.
- Typography- Manage the description’s font style, size, spacing or even line height via the typography field.
If you have enabled the link on button then style your button under Button Styling options that are similar to the options that we have for other elements.
Set the icon box’s background under Box Background Options that are similar to every element’s background options.
If you have set the background as Image or Video then add an overlay to it under Box Background Overlay options.
Manage the box’s border options under Box Border Options.
Adjust the spacing of the element under Box Spacing Options where you can manage the margin & padding of the element.
You can also add hover options over the complete box under Box Hover Options, like set a color, image or a gradient on hover, or do nothing by keeping it None. Also style the border on hover with the given options.