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

18
18
Oops! Something went wrong while submitting the form.

A template of web design grid to help you design better.

Read more
White Arrow icon

Thick Underline

14
14
Oops! Something went wrong while submitting the form.

An editable thick underline for your Headlines

Read more
White Arrow icon

Live search Anywhere with 'hideseek.js'

12
Oops! Something went wrong while submitting the form.

Embed a live search bar to search in any div container.

Read more
White Arrow icon

Changing Text

10
10
Oops! Something went wrong while submitting the form.

Change text in a sentence/headline with Webflow's interactions

Read more
White Arrow icon

Email Validation (Non-free / Work)

8
8
Oops! Something went wrong while submitting the form.

Excluding 100 of the most popular free email domains from using it in a Webflow form with JavaScript.

Read more
White Arrow icon

Brand ID Questionnaire

7
7
Oops! Something went wrong while submitting the form.

Questionnaire for better understanding brand ID

Read more
White Arrow icon

ToDo List

6
6
Oops! Something went wrong while submitting the form.

A todo list, created with JavaScript collected through the internet... ;)

Read more
White Arrow icon

Chart.js in Webflow

6
6
Oops! Something went wrong while submitting the form.

A short tutorial on how to implement a Chart.js plugin in a Webflow project

Read more
White Arrow icon

Animations with Lottie

6
6
Oops! Something went wrong while submitting the form.

Clonable animations with lottie .json files.

Read more
White Arrow icon

Variant Width for CMS items

6
6
Oops! Something went wrong while submitting the form.

Applying variant width to CMS items on the same list.

Read more
White Arrow icon

Cursor Blend

5
5
Oops! Something went wrong while submitting the form.

A few short lines of code, to replace the pointer with an interactive color element.

Read more
White Arrow icon

Auto change tabs

5
5
Oops! Something went wrong while submitting the form.

A script to automatically switch between tabs in a loop.

Read more
White Arrow icon

Contact form as a Chat widget

5
5
Oops! Something went wrong while submitting the form.

A contact form disguised as a chat widget.

Read more
White Arrow icon

Live CSS Edit

5
5
Oops! Something went wrong while submitting the form.

An editable box of text that affects the website's CSS

Read more
White Arrow icon

Desktop Grid, Mobile Slider

5
5
Oops! Something went wrong while submitting the form.

Change Webflow's Slider to act as a "regular" grid block on desktop, but go back to Slider on Tablet and smaller screens.

Read more
White Arrow icon

Animated Favicon

4
4
Oops! Something went wrong while submitting the form.

A short code that changes multiple .png files to create animation.

Read more
White Arrow icon

Hover to reveal Mask

4
4
Oops! Something went wrong while submitting the form.

A fixed background image that is revealed by mouse hover all over the section

Read more
White Arrow icon

Code Syntax in a Dynamic rich-text Element

3
3
Oops! Something went wrong while submitting the form.

Using highlight.js plugin to add code syntax in a Dynamic rich-text element

Read more
White Arrow icon

Custom Slider

3
3
Oops! Something went wrong while submitting the form.

A small upgrade to the normal behaviour of the Webflow Slider Widget.

Read more
White Arrow icon

Webflow Dashboard Workspaces Hack

3
3
Oops! Something went wrong while submitting the form.

Convert the Workspaces dropdown to an open sidebar with custom order.

Read more
White Arrow icon

Swapping Text on Scroll

3
3
Oops! Something went wrong while submitting the form.

Swapping a sticky element on sections scroll.

Read more
White Arrow icon

Math formulas in CMS

2
2
Oops! Something went wrong while submitting the form.

Writing inline (LaTeX) math formulas anywhere on a static or dynamic page using MathJax.

Read more
White Arrow icon

Dynamically Inject current page URL to a Text element

2
2
Oops! Something went wrong while submitting the form.

Changing a text element by the page url using JavaScript

Read more
White Arrow icon

Round Scroll Indicator / Progress Bar

