21 Tips and Tricks When Using Editor X

Editor X has been replaced by Wix Studio since April 2024. Check out the in-depth exploration on Wix Studio here.

‍

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. If you are a complete newbie to Editor X, we highly recommend that you check out Academy X from Editor X. The Editor X team did an amazing job creating those tutorial videos to help you learn Editor X as fast as possible. However, if you are here for the tips, keep scrolling!

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. Editor X.

1. My Sticky Position Does Not Work

This is one of the best features that is available in Editor X and you could not find it in the regular Wix Editor. However, to use it effectively, you need to know that the sticky effect will not work if:

• The section/container has Overflow hidden
• You forgot to set the Offset value

Plan ahead if you want to use Sticky Position because everything will need to fit into one Section. Then you will use the CSS Grid to move the items around and set their Sticky properties.

2. My Design Does Not Cascade Down

Editor X responsive design works in a cascading model. It means that your design is inherited from the higher breakpoints within the same category. If you are editing on an iMac 27", the design will cascade down to smaller Desktop breakpoints, but not on tablet or mobile.

You can add up to 6 breakpoints in Editor X, but remember, the more breakpoints you have, the more work you will have to do. If your target audience does not use iMac, you do not need to spend a ton of time trying to add new breakpoints.

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. It goes like this:

• Breakpoint A (highest desktop breakpoint) has white background on section 1
• You changed the background color of section 1 in Breakpoint B (smaller desktop breakpoint) to black
• Now you change the background color of section 1 in Breakpoint A to pink. Breakpoint B will not inherit the new change

To fix this, you need to use the Copy From Breakpoint by right clicking on the section (in Breakpoint B). Copy the style from Breakpoint A.

3. Screw up the Layout When I Moved an Item

You were trying to move an element on mobile, you completed the design and were happy with it. 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 may want to know a little about HTML and how it works. 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.

While moving elements that have a parent container, you are restricted to move the element within that container. If you move a text element outside of the container on mobile breakpoint, the desktop will change too. This is because you are changing the HTML structure of your site.

To fix this, make sure you are moving the container instead of the text element.

In addition, newly added elements (say a shape) on mobile, you will also see it on desktop and tablet breakpoints.

4. My Grid Design Is Different On Mobile Than Desktop

This is the responsive design process of Editor X. The layout is supposed to change from desktop down to tablet then down to mobile. This is largely due to the lack of space on different device form factors. Your desktop is in landscape, while your mobile is in portrait.

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.

From two rows and four columns, now you can change it to four rows and two columns with just one click. Simply click on Edit Grid on that section on mobile and you will find the option to make the easy change.

5. I'm Using a 15" Laptop, How Can I Make The Change for The iMac?

This is one of the most common questions out there. If you are using a small screen device and your client is asking you to make the edit for their massive screen size, this is the way to do it.

Go to your browser Setting, Zoom out to 50% - 67% you will see that your screen size is now the same as how it looks on the iMac. You can do this for both the Live Site and on the Editor.

While you are zooming out on the Editor, the changes may not be reflected. You can choose a different breakpoint to refresh your page, then go back to the breakpoint that you were on.

This technique is great. However, we found that the texts on the Editor can get a bit small to see.

6. Textbox Spillover as My Screen Size Scale

As you notice, you have a textbox with some content spanning over 5 rows. It looks perfect until you zoom out, then all of a sudden, the text expands and forms a tiny line of text.

To keep the original proportion that you were designing, one way to do this is to add a max-width to your textbox. Even if you have the textbox set to 80% on a small desktop, as you scale up to bigger breakpoints, your textbox will be restricted to the max-width that you set in conjunction with the width of the textbox.

This also works with any other elements like images, video, containers, stack, and so on. Setting the max-width is to give constraint to your design so it doesn't scale too far from the original design. Of course, you can also set a min-width, max-height, min-height too. The beauty of Editor X is you have absolute control over every element on your design canvas.

7. The Shape Next to My Text box Keeps Moving

There will be times that a client wants something very specific, and it can be extremely hard to achieve, like keeping a star next to some texts.

It can drive you crazy, until you know how to do it. Here's how:

• Step 1: Add a container
• Step 2: Add grid to the container
• Step 3: Set the column values to fixed pixel value (say 100 px for the shape and 200 pixel for the textbox)
• Step 4: Set the row value to Min/Max (Min-content = 100 px and Max-content)
• Step 5: Add your text
• Step 6: Add the shape

Now they work as a unified element and they won't move. If you want the size of the shape and text to stay fixed, change their setting on the Inspector Panel to Fixed instead of Fluid. This will help to keep the same size throughout all breakpoints.

8. I Screwed Up Layout When Moving Elements in a Dense Grid Layout on Mobile

Many of us have tried this amazing template from Editor X, the SAAS Company template, and many have struggled to figure out how it works, especially with the Features & Benefits section on desktop and mobile.

