Flexy Foot 2

Bric By Blocs Builder

Buy Now $14
DetailsSettingsReviews

Flexy Foot is our most downloaded bric. Upgrade your page footer with Flexy Foot 2 and enjoy the added benefits today.

Built for the latest Blocs 5 features and enhanced with our Smart Detect technology, Flexy Foot 2 is a must have for your Blocs project.

Flexy Foot provided an easy solution for webpages with limited content by pushing the footer right down to the bottom of the page. It's no surprise that it was one of our most sought-after brics.  But why settle for great when you can have exceptional? With Flexy Foot 2, we've taken things to a whole new level of excellence!

Flexy Foot 2 logo
Flexy Foot 2 overview

Smart Detect

With the addition of our Smart Detect logic, using Flexy Foot 2 is even easier than before. In fact, for most websites, everything is automated*. And if you have a complex page structure, don't worry! You can still manually assign your footer ID to ensure everything works as intended.

Classic Flexy or Reveal Page Footer

Flexy Foot 2 offers you the flexibility to choose between two footer styles - Classic and Reveal, once your preference is selected, Flexy Foot 2 will take care of the rest.  Reveal, takes it even further and detects if your footer is too large for the screen, and dynamically switches to the Classic style, ensuring a seamless browsing experience for your users. Now that's what we call smart and hassle-free!

Container Tag Support

Flexy Foot 2 now includes a cool new feature that automatically detects the use of the < footer > tag in your Blocs 5 project, thanks to the introduction of container tags. This means you don't have to manually assign your footer ID, making it easier and more convenient to use.

* When using Reveal, ensure other blocs on your page have a background colour / image set to stop the footer being shown when behind your content. 

What you get!

  • Flexy Foot 2

Requirements

  • Blocs 5

  • Bootstrap 5

Buy Now $14

Flexy Foot 2 Settings

Flexy foot-2__Bric

At a glace you can see the selected behaviour and also the footer identifier right in the Flexy Foot 2 bric placeholder.

Flexy foot-2__Options_01

Select the behaviour

  • Classic - Ensures your page footer sits at the bottom of the browser viewport when your page content is short.

  • Reveal - Also known as a sticky footer, this 'reveals' the footer on page scroll. If the footer size is too large for the viewport, Reveal will dynamically change to a regular footer to prevent undesirable user experiences.

Flexy foot-2__Options_01

Footer identification

  • Smart Detect - This option selects a bloc based on predictive criteria, including if you use the container tag feature of Blocs 5. Smart Detect will be the best option for most websites.

  • Select ID - Used if Smart Detect is not suitable for your more complex design. Once selected, you will see a dropdown option to choose an element ID from your page.

Flexy foot-2__Options_01

Fine Tune

If needed, you can make fine-tuning adjustments to the reveal footer using these options.

  • Z-Index - Adjust the z-index value for when the footer is fixed. Handy for complex websites.

  • VH% - This is a percentage of the height of the browser viewport. If the height of your footer reaches this, then the reveal footer is changed to a classic. This happens dynamically when the browser is resized and also on load for smaller screen sizes. This ensures your footer is always accessible to your users.

  • Reset - Quickly restores the default values.

Flexy foot-2__Options_01

Accessibility

  • Reveal footer focus - This feature enhances the user experience when navigating with assistive technologies, such as a keyboard. If a user focuses on a link within the footer while the 'Reveal' behaviour is active, the webpage will automatically scroll to bring the footer into view. This ensures that users can always see the content they're interacting with.

Flexy foot-2__Options_01

Extras

Change the colour of the Flexy Foot 2 bric placeholder, just because you can!

Flexy foot-2__Options_01

Other

Go to the Blocs Builder contact page.