Introduction. Creating an Account. Wix Creating a Website Without Code

Transcription

1 Introduction Wix is a free website builder that creates professional looking websites. The best part: you don t need to know any code. It uses a simple drag and drop functionality to allow you to customize and edit your site. In this tutorial, we ll show you how to get started in Wix and create a portfolio website for yourself. Note: Wix also offers premium options such as your own domain, adding addresses, etc. Creating an Account 1) Go to 2) Find the Start Here button to start creating an account. 3) Input your information or connect your account to a social media acount (Facebook or Google +). 4) You will then be able to select what category your website falls under. Wix provides templates geared towards what you need. For example, if you are a Photographer, they have website templates geared towards showing off your photographs. Note: You can always change this category later on. Last updated: 05/29/2014 Page 1

2 Choosing a Template Once you ve chosen a category, you ll be able to choose from a variety of templates. In this case, I ve chosed Design > Designer. You ll notice that on the left hand sidebar, you can still choose from different categories to see other types of templates. Click the View button below each template to preview it. 1) In this tutorial, we re going to select the Graphic Designer template. To get started, click on the Edit button. 2) You will not be directed to a new screen, where you will be able to drag and drop elements into the pages, change text, and rearrange elements. We ll call this your dashboard. None of the content will go live until you hit Publish. Be sure to Save your content as you go. These controls are on the top toolbar. Last updated: 05/29/2014 Page 2

3 Editing Your Website As mentioned before, Wix functions as a drag and drop builder. Let s go over the tools that you ll be using to edit and build your website. This left-hand sidebar set of tools will be your go-to for creating your website. Pages allows you to add and reorder your pages. This is also where you will go to navigate to the pages you want to start editing. Design allows you to edit your background, colors, and fonts on your website. Add allows you to add more elements to your website such as a gallery of images, a blog, buttons or menu items, social media icons, etc. Wix App Market offers a variety of different applications with cool features such as a Form Builder or adding a Google Maps. Note: Some features cost money. Settings allows you to edit your Site Title and make it searchable via Google and edit Social Media settings. Statistics and Favicon involve getting an updgrade. The top toolbar also gives you editing power. Show Rulers will help you Undo/Redo changes you ve made. Copy an element. Paste an element. Show Gridlines on your template. This will help you create a balanced website. position elements on your template. Snap to Objects will snap elements to gridelines when you drag them into your template. Last updated: 05/29/2014 Page 3

4 Editing Your Header Let s start editing! First, I m going to edit the header to reflect my site title and change the look of it to match my personal style. Feel free to make it your own as well. In Wix, I can simply start clicking on objects/elements to edit them. 1) First, I m going to change the text color to black and input my own text into the headline. Double click on the text. 2) You can choose both the text color and fill color through this text editor that appears. In addition, you have options to change the font, size, style, etc. My text now looks like this: 3) Now let s change the shape that serves as the background for the headline. Click on the shape to start changing it. When you click on the Shape, you ll notice a drop down menu that gives you options. In this case, I m going to click on Choose Shape. Last updated: 05/29/2014 Page 4

5 4) A new dialog box will show up that offers a variety of shapes to choose from. Scroll through them until you find one you like. I m going to choose Digital Screen and then click on the Choose Shape button. 5) The shape will now appear on your screen. Click on the shape again to see the drop down menu and this time select Settings. 6) In Shape Settings, you can change the Stroke and Fill Color and change the Stroke Width. Change them to what you d like. This is what mine looks like: Last updated: 05/29/2014 Page 5

6 Addings Pages & Creating Your Menu Let s organize our menu / the navigation of the site. 1) To get started, go to the Pages section of the toolbar. 2) To rearrange pages, hover of the dotted pattern next to each page until you see a crosshair. This will allow you to drag and move the page to where you want it. Instead of having About as a sub-page of Portfolio, I m going to drag above Portfolio to make it its own page and menu item. You will notice now that our your website, About is listed as a menu item. 3) To start adding pages, click on the Add Page link. Wix gives you lots of options for differen tpage layouts. You can also create a blank page that you can completely customize yourself. 4) Select a page, and then Name your page. In this case, I m adding a Blog, and naming it BLOG. Then click OK. 5) Rearrange your menu items so that it goes: Home, About, Portfolio, Blog, then Contact. Last updated: 05/29/2014 Page 6

7 Editing a Page Let s now try editing a page. Let s work on the About page. 1) Go to the Pages tab and click on the About tab. This will bring up the About page on your screen. This is what it currently looks like: I want to change it so that it s a slideshow of photos below my text instead of a single photo text to the paragraph of text. 2) Click on the image and click on the trash can icon (Delete). 3) Next, click on the text and use the handles to make the text stretch farther across the page to fill the missing image. Last updated: 05/29/2014 Page 7

8 4) Now, we need to add a new elements to the page - a slideshow of photos. Go to the Add tab. You ll now see a list of options. 5) Choose Gallery. A new list of options appear. 6) I m going to select Slideshow. 7) Once I ve click on Slideshow, it will appear on the page. I can drag, reposition, and resize the slideshow with the handles around it. My About page now looks like this: Last updated: 05/29/2014 Page 8

9 Note: Adding any type of element will be similar. For a slideshow, I ll need to select my images for the slideshow. 8) In order to do this, click on the slideshow until you see the drop down menu and select Organize Images... 9) A pop up window will appear where you can upload your images, rearrange the order of your images, and delete the stock images automatically put in as placeholders. You can add titles, descriptions and links for each image. 10) Once you ve selected all your images, click OK. Last updated: 05/29/2014 Page 9

10 Publishing Your Website Once you ve made all the changes to your pages, it s time to publish! None of your content is public until you hit publish. Reminder to constantly click on the Save button while you are editing your website to ensure that you don t lose your changes. Wix 1) Ensure that you ve given your site a title and description, so that it can be searchable via Google. To do this, go to the Settings tab. 2) Click on SEO (Google). 3) Input a title and description. Then click Done. 4) Once you ve done, click on the Publish button in the top toolbar. 5) A new pop up will show up to notify you that you are publishing. You can also allow search engines to fid your site and enable a mobile friedndly view of your website. Once you re sure, click Publish. Last updated: 05/29/2014 Page 10