- 94
- 318 125
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.
Scroll Magic to Repeater Items: Full Tutorial
In this full tutorial, learn how to bring your Repeater items to life with stunning scroll-triggered animations in Wix Studio. I'll guide you through every step, from setting up your Repeater to adding dynamic effects that respond as users scroll. If you caught my sneak peek, now’s your chance to dive deep and master the techniques to make your website more interactive and engaging. Perfect for web designers looking to add that extra touch of magic!
#wixstudio #scroll #animation #nocode
#wixstudio #scroll #animation #nocode
Переглядів: 493
Відео
Sneak Peek: Scroll Magic for Repeater items
Переглядів 20021 день тому
Discover the magic of scroll-triggered animations in this sneak peek! Watch how you can effortlessly bring your Repeater items to life with dynamic effects that react to your scroll. Full tutorial coming soon, where we’ll dive deep into the steps to achieve these captivating animations in your designs. #wixstudio #scroll #nocode
Embed Social Media Posts from Any Platform with Zero Coding Required
Переглядів 17921 день тому
Learn how to effortlessly embed social media posts from any platform without writing a single line of code. In this tutorial, we’ll show you how to store the embed code for each post directly in a CMS and dynamically display them on your website. Perfect for anyone looking to streamline content management and keep their site fresh with live social media feeds. Whether you’re integrating Instagr...
Drag-to-Scroll: Enhance Your Website's Scroll Experience
Переглядів 849Місяць тому
Hey everyone! 🌟 Ready to make your website's scroll super smooth and fun? In this tutorial, we're diving into the magical world of drag-to-scroll. Perfect for any website with overflow content, this effect will make navigating your pages a breeze! We'll be using ScrollBooster, an awesome JavaScript library that takes your scrolling game to the next level. I'll walk you through setting up the dr...
Fake It Till You Make It: Creating a Fake 3D Gallery
Переглядів 851Місяць тому
Want to add a touch of 3D magic to your website? In this fun and easy tutorial, we'll create a stunning Fake 3D Gallery using Wix Studio. No special skills required-just a bit of creativity. Perfect for giving your site a sophisticated look with no code required! Live examples: mystudioil.wixstudio.io/fake-3d-gallery/pro-gallery mystudioil.wixstudio.io/fake-3d-gallery/diagonal Keep building ama...
Creating Stunning Border Animations
Переглядів 718Місяць тому
Inspired by @jh3y ! In this video, I'll walk you through the steps to create eye-catching border animations that can enhance the visual appeal of your web projects. Whether you're a beginner or an experienced web designer, this tutorial will help you add a dynamic touch to your designs. Live example: mystudioil.wixstudio.io/animate-border #wixstudio #animation #border
App Review: Image Distortion Hover Effect (by Visual-Identity)
Переглядів 435Місяць тому
In the next tutorial we will review the ThreeJS Distorter application by @visualidentitydesign that allows you to create an image distortion effect based on the user's mouse position without a single line of code. Link to the application: www.wix.com/app-market/threejs-distorter?searchLocation=home Visual-Identity UA-cam channel: www.youtube.com/@visualidentitydesign Visual-Identity website: ww...
Easy Way to Create a Cut-Out Effect That Tracks Your Mouse
Переглядів 3552 місяці тому
IMPORTANT 2 important things to note: 1. You don't need to add another container just for the shadow effect. Instead, add the shadow effect in the same line of code. Code for example: box-shadow: 0px 0px 0px 100vw black, /* outer shadow */ inset 0 0 100px black ; /* inner shadow creating the hole effect */ 2. The shadow is very large, so it is important to add to the section Overflow content = ...
Creating Unique Repeater Layouts Using Flexbox
Переглядів 4872 місяці тому
In the next tutorial we'll use one line of CSS to create a unique layout for a Repeater connected to a database - you won't believe how easy it is! CSS: .my-repeater-wrapper .repeater .repeater item { flex-grow: 1; } #wixstudio #flexbox #css
How to Create Section Scroll Snap Effect Using Flexbox - No Code
Переглядів 1,1 тис.2 місяці тому
#wixstudio #scroll #flexbox
Binding Data and Search: Part 3: Bind Data and Add Search Functionality to Your Midjourney Feed
Переглядів 1573 місяці тому
Get your free template - I'd love it if you could leave your feedback: www.wix.com/marketplace/template/54a37109-42cf-4955-8b3d-0b29fd8baf0c?entry=gallery_page Live example: iloveditorx.wixstudio.io/myjourney-feed Get the code: www.iloveeditorx.com/videos/binding-data-and-search:-part-3:-bind-data-and-add-search-functionality-to-your-midjourney-feed?tab=code Part 1: ua-cam.com/video/7RlJsXpicFw...
Creating Mosaic Layout: Part 2: Create the Engaging Midjourney Mosaic Layout
Переглядів 1813 місяці тому
Get your free template - I'd love it if you could leave your feedback: www.wix.com/marketplace/template/54a37109-42cf-4955-8b3d-0b29fd8baf0c?entry=gallery_page Live example: iloveditorx.wixstudio.io/myjourney-feed Part 1: ua-cam.com/video/7RlJsXpicFw/v-deo.html Part 3: ua-cam.com/video/-mCA08TUODY/v-deo.html #wixstudio #midjourney #mosaic
Building Sidebar: Part 1: Build the Midjourney Sidebar
Переглядів 6853 місяці тому
In the following guide we will learn how to rebuild the Midjourney Sidebar on Wix Studio. The sidebar of Midjourney is interesting because it has 3 different designs suitable for the type of device. Get your free template - I'd love it if you could leave your feedback: www.wix.com/marketplace/template/54a37109-42cf-4955-8b3d-0b29fd8baf0c?entry=gallery_page Live example: iloveditorx.wixstudio.io...
Rebuild Midjourney Feed: Preview and Plan
Переглядів 2504 місяці тому
Get ready for a journey as we rebuild the Midjourney Feed from scratch! In this first episode, "Preview and Plan," we'll give you an exclusive look at the layout and features we'll be crafting. Get your free template - I'd love it if you could leave your feedback: www.wix.com/marketplace/template/54a37109-42cf-4955-8b3d-0b29fd8baf0c?entry=gallery_page Midjourney feed: www.midjourney.com/showcas...
Creative Text Entrance Animation | Wix Studio
Переглядів 7054 місяці тому
Creative Text Entrance Animation | Wix Studio
Creating a Slick Menu Animation | Part 4 | Wix Studio
Переглядів 9406 місяців тому
Creating a Slick Menu Animation | Part 4 | Wix Studio
Creating a Slick Menu Animation | Part 3 | Wix Studio
Переглядів 1,4 тис.6 місяців тому
Creating a Slick Menu Animation | Part 3 | Wix Studio
Creating a Slick Menu Animation | Part 2 | Wix Studio
Переглядів 1,6 тис.6 місяців тому
Creating a Slick Menu Animation | Part 2 | Wix Studio
Creating a Slick Menu Animation | Part 1 | Wix Studio
Переглядів 3,6 тис.6 місяців тому
Creating a Slick Menu Animation | Part 1 | Wix Studio
Playing around with rebuilding Everyday Robots beautiful menu on Wix Studio
Переглядів 2966 місяців тому
Playing around with rebuilding Everyday Robots beautiful menu on Wix Studio
How to Add Animation to the Wix Search Bar | Wix Studio
Переглядів 9217 місяців тому
How to Add Animation to the Wix Search Bar | Wix Studio
Efficient Way to Set Element Size | Wix Studio
Переглядів 4207 місяців тому
Efficient Way to Set Element Size | Wix Studio
How to Create Footer Reveal Effect | Wix Studio
Переглядів 1,1 тис.7 місяців тому
How to Create Footer Reveal Effect | Wix Studio
How to Create a Kickass Video Player with Playlist | Wix Studio
Переглядів 9417 місяців тому
How to Create a Kickass Video Player with Playlist | Wix Studio
Creating Smooth Text Input Micro Interaction | Wix Studio
Переглядів 6877 місяців тому
Creating Smooth Text Input Micro Interaction | Wix Studio
Creating a Kickass Video Player with Playlist - Project Showcase | Wix Studio
Переглядів 3937 місяців тому
Creating a Kickass Video Player with Playlist - Project Showcase | Wix Studio
Creating Horizontal Scroll for Repeater | Wix Studio
Переглядів 24 тис.8 місяців тому
Creating Horizontal Scroll for Repeater | Wix Studio
You're amazing man. Thanks for all the help. Was able to get some really cool designs added to my site because of a few of your videos. Been watching them for about 4 hours here from Miami! Keep up the awesome work. I appreciate you. 🙏
Thank you!
the problems in the code do not disappear when i change the ID´s of the elements. what can i do?
i really did the CSS Part step by step, everything like you did
Sir this code only work wix editor x .Not working is new wix studio. Make a new video for wix studio dark mode code
love this! how would the scroll animation work with the current wix studio (only in/ out setting) - works perfectly for me until then, but it doesnt start the scroll the way it does in your tutorial... would love your input!
Same issue.. I can't figure it out either..
You're they best for doing these in depth tutorials.
Friggin LOVE this man! The only problem is that the hover effect is not working. Followed both your tutorials and checked the code twice, but still not working! Any ideas? <3 Thanks for the AWESOME content!
Dark mode not work in all page 😢
@user-tj1ty1zn9y you should set it for each page separately
@@Studio-Il Sir this code only work wix editor x .Not working is new wix studio. Make a new video for wix studio dark mode code
Appreciate you!
Hi there! Do you know how to add additional product images as thumbnails rather than the dots that are the only available option in editorx? Having some trouble with this
Theres a ton of interesting things you share and i would like to try but each video is like 15-30-60 minutes long…
This is not TikTok. In my tutorials, I try to teach how to do something, and for everyone to be able to recreate the behavior no matter what their level is, I have to explain in detail step by step
@@Studio-Il all i can say is that there is multiple other channels that offers the same thing as you do but in a more straightforward and less blabla
@@178rohan It's a free country
@@Studio-Il good luck with the channel growth you obviously can’t take feedbacks from your viewers 😂
Thank you for sharing this , great video
Bravo! This was an excellent tutorial on a very cool animated entrance. Thank you much!
Great video! Can't wait to try this.
amazing amazing so many options to play with and ideas now really simple as well thank you
It looks amazing, really looking forward for it
ua-cam.com/video/bcE0ZvR6F0E/v-deo.html
can't wait for this i'm working right now with repeaters sorry think i left this same response on another video by accident
ua-cam.com/video/bcE0ZvR6F0E/v-deo.html
can't wait for this one i'm working with repeaters as i watch this :)
Very cool stuff man thank you
When I switch from desktop to mobile the shapes are always in different places and not as they are where I originally edited them. Any fixes?
Hi, it works perfectly on the desktop - great solution and implementation on your part; unfortunately, the ScrollBooster only works on the desktop for me; how can I get the scrolling effect on the iPad or iPhone (your solution scrolls perfectly on the iPad/iPhone)?
Hi, thank you! I added in the code on purpose that the code would only work on devices that do not have a touch, because on devices that do, this is kind of the default behavior. I added the limitation in 2 places. 1. In the code you put in the dashboard (custom code tab) 2. In the custom element code If you want a version that will also work on touch devices, tell me and I'll send you the code here
@@Studio-Il Thank you very much for your prompt reply; it would be great if you could send me the code for desktop and mobile. Thank you in advance.
Hey, I'm sorry. I've forgotten. I'll send it soon
@@Studio-Il You can have both version of the code published, how to get the unrestricted code, should I email you, please help.
@@Studio-Ilall' this time I thought I was wrong, please share the code it would be fulfilling for Amateurish coders like me, thank you dear.
14:56 remember to change the bg color svg name
can you also show how to make this with a repaeter? I've been trying to tinker with it but it's not working because it doesn't let me set item size
Is it possible to do horizontal scoll with this feature? I tried the tutorial in this video : ua-cam.com/video/3_c4dlHyzqM/v-deo.html But elements don't snap to the section so everything looks all over the place
You should be able to do that. For horizontal, you need to make each item width to be no more than 100vw and change the scroll direction for horizontal
Hello, i have a WIX Studio problem: Wrapping of elements within repeater, despite parent container in "max. cont." width I have the following problem: I have a container which is set to "100%" height and "max. cont." Width is set. Within this container there is a repeater on "Stretch". The elements of the repeater are on height "Auto" with min. height 450px & CSS lines height "Min/Max" (20px, 100%) & width "40vw". Normally, the width of the parent container should depend on the width of the repeater elements. Roughly speaking, it also works. However, if I want to test whether the section is also responsive and enlarge and reduce the window with the Life page in height and width on my desktop, there are certain px widths in which, for whatever reason, the repeater elements are wrapped in two lines. This should not be the case. Can you help me?
Hey, It's difficult to understand where the issue. Maybe you can share the link so i can take a look
Super useful! Always wanted to drag my sliders, thanks for sharing this 🤩
Can't find custom css classes in the modern EditorX...
Awesome Video, very cool.
This is so nice
Legendary, thank you! This is amazing!!!
I'd really appreciate if you can help me. I'll try to be as clear as possible. I have 4 item boxes. In each box, I have text left aligned with a margin of 48px on the left to give it some space. Because the margin is docked to the item box and the items are in a flex box with max content (That constantly stretches), in certain larger screen sizes the text content isn't aligned to my other content with 48px margin because the flex box keeps expanding. Is there any way to fix this so my text content stays aligned? When I take the entire Section and apply "Max Width" I get the margin I want, but there's a random white space on the left side.
For now, I just decided to center my text in each item so I don't have to worry about it lol
Thank you!!!!!!!!
make a full video on wix studio responsiveness
Wonderful !!!!! ❤❤❤❤❤
Dude your a fucken ledgend n life saver
hey brother :) i was trying to use the flexbox as slider from left to right, like we can easily make slide from top to bottom and scroll it from desktop but if we make slider from left to right then we are not able to slide with mouse untill we use the scrollbar. please make a tutorial that how to make slider in horizontally with full section scroll snap. please also tell how to make it infinite slider. Thanks
wth man this is the best wix website I've seen
Would you give us the tutorial about the font stagger? please..
Bro you’re killing it 💯🔥
Love it! 💚 Can you make a vertical autoscroll gallery?
Great video as always man BUT I have not seen to have the new feature max content :( anyway great stuff very creative man very!!!
@@staticmotion1628 Thank you! I guess it's gradually released.
Wow! Not bad!
very cool Effect !!
Can this be done in WordPress
Can I dm you somewhere?
Brilliant!!!
love it!
🤩✨
Love the content wish there was less talking and more faster explanation its the only thing preventing me from trying tips you share
מקסים!!
Sleeeek !!! That’s awesome !! Thanks bro ❤