Editor X Basics 2021] | Wix Fix

Before we get started, a quick shoutout to our friends at [Editor X TV, an amazing community where NoCode design enthusiasts gather for Monthly NoCode Design Challenges W/ Prizes! If you want to join a community that helps in building design businesses and furthering your career, go ahead and check them out.

Now, let's explore Editor X!

Getting Started with Editor X

First, let's create a new site. Head to Wix and click the "Create a New Site" button. You'll be prompted to choose your platform. Simply select "Editor X," and you'll be asked what kind of website you want to create. Since this tutorial focuses on Editor X basics, just skip this part and choose a blank template.

Voilà! You now have a blank website to work on using the Editor X platform.

The Editor X Interface

Once you open Editor X, you'll immediately notice some differences compared to the Classic Editor. As you hover your cursor over the artboard, you'll see three distinct areas: the header (the green bar at the top), the footer (the green bar at the bottom), and the main section in the middle.

Unlike the Classic Editor, there are no more restrictive content lines, giving you full control to arrange elements exactly where you want them. This is a big win for designers looking for more freedom and creativity in their designs.

Designing Your Header

Spend some time exploring the Editor X header. By default, you'll find a logo placeholder at the top-left and a menu element at the top-right. In Classic Editor, these elements would be confined within specific lines. But in Editor X, you can move these elements freely, which means you can create designs that truly stand out.

To add more elements to your header, you can easily access the "Add" panel and choose whatever you'd like to include. Remember, the sky's the limit here!

Designing Your Footer

Now, let's move on to the footer. The process is similar to designing a header. You can place items anywhere you want, creating footers that are attractive and unique to your website's design.

Don't forget to include important details like contact information, social media links, and additional menu options. Keep exploring the elements in the "Add" panel to customize the footer to your liking.

Creating Sections

The area between the header and footer is where you'll create sections for the main content of your website. These sections can have different styles, designs, and layouts to showcase your website's unique personality and flair.

You can add a new section by clicking the "+" button located between your header and footer. From there, the options are endless. You can create anything from parallax scrolling effects to fullscreen banners and stunning galleries.

Mastering Responsive Design

The biggest advantage offered by Editor X is its ability to create truly responsive designs that look fantastic on any device, from mobile phones to oversized monitors. This is a game-changer for web designers who need to cater to diverse audiences and screen sizes.

Using Editor X's responsive design tools, you can customize individual breakpoints to ensure your website looks perfect on different screens. When you resize your website on a smaller screen, Editor X automatically adapts your design to fit the new dimensions.

Additionally, Editor X features "stacking" for helping to optimize your design for mobile devices. Rather than manually rearranging elements for mobile, Editor X lets you quickly and easily stack them, ensuring your website looks great on small screens.

Collaboration Made Simple

Finally, let's not forget about collaborating with others! Editor X makes it easy for teams to design websites together. Using the "Share" button, you can invite team members to edit and provide feedback on your designs. By collaborating effectively, you can make your website designs shine even more.

Final Thoughts

Editor X offers web designers a powerful platform to create stunning, responsive, and unique designs. With the freedom to place elements anywhere you want and the tools to cater to different devices, Editor X is an excellent choice for designers ready to level up their web design game.

Don't forget to join the Live Learning Editor X community to connect with fellow designers, participate in monthly NoCode design challenges, and boost your design career. Embrace the power of Editor X and create outstanding websites that show off your design talents.

Happy designing!