Content Alignment - the alignment set here will only applies to screen widths below the width set in Vertical Layout Below.Vertical Layout Below - set the screen width below which the Icon Box contents will be aligned based on the Content Alignment in this tab.In this tab, you can control the responsiveness of the alignment of the elements within the Icon Box element. Link Space Below - sets the spacing below the link area of the Icon Box.Link Space Above - sets the spacing above the link area of the Icon Box.Text Space Below - sets the spacing below the text.Text Space Above - sets the spacing above the text.Heading Space Below - sets the spacing below the heading.Heading Space Above - sets the spacing above the heading.Otherwise, if Icon Position is set to either right or left, this controls the spacing to the right of the icon. If Icon Position is set to either top or bottom, this controls the spacing on the bottom of the icon. Icon Space After - sets the spacing after the icon.Otherwise, if Icon Position is set to either right or left, this controls the spacing to the left of the icon. If Icon Position is set to either top or bottom, this controls the spacing on top of the icon. Icon Space Before - sets the spacing before the icon.This parameter is visible only when Icon Position is set to left or right. Icon Vertical Alignment - aligns the icon vertically within the Icon Box element top, middle, or bottom.Icon Position - positions the icon relative to the text and link content: top, right, left, or bottom.Content Alignment - align all content within the element left, center, or right.Container parallax - Activate/deactivate container parallax.The Icon Box element displays an icon with a heading and text.Īdd a Icon Box element to your page from Add+ > Helpers > Icon Box.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. |