Wix Studio Webinar: How we built the Wix Studio homepage

  Рет қаралды 7,372

Wix Studio

Wix Studio

Күн бұрын

Join Wix Studio’s lead designer for a live deconstruction of the features used to bring the homepage to life. From scroll animations to sticky and entrance effects, see how they all come together and get your questions answered in real-time.
-
⏱ TIME STAMP:
00:00 Intro
2:18 The brand creation process
3:46 What we’ll cover in the build
4:33 Section 1 Reveal and Sticky
22:26 Q&A on the Sticky effect
24:13 Section 2 Stack, Shape, and Move
34:42 Section 3 Entrance and Fade
45:00 Q&A on Animations
46:18 Section 4 Scroll and Horizontal
55:14 Top takeaways
56:25 Questions from the audience
Learn more about Wix Studio:
-
www.wix.com/studio
Want to take a closer look at the end-to-end process of building responsive sites with Wix Studio? Check out the Wix Studio Essentials course:
wix.to/gT8VY7c
Join the Wix Studio Community forum to connect, collaborate and learn from other professionals:
forum.wixstudio.com
-
About Wix Studio:
Introducing Wix Studio-an end-to-end web creation platform for agencies and freelancers. Create tailored web experiences for any client in a hyper-efficient way with advanced design features, custom dev capabilities and multi-project workspaces.
Subscribe to our channel for more knowledge and inspiration:
www.youtube.com/@WixStudio/ab...
-
Stay tuned:
Instagram: / wixstudio
Facebook: / wixstudio
Twitter: / wixstudio
TikTok: / wixstudio

