[WiX Tutorial 2]Using Wix Online Editor to Create/Design/Publish Your Website(Step by Step Guide and Feature Introduction)

In this tutorial we run WiX features with WiX website builder(Step-by-step guide). It’s very easy to do in the editor mode, just clicking element and customizing it. When you finish this tutorial, you will be the master of website designer.

If you don’t create the WiX account and log in with the WiX website builder editor mode, please refer the [WiX Tutorial 1]Create a free account and start to build a Website first.

Step 1: Page Background

Select the color/image/video as you like for the page background.

 

Step 2: Upload your images/videos/fonts/docs……etc into the storage

 

Step 3: Go “Add >> Menu” to select the menu element as you like into editor page

Please make the “Menu” element in the Header Area(Above the dotted line), header area is for all pages.

Click the dotted icon to add new page and define the page name in main menu

Finish the menu

 

How to add sub-page for sub-menu? Create the main-menu page first, and then click dotted icon to run “Subpage”

Finish

Step 4: Go “Add >> Text” to select the text element into editor page and modify the text settings

 

Step 5: Go “Add >> Image” to select the image element into editor page and modify image settings

 

Step 6: Go “Add >> Gallery” to select the gallery element into editor page and modify image settings

 

Step 7: Go “Add >> Slideshow” to select the Slideshow element into editor page and modify image/video settings

 

Step 8: Go “Add >> Button” to select the Button element into editor page and modify button/link settings

 

Step 9: Go “Add >> Box” to select the Box element into editor page and modify box/design settings. The box is available to add text value.

Step 10: Go “Add >> Strip” to select the Strip element into editor page and modify image/text/design settings. The Strip is good to display in the mobile/desktop browser.

 

Step 11: Go “Add >> Shape” to select the Shape element into editor page. The Strip is free image.

 

Step 12: Go “Add >> Video” to select the Video element into editor page and modify video/Youtube settings.

 

Step 13: Go “Add >> Social Tool” to select the Social Tool element into editor page and modify Facebook/twitter……etc settings.

 

Step 14: Go “Add >> Contact Tool” to select the Contact Tool element into editor page and modify contact info/map/received the customer request via mail settings.

Step 15: Go “Add >> List” to select the List element into editor page and modify the list type.

 

Step 16: Go “Add >> Lightbox” to select the Lightbox element into editor page and modify the show time/lightbox setting. It’s good to show the coupon info with the lightbox tool.

 

Step 17: Go “Add >> Blog” to select the Blog element into editor page and modify the show blog setting. It’s easy to quickly create new blog without coding.

 

Step 18: Go “Add >> More” to select the Wix FAQ element into editor page and modify the FAQ setting. It’s useful and fast way to create new FAQ without coding.

 

Step 19: Introduce some features the Top Toolbar

  • Save: Save your settings
  • Preview: Preview your website
  • Publish: Apply it to real internet. You may publish your website after saving the settings
  • Mobile Editor: Design the mobile page for mobile phone/Tablet, you have to design it after finishing desktop page settings
  • My Dashboard: Show the info with your site
  • Site Manager: Manage your website
  • Exit Editor: After you save and publish the site, you can’t run the feature to exit editor mode

 

How to enter the Mobile Editor mode?

  • Go top toolbar to click “Site >> Mobile Editor”