Building a Website with Editor X - Part 1

If you're a designer, agency or even a freelancer looking to build an advanced and responsive website, then you're in the right place! In this blog post, we'll dive into creating a product website for a wine company using Editor X - an advanced responsive web creation platform made for designers and agencies. Editor X is a powerful tool that can help you create stunning and fully-functional websites without writing a single line of code. So, let's get started!

Getting Started with Editor X

Before we dive into the details of building our wine company website, it's important to understand that Editor X is more than just a website builder; it's a platform for designers who want to learn, grow, and advance their careers in the world of design. Editor X offers a variety of tools and resources to help you build your design business, including mentorship, design challenges with prizes, live learning sessions, and more. So, if you're looking to further your career in design, be sure to check out livelearning.editorx.io and join the community.

Now, let's get started with building our website using Editor X. The first step is to create a new site in the Editor X dashboard. For this project, we'll start with a blank canvas.

Setting the Foundation

With our blank site, we'll be given a default section in the center, along with a master header and footer to work with. Since we're building a product website, we'll start by creating a main hero section that includes our navigation.

First, let's remove the master header. To do this, simply select the master header and delete it.

Next, let's set the background color of our page to the black color (1c1c1c) that we'll be using in our design. To do that, click on the section, followed by the "Page" breadcrumb. From there, you'll be able to add your custom color by clicking the "+" sign and entering the hex value.

Now that we have our foundation set, it's time to update the footer master. Delete any default content within the footer, then click on the "+" sign and add a new container. Within the container, add a text element, followed by a button element. Customize the text and button to fit your design preferences.

Designing the Main Hero Section

For our main hero section, we're going to add a background image, some text, and our site navigation. First, click on "Quick Add" on the right-hand side and drag a "Section" onto your canvas. Adjust the width and height of the section to fit your design.

Next, let's add a background image to our section. Click on the "Change" button within the "Background" tab of the section options, and upload your desired image. You can adjust the position and other settings of the image to achieve the look you want.

Now, it's time to add some text. From the "Quick Add" panel, drag and drop a text element onto your section. You can customize the font, size, color, and alignment of your text to suit your design. For our wine company website, we'll add a catchy headline, along with a brief description of the products.

The final element of our main hero section is the site navigation. Drag and drop a "Container" element onto your section, then position it accordingly on your canvas. From there, add a "Text" element for each menu item (e.g., "Home," "Products," "About Us") and customize them to fit your design.

Previewing and Adjusting for Responsiveness

After completing your main hero section, you should always preview your site to ensure that it appears correctly across various devices, including desktop, tablet, and mobile. To do this, click on the "Preview" button located in the top right corner of the Editor X dashboard. If needed, you can make adjustments to your design using the "Breakpoints" tool.

Wrapping Up

Congratulations! You've successfully created the main hero section of your wine company website using Editor X. Stay tuned for part 2 of this blog series, where we'll dive deeper into the features and capabilities of Editor X to create fully-responsive, custom product pages, and more!

Remember, if you're looking to further your career in design and build your design business, don't forget to visit livelearning.editorx.io and join the community. You'll have access to monthly NoCode design challenges with prizes, live learning sessions, and invaluable mentorship to help you succeed in the design world.

Up for a challenge? Head over to livelearning.editorx.io now and start building amazing websites with Editor X today!