Neon One Help Center home page
Neon One Help Center home page
support

Articles in this section

Floating Buttons

Last updated

Note: In Editor 2.0, floating buttons are called Fixed buttons. See the Fixed Buttons in Editor 2.0 section of this article for more information.

Floating buttons allow you to keep a button visible at all times, even when a visitor scrolls down the page. Use Floating buttons to keep important calls to action fixed, visible, and clickable on all site pages.

Ideal uses cases include:

  • Contact Us
  • Join
  • Donate

Note

Floating buttons are not available on Dynamic pages.

To make a button float:

  1. Add a button to your site. For more information, see Add Widgets.
  2. Right-click the button, and then click Edit Design.
  3. On the Style tab, scroll down, and click the Floating toggle. If the Floating attribute is disabled, the button automatically appears in the first row at the top of the page.
  4. Select a position for the button. Switch the device view to change the position on different devices.
  5. To display the floating button on the current page only, enable the Show on this page only toggle.
     

Fixed Button in Editor 2.0

/in Editor 2.0, floating buttons have been renamed to "fixed" buttons.

To enable a fixed button in editor 2.0:

  1. In the side panel, click Widgets. Search for the Button widget, then click and drag it onto the canvas.
  2. Click the button to open the floating menu, and select Edit Design. This opens the design panel on the right side of the screen.
  3. In the design panel, scroll down to the Position section.
  4. Click to expand the Position type menu and select Fixed. This ensures your button stays in a fixed position as the user scrolls on your site. This change applies to all screen sizes, however you can override it if necessary.
    Once you select the position, you cannot switch from Fixed to Pinned. This is because when you select Fixed, the button is removed from its original container so that it can stay visible on the screen as the user scrolls. If you were to switch from Fixed to Pinned, the editor would not know what container to place the button in. If you need to switch, you need to switch back to Default first. The button will be moved to the first section in the viewport.
  5. (Optional) Enable the Show on this page only toggle. Otherwise the fixed button will appear on all pages by default.
  6. In the Spacing menu, use the Margin settings to define where the button is located in the viewport. This is especially important to configure if you have two fixed buttons in the same viewport position.

There will be a fixed indicator icon in both the button’s floating menu and design panel.

pinned button.png

Mobile Considerations

  • On mobile, we suggest placing the Floating button at the bottom corner of the screen so visitors can easily click it with one hand.
  • You can display an icon rather than text on mobile by choosing the layout that features an icon on mobile.
  • If a floating button is not displaying on mobile, you may be using an old mobile layout. To update the layout, go to the Design Editor, and click Site Layout.