Challenge 2: Design walkthrough
HTML-код
- Опубликовано: 21 июл 2024
- Follow along to see the steps we took to build the next two sections on our site.
In this walkthrough, we’ll go through the steps to create the second and third sections on our challenge site. The second section’s design is based on a Grid with different content in each cell. The third section also uses a Grid to lay out its elements, and we also add a Repeater with an AB design pattern. For the final touch, we adjust both sections’ design to fit each Breakpoint.
Complete the Course Challenges Here:
www.wix.com/studio/academy/co...
--
0:00 - Intro
0:11 - Design walkthrough
-
Learn more about Wix Studio:
www.wix.com/studio
Get started with our Essentials course:
wix.to/gT8VY7c
Join the Wix Studio Community:
forum.wixstudio.com
Follow us on social media:
➔ Instagram: / wixstudio
➔ X: / wixstudio
➔ TikTok: / wixstudio
➔ Facebook: / wixstudio
About Wix Studio:
The end-to-end platform for agencies and enterprises to create and manage exceptional sites with extreme efficiency. Smart design features, flexible dev tools and streamlined management capabilities mean you can do more, at scale.
Subscribe to our channel:
➔ www.youtube.com/@WixStudio?su... 
Наука
Hi Studio,
Loving the product so far, a huge upgrade from Editor X. A little remark on the video; the buttons provided in the library are different from the ones used in the video. The provided buttons are a different size (bigger) than the ones used in this video, which might end up confusing users.
Hi there, the buttons are saved as assets and they are scalable. The size may vary, depending on the user's screen, but you can easily change the button size as shown on the video.
I followed the steps about changing the repeater on the mobile breakpoint from cards to list, but when I switched back to the tablet breakpoint it had changed there too, I undid the changes until it returned to being cards on the tablet breakpoint; then I went to the mobile one again, changed it to list again, returned to the tablet again and it changed to list there too, again. Also, I can't drag the "bold curved star" from the library (just clicking on it does not place it either). And my editor doesn't have some of the options shown on this course when I use the right click.
I finally managed to make it work, but after moving and changing many things I don't know how I actually fixed it.
Hi, love this videos. I am on a mac, test on Chrome and Firefox, but repeaters are getting freeze and not working. Is there anything you can think of?
Hey Karmen, this could be a local issue. Please clear your browser's cache and cookies and try to switch browsers. If you're still experiencing issues, please submit a support request to our technical team so they can take a closer look at this here > wix.to/om2NYEq
Some parts of my copy site are diffrent to yours. Its giving me an insite into the power of studio.
Ifs about knowing whats there i just cannot always find it.
Hey Keith, could you please clarify which sections seem different on your end? We'd be happy to take a closer look and guide you through this.
Hello, I'm good at the moment. Still lots of challenges. @@WixStudio
Thx for the tutorials; one thing so far not explained well is why "Hug" is used for a title in one case and not the other. Hug has not been explained very well, so far I don't understand why I would use it at all. I wish there was more focus spent explaining why we'd choose certain responses or favour them in one case over another. Anyways; just a small thing, thx guys!
We're glad you enjoyed the tutorial Heather and we're here to clarify the application of hug to your design. Hug is usually used when we want the content inside the bounding box to control the size of the bounding box and not the other way around. For example, if the textbox responsive behavior is set to hug, the text will not break into multiple lines, only if you actively choose to. Behind the scenes when you enable the advanced sizing, the element's width is set to max content once the responsive behavior is Hug. If you'd like to discuss more capabilities, we encourage you to explore our dedicated community with our experts and partners here > forum.wixstudio.com.
The repeater refuses to change height, I can make it taller and then back to what it was, but trying to go shorter just snaps it back
Hey David, we're here to clarify this practice. To change the repeater's height, select an item, change its height and the repeater will adjust accordingly. If your item already contains some elements, you will need to adjust them first in order to allow the item to be resized.