Editor X Tutorial For Beginners | Create a Website With Editor X 2022

Hello, NoCode enthusiasts! Today, we have an awesome tutorial for you on using Editor X, a powerful website builder that allows you to easily design and create stunning websites. This tutorial is perfect for beginners who want to create a website using the latest 2022 features of Editor X. Once you learn the basics, we invite you to join our community at https://livelearning.editorx.io/editor-x-tv to participate in our monthly NoCode Design Challenges with prizes, and receive mentoring on how to build design businesses and further your career.

So, without further ado, let's dive into the tutorial!

Step 1: Find Editor X on Google

To start, simply type "Editor X" into the Google search bar and hit enter. Click on the first website that appears, which will bring you to the Editor X homepage.

Step 2: Create a New Site

Once you're on the Editor X homepage, click on the "Create New Site" button. This will open a selection of website templates that you can choose from, but for this tutorial, we'll be working with a blank canvas. Select the "Blank Canvas" option and click "Next."

Step 3: Customize Your Canvas

You will now see the blank canvas where your website will be designed. On the left side of the screen, you'll find a toolbar with various options for customizing your website. To change the color of the canvas, click on the "Page" section to make sure the page is selected. Then, click on the color dropdown menu and choose the color you want for your site.

!Change color

Step 4: Add and Customize Text

Now, let's add some text to your website. On the left panel, click on the "Text" button, and choose a text style from the options that appear. You can change the text by clicking on it and typing your desired content.

For this tutorial, let's go with the headline "2022 by XYZ," followed by the subhead "Saturday." After you've typed in your text, you can customize the font style by selecting it and choosing a new font from the dropdown menu. You can also adjust the font size by using the "Basic" tab in the dropdown menu.

Once you're happy with your text and font style, click on the "Paragraph" tab in the menu and select "Update Theme" so that your changes will be saved for future use.

!Add text

Step 5: Resize the Header

Next, click on the header section of your website to resize it. For this tutorial, let's make the header 70 VH (viewport height) and 600 vw (viewport width). You can adjust these values to create a header that best fits your site's design.

!Resize header

Step 6: Add An Image

To add an image to your website, click on the "Element" button in the left panel and choose the "Image" option. Browse your computer for the image file you want to use, and click on "Upload Media" to import it to your site.

After uploading your image, click on it and use the resizing handles to adjust its size and position on the page.

!Add image

Step 7: Add a Grid

Now let's add a grid to your website to organize your content more effectively. Click on the "Layout & Grid" option in the left panel, and choose the "2x1 Grid" option. This will create a grid with two columns, which you can use to divide your content.

!Add grid

Step 8: Enter Content Into Grid

In the first column of the grid, add a text element with the title "Bottle 500ml." You can change the font, size, and style of the text in the same way as described in Step 4. Make sure to save your preferred style as a theme for future use.

!Add content

Step 9: Customize Your Grid

Now, go ahead and add more content to the second column of the grid, such as an image, a description, or a call-to-action. You can also adjust the size and position of the grid elements to create a visually appealing design that fits your needs.

!Customize grid

And that's it! You now have a basic understanding of how to create a website using Editor X. Of course, there are many more features and options available, but this tutorial should give you a solid foundation to build upon.

We hope that this tutorial has been helpful, and we encourage you to join our NoCode community at https://livelearning.editorx.io/editor-x-tv to learn more about building websites with Editor X, participate in our monthly design challenges, and receive expert mentoring on how to grow your design business.

Happy designing!