Editor X is confusing what do I do next?

Hi everyone,
I still don’t fully understand how docking works. Why is it so confusing? How do I know whether I should dock something to the bottom or to the right? What’s the definition of the word ‘docking’?
I don’t understand a thing about this feature.

Why do I struggle managing horizontal relationships between elements? Let’s say I make a banner. It has a button and a text line next to it, they are both centered. Why do the button overlap the text line as the viewport shrinks? What am I doing wrong?

And why can’t I use a fixed size for the button? I mean, I can, but then the button doesn’t resize relatively and overlaps that text line next to it as the viewport shrinks.

When and why would I apply a grid? A container? A grid inside a container?

What do minimum height / width or Maximum height / width both mean?

Another concern - I want things to be arranged vertically, above or under each other when setting up the mobile breakpoint. If using the banner as an example, so I use the stack feature to arrange the button under the text, but then it breaks the horizontal relationship on the desktop breakpoint The stack is being applied and it damages the other breakpoints’ design. Why is that happening to me?

I am generally confused and don’t understand the Editor X tool.

I need to learn it asap from its technical aspect, as I am already a well trained UI / UX designer, yet I easily mess things up when it comes to creating responsive pages without causing elements to overlap, or without ruinning other breakpoints on my way somehow.

How do I learn the basics? How do I master the main essentials of responsive design with Editor X? Where do I start from?

Highly recommend the academy that has several lessons.

So docking for the Editor X platform , docking is the distance between element and the parent container. So for an example if I had an image docked to left of the section at 50 pixels, it will always be 50 pixels away from the left-side of the screen. As for where to dock it, that depends on the design and how you want things to respond.

For horizontal elements, it is best to try to try to use a container with a grid or layouter to help separate the elements. For the text overlapping the button, if it’s only docked, they are only following the distance to the section and not the spacing to each other. That’s why it’s useful to group elements in a container with a grid or a layouter.

You can learn more about grids below.

And the minimum/maximum height and width are useful for fluid sizing . It’s useful if you don’t want buttons to get too large or small; for example if I had a button set to be 50% of the section and if the screen was 1000 pixels, the button would be 500 pixels wide. Since that may be too wide, if I set the maximum width to 400 pixels, it won’t be bigger than that. Similarly, if the minimum is 250 pixels, it won’t be smaller than that.

As for the stacking, that would be a change in structure that affects all breakpoints. https://support.wix.com/en/article/editor-x-designing-across-breakpoints-with-the-cascading-rule#changes-that-apply-to-all-breakpoints
You can rearrange it using docking or margins but stacking would be a change that affects all breakpoints. You can also duplicate the elements and stack those and hide the others.

You can also reach out to the customer care team and they’d be more than happy to help guide you through your questions, best practices and so on but recommend checking out the Academy and videos to get an idea of the tools and features.

@Rob Wow, thank you so much for all of that!! I truly appreciate it.

1 Like