Icon Box | Themezly™

Có thể bạn quan tâm

Icon Box

Icon Box element displays custom content with icon within styled content box Homepage Documentation Framework Elements Icon Box

Icon Box element displays custom content with icon within styled content box. Element popup contains following options;

Box style - Adjust .thz-icon-box box style.
Container metrics - Add custom class or ID to HTML container and adjust visibility on specific devices.
Inherit style from - Insert icon box ID to inherit the style from. If you have multiple Icon boxes with same style you can set main icon box Custom ID than add that ID here. This way every icon box on this page with this inherit ID will use same CSS. This reduces the overhead CSS and renders the icon box faster. Note that once the inherit ID is added the CSS for this icon box is not printed. The effects must be set on per element basis.

Icon metrics - Adjust icon metrics. Color is not applicable if your are using own icon image. SVG color modes are used only if SVG Icon image is selected. Icon color is than applied to the SVG selection. To enable WordPress SVG uploads please use 3rd party plugin that allows this feature.
Icon image - Upload or select icon image. This option has precedence over the icon option above.
Icon padding - Set icon container .thz-icon-holder padding.

Icon background shape - If active, this icon will be placed inside a adjustable container.
Shape metrics - Set shape width background, border and space between border and shape.
Shape type - Select shape type.
Nudge - Nudge .thz-icon-shape i. By default icons inside the shape are centered but some icons visualy appear as out of line. See play borderless icon for instance. This option helps you move the icon inside the shape and this way adjust the appearance. If you need to pull the icon up, use negative top value.
Hover effects - Select shape hover effect.

Heading - Icon box heading.
Text - Set icon box text.
Heading padding - Set heading padding. All values must be entered for style to be applied.
Heading font metrics - Adjust heading font metrics.
Text font metrics - Adjust text font metrics.

Hover trigger - Choose when to trigger hover effects. Normaly hover effects are triggered when you place your mouse over the element. This setting will help you trigger the hover for all elements inside the icon box when you place the moue over the icon box.
Hovered box style - Adjust .thz-icon-box:hover box style.
Hovered metrics - Adjust hovered icon, headings, text and links colors. If shape hover effect is active the hovered icon color here is overwritten by shape hovered settings.