Wonder Scripts: Scripts for advanced project features.
Standalone Custom Components: 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.
Text link & 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.
Internal Scripts
These scripts are essential for the project.
✓ Linehover Animation
Add class to menu in the project
✓ 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 WODER project; required code.
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.
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.
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.
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.
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 “Wonder”).
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.
Nulla id qui anim mollit incididunt est duis ut duis. Voluptate id nisi ad id sit. Voluptate est consectetur labo excepteur Lorem fugiat culpa do qui minim.
Wonder Project
All the resources for building a full website
Header Video or Image + 2 menu
+ Footer
Animation made
with elements dividers
Expose Core
Modal Classes
Google map
2 available into the project.
Raleway
Montserrat
+ 4 ready to use
Fade-in Body
Privacy Pop-Up
Progress Bar
Back to top
Breadcrumbs
Three remarkable designs now together in one powerful offer
Cordial Project
All demos
& Resources
Header nav
& Footer
Original
Web-Font
with 5 styles
Back to top
Scroll Bar
Parallax
