- Видео 139
- Просмотров 614 097
Ahmed Qayyum
Пакистан
Добавлен 30 ноя 2012
Webflow Developer at Jaryah Studios, leveraging a client-first framework to create dynamic websites with custom scripts and Finsweet attributes.
Tiny but Really Mighty Webflow Update
Class is no longer a reserved attribute name for an element, and it actually opens doors to a lot of new possibilities.
Webflow Livestream: webflow.com/livestreams/tiny-but-mighty-product-updates.
Connect with me at:
Instagram: ahmedqayyum32
Twitter: ahmedqayyum32
LinkedIn: www.linkedin.com/in/ahmedqayyum32
Webflow Livestream: webflow.com/livestreams/tiny-but-mighty-product-updates.
Connect with me at:
Instagram: ahmedqayyum32
Twitter: ahmedqayyum32
LinkedIn: www.linkedin.com/in/ahmedqayyum32
Просмотров: 109
Видео
Input driven Select Field options in Webflow
Просмотров 1722 месяца назад
Discover how to elevate your web forms using dynamic option loading in this tutorial! Join me as I guide you through creating select fields that adapt based on the user's previous selection. In this tutorial, we'll harness the power of Webflow, leveraging two Finsweet attribute-based solutions along with a custom script to achieve dynamic option loading. Whether you're a beginner or seasoned pr...
Swiper JS Slider Responsiveness in Webflow
Просмотров 3103 месяца назад
In this video, we discussed two ways to make your Swiper JS Slider responsive in Webflow. Method 1: Utilize Swiper JS parameters and specify the number of slides on different breakpoints. Access the properties here: swiperjs.com/element Method 2: Set slidesPerView to 'auto' and control the slides' width directly from the Webflow properties panel. It's that simple. Connect with me at: Instagram:...
How to use Swiper JS in Webflow for beginners?
Просмотров 1,1 тыс.3 месяца назад
Whether you're a beginner or an experienced Webflow user, this step-by-step tutorial helps you enhance your website with a sleek and interactive slider. During the video, I show you exactly which script tag to copy from the Swiper documentation. We discuss the structure and class names required to implement the slider seamlessly into your Webflow project. By following along, you'll be able to e...
03 [Product Review] - Implementing Product-Based Review Filtering
Просмотров 914 месяца назад
Welcome to the third part of our video series on how to get customer reviews and display them on your website! In this video, we explored how to filter reviews based on the current product page. To achieve this, we utilize the power of native Webflow forms and Webflow CMS, along with Webflow Logic. In this video, we focus on implementing a JavaScript code that will allow us to filter reviews ba...
API Request to OpenWeather using Wized
Просмотров 1055 месяцев назад
Let's build a small app in Webflow using Wized. In this app, our objective is to seamlessly integrate the OpenWeather API to fetch real-time weather information. To master Wized from scratch, let's construct a concise Webflow app. Users will input coordinates (Latitude & Longitude), allowing us to retrieve data such as temperature, city name, and timezone. The subsequent step involves displayin...
CMS Driven Bullet List in Webflow - Step by Step Guide
Просмотров 2385 месяцев назад
CMS driven bullet list in Webflow Fetch bullet list from a single rich text field in CMS, and display it in your desired design structure. We can achieve this by using an attribute based script. Find the script at www.zerodegree.co/hacks/cms-driven-bullet-list Follow the video, or documentation to get it done. Connect with me at: Instagram: ahmedqayyum32 Twitter: ahmed...
Creating a Div block with a custom shape entirely through CSS
Просмотров 1825 месяцев назад
Achieve this effortlessly with a user-friendly approach-no learning curve involved. 1. Design your shape in @Figma using the pen tool or your preferred method, then export it as an SVG. 2. Head to www.plantcss.com/css-clip-path-generator 3. Upload your SVG file and click the convert button. 4. Copy the resulting clip path, consisting of multiple percentage values. In @Webflow insert an embed bl...
Quickly rename Relume Component classes in less than 20 seconds!
Просмотров 2165 месяцев назад
Nothing too complex, just a handy tip. When creating pages in Webflow with Relume, renaming classes can get a bit tricky. However, there's a swift way to do it-navigate to the Style Manager, and you can rename all classes for a component at once. Connect with me at: Instagram: ahmedqayyum32 Twitter: ahmedqayyum32 LinkedIn: www.linkedin.com/in/ahmedqayyum32
Careem's Website Audit: 10 Issues You Can't Afford to Ignore
Просмотров 1316 месяцев назад
Welcome to this in-depth audit of Careem's website! 🚗 In this video, I'll be uncovering 10 crucial issues that demand immediate attention for a smoother user experience and enhanced website performance. Optimizing Section Dividers: We'll explore the benefits of using SVG overlay section dividers instead of large background section images, potentially reducing file size from 1.1MB to a mere 10KB...
Calculate how much carbon your website emits with each visit?
Просмотров 416 месяцев назад
We're diving into a topic that might surprise you: the carbon footprint of websites. Did you know that every time you visit a website, it contributes to carbon emissions? 😱 I stumbled upon a fantastic tool called www.websitecarbon.com/ that allows you to calculate just how much carbon is emitted with each visit to a website. In this video, I'll be showing you the results of a specific webpage, ...
Experience the Magic of Flying Birds with Webflow Interactions
Просмотров 816 месяцев назад
Dive into the magic of web design with this quick tutorial! Witness the beauty of flying birds through a captivating GIF on your site. As the page loads, marvel at the Webflow Interactions in action, gracefully moving the birds from 10vw to -100vw, creating a seamless and enchanting experience. Connect with me at: Instagram: ahmedqayyum32 Twitter: ahmedqayyum32 LinkedI...
02 [Product Review] - How to display the average and total number of reviews on your website? 🤔
Просмотров 2149 месяцев назад
📊 Learn How to Count Reviews and Calculate Average Ratings in Webflow CMS 📊 We'll walk you through the steps to easily count the total number of reviews and calculate the average ratings within your Webflow CMS collection. Whether you're running an e-commerce site, a review platform, or any website with user-generated content, this script can provide valuable insights. 🔗 Access the Script: gith...
How to connect Airtable with Webflow effortlessly using Wized
Просмотров 1,6 тыс.9 месяцев назад
Let me show you how to connect Airtable with Webflow effortlessly using a fantastic tool called Wized. If you've ever wanted to seamlessly integrate your data from Airtable into your Webflow project, you're in the right place. Wized is a user-friendly platform that simplifies the process of connecting different apps and services. It's perfect for people who want to bring their data to life in W...
Tailoring Content Using IP Location: How to Show Relevant Information in Webflow
Просмотров 28810 месяцев назад
We are diving into the world of dynamic content personalization! In this video, we'll walk you through step by step as we demonstrate how to filter CMS (Content Management System) items based on IP location using JavaScript and APIs. Do you want your website to display content tailored to your visitors' geographical location? Key Topics Covered: Fetching the user's country code using the IP add...
How to connect Mailchimp with Webflow forms using Webflow logic?
Просмотров 1,6 тыс.10 месяцев назад
How to connect Mailchimp with Webflow forms using Webflow logic?
Using ChatGPT to optimize your YouTube Video Descriptions and Tags
Просмотров 315Год назад
Using ChatGPT to optimize your RUclips Video Descriptions and Tags
How to connect CMS with Navbar Menu Items?
Просмотров 749Год назад
How to connect CMS with Navbar Menu Items?
Creating a Replica of Careem Website Design in Figma with Interactive Features - Part 2
Просмотров 69Год назад
Creating a Replica of Careem Website Design in Figma with Interactive Features - Part 2
Creating a Replica of Careem Website Design in Figma with Interactive Features - Part 1
Просмотров 122Год назад
Creating a Replica of Careem Website Design in Figma with Interactive Features - Part 1
01 [Product Review] - How to Get Customer Feedback with Star Rating on Webflow?
Просмотров 2,6 тыс.Год назад
01 [Product Review] - How to Get Customer Feedback with Star Rating on Webflow?
Use ChatGPT generated text instead of Lorem Ipsum in your Webflow website
Просмотров 116Год назад
Use ChatGPT generated text instead of Lorem Ipsum in your Webflow website
How to create breathing animation with circles in Webflow?
Просмотров 609Год назад
How to create breathing animation with circles in Webflow?
Lottie Files for 404 Error Page in Webflow | Lottieflow
Просмотров 200Год назад
Lottie Files for 404 Error Page in Webflow | Lottieflow
Design Feedback on Foodpanda webpage Replica in Figma
Просмотров 205Год назад
Design Feedback on Foodpanda webpage Replica in Figma
Flowremote - The No.1 jobboard for finding Webflow jobs
Просмотров 243Год назад
Flowremote - The No.1 jobboard for finding Webflow jobs
Client First to CMS Items and Rich Text
Просмотров 90Год назад
Client First to CMS Items and Rich Text
Adding Client-First to existing Webflow form elements and footer
Просмотров 73Год назад
Adding Client-First to existing Webflow form elements and footer
CSS Styles Reorder in Webflow using Finsweet Chrome Extension
Просмотров 123Год назад
CSS Styles Reorder in Webflow using Finsweet Chrome Extension
Client-First implementation to section inner-structure
Просмотров 117Год назад
Client-First implementation to section inner-structure
Won't work for me!
It should work. Can you share the read only link with me. I can check. We can also connect on LinkedIn or Instagram for a chat.
bro please make a video on --> how can fresher can get job or freelance project as webflow developer
Thanks, very useful video!
Glad it was helpful!
One question, how can I visualize real time movement in that map?
In this specific case we can't. Because we are processing an image to showcase.
Your video has been a huge help thank you very much
You're welcome!
Thank you!! that was really helpful!
I'm so glad!
greate
Thank you brother
how can we have multiple js sliders in one single page?
That's an excellent question, it requires to create an object, and declare every swiper as an instance of that object
how can we have multiple js sliders in one single page?
rename to "swiper-2", "swiper-wrapper-2", etc... - and initialize an additional swiper in the page code
Salam, that was a great tutorial; however, it did not work on my end. I see P608.woff2 I downloaded that file, and it did not work. I have also google and downloaded the QCF P604 and did not work either, I do use illunstrator 2023. Can you or anyone help, please? Thank you
Thank u very much
You are most welcome
Salam alikoum, thank you brother, i’m using the Quran4adobe extension (open source), and it’s the best way for me to add Quran text automatically with just one click.
Ahmed, ager UI/UX ya basic HTML na ati ho to webflow start kr lein?
I don't recommend. You should be familiar with basic HTML, CSS and UI design concepts
best free software Ive seen. Thanks for your video
Wow, thanks!
howw to save its not coming in download its just remain in website save
You will be able to download the image file
@@ahmedqayyum now no option coming there to download image
You will find my Instagram and Linkedin profile links in the description. Let's have a chat there. Hopefully, we will find a way.
Thank you so much, it’s so useful video❤
Great 👍 My pleasure
Thank you so much, this makes my life easier!!!
Perfect. Thank you
@@ahmedqayyum do you know how i can show the average rating on each product itself?
Where is the script that you used for the input element ??
That's Finsweet Attributes
wich finsweet is that @@ahmedqayyum
I am not able to add the another collection in the filter collection it is showing please add a multireference or multi field
That's correct. Nested collection should be a multi-reference field
Assalam Walekum bhai jaan kya hal hai please apna contact number do
Contact on LinkedIn
hello sir plz helb me
Contact on LinkedIn
hello sir
Please contact on LinkedIn or Instagram
This was very helpful. Thanks for sharing 😁
You are so welcome!
Happy to listen to your voice after a long time. 😊
Thank you so much 😀
level ho gya yehi cheez dhoondh rha tha love you brother
Great yaar.
Very helpful video thanks a lot
Thanks man
Many Thanks for the helpful tutorial. Bless you
Glad it was helpful!
i'm unable to pull text in Checkbox text from my categories CMS
Can you please share the loom video on my linkedin, instagram or email address. There we can further communicate to diagnose the issue
Hi, how do I edit and change the code to filter for cities and regions instead of countries? My client has businesses across the country but all within the same country.
I have replied you on the email. Please schedule a call to discuss this in detail.
Tried this now, its really a good update
Yes it is.
Thank you so much ❤
You're welcome 😊
Hey Ahmed, amazing video! I got a quick question: how do you think that I can display this average rating on another page with products collection list, so that we see the rating there already before clicking on a product? I think the JS code won't work there anymore right?
It can work. You just need to update the JavaScript accordingly. Update the classes
Hey, is it not possible to connect the product name that's submitted with the form to the product reference field in the review collection via logic, so that way you can do the webflow collection list filtering (Add a filter to the review collection list on the product page -> Select the reference field (that links reviews to products) and set the condition to “Equals” and then select “Current Product”. This way you don't need to render all the reviews and hide/display with custom code. May this be a better solution or am I overseeing something?
I have recorded this in another video. Take a look at ruclips.net/video/AP7zR1Ew0pw/видео.html
@@ahmedqayyum the problem is that I want to build a big review site with a lot of review CMS items (10,000+), and rendering them all like you have showed in video number 3 is not a best practise because then the website might take longer to load , as you are rendering all the reviews and with a lot of reviews that's not the best practise. Do you think you can connect the product name to the reference field via Make or Zapier?
Please make detailed video on js swiper make basic and complicated js swiper please
Yes iA.
Thank you so much for such amazing information with us. I love your content Sir 💗. Please Keep uploading such helpful content. At least one video per week we need from you.
So nice of you
Amazing and simple
Yes. Simple and very powerful
Mashaa Allah ❤
JazakaaAllah Naveed bhai
outstanding learned a lot. please SIr keep uploading such content.
Thank you
This is AWESOME!!! Saved me soooo much time. Thanks sooo much.
Excellent. Thank you
Awesome. Thanks
Thank you for the appreciation
is it just a regular text block for the average reviews?
Yes
@@ahmedqayyum Thank you for creating this. Are they blank text blocks? I can't get any numbers to show up (after 2 hours of trying and looking at how you have the elements in the Navigator at 3:33 in the video). Do you happen to have a cloneable or read-only webflow site? I'd like to compare my element settings, assuming that's where the problem is.
where's link for figma?
Iftikhar created by himself. Why do you need the Figma link?
where's link for figma?
Sir please link send, Paragraph copy in psd Photoshop
You can download a sample from any website for the practice purpose
what if I only want to affect the unordered lists of a page?
You mean, the unordered list inside the rich text?
@@ahmedqayyum yes. Because for me it's effecting every list, which I don't want as I want to keep the ordered list with the numbers without the icon.
Very interesting. I need to modify the script, that will only pick the unordered list from the rich text field, not the ordered ones. Very good point.
If possible, let's get connected on LinkedIn, where we can discuss this in detail. And we can test the solution when done.
behtreen 👍
Shukrya
How do I get rid of the building outlines?
You can do this inside snazzymaps build mode.
very nice where is next part
There is no next part. What do you want to explore more?
MashAllah Sir
Thanks
Very good series bro❤
Thank you bro