Elements
You can find here Clonable projects, Integrations for Plugins and Third party apps, Elements and Code snippets to elevate your project to the next level.
Responsive Web Design Grid
A template of web design grid to help you design better.
![](https://assets-global.website-files.com/5da30635498119f04c720227/5ddfc53c8fb828fadcefc464_5da761832362c8a6cd391826_web-design-grid.webflow.io_(1280x720).png)
Thick Underline
An editable thick underline for your Headlines
![](https://assets-global.website-files.com/5da30635498119f04c720227/5e52a83c460080cafe4270d2_5e5196c82c16e804080c18e5_think-underline.webflow.io_(1280x720).png)
Live search Anywhere with 'hideseek.js'
Embed a live search bar to search in any div container.
![](https://assets-global.website-files.com/5da30635498119f04c720227/5ddfc531cd25bef648b2e405_5dc33c2db2b24e68297fb14c_live-search-anywhere.webflow.io_(1280x720).png)
Changing Text
Change text in a sentence/headline with Webflow's interactions
![](https://assets-global.website-files.com/5da30635498119f04c720227/5fb72cd5e1df103181e4bf1a_5ec674c2e2d02e0118263f07_changing-text.webflow.io_(Tiny%2520Elements%2520Screen%2520Cap).png)
Email Validation (Non-free / Work)
Excluding 100 of the most popular free email domains from using it in a Webflow form with JavaScript.
![](https://assets-global.website-files.com/5da30635498119f04c720227/61575173d0559c040157c529_5e94cd2b8d9e675c59cb0dd1_non-free-email-validation.webflow.io_(Tiny%2520Elements%2520Screen%2520Cap).png)
Brand ID Questionnaire
Questionnaire for better understanding brand ID
![](https://assets-global.website-files.com/5da30635498119f04c720227/5ddfc539bf3f256217a8f8e7_5da782bbbf20980a325a7ebd_brand-id.webflow.jpeg)
ToDo List
A todo list, created with JavaScript collected through the internet... ;)
![](https://assets-global.website-files.com/5da30635498119f04c720227/5e3814b4f3983b4d101f89a0_5e38141e121267935ccbcc22_a-todo-list.webflow.io_(1280x720).png)
Chart.js in Webflow
A short tutorial on how to implement a Chart.js plugin in a Webflow project
![](https://assets-global.website-files.com/5da30635498119f04c720227/5ddfc537bf3f25512aa8f8c2_5da7ada2e84636910cc0ec69_chart-js-in-webflow.webflow.jpeg)
Animations with Lottie
Clonable animations with lottie .json files.
![](https://assets-global.website-files.com/5da30635498119f04c720227/5ddfc53b9febdaaab90768bf_5da86f01050f2131dbd44abf_animations-with-lottie.webflow.jpeg)
Variant Width for CMS items
Applying variant width to CMS items on the same list.
![](https://assets-global.website-files.com/5da30635498119f04c720227/5ddfc53b54174964c155c586_5da7b43c3e5488f5acd6f916_variant-width-for-cms-items.webflow.jpeg)
Cursor Blend
A few short lines of code, to replace the pointer with an interactive color element.
![](https://assets-global.website-files.com/5da30635498119f04c720227/5ddfc537cd25be6c73b2e8b3_5da7b064fbe3aa4c8e5de68a_cursor-blend.webflow.jpeg)
Auto change tabs
A script to automatically switch between tabs in a loop.
![](https://assets-global.website-files.com/5da30635498119f04c720227/5ddfc52ebf3f252d5fa8f77b_5dceb481792b962f0fb736af_tabs.gif)
Contact form as a Chat widget
A contact form disguised as a chat widget.
![](https://assets-global.website-files.com/5da30635498119f04c720227/5e62b568f91c9ed02c081f7a_5e62b38fde4a9f1eedcb6897_contact-form-chat-widget.webflow.io_(Tiny%2520Elements%2520Screen%2520Cap)%2520(1).png)
Live CSS Edit
An editable box of text that affects the website's CSS
![](https://assets-global.website-files.com/5da30635498119f04c720227/663893fc0c9b003d13196199_live-edit-css.webflow.io_(Tiny%20Resources%20Screen%20Cap).png)
Desktop Grid, Mobile Slider
Change Webflow's Slider to act as a "regular" grid block on desktop, but go back to Slider on Tablet and smaller screens.
![](https://assets-global.website-files.com/5da30635498119f04c720227/63b67d235f53e23ee9f09d65_63023c37439fa65a84ed4cd1_desktop-grid-mobile-slider.webflow.io_(Tiny%2520Resources%2520Screen%2520Cap).png)
Animated Favicon
A short code that changes multiple .png files to create animation.
![](https://assets-global.website-files.com/5da30635498119f04c720227/5de0ec38b2fc8a7081dc32fc_5de01201131b5604c0003470_Image%2520001.png)
Hover to reveal Mask
A fixed background image that is revealed by mouse hover all over the section
![](https://assets-global.website-files.com/5da30635498119f04c720227/6249e8ff527d5d003f5dc70d_5f5348b5b1f93437859c3de6_hover-reveal-mask.webflow.io_(Tiny%2520Elements%2520Screen%2520Cap).png)
Code Syntax in a Dynamic rich-text Element
Using highlight.js plugin to add code syntax in a Dynamic rich-text element
![](https://assets-global.website-files.com/5da30635498119f04c720227/5ddfc5359febdaa59a076492_5db19687083f4b5b0fa1fa7d_code-syntax-in-rich-text.webflow.jpeg)
Custom Slider
A small upgrade to the normal behaviour of the Webflow Slider Widget.
![](https://assets-global.website-files.com/5da30635498119f04c720227/5ddfc53924feebb9e9662b39_5da77310d54167452314c5d0_custom-slider-1.webflow.io_(1280x720).jpeg)
Webflow Dashboard Workspaces Hack
Convert the Workspaces dropdown to an open sidebar with custom order.
![](https://assets-global.website-files.com/5da30635498119f04c720227/63e8c7bef17305785704d417_w.jpg)
Swapping Text on Scroll
Swapping a sticky element on sections scroll.
![](https://assets-global.website-files.com/5da30635498119f04c720227/5ddfc538bb621ccafe21c257_5da791ee05e5ab426c8a17ba_swapping-texts.webflow.jpeg)
Math formulas in CMS
Writing inline (LaTeX) math formulas anywhere on a static or dynamic page using MathJax.
![](https://assets-global.website-files.com/5da30635498119f04c720227/5ddfc5344c0690b206d22397_5db555e013810c321f49010a_math-formulas-in-cms.webflow.jpeg)
Dynamically Inject current page URL to a Text element
Changing a text element by the page url using JavaScript
![](https://assets-global.website-files.com/5da30635498119f04c720227/5ddfc52fbb621c1b9321c0bd_5dc854d0d6571e71ebc5a5aa_url-as-text.webflow.io_(1280x720).png)
Round Scroll Indicator / Progress Bar
A round scroll indicator mad with Webflow elements and interactions
![](https://assets-global.website-files.com/5da30635498119f04c720227/636696f83b3b335cfdc59984_600c13c34b728598f8c3a649_round-scroll-indicator.webflow.io_(Tiny%2520Elements%2520Screen%2520Cap).png)
Auto Change Tabs 2.0
A new and improved version for a Tabs element that automatically change tabs
![](https://assets-global.website-files.com/5da30635498119f04c720227/63972a6adea35503f436fa1f_5f04b068c5b3fe3675429b70_auto-change-tabs-2.webflow.io_(Tiny%2520Elements%2520Screen%2520Cap).png)
Glossary
A clonable for creating an Alphabetical glossary
![](https://assets-global.website-files.com/5da30635498119f04c720227/63c6f4950d1dab9aaf3ce09f_glossary-cloneable.webflow.io_(Tiny%20Resources%20Screen%20Cap).png)
Simple Mega Nav (Similar to Mailchimp's)
A very simple mega navigation bar, opens on hover and changes background color on scroll.
![](https://assets-global.website-files.com/5da30635498119f04c720227/5ddfc4d37d1f1025f376a148_5dda68c6578bab0a9e22a73e_simple-mega-nav.webflow.io_(1280x720).png)
Current Class on Dropdown
Makes the dropdown element (usually inside navigations) indicate when a current state is active on one of the pages within.
![](https://assets-global.website-files.com/5da30635498119f04c720227/5ddfc52f3e62c2c0f2a5b203_5dce6b9013d30e7e828b90fa_current-class-on-dropdown.webflow.io_about(1280x720).png)
Scroll & Focus
Scroll down and focus on an input field when a button is clicked
![](https://assets-global.website-files.com/5da30635498119f04c720227/5ddfc53001286d7f2773492f_5dc84d6a2058972a17858d05_scroll-and-focus.webflow.io_(1280x720).png)
"Highlight & Share" with Sharect.js (like in Medium)
A lightweight 'Select text and share / tweet'
![](https://assets-global.website-files.com/5da30635498119f04c720227/5ddfc53370590f795e6a3abd_5dc29536f3d144e55cfc4705_highlight-and-share.webflow.io_(1280x720).png)
OS Detection with JavaScript
Short JavaScript code that detects which OS system the user is running and display div accordingly.
![](https://assets-global.website-files.com/5da30635498119f04c720227/5ddfc5364c069043ead2248a_5da87245708659571e824e5c_mobile-detect.webflow.jpeg)
Sliding Tabs Menu
A sliding background element placed behind the tabs menu. No custom code, only IX.2
![](https://assets-global.website-files.com/5da30635498119f04c720227/5dff3eb94f9bf3a9b6ac4299_5dfe646fc3faab489cad789c_sliding-tab-menu-element.webflow.io_.png)
Tabs with scrollable (sideways) Menu
A Webflow Tabs widget with some edits and custom code to make the menu scrollable on desktop & mobile
![](https://assets-global.website-files.com/5da30635498119f04c720227/60f05ce9def964bd045f52c6_5e870c63468dce79ebf0fefd_scrollable-tabs-menu.webflow.io_(Tiny%2520Elements%2520Screen%2520Cap).png)
Before / After effect
A Before / After effect for photos, without any code. Only Webflow's interaction.
![](https://assets-global.website-files.com/5da30635498119f04c720227/61aa3a12b3cf99451f8280db_5fe5fd89d7bed2c446d5f943_before-after-in.webflow.io_(Tiny%2520Elements%2520Screen%2520Cap).png)
Pass Parameters
Pass input fields parameters and add them to the destination URL.
![](https://assets-global.website-files.com/5da30635498119f04c720227/6249e9048f328c57d5392304_5fee16fb9c74e6985f64d817_pass-parameters.webflow.io_(Tiny%2520Elements%2520Screen%2520Cap).png)
Background Video with Audio (using plyr.js)
An embed video with Mute/UnMute button using plyr.js plugin.
![](https://assets-global.website-files.com/5da30635498119f04c720227/62b8193523b29c603419fb32_627a936b111e36e090a4b7fd_plyr-bg-video-with-audio.webflow.io_(Web%2520Common%2520(1366x768)).png)
Auto get Current Year
Automatically insert the current year to any element with the class of 'year'
![](https://assets-global.website-files.com/5da30635498119f04c720227/62f803d0ebd5c5ec57bba3b5_6285e7d064c3b6eec248a245_get-current-year.webflow.io_(Web%2520Common%2520(1366x768)).png)
Maintain Form Height on Success
Using a little bit of jQuery to adjust the success message height
![](https://assets-global.website-files.com/5da30635498119f04c720227/62f803df9a7144d87183e9db_62c5748671747979bfc87e40_form-success-height.webflow.io_(Tiny%2520Resources%2520Screen%2520Cap).png)
Modal Lottie Transition
A full screen close/open animation with lottie
![](https://assets-global.website-files.com/5da30635498119f04c720227/5e0727ba90988a01ec4d05b4_5e06095eb28d341143f3583b_modal-lottie-trans.webflow.io_(1280x720).png)
Symbol in RichText
Insert a symbol element into a RichText. On a static or dynamic page.
![](https://assets-global.website-files.com/5da30635498119f04c720227/607f197b0e8db1462b510e6a_symbol-in-rich-text.webflow.io_(Tiny%20Elements%20Screen%20Cap).png)
Floating Labels Interaction
A short CSS code for floating labels on a form
![](https://assets-global.website-files.com/5da30635498119f04c720227/6249e75307e47781d818b9de_form-int.webflow.io_(Tiny%20Resources%20Screen%20Cap).png)
Scroll Menu to Current Link
Using JS to scroll a div (menu) to the current link inside.
![](https://assets-global.website-files.com/5da30635498119f04c720227/6283b9657f930683c051279a_scroll-menu-js.webflow.io_category_explicabo(Web%20Common%20(1366x768)).png)
CMS Autocomplete
A short JavaScript code for transferring a CMS list into an autocomplete on an input field.
![](https://assets-global.website-files.com/5da30635498119f04c720227/628b5266034bb376fa1cfa7b_image%20138.jpeg)
Dynamic Height
A (custom code) solution that combines CSS variables and Vanilla JavaScript for the shrinking / growing of browser top & bottom bars.
![](https://assets-global.website-files.com/5da30635498119f04c720227/6330b1294a0d2f5f387f8e9d_dynamic-height.webflow.io_(Tiny%20Resources%20Screen%20Cap).png)
3d Video Slider (swiper.js)
A 3d slider with video items, plays and pauses on click & slide change.
![](https://assets-global.website-files.com/5da30635498119f04c720227/6472fd85628c867ed52d1b8c_videos-slider.webflow.io_(Tiny%20Resources%20Screen%20Cap).png)