Σ Sigma Hosting is mainly a video tutorial website

Σ Sigma Hosting is mainly a video tutorial website that make it easier for you to search within the transcript of videos for solutions of problems you might face during your journey in dealing with different webhosting companies. So, we are very sorry if the text is not well organized and we may work on it in the future but for now we hope you get the benefit mainly from the video then you may need to have a look on the transcript. Thanks for your understanding 🙂

thanks to Wix for sponsoring this video hello everyone and welcome to art and design my name is Thor kid and today we're gonna be creating a website using Wix calm specifically this website right here I'm gonna show you how to create this how to use the interface and how it all works let's dive right into it alright so the first thing we're gonna do is we're gonna create a new site we're gonna create a site for a designer and here represented with the first two options with this either to use the ADI editor which is basically Wix this way of holding your hand while Wix designs the website for you it basically asks you questions like what kind of website do you want to create and okay I want to create an artist website okay then it might ask you questions about what type of colors you like what type of fonts you like what kind of like overall theme aesthetic you like and it it will sort of build the website for you and you sort of don't have to do much design work and really really nice and easy for people that don't want to get really really into and nitty gritty details of aligning the buttons and placing things in the right positions but that's what we're going to be talking about in this video because that's the complicated process now if you would like to see a video about the ADI editor I would love to do that in a future video so – leave me a comment down below if you want to see that but let's go ahead and move into the Wix editor so we choose a template now I am not gonna use any of these tablets and the reason for that is because I already have a design that I am going to create so I'm gonna paste my design on that so I'm gonna create a completely black page and create one from scratch but I'm not saying that you should do the same if you see a template that really really like strikes home for you that looks good that looks really good then go ahead and try it out and you can always modify it to what you need you can change the images you can move things around but I'm gonna grate a black page from scratch let's just go ahead and click it all right so now wicks is building our website and there we go now we are in the Wix editor and if you're seeing these elements right here just go ahead and click dev mode and click exit Courbet that'll get rid of the programming tools because we're now can be looking at the program is tools today but we are going to be enabling the toolbar so the toolbar should be enabled by default but if it isn't then you can enable it right there just gonna move that into place like so and this is where we can manipulate the items that we have selected in the editor and do things like copy paste delete arrange align items to each other distribute them flip them and do all sorts of good stuff like that but we're mostly gonna be working with the size and the position these ones right here and at the bottom right here we can see the layers menu and obviously we don't have anything on the website right now so there are no layers so let's get started by adding images to the page to do that we go to add image my uploads my image uploads then we're just gonna click on that and here we can add images from our own computer now we don't need to upload from our own computer we can use images from Wix or Shutterstock or Ernst plus I'll talk about that later in the video but right now just going to add our own images now click on the images that we want so now that all of the images are here and we can see it's a little bit chaotic so let's go ahead and organize them real quick and add them into folders and to do that we right click go to create new folder and then we're just gonna call this one artworks there we go I'm just gonna do the same thing for the rest of them so there we go we got everything organized into neat little folders we got the photos so that the logos we got the artworks and the other two images that didn't really fall into any category now I'm just gonna add the logo and resize it a little bit and then we're gonna move it into the header of the page and that's this top portion right here and now if we check out the layers we can see that the logo is now in the header of the page pretty cool if you mow it down into the page check the layers again we see it's in the page so everything is working just the way it sit and now let's just move it back into place I'm gonna click on the header and move the toolbar just out of the way just a little bit and now I'm gonna change the size of the header to 60 pixels and see what happens you see it got caught on the logo so we need to just move that a little bit away and then click on the header again change it to 60 pixels and there we go perfect now I want the local in the header to be 20 pixels away from the left side of the page now we can do this by selecting the local and simply tapping on the arrow keys if we use just the arrow keys then we move the loco one pixel at a time but if we hold shift down while we tap on the arrow keys and we move it 10 pixels at a time so if we tap twice we move it 20 pixels okay so the next thing I'm gonna do you can change the color of the background now I'm not gonna change it by much better that in mind I'm just gonna choose a slightly different hue of white but if we just take a look at the options we can see we can have videos pass or background which is pretty cool if you wanna have like moving videos as the background we can choose images of course upload our own choose the ones from the Wix library bunch of images right here and choose from the unsplash or shutterstock and will cost you a few dollars per image but I mean it's really nice that it's integrated directly into the system but I'm just gonna choose my own color so jous f8f8f8 as the background-color gonna add that to the page like so select it and as I said it's not a lot of difference but I I like this color I like this color so I'm gonna stick with this one now let's add something to the main page right now so we click on add and okay there are tons of things that we can add to the page we can of course add text to the page we can add images gallery we can choose vector art we can use interactive elements buttons boxes buns buns more but what I'm gonna be selecting right now is a strip now strips are basically full width pre-designed elements that have things like contact information like a welcome screen and like bunch more I'm just gonna select a classic black strip and place it right here and the reason why I'm using a black strip is mainly to split the page into three distinct sections we'll get to that in just a bit but I'm gonna move this section up so that it's aligned to the bottom of the header then I'm going to change the height to 1080 pixels and this is basically going to give us the full page experience so when the visitor visits this page for the first time the first thing that they'll see is this section right here anything that we put into this strip is arguably the most important part of the website because it should contain the main goal of the website now what I mean by goal well in short this is the main reason why a person decided to visit the website we want the users to find what they're looking for so we want them to achieve their goals and be successful on our website now I talked about this and other topics related to how to design a professional website in a previous video so go ahead and check that out using the card over there or through the link in the description if you want to learn more about website design but let's get back to the Wix editor and continue with our website and add the front image to the site now this image will serve as the main selling point for the that our users want to achieve on the website now I made this image using Photoshop and procreate combined I'm just going to make it the right size and position it where I want so i'm just gonna resize it based on what looks right for me alright so after faffing about just a little bit I'm pretty happy with the placement of it and the size so I'm gonna keep it like this and let's move on and add some text to this section we do that by going to add and then we're just gonna use text and we can choose any text that we want I'm just gonna go with heading 3 gonna plop it into place like so and then I'm gonna customize it based on the designs that I have in my mind I'm just gonna go ahead and change the font from próxima Nova to Futura okay so now let's resize the text box all the way to the edges of the page so I'm just gonna grab this handle move it all the way to the edge right there then I'm gonna change the width to 980 and that should be full width of the page so now let's just make it Center aligned like so and I'm just gonna make some minor changes to it change the font size to 48 and let's just speed through this process because it's basically just me sort of aligning pixels at this point so I'm just going to speed through this process all right so now what I'm gonna do is I'm going to add a button above the main image right over there so when the user this is the page this will be the first thing that they'll see so let's make the button pop just a little bit so I'm gonna go to the design and now I'm just gonna change the color of the button itself just gonna add this color right here and now we need to change the color of the text because it's not really contrasting very well with the button color so let's just choose pure white and let's also change the font to proxy Minova so I'm gonna use proxy manova for all the buttons and futura for the rest of the text on the page now let's just go ahead and close this down and resize the button to 160 pixels in width and 45 pixels in height so that's perfect okay so this is starting to shape up pretty well now I am noticing though that there's some inconsistency in how far apart the items on the page are spaced so I'm gonna fix that right now and make sure that there's consistency in how far apart the items are from one another so this one should be 40 pixels away from this let's move the image 40 pixels away from the button alright so after tinkering around a little bit I think I'm pretty happy with the position of where this is going so I'm just gonna zoom out to get a bigger picture okay yeah I like it so the only thing that's missing right now is the rest of the page at the bottom and the navigation bar so let's start by adding a navigation bar just to sort of finish off the main part of the website so I'm gonna go ahead and add a menu item that's what the navigation bar is called just gonna plop it into the header like so and then I'm going to tinker with the design just a little bit to get the font and the colors right not gonna bore you with the details so I'll fast forward through this section and we're done so now we have the navigation bar looking for us but it's a little bit lonely up there there's only one item in the menu so let's fix that by adding another page to the website just to get an idea of what it would look like with more pages so to do that we go to the menu click Add pates give it a name and then we're basically created a new page on our website so Wix will automatically navigate us to this page as we can see so now we are in the asset space and we're just gonna change the name of home so it's not capitalized letters so let's go ahead and rename it to home just with normal letters and I can see that they're quite far apart from one another if we look at the menu right there and I will fix that but before I do I just want to show you one more thing in this menu right here so basically if we click on the three dots right there and click on settings we have access to the settings and the options that are related to this specific page so we can for example change the name of the page remove the header and the footer we can have this page password-protected or only available to members you'll have to install a separate module for that but I just want to point out that there's been some more settings and options that are available in that menu right there anyways back to the site I'm gonna make it so that when this button is clicked the visitor is taken to our new page so I'm gonna link this button to our new page so just gonna call this visit library so when the user clicks on this button they'll be sent to the assets page now I should probably rename the page to library just to keep it consistent that's one of the things that we need to keep in mind when designing websites is that we need to keep it consistent in as many ways as we possibly can and there we go we have it now linked to the other page and now we can finally resize the navigation menu so that it looks right and I think this is good for now so let's just keep it like this and in fact I think this is a good point to end the video so in part 2 in this video I'm going to be finishing off the website by adding other sections and basically connecting everything together and actually launching art and design TV so I'm really excited for that and I'm gonna think you're very much for watching this video if you liked it click that thumbs up button subscribe for more videos and I'll see you in the next one take care and have an awesome day bye bye .

Video Discription

Learn how to create a website with Wix. Create your own website for free using this link –

This Wix Website tutorial covers the process of creating a website for my YouTube channel. It has taken a couple of months of design work and many iterations, but it's finally live! 😃🎉 Check it out here – www.artanddesign.tv

—— Subscribe —————————–

Subscribe to the channel

Instagram

—— Affiliate links —————————–
Build your Wix website

YouTube Channel Tools

———————————–

Create Website
Website
Design
Wix
How to create a website
How to create a free website
Design a professional website
Web design
How To Create a Website With WIX 2019
Wix Beginner Tutorial
Website design
How to use wix
Wix tutorial
Website tutorial
Create website
How to create a website on wix

 

Leave a Reply