I have no software background. I developed my first website with Webflow. For a long time, I stayed within the limits of this no-code tool. In fact, the possibilities are endless, but if you want to develop a functional product, knowing a little Javascript really helps.
A complete win cycle. No-code tools help you develop faster, while writing code helps you develop faster. Both support each other.
I realized the power of Javascript on the Spacebar Counter microsite, which I developed for fun in my spare time.
I wanted to make a tool that would count it on the screen every time I hit the spacebar key. What could have been solved with this two line javascript issue could not be done for Webflow.
But I managed to make this site in Webflow with a custom JS contribution. I felt very smart that day.
Then I did some deeper research and discovered what other members of the community have accomplished with custom code.
Here are some impressive examples below.
Rich Text Enhancer (cloneable)
Webflow announced that it will develop the Rich text editor in 2022. The current editor is very limited. However, without waiting for native developments, it is possible to create great cms content with the above template.
Add Auto FavIcon (cloneable)
Usually we want to make a difference on our site to stand out from the crowd. We also apply to design to make a difference. But no matter how original we are, there are some common rules. These rules are not the norm but have been adopted by all users. One of them is the external link icon. Most users know that when they see this link, they will go to another link.
When dealing with screens, it's just as important to make the user feel safe as it is to surprise them. Otherwise, the user may feel lost.
In the example above, we see a code that automates adding an external link icon to all linked text.
Horizontal Scrolling (cloneable)
When we hear the word scrolling, we think of a top-down action. This is also possible on Webflow. However, Horizontal scrolling has become a trend lately.
This trend is really enjoyable if used without exaggeration. You can check out a well-executed example above, you can even clone it and use it in your own project.
UX Cookies (cloneable)
We're a little bored with cookies. They actually work great and are really helpful for the user experience as well. But their abuse has caused them to build a bad reputation. They're not that bad.
You no longer need to be a software expert to take advantage of We cookies. This example is proof of that. There is even a video tutorial on Youtube.
Range Slider (cloneable)
We mostly use machines to calculate things. This is the purpose of the invention of computers. While we wanted to invent the broom, we did not accidentally build the computer.
The easier a calculator developed on screens, the more it is used. Range sliders also make this job easier.
AutoComplete Input (cloneable)
This Javascript build allows us to create a predictive text field. When tapping on a letter this keyboard will identify the most likely word, while the editing possibilities are endless. This works incredibly well with the default term array that contains all the possible completions.
The suggestions are based on the first 2-3 letters pressed. The user can select from various values or add new values to the array using the CMS control panel or by removing them with JavaScript.
Soundboard (cloneable)
This simple pad allows you to play sound effects for your Clubhouse. This includes: clapping hand sounds, heart beep boop sounds and a laugh track that is really more of a laugh-roar.
Note: The laugh roar is only used when you tap the pad with two hands at the same time, otherwise it plays a regular roar sound. You can find me as Kiki on Club Penguin Island.
Price Calculator (cloneable)
Are you responsible for setting the prices of your products? Are you always looking for a vendor that offers the best combination of price and customer service? Look no further!
The Price Calculator is here to help. Use Price Calculator to set up product specific prices to meet your company's desired price point.
To Do App with React (cloneable)
React is beating the web. Is it the most popular way to build a web app? If you are asking yourself Can I implement the react on my WF project. These templates demonstrate it is possible.
Last Words
This is the end of the list for now. If I come across impressive cloneable templates during time, I will definitely update this post to make your day.
Top comments (0)