top of page

Getting started with the WiX Editor: An introduction

Updated: Jan 23, 2019

Hi there! Welcome to the very beginning of Charlie & Ava’s Wix Website Design blog series. Right about now you might be thinking to yourself “I thought Wix was supposed to be EASY to use… why is she writing tutorials?” Well, you thought right, Wix IS easy to use. The reason for these tutorials is that many of my clients, and lots of other small business owners, (probably you if you’re reading this), just don’t have the time to sit around learning all the ins and outs of a web design platform... you're busy enough as it is, running your business! With everything else on your plate, remembering how to log in and update your blog, or change the photos on your homepage slideshow, might not be the top of the priority list... even if it is easy.


Working with me, a Wix Expert, is a one-time investment that gets you the professional, custom website your business needs. After that, you can absolutely feel confident in choosing to maintain your site yourself with a minimal learning curve. These blog posts will be here to help along the way. And of course, you can always contact me here.




YOUR WEBSITE DASHBOARD


I’m going to start with the basics, and walk you through how to navigate the Editor of your Wix website. After you log in to your Wix account you will see what is called your “Dashboard.” (screenshot below) This is where you can access all the tools to manage your site. In this series we are going to focus on editing your site. I have circled how to navigate to "Edit Site". Also worth mentioning though, if your goal is to simply add a new blog post, you can access your blog from here without ever entering the Wix Editor. See it below in the left side menu.




ENTERING THE WIX EDITOR


After clicking "Edit Site" you will find yourself in the Wix Editor. It looks just like your actual website but with some extra menus along the sides of the screen. (screenshot below) This is beauty of Wix. You see exactly what the live site will look like as you make your changes in the Editor. The left side bar is where you will find the tools to add and edit elements on your site.




SITE MENU


The top button in that left side bar is where you will go to navigate to a different page of your site. On your live site you would just use the menu at the top of the website, or click a button located somewhere on the page, for example to go from the Home page to the Services page. In the editor you have to use the Site Menu to switch pages, the buttons and menus in the site design do not function.




PAGE ELEMENTS


The third button down is where you access all the design elements. If you are just doing maintenance to an already designed site then you won't need to access this often, but it's good to know where it is. From here you can drag and drop all kinds of elements on to your page, like text, image boxes, videos, new strips, buttons etc.




CUSTOMIZE ELEMENTS


Just about anything you add to your page can be customized. When you click on any element a small menu appears (circled below). The element in this example is a slideshow. If I wanted to change the images I would click "change images". To resize it, drag out the corners. To change how the slides switch, click the gear icon. Left to right those icons are Settings, Design, Animate, Stretch to Full Screen, and Help.




RIGHT CLICK MENU


Just like right clicking anywhere else on your computer, or even in a Word Document, when you right-click in Wix you get a similar menu. And as you can see below, all the control shortcuts you're familiar with like Ctrl + X for Cut, work exactly the same way. Here you can ask the editor to select the correct element if you have elements overlapping, and rearrange them to bring one forward or move one back.




THE TOP BAR MENU


Refer to the image below to see where the following buttons are on your screen.


Mobile View

Super important! When making changes to your website like adding a new service, a new team member, or a new portfolio photo, always check the mobile view. Wix allows your desktop and mobile views to be edited independently. So if you add a new person to your team, click over and doubt check the design on the mobile version. You may find some small tweaks need to be made.


Zoom

The magnifying glass on the right side of the menu allows you to zoom out and reorganize your strips. I also like it for an overall view of the site.


Undo and Redo

Don't be too worried about making a mistake. There is an Undo button! You can't click undo for 30 changes, but if you make an edit you don't like clicking Undo a few times will get you back where you started.


Save, Preview, Publish

Wix autosaves every few minutes, but you can also be extra sure by clicking the Save button. These changes will NOT be live. No one can see them but you if you just click Save.

The Preview button will show you your website as it would look if you did publish it. There is also a preview for the mobile version.

Publish is button you don't want to click until you're absolutely sure! Publish will make your changes live so everyone on the internet can see them.



After you've made all your changes and either Saved or Published, just close the Editor tab, or hover over Site on the Top Bar Menu and down to "Exit Editor".


Now that we've covered basic navigation of the Editor, future posts will include more specific tutorials on how to make the most common edits and additions to your website. If there are any topics you’d love to see included, please feel free to leave them in the comments section below!


2 Comments


Andy Moon
Andy Moon
Mar 08

A similar system when creating a blog on WordPress, I created https://dork-unit-slot.com/dork-unit-at-31bet this blog, it’s much more complicated of course, but the result is obvious, but I think that WIX is also good alternative, especially since you described in great detail and well how to best do this. Thank you

Like

Haris
Oct 25, 2023
Hello! It would be cool if you made a separate video about this, where you would talk about it in detail. In addition, now it is very easy to record a screen; I personally use https://www.movavi.com/screen-recorder/ and have no problems with video.
Like
bottom of page