Пікірлер: 20
@elenakasyan13
@elenakasyan13 7 ай бұрын
That was awesome, I was looking forward to this video! Thank you for detailing each animation in detail
@WixStudio
@WixStudio 5 ай бұрын
We're so glad you enjoyed it, if you'd like to watch additional courses, head over to our Wix Academy > www.wix.com/studio/academy
@devikumar2609
@devikumar2609 3 ай бұрын
Such a great video and her explanation of every single detail and why we need to them is amazing. learnt a lot from this one video compared to heaps youtube videos I have watched so far and everyone is rushing and just showing how to do things rather than why we are doing it on a basic level. Thank you so much.
@WixStudio
@WixStudio 3 ай бұрын
Hey Devi, we're glad to hear that you found this video useful and your kind words are truly appreciated.
@staticmotion1628
@staticmotion1628 6 ай бұрын
This was very helpful information thank you and great teaching from Tal
@WixStudio
@WixStudio 5 ай бұрын
Our pleasure!
@y.i.t.z.i
@y.i.t.z.i 7 ай бұрын
🎯 Key Takeaways for quick navigation: 00:00 🎉 *Introduction and Overview* - Introduction to the webinar and the presenters. 02:03 📋 *Brand Creation Process* - Explanation of the brand creation process, including defining values, designing the logo, color palette, font, and UI design system. 03:53 🖥️ *Building the Homepage* - Introduction to building the Wix Studio homepage and its components. 05:28 📐 *Design and Layout* - Demonstrating the design and layout process, including resizing elements and organizing content. 10:02 📏 *Making Elements Sticky* - Explanation and implementation of the sticky effect for elements on the page. 17:31 🚀 *Adding Reveal Effects* - Adding reveal effects to text elements and explaining the animation process. 24:16 🎨 *Creating Interactive Shapes* - Demonstrating the creation of interactive shapes and animations for the next section. 26:34 🎨 *Creating a stack for text boxes* - Stack function gathers text boxes and allows resizing and spacing adjustments. 28:22 🔄 *Using scroll effects for interactions* - Demonstrating how to add scroll effects to containers and shapes for animations. - Explains the animation area and precise design for animations. 34:56 📏 *Designing with responsive breakpoints* - Discusses responsive design and breakpoints for different screen sizes. - Shows how to adjust layout, interactions, and animations for mobile and desktop screens. 39:44 🎢 *Creating animations with line triggers* - Using a line as a trigger for animations, allowing precise control over animation start and end points. - Demonstrates how to use a line to trigger animations for different elements. 45:12 ❓ *Deciding animation start and end points* - Explains the process of deciding animation start and end points, emphasizing experimentation and adjusting values to achieve the desired result. 50:11 🌐 *Creating horizontal scrolling with sticky elements* - Demonstrates how to create horizontal scrolling with sticky elements. - Highlights the use of containers and stacks for efficient design. 54:02 🌈 *Fine-tuning scroll animations* - Shows how to fine-tune scroll animations by adjusting the animation area and ensuring smooth scrolling interactions. 55:05 🚀 *Tips and Takeaways* - Planning sections before designing helps create beautiful results. - Combining animations with sticky elements is a powerful technique. - Use section or other elements as triggers for animations. - Adjust or remove animations for tablet or mobile as needed. - Utilize groups, containers, and stacks to build faster and explore Wix Studio options. 56:41 💡 *Questions and Additional Information* - Answers the question about whether coding is necessary in Wix Studio. - Provides tips on getting started with Wix Studio, including exploring templates and the Wix Studio Academy. Made with HARPA AI
@omnishell936
@omnishell936 7 ай бұрын
Hello, I am learning frontend web development HTML CSS. I am a student in college. Will it be Beneficial for building a FrontEnd webpage alongwith learning web development and can I use wix studio for doing web development project? Thank you Wix team!
@jaredcohen9208
@jaredcohen9208 7 ай бұрын
How do you make the circle animation appear to be coming from underneath the previous section? In this video it appears more like a separate section than a transition from one section to another
@TalShenkar94
@TalShenkar94 7 ай бұрын
Hi! :) To create the shape that will appear above the image, we will have to build the two parts together in the same section. Then the image that is sticky will remain on screen and the shape will open above the image. To make the text go up, we will add another animation to the text through the container and the container will be a trigger for the animation. We can use a fade or move animation for the text as soon as the container enters.
@cweb1988
@cweb1988 7 ай бұрын
How'd you get stuff to fade out on scroll? Also...using another element as the trigger for intro's etc. is revelatory.
@TalShenkar94
@TalShenkar94 7 ай бұрын
To make some elements fade out, you need to add another animation to the element you want to fade. If your element is already animated, then place the element in another container and add the new animation to it. You can use the next section or another element below to be the trigger.
@KeithHepburn
@KeithHepburn 2 ай бұрын
I'm so confused by what I'm doing wrong. I've tried different methods to try to get the images to scroll and then fix on the screen but cannot create the same effect like at 54:55secs my efforts just move off the screen no matter what format I try.
@WixStudio
@WixStudio 2 ай бұрын
In this case, we'd recommend having someone take a look at your site/project specifically. We'd recommend posting on our dedicated Studio forum > forum.wixstudio.com/. In case you are unable to get assistance there you can also submit a ticket to our customer care team at wix.to/iZTuzNF
@jainmonil2101
@jainmonil2101 5 ай бұрын
I'm trying to follow along and it requires me to have all the media images. Will you be able to provide that?
@WixStudio
@WixStudio 5 ай бұрын
Hi there, you can use placeholder images and set the same sizes or, adjust the design you want and use the same settings.
@scottplouffe9818
@scottplouffe9818 6 ай бұрын
Hello, is there a way to get all items if more than 10000 in free site before paying for a plan so when go live everything is on the site? if not what's the best way to do this?
@WixStudio
@WixStudio 6 ай бұрын
Hi Scott. For assistance with this, please contact our customer care team here >> wix.to/om2NYEq
@scottplouffe9818
@scottplouffe9818 6 ай бұрын
I will and hope to get the correct assistance as I have reached out a few times on this as well as coding and never get assistance.
@hottiehunter9166
@hottiehunter9166 7 ай бұрын
Great information but very slow to get to the point ,
Wix Studio | Webinar: Workflows best practices
50:58
Wix Studio
Рет қаралды 4,7 М.
Каха заблудился в горах
00:57
К-Media
Рет қаралды 9 МЛН
Inside Out Babies (Inside Out Animation)
00:21
FASH
Рет қаралды 17 МЛН
DEFINITELY NOT HAPPENING ON MY WATCH! 😒
00:12
Laro Benz
Рет қаралды 64 МЛН
How to Create Infinite Logo Carousel in Wix Studio
9:53
Angelova Nikoleta Design
Рет қаралды 5 М.
Flat Design vs Modern Design Trends for UI
11:44
DesignCourse
Рет қаралды 80 М.
Wix Studio | Webinar: Transform your pages with special effects
51:48
Use Sticky & Pinned position with Wix Studio
7:29
Wix Studio
Рет қаралды 10 М.
Build along to create a horizontal scroll effect
5:15
Wix Studio
Рет қаралды 10 М.
Что делать если в телефон попала вода?
0:17
Лена Тропоцел
Рет қаралды 3,1 МЛН
Xiaomi SU-7 Max 2024 - Самый быстрый мобильник
32:11
Клубный сервис
Рет қаралды 532 М.
НОВЫЕ ФЕЙК iPHONE 🤯 #iphone
0:37
ALSER kz
Рет қаралды 340 М.
Samsung laughing on iPhone #techbyakram
0:12
Tech by Akram
Рет қаралды 6 МЛН
Сколько реально стоит ПК Величайшего?
0:37