How to Create a Side Page Menu in Editor X with No Code | Wix Fix

Hello there, fellow NoCoders! Are you looking to create a stunning and functional side page menu for your Editor X website? Look no further. In this blog post, we're going to walk you through the process of creating a side page menu in Editor X with zero coding skills required.

This type of menu is perfect for Terms of Service or Privacy Policy pages, where users may need to quickly jump between sections to find the information they're seeking. Alternatively, you can use this approach on any web page with a substantial amount of content, making your site more user-friendly and adding a touch of finesse to your design.

We'll be using Editor X for this tutorial, but if you prefer the classic Wix editor, let us know in the comments! We'd be happy to create a similar tutorial for you. But for now, let's dive in and start designing that menu!

Step 1: Set up the Grid

First things first, you'll need to apply a grid to the section you'd like to add the menu to. We recommend using a 2x1 grid for this purpose, as it provides adequate space for the menu and the content. Remove the line on the left side to enhance the overall look and make more room for your content.

Step 2: Add a Button

Next, you'll need to add a button for each section you want your users to be able to navigate to. Start by dragging a button from the Editor X toolbar onto the left side of your grid. Customize the button by removing the background fill, changing the text color, and renaming it to match the section it connects to (e.g., "Section 1").

Step 3: Make it Sticky

Now let's make the menu "sticky" so that it follows users as they scroll. For each button, go to the Design panel and under the Layout and Position section, enable the "Sticky" option. Adjust the vertical anchor value to ensure the button stays on the screen as your users scroll down the page.

Step 4: Add Anchors

Time to add the anchors that will link each button to the corresponding section of your page. Drag and drop anchors onto the start of each section, and be sure to give them descriptive names that you can remember, as you'll need to connect them to the buttons later.

Step 5: Connect Buttons to Anchors

It's time to connect the buttons to the respective anchors. For each button, click on the "Link" option in the Design panel and select the corresponding anchor from the list. Your users can now click on the buttons and be taken to the designated sections of your page.

Step 6: Make it Responsive

To ensure the menu is fully responsive across devices, you'll need to adjust the grid layout across breakpoints. In the Design Panel, navigate to the "Grid Layout and Breakpoints" section and make any necessary adjustments to optimize your menu display on desktop, tablet, and mobile devices.

Join the Live Learning Community

There you have it! With a few simple steps and no coding required, you've created a sleek and functional side page menu in Editor X. By implementing this feature on your website, you'll make it easier for users to navigate your content and enhance the overall user experience.

But why stop there? At Live Learning Editor X, we offer monthly NoCode Design Challenges that come with exciting prizes. By participating in these challenges, you can hone your design skills and have fun in the process.

And that's not all – we also provide mentoring on how to build design businesses and further your career. Join our community now and unlock a world of opportunities in design, no coding skills required.

Remember, practice makes perfect. So, keep exploring Editor X and have fun experimenting with new design features. Happy NoCoding!