Button Group Add-on

One of the easiest way to create any type of button groups

Content Fields

Content Fields settings, all content fields of an add-on are shown in the Items List when adding new item or modify existing item. Here is a list of common content fields.

Setting Description
Content Define button content
Link Enter or pick a link, an image or a video file.
Link Title Enter an optional text for the title attribute of the link, which will appear on hover.
Link Target Opening a link to new window or same window.
Icons Place scalable vector icons anywhere in your content.
Style Set the button style (support 08 button styles).
Size Set the size for buttons.
Fullwidth Button Enable fullwidth button

Button Settings

Button settings, learn more about the button add-on settings. Here is a short overview.

Setting Description
Width Select Fullwidth option if you wish to use button fullwidth
Gutter Set the grid gutter for multiple buttons.
Button Alignment Define the horizontal alignment of flex items and distribute the space between them.
Button Breakpoint Define the device width from which the alignment will apply.

General Settings

General settings, which are the same across all add-ons, are grouped in a General section at the bottom. Here is a short overview.

Setting Description
Margin Keep the existing vertical margin (e.g. from headings), force specific margin or remove all margin. Margins of an element can be removed from the top and bottom.
Remove top margin. Use this option to remove the add-on's top margin
Remove bottom margin. Use this option to remove the add-on's bottom margin
Animation Overwrite the animation settings from the section. This won't have any effect unless animations are enabled for the add-on. Or enable a parallax animation for this add-on.
Visibility Define when the add-on should be hidden.
CSS Class If you wish to style a particular content element differently, then use this field to add a class name and also refer to it in your css file.

Parallax Animation Settings

The Parallax Animation Settings allow you to animate an add-on depending on the scroll position of the document. To configure a parallax animation,just enable the Parallax Animation feature.

Setting Description
Horizontal Animate the horizontal position (translateX) in pixels.
Vertical Animate the vertical position (translateY) in pixels.
Scale Animate the scaling. 1 means 100% scale, 2 means 200% scale, and 0.5 means 50% scale.
Rotate Animate the rotation clockwise in degrees.
Opacity Animate the opacity. 1 means 100% opacity, and 0 means 0% opacity.
Easing Determine how the speed of the animation behaves over time. A value below 1 is faster in the beginning and slower towards the end while a value above 1 behaves inversely.
Viewport Set the animation end point relative to the viewport height, e.g. 0.5 for 50% of the viewport. It is very useful to stop the animation of a text when it’s in the middle of the screen.
Breakpoint Display the parallax effect only on this device width and larger. It is useful to disable the parallax animation on small viewports.

Information

Joomla! name is used under a limited license from Open Source Matters in the United States and other countries. WarpTheme.com is not affiliated with or endorsed by Open Source Matters or the Joomla! project