{"id":149689,"date":"2024-07-15T19:53:30","date_gmt":"2024-07-15T16:53:30","guid":{"rendered":"https:\/\/elementor.com\/help\/voeg-een-zwevende-knop-toe-aan-je-site\/"},"modified":"2024-07-15T19:53:30","modified_gmt":"2024-07-15T16:53:30","slug":"voeg-een-zwevende-knop-toe-aan-je-site","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/nl\/voeg-een-zwevende-knop-toe-aan-je-site\/","title":{"rendered":"Voeg een zwevende knop toe aan je site"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

What is a Floating Button?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

A Floating Button, sometimes called “Floating Action Button” (FAB), is a website user interface that appears to hover over the site’s pages.<\/p>\n

Usually it is anchored to a corner or edge of the interface.\u00a0 Here are some key characteristics and uses:<\/p>\n

    \n
  1. \n

    Prominent Placement<\/strong>: A floating button is placed above the main content and remains visible as users scroll through the page. This makes it easily accessible for users.<\/p>\n<\/li>\n

  2. \n

    Important Action<\/strong>: The button is typically used for an important\u00a0 action such as contacting a salesperson or other staff member.\u00a0<\/p>\n<\/li>\n

  3. \n

    Material Design<\/strong>: Popularized by Google’s Material Design guidelines, the floating button often features animations and a visually appealing design.<\/p>\n<\/li>\n

  4. \n

    Icons<\/strong>: The button usually contains an icon that represents its function, such as a plus sign for adding a new item or a pencil for editing.<\/p>\n<\/li>\n

  5. \n

    Interactive<\/strong>: Floating buttons can have various states like default, pressed, focused, and disabled, with corresponding visual feedback to indicate interactivity.<\/p>\n<\/li>\n<\/ol>\n

    To access and add Floating Buttons:<\/strong><\/p>\n

    Floating buttons are templates, not widgets or other elements. Floating buttons are added from WP Admin, not from the Elementor Editor. For details see below, Creating a Floating Button: Step-by-Step<\/a>.<\/p>\n

    See all the options available with Floating Buttons.\u00a0\u00a0<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

    \n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t

    Common use case\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    Jan has opened a new flower shop. To make sure they don’t miss out on any potential sales, they add a Floating Button that allows users to contact a representative from anywhere on the site.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

    \n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t

    Example<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t

    Additional use cases<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
    \n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t