Explore FloatAny Demos
On this page you can take a look at the most of FloatAny’s possibilities. You’ve probably already noticed a floating menu in the browser’s bottom-right corner available over our site. At the same time, it’s the best basic working example. However, you’ll be able to disable it bellow and to enable other demos to see the most of the available options.
You can select multiple FloatAny demos at the same time, which is simulating the real usage as well, since the plugin do not limit the number of FloatAny panels’ appearing on one page. However, it’s the best if you first explore demos one by one. Simply select one and deselect the others. Certainly, you can try multiple selections simultaneously, however some of them may overlap.
Demo selector
Site default:
Panel Types:
Triggered from content:
More options:
More content:
Panel type – Toggler
Set a panel to behave in a toggle manner. It means that a panel is initially open, site visitors can toggle it between open and close regime.
DEMO: Join our Newsletter
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien ligula, porttitor in aliquam nec, condimentum vitae nisi.
Panel type – Igniter
This demonstrates the igniter option of the FloatAny panel, i.e. the panel is initially closed with the trigger button available to open it. In this demo, it is located centrally at the browser’s left side and the panel is appearing from aside with full height.
Panel type – Close with click
This is a panel type set as a closing with a click. Further, it’s set as a 100% width and height. Means, you can easily make a panel in a full screen size.
NEW SEASON STARTING WITH A CONFERENCE
The best time to join is now!
15% OFF
Panel type – Close with hover our
This is a panel type set as a closing with a hover out from the panel. You should notice it on the right side of the screen.
This is an example of a panel type with “Closing with hover out”.
- First the mouse has to enter the box
- When the mouse abandons the box, it will automatically close
Panel type – Unset closing/toggling
You see, this FloatAny panel type is defined to unset the close/toggle button, so it’s floating over the content permanently.
Further, we’re making the simple menu using the WordPress’ builtin navigation block which thanks to the FloatAny plugin is shown in the top-right position of the browser. From the user interface you can easily change its position, switch to menu’s vertical alignment or add other options.
From content panels (linked)
By default FloatAny panels appear on page load. Still, another option is to show the panels triggered from the content. The following examples show how it can be set. Click on each link element to see panels popup, while their positions are set from the panels’ settings.
From the image:
“Do you see over yonder, friend Sancho, thirty or forty hulking giants? I intend to do battle with them and slay them.”
— Don Quixote
Link in the paragraph:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis, velit malesuada convallis. Nunc vitae nibh vitae nulla cursus tempus.
From the button:
From content panels (on hover)
By default FloatAny panels appear on page load. Still, another option is to show the panels triggered from the content. The following examples show how it can be set. Hover on over each link element to see panels popup, while their positions are set from the panels’ settings.
From the image:
This on is closed with hover out from the panel.
Link in the paragraph:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis, velit malesuada convallis. Nunc vitae nibh vitae nulla cursus tempus.
This one is closed with a click.
From the button:
Your title here…
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This one is closed with a click.
From content panels (inline position + linked)
Position FloatAny panels inline, i.e. next to the trigger element. Click on each link element to see panels popup.
From the image:
Note: You have to close the panel in order for new position to take effect.
Link in the paragraph:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis, velit malesuada convallis.
- number 1
- number 2
- number 3
- number 4
Your title here…
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This one is set with a full row. Still, you can set the panel to take, for example, 90% of the row.
From the button:
This is an example of a panel type with “Closing with hover out”.
- First the mouse has to enter the box
- When the mouse abandons the box, it will automatically close
This one is set with position on the left.
From content panels (inline position + on hover)
Position FloatAny panels inline, i.e. next to the trigger element. Hover on over each link element to see panels popup.
From the image:
This one is closed with a hover out from the panel.
Link in the paragraph:
Lorem ipsum dolor sit amet, consectetur adipiscing malesuada convallis. Nunc vitae nibh vitae nulla cursus tempus.
This one is closed with a click.
From the button:
Your title here…
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This one is set with a full row. Still, panel is set to take 50% width.
In content note (1)
You can disable floating aspect of the panel, which placed in content produces a dismissive note. Here is an example with a quote block used inside the FloatAny panel, which is now dismissive inside the content.
“Do you see over yonder, friend Sancho, thirty or forty hulking giants? I intend to do battle with them and slay them.”
— Don Quixote
In content note (2)
You can disable floating aspect of the panel, which placed in content produces a dismissive note. Here is an example with a menu block used inside the Any panel, which is now dismissive inside the content.
It also has a sticky option enabled, so when the page is scrolled down it sticks on the top of the browser. However this option is relevant to the parent element’s container. So there has to be enough content beneath the sticky element to represent this option (enable another demo beneath this one to see it in action).
Copy coupons
In the page content, you can easily set coupon codes to be copied on the click. This is a logical addition to the FloatAny’s panels and it’s meant to be used in panels usually, but nothing can stop you from using it outside of the FloatAny scope. Copy coupon examples:
This text is a coupon code
Af234X
Conditional panel
You can make any FloatAny panel conditional. Various conditions are available (like particular pages condition, User logged-in/logged-out status, events on time or scrolling, date campaign, etc.). You can see all available options in the documentations.
Example:
This is an example of the FloatAny panel’s appearance based on the condition to show it “Beneath element’s viewpoint”. You see, we have a dummy content just beneath this paragraph. While you’re scrolling down, FloatAny panel is set to appear once the image element goes out of view.
START DUMMY CONTENT
This image is the conditional trigger
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien ligula, porttitor in aliquam nec, condimentum vitae nisi. Morbi viverra dolor et sodales mattis. Proin at placerat eros, et interdum dolor. Donec id libero non metus elementum pellentesque. Ut non elit sapien. Proin lobortis rhoncus ipsum, eu lacinia ligula tincidunt in. Sed dui mi, ullamcorper vitae mi et, mollis sodales turpis. Donec at fermentum massa. Donec sollicitudin tempus sollicitudin. In congue dolor et tortor vehicula, facilisis pellentesque lorem sollicitudin. Vestibulum quis sollicitudin orci. Proin lobortis purus id augue mattis viverra. Praesent ante tellus, venenatis quis scelerisque non, mattis ac ante. Pellentesque dignissim lectus sit amet auctor commodo. Nulla quis commodo felis. Curabitur nec metus blandit, ornare erat elementum, pharetra mauris.
Pellentesque ac vehicula augue. Quisque finibus velit felis, in pharetra dolor egestas ac. Praesent eu mi odio. Phasellus non vulputate massa. Sed a diam sed odio condimentum dapibus at sed metus. Proin gravida massa quis odio porttitor gravida. Aenean nec varius lectus, vitae iaculis felis. Nunc in erat vel ligula varius sollicitudin eu a enim. Maecenas vitae pharetra sem. Sed porta, dui vel porta fringilla, enim ipsum tempus purus, a congue elit lacus quis urna. Donec sed massa volutpat, condimentum tortor vitae, tempor tellus. Phasellus iaculis tortor dui, non tincidunt sapien vulputate sit amet.
Donec bibendum ipsum sapien, vel gravida enim tristique in. Aliquam bibendum sed risus sed semper. Aenean posuere leo quis dui sollicitudin, et mollis diam tempor. Nullam vestibulum magna in malesuada auctor. Ut sit amet volutpat risus, vitae semper lectus. Phasellus lacinia efficitur nibh, sit amet volutpat leo pellentesque non. Praesent interdum purus quis nulla congue, et maximus arcu pharetra. Vestibulum libero sem, posuere at malesuada et, viverra a nisi. Sed ullamcorper, sapien at maximus semper, nisi elit vestibulum dui, ut consequat purus velit feugiat elit. Vestibulum non quam at nisl aliquet tristique sed non lectus. Nullam viverra ornare nisl, quis gravida urna gravida at.
Nunc eget est ligula. Suspendisse at mi posuere, maximus erat quis, mattis erat. Fusce porta orci eu tellus vehicula viverra. Curabitur porta vestibulum erat ut tempus. Curabitur aliquam maximus nisi, ac dignissim magna bibendum eu. Maecenas lacinia ornare ante, eu vestibulum nisi dignissim ut. Nullam ante ligula, pulvinar et leo id, aliquam euismod urna. Vivamus sit amet ultricies tortor. Phasellus quis ante aliquam, luctus neque sit amet, vestibulum odio. Etiam commodo ante ut felis laoreet pellentesque. Nullam lobortis arcu ut ligula lobortis, vel imperdiet lorem fermentum.
END DUMMY CONTENT
We have a special promotion for our best selling product today
Rotator (notification system)
You can enable the rotation role for any FloatAny panel. With the following example there are 3 notification items, which are set to stay 5 seconds live each, while the off time span is adjusted to 3 seconds. All these options are configurable from the user interface, along with enabling/disabling close button or showing style.
Product 1
This is the notification for the product 1
Product 2
Here we have another product
Product 3
Finally, we have the 3rd product here
Mailchimp and Sendinblue examples
These are “real” newsletter examples. This means that we have created the test forms at these newsletter providers, copied the generated form codes and pasted it as the FloatAny panel’s content. The purpose here is to show you how easy is to establish the newsletter signup form in a popup manner with FloatAny panel:
- with Sendinblue we literally pasted the generated form’s code from the provider in the WordPress’ custom HTML block. With FloatAny settings, “Panel Type” is set as a “Closer” option, lightbox is checked on and as a final touch padding is set to 0.
- with Mailchimp the process is almost the same, the main difference is that instead of the custom HTML block, we used existing FloatAny signup pattern with 2 columns. The first column is occupied by an image and form code from the Mailchimp is pasted in the other column.
Additional content with block plugins
Basically, there’s no limit in what you can include in FloatAny panel as long as it’s WordPress block or shortcode based. In this example we used the countdown block plugin. See the countdown in a FloatAny popup:
Limited time offer
Sections navigation
Create documentation pages or one-pager scrolling pages. Use native WordPress blocks like navigation or buttons and set it in vertical or horizontal alignment. There’s also an option to mark each link from the navigation while its section is in the view.
In this demo, its position is on the top-centered.