It looks great on desktop, but on mobile, it is a nightmare since you now have more than 10 rows to work with. When you drag and drop elements, you can accidently drop the elements on an unwanted area and it will mess up your design. What can you do?

We have found out that when working with a big grid, it is a lot better to use the Grid Area feature in Editor X (Navigate to the bottom of your Inspector Panel, you will be able to see the Grid Area).

You will see Column (Start, End) and Row (Start, End). This is to give you control over the element and where you want it to be. If we have a grid of 10x1 (10 rows and 1 column) and we want to move item from the 1st Grid to the 5th Grid, it will be:

• Colum (Start: 1, End: 2) and Row (Start: 1, End: 2)
• To Column (Start: 1, End: 2) and Row (Start: 4, End: 5)

Notice we have only one column, so the column value will not change, but the row does. As your grid grows, this method will help you save a lot of time and increase your workflow precision. We know drag and drop is the selling point of Editor X, but it may not be the case here.

9. I Cannot Stop the Shape Behind My Video From Moving All Over the Place

Some of us prefer to use geometric shapes for our designs. Unfortunately, the decorative shape available in Editor X may not be as easy to use when it comes to responsive design. If we have a video element and we want to use a solid colored shape behind the video element, how would we do it?

You probably have figured out that we could use a container and add the video element inside the container like we discussed in #7. We could, but we have found a faster way to make sure the shape stays with the video element across all breakpoints. Here's how:

• Step 1: Add the video element
• Step 2: Enable Shadow
• Step 3: Increase the Shadow distance (Do not add blur)
• Step 4: Adjust the angle and the distance to your desire

The drop shadow feature works perfectly in this case. We would think that there was a solid white shape behind the video element but it is actually the drop shadow effect. The cool thing with this is now you can drag the video anywhere without worrying about it ruining your breakpoints.

10. My Mobile Header Menu Looks Static and I Want to Add Some Movement to It

Editor X team is working hard to roll out some new hamburger menus with better animation on when you open and close the hamburger menu. In the meantime, we do not have any control over it, but we do have control over how the menu holder is behaving.

In your editor, open the hamburger menu, choose the container that is just open (not the menu, but the container with a background). Choose an animation that you like.

For us, we like to use Slide in or Reveal, but feel free to try different animations that would make your site unique.

After you are done, test your site again and launch. Now you have a super cool and custom made Menu Open Animation!

11. I Accidently Drag an Element Out of the Stack Every Time

We have done this a lot, and we guess you are too. When we stack elements together, we want to keep their docking distance as however we set it to be. Sometimes as we move the stack around, we often select the body textbox instead and drag it out of the stack. We have found a handy feature in Editor X that will help you avoid this accidental touch.

Navigate to View/Layer Selection, choose Parent Element First. The default setting would be the Child Element First, but we just changed the logic so every time you select an element, it will pick up on the parent element. Say you want to select an image inside a container, your first click now will let you select the container first. You may find this useful as you have layers upon layers and you just want to move the whole thing with one click instead of trying to sort through the parent container.

12. There is No Recent Blog Element Available. How Can I Showcase My Latest Blog Posts on My Homepage

Unlike Wix, Editor X still lacks a lot of features that are already available in Wix, and it can be troublesome to new users as they cannot find the right elements to put on their new websites. Fortunately, there is a solution.

Did you know that Editor X also has a CMS just like Wix? Yes, and we are going to use Editor X Blog Post Collection to display your blog on the homepage (or anywhere your heart desires!)

• Step 1: Go to Add Elements
• Step 2: Navigate to Content Managers
• Step 3: Add Dataset
• Step 4: Select the Dataset. Connect it to the Post collection (this is where all your blog posts are). Give the Dataset a name
• Step 5: Then Add Elements. Drag in a Repeater.
• Step 6: Connect the Repeater to the Dataset
• Step 7: Important: Make sure you have an image element, textbox, and a button inside your Repeater
• Step 8: Connect each element to a corresponding field in the Dataset

This can be intimidating at first if you do not have any experience with Editor X CMS. Feel free to reach out to us, we can definitely help!

13. Add Zoom Animation to an Image

This tip is highly recommended to use with tip #12. You probably have seen this animation somewhere. When you hover on a blog post, the image zooms in a little, but the edges do not overflow the container.

We can do this in 4 steps using the new Interactions tab on the Inspector Panel:

• Step 1: Add your image to a new container
• Step 2: Add the whole container in step 1 inside a second container
• Step 3: Add Zoom animation to the first container
• Step 4: Add Overflow Hidden to the second container

This will create a nice Zoom on hover effect for your new custom made Recent Blog element.

14. I Need to Have a Multilingual Website but It Is Not Available On Editor X Yet

We live in an interconnected world, and language is probably the biggest barrier between us. If you or your target audience do not speak English, it is a big challenge to build your website in Editor X because there is no multilingual feature here yet. Fortunately, you could get around this by using a third party app called Weglot that will automatically translate your website into a multilingual website with one click!

