Play Video

Basic Web Design With Wix

In this video, you’ll learn how to design a simple website using Wix.com.

hi folks mr. Ackerman here thanks for watching in this video I’m going to show you how to get your website up and running this is one of the most important parts of the course because your website is where you’re going to display all of the great work that you’re doing this semester you can think of it as your portfolio online so the first thing I want you to do is get yourself to Wix calm WI X and set up a user account this is standard the
same way you would do it for any site and once you do that you’ll eventually find yourself looking at a screen like this now I’ve got a bunch of websites already created from previous courses so you might not see this but if if if you have set up sites you will see stuff if you’re brand new to this I don’t think you’re going to see anything so you’re gonna click over here on create new site when you get to that I know you’re gonna want to click
photography but do not do this we do not want that we want to go to other and then when you see that click on the second one here create your website with the Wix editor and then I know you’re gonna scroll and see all these wonderful looking templates do not use them I repeat do not use these I want you to start with a blank template and the reason is I want you to design I don’t want to see your abilities in creating and planning so go over here
to blank templates which sorry we already did that so we’re gonna click over here start from scratch and edit and once you do that Wix is going to give you a completely blank clear clear slate of a website and I want to show you what all these buttons do and give you the knowledge that you need to start building your own site so first of all this website has one page if you click over here under pages you’ll see it’s only got one page which is
called home if I click on manage pages it gives me the option to add a page so maybe I want a home page and a nice thing to start with is an about page so add page name it about and that’s where you going to introduce yourself to the world and you notice I got to type this with capital a and the rest was lowercase I kind of want to do the same thing to the home page because I’m a bit of a neat freak like that so rename this home like that my
website now has to pay but there’s nothing on these pages they’re completely blank these lines are just guides that I get to see when I’m designing it they don’t actually show up to the general public so which page do we want to work on first let’s say it’s the home page so we go over here and we make sure home is highlighted and what are we going to do why don’t we add a title by adding some text so go to the text option here and here are a
whole bunch of different text fonts that you can add but you don’t need to pick any one or the other you can always change it later just pick the first one and then you’ll see there you go it says heading one now double click in there and we’re going to change this I’m gonna call it Rob Ackerman on one line and photography on the next line I’m gonna highlight everything go in here maybe we’ll Center these things up like that maybe I’ll make the
font a little bit bigger oops now I noticed that some of the word photography is down on another line so X out of that and just click and drag this box a little bit wider like that so everything fits maybe move it watch what happens when I move it up when I get to the middle of the page this magenta line shows up and when I go horizontally to the middle that magenta line shows up this is now centered on the page let’s go navigate to the about
page or they’ll edit the about page it’s blank what do I want on my about page maybe I’d like to add an image so add I’m gonna add an image of myself so that people can see what I look like get to know me a little bit my image uploads now like I said I’ve been doing this for several semesters so I have lots of images added but you might need to add something new so go to upload and from your computer now you can navigate to where your images are
or if you want you can go directly from social media which is a nice little feature here Wix has free images do not I repeat do not use these I’m not interested in other people’s photography I’m interested in your photography and how great your work is so don’t use those and shutterstock images is kind of the same thing but you have to pay for them so back to my images I’m on the about page I’d like a picture of myself maybe a portrait if you
hover over the image it gives you some details I like this one so let’s click on it you see it’s clicked I’m gonna add it to page and now I can click and drag when it lines up with these guides which help me Center things up or keep them on the page of anyone’s computer or phone these things go magenta so there it’s in the corner there and if I’m happy with that maybe I want to add another little text box this one is just where I’m going to write
a little blurb about myself so I might click and drag that over here double click in there fonts a little big so make it a little bit smaller and type something introduce yourself hi my name is Rob Ackerman and I love photography I hope you enjoy my work of course you’re gonna want to say something deeper and more meaningful than that but I’m just giving you an idea if you don’t like the font double click and highlight everything and change the
font maybe you want it to be script like or maybe really really thin or maybe looking like something out of a movie like that it’s up to you you got a lot of choices here I’ll leave it to you guys to decide what you might want that to be or X out of that now at this point you might want to see what your site actually looks like so go to this go to the preview button and look what you have here’s the page doesn’t look too bad it could be improved
of course but at least things are starting to take shape but how do I get back to my home page there’s no menu to click on anything here so that’s the next thing we’re going to do let’s go back to editor and let’s add a menu down here and here are some menu options these are sample menus going vert horizonte and then some that go vertically I’m going to pick one or just do go with the first one here and look what it does it gives me a menu here
that I could move down here I have two pages so there’s a home in and about if you put it up here into the header section it gives you a little warning attached to header and you can Center that up with the guides and then it’s going to say if you put it up here it’s going to show on all of the pages which is actually what I want if you think about it because if I preview I’m on my about page will now I want to go to the home page there’s my home
page and the menu is still there so I can get somewhere else like let’s say I had a third page let’s go back to editor let’s go here and manage pages we’re gonna add a page what would the next one be maybe it’s gonna be one of your assignments so we could write shooting assignment one but that’s starting to get kind of long the first shooting assignment was people places and things so maybe we could do something like that we’ll click done and now
if you axe this out look what’s happened to the menu it appears on this page because that was the option selected have this menu appear on all pages now let’s go to that page to play around with it people places and things and in this assignment you shot five images of people five of places five of things so your 15 images maybe there’s five that you really like and you want to show them off now I know what you’re thinking I’m gonna go add image
and I’m going to add images one at a time but this is actually not what you want to do for a bunch of images you want a gallery galleries allow easy organization of the images and when you click on them they can expand and show up bigger and you can also write captions that describe what people are seeing there’s all sorts of different gallery choices let’s start with the first one here and that gets added so here we go and you notice there’s a
bunch of images already there they’re not mine they’re from Wix they’re free and they’re great but I don’t want them they’re not your images so I don’t want to see them on to see your images so click on the box there and go to manage media and you’ll see here are all of them let’s select all and delete them because I don’t want any of these instead let’s add images that are our own so we’re go to add media image and again you can get them from
your computer you can get them from social media I already have a bunch some of these were taken around the school like this one this one this one for people I could maybe pick this one this is me and some of the other teachers at Thornley so I’ve got some people images I’ve got some places and maybe some things so there we go there’s five images that’s I’ll just do one more six there we go so let’s add those to page and now I can order them
around by clicking and dragging I can also highlight an image and add a title like this one here you can’t quite see it yet but it’s some dandelions just outside of one of the exits outside of the Rock exit of our school so I can give it a title I should be able to give it a title it’s not letting me give a title and not quite sure why that is I should be able to describe it here I’m gonna have to look into that for you guys but for now let’s
just leave that for a sec let’s click done and see what happens here they all are nicely arranged I don’t have to click and drag anything let’s preview what this looks like if I now click on this image it pops up and you see I’ve got the image the file name which is not very professional we want something nicer than that but what can change that later if I arrow across here is another image and yet another these are all images of the school that
I’ve taken over the years there’s me mr. stone and Miss Lerman who’s no longer with us and some close-up detail of chipping paint on one of the doors and some crumbling flooring actually you click X and you get out of it let’s go back to editor one of the things I’m noticing is this gallery is a little too high up on the page it’s bumping up against the the menu here so if I go back to editor all I got to do is pull that down a bit maybe I’ll
Center it up on the page and then see how does that look that’s a lot better the about page has a little bit of what I’m looking for again these are a little too high and then go back to editor I want to edit that page so I do that in here it’s the about page to pull this down a bit I’m gonna pull this textbox down a bit see how the magenta line tells me I’m in line with the photo let’s preview much better much better and on the home page this I
think is a little too low I could move it up I could also add a little bit of you know some photos here maybe change the background I’m gonna let you guys experiment with that but the basics are now complete there’s just a few more things to do back to editor always save your work Wix may or may not autosave I’ve heard horror stories where people did hours of work didn’t say that logged out lost everything so click Save just in case it doesn’t
autosave when it does this it’s gonna say ok this is your site it’s whatever your user name is dot Wix site comm slash and this one is called my site I don’t want it to be my site maybe I want it to be something like grade 11 photography because I’m in grade 11 so I click good done and there we go and then the final thing you got to do is you have to publish otherwise the world will never see it all you’ve done by saving is actually save your
work but it’s still invisible to the world so Publishing lets the world see it and here’s your site if you double click in there and or triple click maybe and then you right click copy you now have your link and you can share that with people click done and so if I go in here and I right click paste that link let’s see what comes up there’s my website that’s what the world is going to see I’ve got different pages I’ve got galleries remember I
didn’t like what’s written here but we we can change that I’ll try to change it again in a minute and there’s my about page and you can just keep adding pages you’re gonna be adding pages as you go throughout the semester and that’s how I’m gonna look at a lot of your work so one more time I’m going to give this a try and if it doesn’t work then I’m gonna end the video and look into it at a later time I wanted to change the descriptions here
there we go now it’s letting me change it so the title should not be the file name out of your computer this is the rock exit at our school as it’s called so that’s what I’m gonna name it and description dandelions growing in the springtime near the rock exit at thorne Lee okay and we’ll click done now I can do that with all of these photos and let’s preview to see how that’s coming up click million times better that’s exactly what we want
something professional-looking something that people are going to like to look at okay anyway that’s the basics I think from here you guys can take it away and make your sites awesome you can change backgrounds by clicking in that area and clicking on these okay you can make them solid colors or patterns there’s all sorts of other things you can do like changing the size of your gallery like that you can move this down a bit like that stretch it
out you can make it take up all of the space that you’ve got stretch to full width I don’t really recommend this it spills off the edge of the screen but there’s a lot of things to explore I hope you have a good time doing it it’s been my pleasure to help you guys get your galleries sorry your portfolio’s visible to the world and I’ll see you in class thanks very much bye now