Jun 23, 20227 min read

Wix Editor X Review + Editor X Tutorial: The Website Editor You've Been Searching For

Wondering how to create a Wix website or Wix blog using the Wix editor X? In this Wix website tutorial and Wix editor X tutorial, you'll learn how to get started with editor X content management system, a drag and drop website builder with no code. So let's get right into this Wix tutorial on how to use editor X to create a Wix responsive web design website and Wix mobile responsive website.

First off, if you don't have a Wix account yet, just click on the link in the description box below to sign up for free. Editor X is made especially for designers and agencies. It offers advanced design and layout capabilities that allow you to create complex website designs for any device, all without using code.

To start using Editor X, log in to your Wix account, and then click on the 'create new site' button on the top, right-hand side. You'll be prompted to select which platform you want to use: Wix or Editor X. Since this is a Wix website tutorial on the Wix Editor X, let's select 'Editor X'.

Editor X will ask you to tell it a little about your site by selecting what kind of website you want to create: business, online store, music, design, blog, beauty and wellness, portfolio and CV, event, photography, restaurant and food, fitness or other. I'll select 'business'.

Editor X will then ask you to choose how you want to start. You can either start from scratch with a blank canvas, choose one of the Editor X suggested templates, or click to see all Editor X templates at the bottom.

These options that appear below the Editor X template name are the elements included in the platform. These include grid layouting, which is an advanced two-dimensional layouting system based on CSS grid, docking, which anchors elements to a specific position as the viewport changes, stack & scale media for seamless responsive behavior, text scale to create scalable font sizes, flex layouter, which is a smart layouting system relying on flexbox technology for automatic reorganization of content while resizing, custom breakpoints to tailor designs to any viewport, not just classic devices, flexible canvas with resizing handles to instantly see and customize your design across viewports, advanced sizing control, which defines your element as fixed or fluid, using wide support for modern CSS units, and Wix design system, which features sections with built-in responsive behavior matched to the color palette of your site.

You can also place your cursor over any of Editor X's templates to view the template, and check out how it'll look on desktop, on a tablet and on mobile. If you enjoyed that specific template and wish to customize it, click on 'edit template' on the top, right-hand side.

Under 'add', you'll find everything you need to build a professional site with Editor X, from simple shapes to brand new layouting tools. These include quick add, assets, compositions, layout tools, button, text, menu and search, media, decorative, contact and forms, embed and social, blog, store, bookings, events, members, content manager, and multilingual.

Under layers, you can manage elements on the page directly from the layers panel. This is where you can find, display and rearrange each element per breakpoint.

Under masters, you can create Editor X masters to reuse a section on multiple pages across a site. Changes to masters apply everywhere they're in use.

Under pages, you can view your Editor X main pages and lightboxes, search all pages, and add a new page, be it a standard blank page or a dynamic page. You can also click on the three little dots next to an existing page to access its settings, SEO basics, social share, rename, duplicate, set as dynamic page, edit page, delete, set as homepage or add a comment.

Under site styles, you can edit your Editor X website's typography, colors and page transitions.

Under app market, you can access the Wix Editor X app market as well as the app manager.

Under content manager, you can add a content manager to your Wix website created with Editor X to easily manage dynamic site content.

With the Wix Editor X, you also have total control with breakpoints. You can customize how a site looks on any screen size. Your changes will automatically cascade down from larger breakpoints to smaller ones.

On the right-hand side, you can access the inspector by selecting any element on the page and opening the inspector to set layout and design properties like size, position, fill color and more.

With the Wix Editor X, you're able to design with sections. Your page is divided into sections which are used to structure your site. Organize content inside them with containers, a repeater, a layouter or a grid.

From the white panel up top, you can click on your icon to go to your sites, create new site, account settings, premium subscriptions, vouchers, domains, mailboxes, billing history and terms and conditions.

Under site, you can click to preview, publish, invite people to site, view the site history, create new site, duplicate site, transfer site, upgrade, get feedback, access SEO, dashboard, social share, roles and permissions, permissions per page, and manage site, including general info, domains, mailboxes, payments, notifications, customer management, marketing and SEO.

Under view, you can click to zoom in, zoom out, reset to 100%, select global action notifications, and select layer selection (parent container first or child element first).

Under tools, you can click to access libraries, media manager and multilingual.

Under dev mode, you can build professional web applications by adding your own custom code, connecting Wix business or external APIs, and using internal and external development tools.

Under help, you can access the help center, ask the community, watch videos and tutorials, find keyboard shortcuts, hire a pro, watch tours, check out new releases, send feedback, request a feature, report a bug and contact customer care.

Under upgrade, you can upgrade to a premium plan and get a free domain for 1 year, remove Wix Editor X brand ads, and enable online payments.

Once you're done customizing your Wix website created with the Editor X, click on 'preview' on the top, right-hand side to view what your website will look like on desktop, on a tablet and on mobile, and then click on 'publish' to make your changes active for all.

If you wish to create a website using the regular Wix editor rather than Editor X, make sure to watch my video on 'How To Create A Website In Wix'. If you wish to create a website using Wix ADI rather than Editor X, make sure to watch my video on 'How To Build a Wix Website For FREE in 10 Minutes'. I'll leave the links to both of them in the description box below.

If you're serious about following this Wix website tutorial on the Wix editor X, make sure to sign up for a free Wix account by clicking on the link in the description box below, check out our Wix tutorials playlist for even more Wix tips and tricks, as well as our FREE Complete Website Creation Guide below this video to learn more about how to create your own website step-by-step without stress or overwhelm.

Leave a comment below and let me know if you'll be using the Wix editor X or Wix ADI to create a Wix website. If you liked this video, make sure you give it a thumbs up and subscribe to my channel so that you can navigate the tech side of online business with ease, and stay tuned for our next video which is about how to use the Wix mobile editor. As you wait for my next video to go live, check out these two videos I have right here, and I'll see you in my next video.

EDITOR X TUTORIAL: Wix Website Tutorial On The Wix Editor X. Wondering how to create a Wix website or Wix blog using the Wix editor X? In this Wix website tutorial and Wix editor X tutorial, you'll learn how to get started with editor X content management system, a drag and drop website builder with no code. If you're searching for editor X basics on the editor X grid, this editor X responsive video is for you. So let's get right into this Wix tutorial on how ot use editor X to create a Wix responsive web design website and Wix mobile responsive website.

SUBSCRIBE FOR NEW VIDEOS EVERY TUESDAY & THURSDAY: http://bit.ly/youtubeyestotech

RESOURCES MENTIONED:

○ FREE Complete Website Creation Guide: https://www.yestotech.com/complete-website-creation-guide

○ Try Wix For FREE: http://bit.ly/wixforfree

○ How To Create A Website In Wix: https://youtu.be/e05AZDbzqQs

○ How To Build a Wix Website For FREE in 10 Minutes: https://youtu.be/EOWFILVssXU

○ Wix Tutorials Playlist: https://www.youtube.com/watch?v=1BBbnbmCPEg&list=PLbLPqE_rHXqvDRl3aCifnia27BYFqpYgR

○ Read The Post: https://www.yestotech.com/post/editor-x-tutorial-wix-website-tutorial-on-the-wix-editor-x

CLICK TO TWEET: https://ctt.ac/l7K8a