![]() ProteusThemes: IconBox is the widget you are looking for. Once you have located ‘ Header’, direct your attention to the left of the screen, where you will see a list of ‘ Available Widgets’. To do this, in your dashboard you need to go to Appearance -> Widgets and then within ‘ Theme Sidebars’ select ‘ Header’. My task was to add the icon boxes into the header of the homepage. It may seem obvious, but having your company’s phone number next to a telephone icon is a simple but effective way of improving your site’s user experience. Icon Box widgets are a very handy piece of visual language. These are the most important lessons I have learned so far. Just like before, my colleagues set me step-by-step tasks to set me on my way. Container parallax - Activate/deactivate container parallax.To go beyond the simple basics in my last WordPress Beginner blog, over the past couple of weeks I have been working to recreate one of our ProteusThemes demo pages.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. |