RSVP HERE: https://community.wix.com/partners/event-details/round-table-editor-x-live-q-a
What questions would you like to ask the team? Post them here and we will get some answers!
2 Likes
Viewing on different breakpoints and having to add elements more than once
I am so excited to start working in Editor X and am thrilled that responsive design can be drag and drop, this is a huge feat, thank you EditorX team.
I have a question based on viewport sizes and creating/removing elements. I generally have been working in the “Laptop” breakpoint (as that is the most comfortable for me ), adding and customizing elements. In checking how the site looks at a very wide breakpoint (as I have a 27" iMac) to check how the site is aligning. After checking the wider view, I then return to the “Laptop” breakpoint to add more elements and continue to edit the site. When I preview the site on my 27" iMac, many of the elements I added are not displaying. When returning to the editor, I see the elements need to be added again to the wider breakpoint. This has been frustrating. I understand that working in a responsive editor will mean a changing of how we look at designing a page and I want to understand what the best practices are.
Is the fact I need to add the elements a second time to the site because I initially tested the view to a wider breakpoint? Since I did that, I must then create all new elements at the browser width from that point forward for the rest of the design process? It appears that when adding elements to your page, you need to be careful to always use the exact same breakpoint when adding elements, otherwise, they will need to be added a second, and possibly a third time to larger breakpoints. If I never checked the editor to the wider breakpoint (Approx 2200px wide) wound this not be happening? (I am thinking maybe I should not be doing this). Are there any tools or ways to work that will assist with this? I find it difficult to edit a site at such a wider breakpoint, but I want to be sure the site displays properly at this wide width, as most 27" iMacs will display at this larger size. I hope my explanation is clear. Thanks very much!
Very, very good question!! Thank you.
Changing Grids in a section at different breakpoints.
I am referencing this striking Editor X Template for this question: https://www.wix.com/website-template/view/html/2545
The 3rd fold of this template has a section subdivided by a grid with text and images. On the desktop breakpoint (1000+ pixels) it displays 2 columns, on the tablet breakpoint, it smartly adjusts to one column (see the attached screenshot).
I attempted to duplicate this construct with my own design. I can create a similar 2 column grid at the desktop breakpoint. At the tablet breakpoint, I edit the grid by deleting a column, to make a one-column grid, which appears to work, however, the images that were in the deleted column are deleted as well. I also tried moving the images out of the column before deleting the column, and then repositioning the images in the proper cell with the one-column set-up, but this creates another problem. Doing this messes up the images and text at the two-column grid at the desktop breakpoint. So it looks like I can have the images and text formatted for a two-column grid at the desktop breakpoint or a one-column grid at tablet breakpoint, I can’t figure out a way to make the images and text display properly at both breakpoints.
I would like to understand how this template is properly reconfiguring grids at different breakpoints so I can apply to my own designs.
Thanks!