Easily create nice looking buttons, which come in different styles.
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.
|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, learn more about the button add-on settings. Here is a short overview.
|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, which are the same across all add-ons, are grouped in a General section at the bottom. Here is a short overview.
|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.|
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.
|Horizontal||Animate the horizontal position (translateX) in pixels.|
|Vertical||Animate the vertical position (translateY) in pixels.|
|Scale||Animate the scaling.
|Rotate||Animate the rotation clockwise in degrees.|
|Opacity||Animate the 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.|