Wix Studio Editor

Exploring the Editor

Alright, let's take a quick look at the Editor before we start building our website. It's a friendly tool that'll help us make our site look great. We will learn the basics of its features and how to use them easily. You'll notice that they're similar to those of all design tools such as Figma, Sketch, Adobe, etc. Don’t worry, it’s a user-friendly tool even if you”‘re a new designer.

Open New Page

When you start a new site, you'll find a simple page. It's like a blank piece of paper, ready for your ideas. This page has a top bar, called a header, a main area in the middle, and a bottom bar, known as a footer. It's just like setting up a room with a ceiling, floor, and walls. These parts help you organize your website. The header is great for your site's name or logo, the main area is where you put all your cool stuff, and the footer is perfect for contact info or links. It's all set up to make your website-building adventure easy and enjoyable!

Left Menu

Let's get familiar with the tools before we dive into building our awesome website! The left menu serves as the primary navigation hub, offering a range of options to enhance and manage your website. Each option in this menu provides specific functionalities, making site building intuitive and efficient. It's your main guide, packed with different options to add cool stuff and keep everything organized.

Inspector

Now, let’s move over to the inspector. In Wix Studio, the Inspector Panel is a critical component for fine-tuning the design and layout of your website. It’s where you can access and adjust various properties of the selected elements on your page. It offers a range of functionality that make the process of designing a website more efficient and user-friendly.

• To open the inspector panel, just click on the arrow on the right side. In the design section, you have the flexibility to adjust the size, layout, and position of any element.

  Animations and effects

  The interactions tab is a feature that allows users to add motions and interactions to elements on their website. This menu offers a variety of animation and effect options like entrance, hover, click, scroll and loop.

Great, that’s a quick overview of the studio editor.

Download Font Inter

Now, the first thing we need to do is to get our site looking sharp with the right fonts and colors to make things easier and more efficient. It's like creating your own text and color style in Figma. You can use the fonts provided by Wix Studio or upload your own. We’ve already picked out a font in our Figma file, it’s called “ Inter ”. It's a neat, clean font that will make your website look professional. If you don’t have Inter font, Just pop over to “ Google Fonts ”, find Inter (or any font you like), hit “ Get Font ”, and download it. Back in the editor, you'll see a panel on the left side of your Wix Studio called “ Site Styles ”. Click on that to get started. Now, we're going to tackle typography first.

Add Text Style

Alright, we're going to customize the headings and paragraphs following the same text style as the Figma design.

• Select the pen icon here, click on the drop-down menu next to the font category and search for your font, or if you haven't downloaded the font yet, simply click on "Upload Fonts" at bottom left. For Heading 1, which will be our big title in the hero section, let's search for Inter Semi Bold and set the size to 60, then click on the Apply button.
• Repeat for the rest of the typographic styles.

Add Color Style

Great! After we’ve got our typography set up, it’s time to add some color. Using our Figma file as a reference, we will now customize the color palettes. Let’s move to the color section, you’ll notice the default color palette and let’s add these color code from Figma to Wix Studio.

• Right here, with the pen icon, you can change the colour scheme. When you select a colour, you get 5 shades of the chosen colour, and if you don't like a colour, you can edit it manually by selecting the one you want to change. For example, the first colour will serve as the primary colour and the second as the secondary colour for the text, but if it's not the colour I want, so let's change it manually.
• Just click on Edit, select the color palette and paste the color code here, then apply. Let's try with one of my shades of blue, go to the edit colour scheme, apply the colour code and you'll get 5 shades of blue ranging from light to dark blue and of course we can edit manually if we don't like it.

Add Media

Alright, the next step is to upload the elements of your website. You should always have everything ready before building your website. Let’s go to "Add Elements". Add Elements is a key feature that allows you to enhance your website by adding various types of content and interactive components. Think of it like adding building blocks to create the perfect webpage.

• Let's move on to the Media section. Here you can upload your own custom images, whether in PNG or SVG format, or even videos and audio files. You can also choose from a variety of pre-existing media options.
• So next, let’s select the "Upload Media" icon, then "Upload from Computer" or drag and drop right here. Each of these elements can be customized in terms of size, color, font, and other properties, giving you a lot of creative freedom in designing your website. The drag-and-drop interface makes it really easy to add and arrange these elements on your web pages.

Conclusion

Awesome, we're all set to start building our website! Let's continue to the next section!