Modern desing | Elements Project
Built-In Components
Header Parallax & Scaling
Standalone Custom Components: Four scripts ready to use in any project.
This project includes a set of custom components that enhance functionality and offer flexible customization. Every component provides a control panel where you can easily fine-tune its settings.
ⓘ Custom Components work the same on all pages.
To edit per page, make it Global, then unlink from Global where needed.
Lumi Script
Header FX
Internal Scripts
These scripts are essential for the project. They power advanced features like header parallax effects.
ⓘ 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 & Scaling
Add class to header in the project
✓ Povide some useful CSS classes to apply to elements in the project
Animations → fade, zoom, slide-top/bottom/left/right to add smooth animations to modals.
✓ Part of LUMI project; required code.
Breadcrumbs
Lumi / 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.
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.
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.
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.
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.
