Flexer
Elements Project
Components
Flexer Script
Parallax, Hide/show Menu optinon and Modal animation classes
ⓘ Connect Script to Project
Simply paste the CSS classes into your elements and configure everything through the control panel, no extra setup required.
✓ Header Parallax
Set header parallax speed and breakpoint
✓ Alternating Menu:
Control the visibility of vertical navigation using classes, toggling between the left navigation on desktop and the drop-down menu on mobile. The menu is a standard tree component with two instances managed by Flexer CORE.
This component uses the standard Elements Breakpoints for mobile, tablet, and desktop. If you change the settings in the project, you must also change the settings in the component. If you use custom Breakpoint in your project, you can also set them in the component (custom value).
✓ Povide some useful CSS classes to apply to elements in the project
Animations → fade, zoom, slide-top/bottom/left/right, rotate 45°, 90°, 180°, 360° to add smooth animations to modals.
✓ Part of Flexer; Core Component
Breadcrumbs
Expose / Pages / fonts / current page.......
A clean, customizable navigation path that helps users understand exactly where they are on your site.
Set the first root level to ensure all projects share a common starting point, so multi-project sites always display paths correctly.
A must-have tool to guide visitors smoothly through your content.
Options:
Home Icon:
The Home icon changes thickness, size and position, Turn On /Off
Home Label:
Set the starting point text (e.g. “Home” or “Lander”).
Path Offset:
Choose which URL level starts your breadcrumb. skip top folders with ease. From Root to Level5.
Exclude URL Levels:
Hide specific folders or pages (e.g. menu, categories) from the path.
Typography:
Set font, size, weight, spacing, and case for perfect readability.
Colors:
Color for breadcrumb links and separators.
Separator:
Pick from different symbols / & ›
Usage:
Only one per page
✓ Works in any project — just drop it in, no setup needed.
Privacy Pop-Up
Customizable Privacy Pop-Up for your project.
The Pop-Up can display any type of content, including text, links, images, or other elements.
ⓘ In Elements Preview, you can choose whether to show or hide it, allowing you to see the pop-up in the editor without affecting the live site.
ⓘ In the browser preview, you can force it to display regardless of existing cookies, ensuring full visibility for testing. This component is one per page only, and it handles cookie expiration automatically.
Options:
Read More Link
Enable or disable the link.
Set custom text: Link to your privacy or terms page.
Accept Button: Set button text.
Choose text wrapping behavior (no wrap or normal).
Customize colors: Background color & Background color on hover
Overlay: Set background color & opacity.
Layout: Adjust bottom margin.
Duration: Set the number of days for cookie expiration.
✓ Works in any project — just drop it in, no setup needed.
Progress bar
A sleek, customizable bar that fills as users scroll down the page. Simple to implement and fully adaptable to your layout and design.
Options:
Height: Set the thickness of the bar.
Position: Fixed, absolute, or relative.
Z-Index: Control stacking order.
Colors: Gradient direction, left/center/right colors, opacity.
Background: Set bar background and opacity.
Effects: Optional blur and shadow for a polished look.
ⓘ Use fixed for standalone bars, relative inside sticky headers.
ⓘ Adjust z-index to prevent overlap with other elements..
✓ Works in any project — just drop it in, no setup needed.
Back to top Button
Provides a quick way for users to jump back to the top of the page.
ⓘ The toggle only reinforces visibility in preview
ⓘ The button automatically scrolls to the top, no target setup required.
Customize its color as needed.
✓ Works in any project — just drop it in, no setup needed.
Fade-In Body
Add a smooth fade-in effect to your page as it loads.
Fully customizable — adjust speed, delay, easing, and starting opacity from the control panel.
ⓘ Optional: disable on small devices and set the display breakpoint.
✓ Works in any project — just drop it in, no setup needed.
