The Sticky Button is an always-visible button that "sticks" to a corner of the screen as visitors scroll. Unlike the other sticky buttons, it is not tied to one service: you choose the text, the icon and the link yourself, and it is styled like any regular YOOtheme button.
In the YOOtheme Builder, open the element picker and look for the Joomill Extensions group of elements. Go to YOOtheme > Layout > Footer to add this element to every page.
Select the Sticky Button element.
Content tab
| Text |
The button text. Leave empty for a button with only an icon. |
| Icon |
Click on the pencil to pick an optional icon from the icon library. Leave empty for a button with only text. |
| Link |
Enter or pick the link the button points to. An anchor link that contains a # scrolls smoothly to that part of the page. |
| Link Title |
Optional title attribute for the link. |
| Link ARIA Label |
Screen-reader label for the button. Set this when the button shows only an icon, so its purpose is still clear. |
Settings tab
Button
| Style |
The button style: Default, Primary, Secondary, Danger, Text, Link, Link Muted or Link Text. When the Colors module is enabled, the extra colors appear here as well. |
| Size |
Small, Default or Large. |
| Background |
Optional background color, overriding the one from the button style. |
| Hover Color |
Optional text and icon color on hover or focus. Leave empty to keep the color from the button style. |
| Border Radius |
None, Rounded, Circle or Pill. |
| Padding |
Optional padding, overriding the one from the button style, e.g. 8px or 8px 12px. |
| Box Shadow |
None, Small, Medium, Large or X-Large. |
Text
| Style |
A predefined text style, including size and font family: None, Meta, Small, Large or Lead. |
| Color |
The text color, overriding the one from the button style: None, Muted, Emphasis, Primary, Secondary, Success, Warning or Danger. |
Icon
| Alignment |
Whether the icon sits Left or Right of the text. |
| Icon Width |
The icon width in px. Leave empty to use the default icon size. |
| Color |
The icon color, overriding the one from the button style: None, Muted, Emphasis, Primary, Secondary, Success, Warning or Danger. |
Link
| Attributes |
Optionally open the link in a new window, treat it as a download, add nofollow or leave out the referrer header. |
| Tooltip |
Optional text shown when hovering the button. |
General
| Position Element |
Where the button sits on the screen: Top Left, Top Center, Top Right, Center Left, Center, Center Right, Bottom Left, Bottom Center or Bottom Right. |
| Position |
Static by default. Change to Relative to fine-tune the position with the Left/Right/Top/Bottom offsets that appear. |
| Z Index |
Stacking order, if the button needs to sit above or below other fixed elements. |
| Margin |
The margin around the element: Keep Existing, None, Small, Medium, Default, Large or X-Large. |
| Visibility |
Choose where to show the button: Show Always, Visible or Hidden on Small (phone landscape), Medium (tablet landscape), Large (desktop) or X-Large (large screens). |