How To Use A Menu To Create A Standout Portfolio | Editor X

Hello, NoCode Design enthusiasts! In this blog post, we're going to dive into a fantastic video by Tom from the Wix Playground Academy. The video showcases how to build essential elements from one of their beautiful websites, created by Emily, a talented Designer and graduate from the Wix Playground Academy.

As part of our monthly NoCode Design Challenges, this month's challenge is to create a stunning and responsive menu using Editor X. To help you take on this challenge, we'll provide you with a step-by-step guide based on Tom's video tutorial. So, let's get started and learn how to create a show-stopping portfolio using a customizable and responsive menu with Editor X.

If you haven't joined our community over at https://livelearning.editorx.io/editor-x-tv yet, be sure to sign up! We provide mentoring on building design businesses and furthering your career. Our Monthly NoCode Design Challenges with exciting prizes are the perfect way to sharpen your design skills and meet fellow design enthusiasts.

Step 1: Creating a New Menu Page in Editor X

First, let's fire up Editor X and start by creating a new page for our menu. To do this, navigate to the pages panel and click on the "+" icon to add a new page. Name it "Menu" and choose a blank template to start with.

Next, remove the default header and footer by selecting and deleting them. We'll be building and customizing our menu based on Emily's design.

Step 2: Apply a Grid to the Menu Page

Now that we have a clean slate to work with, let's apply a grid to our menu page. This will help us position and align our buttons more easily. To apply a grid, in the menu page settings, choose "Other" and select a 4-column grid. You should now see a grid displayed on the page to work with.

Step 3: Add and Customize Buttons

With the grid in place, it's time to add and customize our buttons. These buttons will serve as the primary navigation for our portfolio website.

Go to the "Add" panel in Editor X and choose a button that looks similar to the one in Emily's design. Place the first button on the leftmost column of the grid.

Click on the button and begin customizing it:

1. Change the text to "Work".

2. Open the Inspector Panel and click on the brush icon to access the design settings.

3. Change the font to "Leverica" and set the size to 33px.

4. Create rounded corners by adjusting the "Border Radius" settings to full scale.

Don't forget to customize the hover effect for the button as well. This adds interactivity to the menu and gives it a professional look:

1. Choose "Hover" in the Inspector Panel.

2. Change the background color and border color to blue (or any color that matches your portfolio's color scheme).

Repeat this process for the remaining buttons in your menu. For example, you could add buttons like "About", "Projects", and "Contact". Just make sure they align with the grid columns.

Step 4: Test Your Menu

Finally, it's essential to test your menu to ensure it works correctly and is responsive. Preview the menu in the Editor X and check the hover effect on each button. Ensure that the buttons are aligned with the grid and look professional.

Wrapping Up

And that's it! You've successfully created a unique and responsive menu for your portfolio website using Editor X. Building a standout menu is crucial for any designer, as it not only showcases your work effectively but also provides an excellent user experience for your visitors.

So, are you ready to take on this month's NoCode Design Challenge and show off your skills? Head over to https://livelearning.editorx.io/editor-x-tv to join our community of design enthusiasts and access expert mentoring to help you build your design business and advance your career.

By participating in our Monthly NoCode Design Challenges, we hope you'll find inspiration, engage with other passionate designers, and learn new skills to take your NoCode projects to the next level. Good luck with the challenge, and we're excited to see what unique menus you come up with!