2
2
Oops! Something went wrong while submitting the form.

A round scroll indicator mad with Webflow elements and interactions

Read more
White Arrow icon

Auto Change Tabs 2.0

2
2
Oops! Something went wrong while submitting the form.

A new and improved version for a Tabs element that automatically change tabs

Read more
White Arrow icon

Glossary

2
2
Oops! Something went wrong while submitting the form.

A clonable for creating an Alphabetical glossary

Read more
White Arrow icon

Pass Parameters

2
2
Oops! Something went wrong while submitting the form.

Pass input fields parameters and add them to the destination URL.

Read more
White Arrow icon

Simple Mega Nav (Similar to Mailchimp's)

1
1
Oops! Something went wrong while submitting the form.

A very simple mega navigation bar, opens on hover and changes background color on scroll.

Read more
White Arrow icon

Current Class on Dropdown

1
1
Oops! Something went wrong while submitting the form.

Makes the dropdown element (usually inside navigations) indicate when a current state is active on one of the pages within.

Read more
White Arrow icon

Scroll & Focus

1
1
Oops! Something went wrong while submitting the form.

Scroll down and focus on an input field when a button is clicked

Read more
White Arrow icon

"Highlight & Share" with Sharect.js (like in Medium)

1
1
Oops! Something went wrong while submitting the form.

A lightweight 'Select text and share / tweet'

Read more
White Arrow icon

OS Detection with JavaScript

1
1
Oops! Something went wrong while submitting the form.

Short JavaScript code that detects which OS system the user is running and display div accordingly.

Read more
White Arrow icon

Sliding Tabs Menu

1
1
Oops! Something went wrong while submitting the form.

A sliding background element placed behind the tabs menu. No custom code, only IX.2

Read more
White Arrow icon

Tabs with scrollable (sideways) Menu

1
1
Oops! Something went wrong while submitting the form.

A Webflow Tabs widget with some edits and custom code to make the menu scrollable on desktop & mobile

Read more
White Arrow icon

Before / After effect

1
1
Oops! Something went wrong while submitting the form.

A Before / After effect for photos, without any code. Only Webflow's interaction.

Read more
White Arrow icon

Background Video with Audio (using plyr.js)

1
1
Oops! Something went wrong while submitting the form.

An embed video with Mute/UnMute button using plyr.js plugin.

Read more
White Arrow icon

Auto get Current Year

1
1
Oops! Something went wrong while submitting the form.

Automatically insert the current year to any element with the class of 'year'

Read more
White Arrow icon

Maintain Form Height on Success

1
1
Oops! Something went wrong while submitting the form.

Using a little bit of jQuery to adjust the success message height

Read more
White Arrow icon

Modal Lottie Transition

0
Oops! Something went wrong while submitting the form.

A full screen close/open animation with lottie

Read more
White Arrow icon

Symbol in RichText

0
0
Oops! Something went wrong while submitting the form.

Insert a symbol element into a RichText. On a static or dynamic page.

Read more
White Arrow icon

Floating Labels Interaction

0
0
Oops! Something went wrong while submitting the form.

A short CSS code for floating labels on a form

Read more
White Arrow icon

Scroll Menu to Current Link

0
Oops! Something went wrong while submitting the form.

Using JS to scroll a div (menu) to the current link inside.

Read more
White Arrow icon

CMS Autocomplete

0
0
Oops! Something went wrong while submitting the form.

A short JavaScript code for transferring a CMS list into an autocomplete on an input field.

Read more
White Arrow icon

Dynamic Height

0
0
Oops! Something went wrong while submitting the form.

A (custom code) solution that combines CSS variables and Vanilla JavaScript for the shrinking / growing of browser top & bottom bars.

Read more
White Arrow icon

3d Video Slider (swiper.js)

0
0
Oops! Something went wrong while submitting the form.

A 3d slider with video items, plays and pauses on click & slide change.

Read more
White Arrow icon