- 20
- 111 803
Simon Lampert
Austria
เข้าร่วมเมื่อ 5 มี.ค. 2021
I partner with Webflow Agencies and Design Teams as an official Webflow Expert.
On this channel, I share some techniques to help you become a better Webflow developer.
On this channel, I share some techniques to help you become a better Webflow developer.
SwiperJS PAGINATION - COMPLETE GUIDE [2024 Webflow]
Upgrade your Swiper sliders with pagination! Learn how to add progress bars, pagination bullets or fractional pagination counts - all within Webflow! This is part 3 of my SwiperJS for Webflow mini-series where you learn everything you need to know to build advanced sliders in Webflow.
👀 Check out my portfolio: simonlampert.com
🔥 Follow me on Instagram: simonwebdev
⚡ Follow me on X (Twitter) :
SimonWebflow
🌎 Connect with me on LinkedIn:
www.linkedin.com/in/simon-lampert/
📷 Timestamps
00:00 - Introduction
00:28 - Bullets pagination
10:24 - Disable pagination on dekstop
12:10 - Progress Bar
19:08 - Fractions
👍 Watch my other Webflow videos if you want to learn more, leave a like and subscribe if you think this tutorial was helpful.
See you next time!
👀 Check out my portfolio: simonlampert.com
🔥 Follow me on Instagram: simonwebdev
⚡ Follow me on X (Twitter) :
SimonWebflow
🌎 Connect with me on LinkedIn:
www.linkedin.com/in/simon-lampert/
📷 Timestamps
00:00 - Introduction
00:28 - Bullets pagination
10:24 - Disable pagination on dekstop
12:10 - Progress Bar
19:08 - Fractions
👍 Watch my other Webflow videos if you want to learn more, leave a like and subscribe if you think this tutorial was helpful.
See you next time!
มุมมอง: 959
วีดีโอ
CMS SwiperJS Slider in Webflow [2024 Guide]
มุมมอง 1.2K3 หลายเดือนก่อน
Learn how to make your SwiperJS slider CMS-driven in just a few minutes! This is part 2 of my SwiperJS for Webflow mini-series where you learn everything you need to know to build advanced sliders in Webflow. 👀 Check out my portfolio: simonlampert.com 🔥 Follow me on Instagram: simonwebdev ⚡ Follow me on X (Twitter) : SimonWebflow 🌎 Connect with me on LinkedIn: www.lin...
The ULTIMATE SwiperJS Guide [2024 Webflow]
มุมมอง 4.2K4 หลายเดือนก่อน
Learn how to build custom SwiperJS sliders in Webflow from scratch! Complete step-by-step video walkthrough with code explanations and SwiperJS documentation overview. Sliders are essential for many client projects, might as well build them like a Webflow Pro! 👀 Check out my portfolio: simonlampert.com 🔥 Follow me on Instagram: simonwebdev ⚡ Follow me on X (Twitter) : twitter.com...
Show/Hide Nav on Scroll | Boost UX with [2024 Webflow Pro Solution]
มุมมอง 2874 หลายเดือนก่อน
Looking to enhance your Webflow Navbar? In this video, I will show you how to implement a Show/Hide Nav on Scroll feature using Webflow and custom JavaScript code. This Webflow custom code solution is perfect for creating a seamless and dynamic navigation experience that boosts your site’s UX. You don't have to be a JavaScript pro to understand the setup as I will walk you through the entire cu...
The BEST way to build a NAV in Webflow?
มุมมอง 3054 หลายเดือนก่อน
In this video I am guiding you through my process of building navigation bars in Webflow. You will learn how to build efficient and robust navbars within minutes. My next video will be an extension of this one and showcase an advanced navbar technique. Stay tuned. I have been an official Webflow partner for over 3 years. 👀 Check out my portfolio: simonlampert.com 🔥 Follow me on Instagram: insta...
Relume Library for Webflow | COPY & PASTE Sections in Seconds
มุมมอง 6K2 ปีที่แล้ว
The Relume Library is a new tool for Webflow that lets you copy and paste sections directly into your Webflow project. In this video, I will create a landing page by using the prebuilt sections. As you will see, this is the fastest way you could possibly build a website in Webflow. 💻 Use Webflow for free: webflow.grsm.io/simonlampert ⚡ Check out the Relume Library: library.relume.io/?via=simon ...
What is the Webflow CMS | Beginner tutorial 2021
มุมมอง 1.1K3 ปีที่แล้ว
In this video, you will learn about the Webflow CMS. Content Management Systems allow you to edit, store and publish content in an efficient way. Still, you might not understand Webflow's CMS interface from the start. That's why I created this video. Hopefully, it will be helpful for you! 👍 💻 Use Webflow: webflow.grsm.io/simonlampert ⚡ Check out the Relume Library: library.relume.io/?via=simon ...
LEARN MORE LINKS in Webflow | Beginner Tutorial 2021
มุมมอง 7643 ปีที่แล้ว
In this video, you will learn how to create a "Learn More" link in Webflow. To make this tutorial perfect for beginners I explained every single step of the process. After watching this video you will know how Webflow Interactions work and how to animate elements on hover. Additionally, I am giving a lot of practical tips and tricks to get better at Webflow. Hopefully, this video will be helpfu...
Add Grain Effect to your Webflow project | 2021 Tutorial for Webflow
มุมมอง 10K3 ปีที่แล้ว
In this video, I will show you how to add a grain effect in Webflow. The whole process will be explained. To make the grain overlay practical, we are going to add a CSS code snippet. No worries, I will also explain the code and show what it does. After watching my tutorial, you will be able to create your own grain effects in Webflow. Hopefully, this video will be helpful for you! 👍 💻 Use Webfl...
Gradient Underlines with Smooth Hover Animation | Webflow Tutorial 2021
มุมมอง 3.6K3 ปีที่แล้ว
In this video, I will show you how to create and animate gradient underlines in Webflow. We will add a smooth hover animation by using custom CSS code. I will guide you through the full process so that you will be able to create your own underline hover animations after watching my tutorial. Hopefully, this video will be helpful for you! 👍 💻 Use Webflow: webflow.grsm.io/simonlampert ⚡ Check out...
BLUR GRADIENTS in Webflow | UI Trend 2021/20 Webflow Tutorial
มุมมอง 8K3 ปีที่แล้ว
In this video, I will show you how to create nice blur gradients in Webflow. I will guide you through the full process so that you will be able to create your own blur shapes after watching my tutorial. Hopefully, this video will be helpful for you! 💻 Use Webflow: webflow.grsm.io/simonlampert ⚡ Check out the Relume Library: library.relume.io/?via=simon 🔥 Follow me on Instagram: si...
Crazy Webflow Slider Hack! Vertical Sliders Tutorial 2021
มุมมอง 3.3K3 ปีที่แล้ว
In this video, I will show you how to create a vertical slider in Webflow. To achieve this, we will have to trick the Webflow designer. I will start from scratch to guide you through the full process. Custom CSS code will be used, but no worries, every snippet is in the video description. Hopefully, this video will be helpful for you! 💻 Use Webflow: webflow.grsm.io/simonlampert ⚡ Check out the ...
Connect STICKY SECTION to CMS | Webflow Tutorial 2021
มุมมอง 1K3 ปีที่แล้ว
In the last video, we created a nice sticky section in Webflow. But how can we connect a sticky section to a CMS collection? For this, we will need custom code. After watching this video you will be able to turn sticky sections from static to dynamic. You will understand the custom code snippet which you can just paste into an HTML embed element. I used to struggle with this but the solution is...
Create STICKY SECTIONS in 5 minutes | Webflow Tutorial 2021
มุมมอง 14K3 ปีที่แล้ว
In this video, I will show you how to create an awesome sticky section in Webflow. This takes only 5 minutes and it looks super clean. I will start from scratch to guide you through the full process. Position sticky is not the most intuitive thing if you are not familiar with CSS, but after watching this Webflow tutorial you will probably understand it and also know how to use it. Hopefully, th...
EMBED SVG ICONS in WEBFLOW *FAST* | Tutorial
มุมมอง 10K3 ปีที่แล้ว
In this video, I will show you how to create SVG embeds in Webflow so that you can easily change the color of icons. This takes only 2 minutes and you don't even have to know how to code! I use this all the time because it's so flexible. Hopefully, this video will be helpful for you! 💻 Use Webflow: webflow.grsm.io/simonlampert ⚡ Check out the Relume Library: library.relume.io/?via=simon 🔥 Follo...
DISABLE SCROLL While PRELOADER Animation! Webflow Tutorial 2021
มุมมอง 4.2K3 ปีที่แล้ว
DISABLE SCROLL While PRELOADER Animation! Webflow Tutorial 2021
PRELOADER ANIMATION in WEBFLOW | Easy Tutorial 2021
มุมมอง 6K3 ปีที่แล้ว
PRELOADER ANIMATION in WEBFLOW | Easy Tutorial 2021
4 AMAZING NAV LINK HOVER ANIMATIONS | Webflow Tutorial 2021
มุมมอง 16K3 ปีที่แล้ว
4 AMAZING NAV LINK HOVER ANIMATIONS | Webflow Tutorial 2021
Show the CURRENT PAGE in WEBFLOW! Navlink styling | Easy tutorial 2021!
มุมมอง 7K3 ปีที่แล้ว
Show the CURRENT PAGE in WEBFLOW! Navlink styling | Easy tutorial 2021!
LINK to SECTIONS on OTHER PAGES | Webflow Tutorial 2021
มุมมอง 14K3 ปีที่แล้ว
LINK to SECTIONS on OTHER PAGES | Webflow Tutorial 2021
Great explanation, thank you!
The video really starts at 1:40
You're really cute
Would the easier way to do this be to do the animation once and then copy and paste?
True. But you can do it even faster: If you scroll down in the interactions panel you have the option to apply the animation to the class instead of just this element 👍
Nice Video. By the way: It can be done in webflow using webflow animations without using any javascript
By the way: Doing it with Webflow animations sucks. This solution is way better
youre my hero!!!!!!!!!!!!
it tells me I need a hosting plan does anyone else face the samething
Awesome, you are really amazing. Thanks
Thanks for this fantastic tutorial! It was super easy to follow, and I really appreciate how clearly you explained everything.
Thanks a lot!!, It works. But is there a way to have 2 different sliders on the same page? I tried to do this with different classes but I cannot let them both work at the same time.
Hi Simon, I have a question: after I clicked the link text and went to a different page, the underline animation stoped working. Only when I clicked the same link text again to reload the same page, the animation would work again. Do you know how to troubleshoot this?
Maybe you didn't apply the animation to the link element on the other page.
Build my first SwiperJs slider with the help of this video.
What if I want 2 different Swipers on the Page? I am currently searching a solution for this but I cannot really find anything to chage both sliders individually. Thanks in advance ;)
Did you find a solution?? I have the same question
@@skip_SportsLinksadly not, I‘m still trying
@@ake.no102 I found a solution!.. The first line of code is 'const swiper1 = new Swiper' change that to 'var swiper1 = new Swiper'.... You should replace the 'const' with 'var'!!! that's it.
@@ake.no102 I found a solution!, i can help you. Let me know
thanks
This was super helpful. I was struggling with creating/designing several instances and with replacing the navigation. Your approach makes it so much easier. Big thx!
Thank you very much for the only good custom slider tutorial where you go over how you did it and explain from the beginning. This also worked with my CMS too.
Hi Simon, appreciate these videos. A small tip: If you do not include Swiper's CSS file in the head, you wouldn't need to override the styles. Just matching the class name would work flawlessly. I learnt it the hard way lol
Interesting. I have had some situations in the past where I feel like the default styles where helpful. Will give this some thought.
Love this series, really helpful!
if you refresh it will only show one and take a few seconds to load
I'm sure its super basic, but showing what the blog_link item is would help super new people to follow along. Thanks for the video.
I appreciate your feedback! For sure it would help some people. When creating content you have to make decisions on what you want to include. I consider SwiperJS to be for intermediate/advanced Webflow users so I personally think it would be benefitial to focus on SwiperJS exclusively.
Thank you Simon! This, along with your last video, helped me get started with Swiper JS in Webflow. Seems like I started at just the right time.
Great to hear!
Really great Video, i was looking for a swiper basic tutorial and this perfectly covered my needs. Looking forward to see more I was watching alot of videos from you earlier with Jonas or from Finsweet. Great to see ur back
Thank you 🤝
Nice one, keep it on :)
Hello Simon! Thanks a lot for the script. It works great. I’ve run into an issue and I wonder if you could help. Is it posible to modify the script in a way that when I use anchor links from the footer of a page the nav component stay hidden so it doesn’t cover the top of the content when the scroll from the link reaches the anchor? Thanks in advance!
Really helpful thanks Simon, learned a lot here. One thing to add is that spaceBetween can be set in % which is a tiny bit better for responsiveness in my experience
Awesome 👏🏽 thanks
awesome, cant wait for next episode 💯
Awesome vid, thanx
Nice work Simon, really helpful.
Fantastic! Exactly what I need right now. Danke, Simon!
Great to hear 💪
Looks good
Have you tried Divhunt yet, and what is your opinion as Webflow alternative?
The idea of storing the components with the changes already made is genius. Why didn't I think of it earlier? Thanks!!
Impressive, that you work with keyboard only 😂
I mostly do actually, but I also messed up and my cursor wasn‘r recorded 😂
Great tutorial. I would probably use images in the right side with some text on the left to create a single page gallery. Thanks for sharing this!
Thank you, dear!
awesome video thanks Simon
Using this tutorial in 2024, thanks so much for sharing your knowledge with us!
@@ct7483 Thank you!
So this means even if the client needs more later for scale this would be easy with the library to add without managing snippets ? I heard the Hanse long from all the snippets is time consuming and confusing. Can/his can I avoid snippets at all?
This solution is not suitable for a good site perfomance, maybe works optically but regarding other expects like page loading etc. it is not good
You are right. It‘s an old video
@@simonlampert Do you have a solution that works for site performance as well now? Please help
@@ojoosama I would recommend using Finsweet Attributes „Disable Scroll“ solution.
@@simonlampert thank you so much
it doesn't work for me 😭
Thnks bro! Finally one tutorial that works at 1st attemp
Hardly ground breaking! But man, it works! Thank you! Simple yet effective. Adding a wee top layer over it as well to add colour or patters looks really cool! 😎 Top man! Thank you again. 😀
hey thank you very much for your useful video - how did you get this view of the page source? (minute 2:00) I only know the regular developer tool of chrome...thanks for your answer!
This is a great solution, thanks so much! Super easy and a nice effect.
Great vid Brother well done
Thanks
Very helpful. Sometimes it's hard to find a tutorial on how to do the easiest things.
Perfect tutorial, highlight on hovered link is what I searched!
Good Exemple and thanks for the video. I found another solution for my problem and I hope that help someone too: I've just changed the position Absolute to Fixed in "preloader" div.
This is not the best solution, as with fixed, you can still scroll on the site and end up on a lower section after the animation. For some animation that play with the background color of the hero it will look messy then.