Simply go to the Wix App Market, search for Weglot, sign up with Weglot, choose your plan, and boom - your site is now available in multiple languages. Learn more about how to install Weglot in Wix/Editor X to learn more.

Please note that Weglot is not part of Wix, so there is a separate fee you will need to consider. Weglot charges per language and how many words there are to be translated. If you have a huge site, it may not be as economical for you.

15. How Can I Add a Diagonal or Curve Section in Editor X?

You could achieve the same result with this method on Wix, but you have more control over the element on Editor X. What we did was to use a graphic software like Photoshop or Affinity Designer to create a background image.

If you do not have any experience with a graphic design software, try this Get Waves app to create a perfect header/footer section SVG image. You could upload the .SVG file to Editor X, but you will not be able to stretch the image (where it automatically scales across the section), so we Convert the SVG image to PNG and then upload that new file.

Add the newly uploaded image to the section you want, stretch the image across the section (select the expand icon on the top right of the image), and you're done. Now you have created a custom wavy/diagonal section on your website.

If you have some experience with any design software, you could get a lot more creative and use shape and negative space to your advantage to create some very cool graphic illusion to amaze your website visitors.

16. How Can I Add a Horizontal Scroll Section for My Images or Text?

To achieve this, you can use a Slider in the Pro Galleries, or you could utilize the new CSS Scroll feature on Editor X. Here's how you can do it:

Method 1

• Step 1: Add a section
• Step 2: Add a repeater
• Step 3: Add some content to your repeater
• Step 4: Change Repeater Layout to Slider

Method 2

• Step 1: Add a section
• Step 2: Add some content (make sure the content is bigger than the section)
• Step 3: Set the section Overflow Content to Scroll (Horizontal)

17. How Can I Create an Accordion FAQ in Editor X?

We knew someone on the Community shared this, but we could not recall who it was. Here's his tutorial on how to make a custom FAQ accordion in Editor X:

We used this solution on one of our clients, and we made some adjustments to the code as well as the design. There are a lot of limitations using this solution such that you cannot add an open/close animation, nor a custom automatic open/close feature.

‍

We added another container (behind the Title Container), set its height to 1px and 100% width. Then we added Shadow, set it to show only when the button is pressed.

‍

If coding is not something you are comfortable with, you could search for the Wix FAQ app in the Wix App Market. It is free and easy to use. The animation seems a lot better, but the app can be unstable at times and the entire FAQ doesn't show up.

18. How to Add a Loading Screen

• Step 1: Upload your GIF loading screen to Wix
• Step 2: Copy the URL of the GIF
• Step 3: Go to Setting/Advanced/Custom Code
• Step 4: Add the code below
• Step 5: Add the link to your GIF loading screen

‍

Note:

The big GIF is suitable for Desktop version, and the small GIF will be used for mobile version. Make sure you create two of them and copy the link to each one of them separately.

19. How to Add a Text Flickering Animation

• Step 1: Add a Text element where ever you want
• Step 2: Turn on Dev Mode and Change the Text #ID to #flickeringheader
• Step 3: Add the code below
• Step 4: Change the text in myarray to your liking. If you want more text, simply add a comma and make sure the word is between the quotation marks

‍

20. I Want to Add Sections That Look Different On Mobile

You can absolutely do this in Editor X. You have heard of mobile first design right? And this is how you can do it in Editor X, simply start with Mobile first.

One of our clients was trying to make the section they design responsive in Editor X. However, their design did not follow the box model, and it was quite difficult to scrape everything and start again. We decided to duplicate the section and edited it on mobile only instead. This way, we save time and cost for the client.

If, for some reason, rebuilding is not an option, you can also use this method. Although this is not recommended if you are using older browser do not support CSS "Display: None" attribute (Find out if your browser is supported)

• Step 1: Duplicate a section or create a new section
• Step 2: Go to all desktop and tablet breakpoints, select the 'mobile' section and choose "Don't Display"
• Step 3: Go back to mobile breakpoint, select the 'desktop' section and choose "Don't Display"
• Step 4: Design your new section on mobile

21. My Sticky Elements Are Overlapping as They Scroll Up

Back to the SAAS Company website (Testimonial section), you could see that as the 3 testimonial boxes scroll up, they actually go under the Testimonial Header. What happens if you want to replicate this movement, but at the end, all the sticky elements on the viewport scroll up together instead of scrolling under another section? We are looking at the bottom offset sticky scroll for Editor X.

To prevent the sticky elements from sticking to the bottom of their section/container, can apply bottom margin to those elements. This will behave as "invisible content" and it will prevent them from touching the bottom. Specifically, it is the bottom docking (one with the arrow down) so that as you scroll, the section will be able to see that there is a pseudo content there and push the whole section up at the same time.

⚡Bonus⚡

22. I tried to center my text box in a section but it doesn't center as I scale my viewport.

This is a simple fix. We highly recommend that you use the Align Center and Align Middle on the Inspector Panel. This will automatically center your element with just two clicks so you don't get frustrated trying to drag and drop the element in place.