Editor X: How To Create a Sub Menu By Using Grids & Buttons?

Editor X is a powerful tool with a list of features that makes it easy to use and super intuitive.


Using Editor X, multiple menus and sub-menus can be created on your site. Moreover, after adding them to your Wix website, you can customize them individually.


Each menu can accommodate a list of items that can be unique from one another. It can link to different pages, anchors, external websites, etc. So, how about sub-menus? What’s required to create an interactive sub-menu for your Wix website?


Let’s find out how you can use the Wix Editor X and create an interactive sub-menu for a better user experience on your website.

sub-menu


Using Grids on Editor X


When using grids on Editor X, they allow you to take complete control of your design, no matter what the device is. It is an advanced tool that will enable you to create layouts, using rows and columns to position the elements at the right places correctly.


How to add a Grid?

To add a grid to a container or a section, follow the listed steps below:

  1. Click on a container or a page section in the Editor

  2. Click on the Apply Grid button appearing on the top left

  3. Select the grid preset as required, and adjust it as required

  4. Click on Apply


Editing a Grid For Your Website


The existing layout that’s available doesn’t have to be rigid enough. You can edit the grid layout, number of columns, and rows and change the spacing and sizes of the cells.


This is how you can edit the grids effectively:

  1. Click on the relevant container or section on the page

  2. Click on the Inspector icon at the top of the Editor X

  3. Click the Layout tab and scroll down further to Display

  4. Now, you can edit your grids in two manners:

  5. Edit the cells and spacing manually and more specifically

  6. Click on Change Layout to determine a different look for your grid

You can also make further edits to your grid, such as:

  • Add more columns or rows

  • Change the size of the rows and columns

  • Edit the size of gaps

  • Delete a row or a column

Final Takeaway: Using Grids And Editor X


Editor X can be a fantastic tool for creating responsive websites that stand out.


Whenever using Editor X and grids specifically for your websites, check on specific parameters before publishing the changes.


Ensure that the changes are optimized and responsive to different devices and screen sizes. Most importantly, keep a check on your breakpoints to ensure the composition of the grids is error-free.


Wix Grids is a powerful tool. Moreover, creating a submenu using a grid might not be the most feasible and dynamic solution for a more extensive submenus. However, if your requirement around sub-menus remains quite simple and to the point, the grids might be the right call.