![]() This wonderful hover style will provide you the hover effect from the left side of the Icon box. Therefore, with these creative styles you can customize Icon box text, Icon, Show or hide button, Provide Button link, Select the text alignment, Select Icon position and many more. One of the most popular Hover styles for your webpage. Wherever you put the cursor on the box the hover effect will show from the selected side. If you need more activity and interaction you should definitely try out this style of Elementor Icon Box. This hover style makes visual effects to the box and make a perfect gradient look. In Addition, our Elementor widget allows you to show your box in an attractive way with customization options like icon type, read more, badge, content, icon box, container, background, overlay and many more. With this awesome icon box with hover style, you will get more attention from the user. Human brain gets attracted to motion things easily. In addition it will give you a hover effect when you put a cursor on your icon box. This radius button hover style will allow you to provide a see more/ read more button which helps users to gain more information or knowledge of your products. You can add any hyperlink or URL to the right arrow. The most commonly used right arrow icon style mainly used for providing any direction or explaining to the user to do any action. With this Iconbox you can personalize your own Icon, select your icon type from the library, show or hide Icon, upload icon from our icon box settings. Container parallax - Activate/deactivate container parallax.Showing your Icon in a stunning way attracts your customer and makes your WordPress sites more Eye-Catching.Animate icon - Add animation to the icon HTML container.Animate - Add animation to the HTML container.If shape hover effect is active the hovered icon color here is overwritten by shape hovered settings. Hovered metrics - Adjust hovered icon, headings, text and links colors.This setting will help you trigger the hover for all elements inside the icon box when you place the moue over the icon box. Normaly hover effects are triggered when you place your mouse over the element. Hover trigger - Choose when to trigger hover effects.Apply link to - Select where this link should be applied.Text font metrics - Adjust text font metrics.Heading font metrics - Adjust heading font metrics.All values must be entered for style to be applied. Heading padding - Set heading padding.Hover effects - Select shape hover effect.If you need to pull the icon up, use negative top value. This option helps you move the icon inside the shape and this way adjust the appearance. By default icons inside the shape are centered but some icons visualy appear as out of line. Shape metrics - Set shape width background, border and space between border and shape. ![]() ![]() Icon background shape - If active, this icon will be placed inside a adjustable container.This option has precedence over the icon option above. Icon image - Upload or select icon image.To enable WordPress SVG uploads please use 3rd party plugin that allows this feature. Icon color is than applied to the SVG selection. SVG color modes are used only if SVG Icon image is selected. Color is not applicable if your are using own icon image. The effects must be set on per element basis. Note that once the inherit ID is added the CSS for this icon box is not printed. This reduces the overhead CSS and renders the icon box faster. This way every icon box on this page with this inherit ID will use same CSS. If you have multiple Icon boxes with same style you can set main icon box Custom ID than add that ID here. Inherit style from - Insert icon box ID to inherit the style from.Container metrics - Add custom class or ID to HTML container and adjust visibility on specific devices.Element popup contains following options Defaults tab Icon Box element displays custom content with icon within styled content box.
0 Comments
Leave a Reply. |