- 117
- 363 646
Studio Il
Israel
เข้าร่วมเมื่อ 13 ม.ค. 2015
This channel was created to help people learn more about Wix Studio, share ideas and get the latest product updates.
If there is a particular topic you would like me to cover, send me a message and I will try to create it for you.
This channel is operated by Technical Designer at Wix.com, but was created independently and is not endorsed or sponsored by Wix.
If there is a particular topic you would like me to cover, send me a message and I will try to create it for you.
This channel is operated by Technical Designer at Wix.com, but was created independently and is not endorsed or sponsored by Wix.
Crazy Scrolling Effect for Hero Section – No Code!
Learn how to create an eye-catching scroll effect for your hero section without writing a single line of code!
This tutorial showcases a dynamic grid of 3x3 cards where the center card grows seamlessly as you scroll, eventually filling the entire screen to reveal its content. Once the content is displayed, the page transitions smoothly back to regular scrolling. Perfect for making your website stand out with interactive, no-code animation!
⭐⭐⭐ GET YOUR FREE TEMPLATE ⭐⭐⭐
tinyurl.com/7785ff26
Live example:
mystudioil.wixstudio.com/hero-scroll-anim
#wixstudio #grid #scroll
This tutorial showcases a dynamic grid of 3x3 cards where the center card grows seamlessly as you scroll, eventually filling the entire screen to reveal its content. Once the content is displayed, the page transitions smoothly back to regular scrolling. Perfect for making your website stand out with interactive, no-code animation!
⭐⭐⭐ GET YOUR FREE TEMPLATE ⭐⭐⭐
tinyurl.com/7785ff26
Live example:
mystudioil.wixstudio.com/hero-scroll-anim
#wixstudio #grid #scroll
มุมมอง: 354
วีดีโอ
Control Your Content: CSS Tricks for Limiting Text Lines
มุมมอง 261หลายเดือนก่อน
Learn how to control the appearance of long text on your website with this CSS tutorial. In this video, we'll show you how to limit the number of text lines, add a stylish ellipsis effect, and make it responsive for different screen sizes. Perfect for creating clean and professional designs that maintain visual harmony across devices! ⚠️⚠️⚠️ I forgot to mention that it is necessary to add the c...
The Stunning Grid Reveal Effect: Recreating Webflow Effects in Wix Studio
มุมมอง 6882 หลายเดือนก่อน
In this tutorial, we’ll show you how to recreate the stunning Grid Reveal Effect in Wix Studio, inspired by the amazing work of @Mizko Learn how to take a Webflow-inspired effect and build it step-by-step in Wix Studio, adding a dynamic touch to your website with an interactive grid reveal. This effect is perfect for adding a unique and engaging look to your design. Free template: drive.google....
Revolutionize Your Website with This Jaw-Dropping 3D Effect!
มุมมอง 6812 หลายเดือนก่อน
In this tutorial, learn how to create a jaw-dropping 3D gallery effect for your website using a Repeater in Wix Studio. We’ll walk you through the steps to design a dynamic, interactive gallery that stands out and elevates your site’s visual appeal. With simple CSS techniques and a touch of creativity, you’ll master the art of adding depth and movement to your gallery, leaving your visitors in ...
A Simple Way to Make Your Gallery More Interactive and Eye-Catching
มุมมอง 6342 หลายเดือนก่อน
Looking to make your Repeater gallery more engaging? In this tutorial, you’ll learn a simple technique to make gallery items expand in width when hovered over, creating a dynamic and interactive experience. Whether you're showcasing a portfolio, products, or photos, this easy hover effect will give your gallery a professional touch and keep viewers engaged. Perfect for beginners and pros alike,...
Sneak Peek: Fun Gallery Layouts with Repeaters!
มุมมอง 2502 หลายเดือนก่อน
Testing out cool new layouts to turn Repeaters into interactive galleries. #wixstudio #repeater #gallery
Improve User Experience with a Sticky Tabs Menu - Super Easy!
มุมมอง 7742 หลายเดือนก่อน
In this video, I’ll show you how to make your tabs menu sticky, so it stays fixed at the top of the screen while scrolling. This is a great way to make navigation easier for your users, giving them constant access to the menu and helping them stay oriented within your content. Plus, I’ll share some tips on adding custom visual touches to enhance the user experience. #wixstudio #ux #tabs
Figma to Wix Studio: Final Website Overview + Free Template Download
มุมมอง 2622 หลายเดือนก่อน
In this final video of the 'Figma to Wix Studio' series, we recap the entire process of building a stunning Digital Agency website from scratch. Join me as we walk through the completed site, review all the key features and design elements, and discuss the techniques we used to bring the Figma design to life in Wix Studio. As a special bonus, I'm giving away the full website template for free! ...
Figma to Wix Studio: Full Digital Agency Website Creation Process - Part 6
มุมมอง 1442 หลายเดือนก่อน
Join me in Part 5 of this step-by-step series where we take a design from Figma and transform it into a fully functional digital agency website in Wix Studio. In this part, we'll focus on building the contact us Form and the Footer. ⭐️ Get your free template ⭐️ www.wix.com/marketplace/template/dc11a4c9-01b9-4e65-8e2f-370ddbd34190 Watch the full playlist: th-cam.com/play/PLS1vlthO4leKj7ufSnHwVbN...
Figma to Wix Studio: Full Digital Agency Website Creation Process - Part 5
มุมมอง 702 หลายเดือนก่อน
Join me in Part 5 of this step-by-step series where we take a design from Figma and transform it into a fully functional digital agency website in Wix Studio. In this part, we'll focus on building the FAQ component. ⭐️ Get your free template ⭐️ www.wix.com/marketplace/template/dc11a4c9-01b9-4e65-8e2f-370ddbd34190 Part 1: th-cam.com/video/AgaeuSyWgmk/w-d-xo.html Part 2: th-cam.com/video/UnCLDhK2...
Figma to Wix Studio: Full Digital Agency Website Creation Process - Part 4
มุมมอง 932 หลายเดือนก่อน
Join me in Part 4 of this step-by-step series where we take a design from Figma and transform it into a fully functional digital agency website in Wix Studio. In this part, we’ll work together to create a responsive Flexbox within a Repeater item that adapts smoothly to any screen size. The Flexbox will automatically wrap when space is limited, ensuring that the content stays clear and readable...
Figma to Wix Studio: Full Digital Agency Website Creation Process - Part 3
มุมมอง 942 หลายเดือนก่อน
Join me in Part 3 of this step-by-step series where we take a design from Figma and transform it into a fully functional digital agency website in Wix Studio. In this part, we’ll continue building the website by focusing on the section with the main heading, subheading, and the information card below it. We’ll dive into smart layout techniques to make these elements reusable, saving a lot of ti...
Figma to Wix Studio: Full Digital Agency Website Creation Process - Part 2
มุมมอง 2323 หลายเดือนก่อน
Figma to Wix Studio: Full Digital Agency Website Creation Process - Part 2
Figma to Wix Studio: Full Digital Agency Website Creation Process - Part 1
มุมมอง 9473 หลายเดือนก่อน
Figma to Wix Studio: Full Digital Agency Website Creation Process - Part 1
Scroll in Circles: Create a Stunning Rotating Scroll Effect
มุมมอง 1.1K3 หลายเดือนก่อน
Scroll in Circles: Create a Stunning Rotating Scroll Effect
Boost Your Wix Store’s Design with Masonry Products Layout
มุมมอง 3703 หลายเดือนก่อน
Boost Your Wix Store’s Design with Masonry Products Layout
Studio Updates: Adding Image Backgrounds to Buttons
มุมมอง 1643 หลายเดือนก่อน
Studio Updates: Adding Image Backgrounds to Buttons
Let’s Create a Cute Tooltip Together!
มุมมอง 3023 หลายเดือนก่อน
Let’s Create a Cute Tooltip Together!
Scroll Magic to Repeater Items: Full Tutorial
มุมมอง 9465 หลายเดือนก่อน
Scroll Magic to Repeater Items: Full Tutorial
Sneak Peek: Scroll Magic for Repeater items
มุมมอง 3155 หลายเดือนก่อน
Sneak Peek: Scroll Magic for Repeater items
Embed Social Media Posts from Any Platform with Zero Coding Required
มุมมอง 2965 หลายเดือนก่อน
Embed Social Media Posts from Any Platform with Zero Coding Required
Drag-to-Scroll: Enhance Your Website's Scroll Experience
มุมมอง 1.4K5 หลายเดือนก่อน
Drag-to-Scroll: Enhance Your Website's Scroll Experience
Fake It Till You Make It: Creating a Fake 3D Gallery
มุมมอง 1.1K5 หลายเดือนก่อน
Fake It Till You Make It: Creating a Fake 3D Gallery
App Review: Image Distortion Hover Effect (by Visual-Identity)
มุมมอง 6376 หลายเดือนก่อน
App Review: Image Distortion Hover Effect (by Visual-Identity)
Easy Way to Create a Cut-Out Effect That Tracks Your Mouse
มุมมอง 5166 หลายเดือนก่อน
Easy Way to Create a Cut-Out Effect That Tracks Your Mouse
Creating Unique Repeater Layouts Using Flexbox
มุมมอง 6637 หลายเดือนก่อน
Creating Unique Repeater Layouts Using Flexbox
Thanks for the tutorial!! Is there a way to get the same scrolling effect using the keyboard?
Hey! The live site link is working for me but the link to the code does not work?
Hi, I fixed the broken link. www.studio-il.com/video-tutorials/how-to-create-dark-mode-%7C-wix-studio?tab=code Thank you or letting me know!
@@Studio-Il Thank you! Is it possible to have hover interactions as well as the light and dark mode? I have managed to get most of it to work but there appears to be a conflict with some of the text colour and background colours.
Absolutely brilliant video once again! Thank you for all the hard work-you’ve outdone yourself. I even managed to adapt it to my website, and it worked perfectly. Keep it up, another masterpiece! 🙌
That's great to hear! I'm so happy to hear that you used it on your site.
Looks great. One question, what’s the entrance animation that you used? I don’t think that is explained. Thx
Glide. Check the video description. You can get your free template and explore how everything is built
Much appreciated!!!
Let's goooooooooo!!!! Did you thought about the discord idee ?
What's Discord idea?
wow man! your super talented! thx for sharing your knowledge
Thank you!
🔥
Super awesome stuff my friend thank you so much
I'm glad you like it! 💪
As always, fantastic work!
Thanks, I appreciate it.
Thank you very much!!!
Can the same thing be achieved in the normal wix editor (not studio)? I am struggling to figure it out.
Hey, I don't think so.
Only work for background with solid colors.. how to make it work on a gradient background?
Do you have discord ? Like a fun channel where the people can discuss wix stuff ? I have some sections trying to build them on wix, but I am having some problems, and if u have a discord maybe the people can help them selfe there :) ❤️❤️❤️❤️❤️
Let's goooooo!!! I really like your stuff!! I can't wait to see hiw u do that ? I learned alot because of you !!!!
Thank you
You are just awesome
dude, this is dope!
You are a beast ;)
you're great, thank you.
wow very cool, i'm excited!
the good stuff just keeps coming cant wait so cool
Yes🎉
Wow! Im very excited.
This is going to be awesome
Many people ask about the container in the beginning just make a repeater right-click inside the item then quick add and add container, then from the item bg make it 0% for transparency and for the container add bg colour and make the corners 30, now you can add whatever you want inside the container, title, text, image etc. Also for anyone that wants to insert more than 3 items you should change the Animation Area, right margin from the repeater and you should also add on the list more items. For example I inserted 5 items in the Repeater so in the list repeater I added 2 items to make them 5. Then I changed the animation area to 55% and changed the right margin from the repeater to -95vw.
I have tabs inside accordion. How can I make my tab bar sticky? Please help
please drop it as a template
Exactly what I need. Thank you
Can you explain more ! :) I Luv your work
when can we see the video ? the tutorial pleaaaase
th-cam.com/video/zmfy4e3AvN4/w-d-xo.html
Quick question. How can I make each card lead to a different page link when it is pressed? What should I change, thank you :)
Hey, You can add a button / image to the repeater item and set the link you want. If the repeater is connected to the database you can set the destination link from the database
@ Thank you very much
What about making the space between each card wider for mobile version. What should I change?
Thank you for the content. However, there is a bug. If you click the Close Menu Button, before the open menu animation is finished, it breaks the website. You get back to the main website, but you can't scroll all the way up anymore, it seems like the website gets cut off somehow. I like the open animation a little bit slower, so I don't want the website to break once someone klicks the Close Menu Button too quickly. Is there a solution for this? Edit: Sometimes even the open menu button causes the website itself to jump (and break sometimes as well).
Just what I needed! ... Awesome tutorial man 🙏 Followed it and worked like a charm in Wix Studio.
Hello, I am trying to download this free template on six, but getting an error. Is there any other way to download it? Thanks in advance :)
i followed every step and it doesn't work looks like on the video you skip a step forward on the video without showing
Hey, There is a free template you can use: drive.google.com/file/d/1vbS6mwKKQ3ZJ1Cp-wA4sclkOuYf-QHfd/view?usp=sharing It can help you better understand how it's built.
@@Studio-Il i did try to used it but for some reason its not working and i would like to have it color instead of Black and white the pictures i cant change that
@Unforgettablespots You can remove the "grayscale(0)" from the css
Hi, thank you for the tutorial. I have a problem though, I need to reload the page to have it working. Happens to all the pages. The repeater is not connected to CMS, the code is the same as yours, tried in incognito mode and cleaned cache, nothing helps. Is there any solution to it? Thank you.
Hey, try to run the code with some delay using setTimeout()... If you dont know how, give the code to ChatGPT and tell him to add some timeout
@@Studio-Il YOU ARE A STAR!!! It worked ⭐⭐⭐ Thank you!
@sunadmiral YEYYYY!!!! I'm glad it worked 💪
Needed this!!!
Bro, thnx! It work! But it laggg so hard even on black website
How do I get the text to scroll behind the rotating images?
Great tip 🔥
very cool i just ran into this problem the other day and the only way i could figure to solve it was to change copy to fit my 5 lines. thank you next time ill use this CSS
I'm glad this helps! It's always nice to have a more flexible solution 😉
we respect your work very much!
@@nicedesignagency 🫶🏾
Amazing video but for the life of me stop those swallowing sounds in the background. Good audio will ensure more views for you. I am feeling guilty for having written that but as a view i gave my honest opinion. The audio is awful! But the content is amazing!!! Thanks a ton and sorry if i hurt any feelings but its because you are the best and should come across as one
I'm sorry...
This is great! thank you :) Im having trouble with it working beautifully in desktop mode, but not in mobile. it doesnt scroll horizontally . Any wisdom/advice?
HI, Thank you for this amazing tutorial! It was super helpful and easy to follow. I really appreciate the effort you put into explaining everything so clearly. I have a small request: Could you do a similar tutorial but with a horizontal approach for the section scroll snap effect using Flexbox (no code)? th-cam.com/video/vrDCQu__8BE/w-d-xo.html&ab_channel=StudioIl I think it would be incredibly useful! Thanks again for all the great content you share!
I am getting a small bar across the bottom of the slider no matter the screen size, any suggestions? Have followed all of your steps to a t. Also, sometimes the snap scroll just stops working, not sure what's going on.
This is great, thanks. Is it possible to copy the html file you provided into an existing site? I've tried adding it to Global Sections, but they are only global to the site they're in
You have a free template to download in the video description
Yes, and thank you, but that opens a new Site. I wanted to add the page or the section to my existing site…
@fiveshorts so you can cosecthe section to your exciting site and add the css code
Great tutorial as always, can you make a tutorial on GSAP integration for wix studio ? If it's possible.