![]() ![]() When you drag and drop elements, you can accidently drop the elements on an unwanted area and it will mess up your design. It looks great on desktop, but on mobile, it is a nightmare since you now have more than 10 rows to work with. If you have a 2x4 grid on a desktop, Editor X makes it easier than ever, that you can do one-click quick layout change to the grid on tablet/mobile. Your desktop is in landscape, while your mobile is in portrait. This is largely due to the lack of space on different device form factors. The layout is supposed to change from desktop down to tablet then down to mobile. ![]() This is the responsive design process of Editor X. My Grid Design Is Different On Mobile Than Desktop In addition, newly added elements (say a shape) on mobile, you will also see it on desktop and tablet breakpoints. To fix this, make sure you are moving the container instead of the text element. This is because you are changing the HTML structure of your site. If you move a text element outside of the container on mobile breakpoint, the desktop will change too. While moving elements that have a parent container, you are restricted to move the element within that container. You will never find any codes on Editor X unless you have to, but knowing how it works can help you save a ton of time next time you try to redesign your mobile without messing up other breakpoints and vice versa. You may want to know a little about HTML and how it works. ![]() Then you quickly realized that you screwed up the desktop and tablet breakpoints and it put you down in misery as you spent half a day trying to fix the mobile, now you have to go back and fix the other two worrying it may affect the mobile breakpoint again. You were trying to move an element on mobile, you completed the design and were happy with it. To fix this, you need to use the Copy From Breakpoint by right clicking on the section (in Breakpoint B). ![]() Breakpoint B will not inherit the new change Now you change the background color of section 1 in Breakpoint A to pink.You changed the background color of section 1 in Breakpoint B (smaller desktop breakpoint) to black.Breakpoint A (highest desktop breakpoint) has white background on section 1.If you have 2 desktop breakpoints, and you have a different style on the smaller desktop breakpoint, your design will not be inherited from the higher desktop breakpoint. Then you will use the CSS Grid to move the items around and set their Sticky properties. Plan ahead if you want to use Sticky Position because everything will need to fit into one Section. The section/container has Overflow hidden.However, to use it effectively, you need to know that the sticky effect will not work if: This is one of the best features that is available in Editor X and you could not find it in the regular Wix Editor. If you have been using Wix for awhile but you are still not sure if you should make the switch to Editor X, check out our Wix vs. However, if you are here for the tips, keep scrolling! The Editor X team did an amazing job creating those tutorial videos to help you learn Editor X as fast as possible. If you are a complete newbie to Editor X, we highly recommend that you check out Academy X from Editor X. Now you have tried Editor X, how do you feel about it? This is not a tutorial to walk you through every step you take in Editor X, but rather a curated guide of tips and tricks that we have discovered since the launch of Editor X. ![]()
0 Comments
Leave a Reply. |