Start with Float Any Demos
On this page you can explore the most of the possibilities of the Float Any. Actually you can already see the working example in the bottom left corner of the browser, which represents the basic demo of our plugin. Further you’ll be able to see the most of the available options.
You can select multiple Float Any demos at the same time, which is simulating the real usage as well, since the plugin do not limit the number of Float Any 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 selected demos, however some of them may overlap.
Demo selector
Panel Types:
Triggered from content:
More options:
Use 3rd party plugins to create 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.
This panel is active here, on this page, by default, i.e. on page’s load. You can deselect its appearance from the demo selector, especially advised if you’re enabling other demos since it may overlap with them.
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 Float Any 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 Float Any 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 Float Any 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 Float Any 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 Float Any 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 Float Any 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 Float Any 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 Float Any 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 Float Any’s panels and it’s meant to be used in panels usually, but nothing can stop you from using it outside of the Float Any scope. Copy coupon examples:
This text is a coupon code
Af234X
Conditional panel
You can make any Float Any 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 Float Any 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, Float Any 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
3rd party plugin (1)
This is a very simple example. See how we use a plugin to set the advanced buttons, i.e. with icons, the option that isn’t available with WordPress’ core blocks. Then we embed it in the Float Any panel positioned as a note to be dismissive.
3rd party plugin (2)
You can use any block and function, that is available in regular WordPress posts/page, inside the Float Any panel as well. In this example we add accordion block from a plugin. See it working in the right-bottom position of the screen. Click the accordion to see it fully working.
3rd party plugin (3)
In this example see the countdown in a Float Any popup:
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.