sigma Hosting Logo
Sigma Hosting
Play Video

Information Technology (IT) Template from Wix – Web Design – Tutorial

Exploring the IT Services template from Wix.com. Learn Web design along the way, from a Wix Certified Trainer.

I will teach you how to build Wix websites from concept to automation at www.webmasteracademy.online

Partial Transcript:

What we’re going to be talking about today is the IT Consulting and Services template from Wix.com. You don’t have to be in IT to really take advantage of this template. Just like any template, your job is to customize and make it your own. This website template is excellent for anybody who has a service that is a little more complicated and a little more detailed This is a multi-page website that’s actually very clean and yet allows for the detail of services that you can provide and explain to your clients.

If you are new to the channel, my name is Michael Wood. I am the owner and Wix Certified Trainer with Captivatim Multimedia and Web Design. It doesn’t matter if you use Wix or not. These are great web design principles you can apply, no matter what service you’re using. The first thing I want to do is go ahead and take a preview of the site and just show you what it looks like in a live session and I just want to give you my thoughts.

After we do a quick tour of the site, I will show you some ways you can customize the template for your own service. If we look at the top right here it’s very clean. That’s one of the great things about this design. It’s what we call flat and clean design. You’re not gonna see a lot of 3D buttons…things like that. Now what’s good about flat design is it does have a clean appearance. It also translates very well with mobile devices.

So if I go ahead and scroll through here…It starts off with a very colorful photo. You can use any of these stock images. You don’t necessarily have to have your own image here. There are places where you want to have authentic images of your services or your staff and there are other times it’s okay to go ahead
and use stock images. For this particular site, using a beautiful photograph for your cover is probably your best option. If you happen to have a window office that overlooks the city, then by all means, use an authentic photo.

So here we have the main title. The call-to-action on this home page is “find out more” And as you can see it stands out
very clearly with that red accent. You only see red in the highlight of the page that we’re on and in the call-to-action. So it’s very clear and if you want to find out more that’s going to take you to the list of services. So in this web design, they believe that if you can look at the services they’re providing…that might equal a conversion. That the client will go ahead and call because they realize that these are the types of services they need. Now if you happen to be an IT or informational technology company, then having a clean website is two things. Number one, it’s a big challenge because there are so many things and very complex things an IT department or IT company can actually provide. And the other thing is your website needs to look great. It needs to look clean and polished if you’re IT, because that shows your expertise. If your design looks like it was made ten years ago, it’s easy for people to make a judgement about your ability as an IT company. So you really want to be cutting edge, but you don’t want to be cluttered. This website does a good job of being clean, neat, and yet provides lots of details.

So if I scroll down, you have the main paragraph about sort of the main clients that you serve. That’s what I would put in the first paragraph. You know, whether it’s entrepreneurs, big businesses, small businesses, or independent small business owners, you want to make that very clear on the first page. We scroll down and this is the highlight of the website. And that’s the “our services” tab and there are six. If I scroll down looks like, yep, there are six different services. You might provide more, but you’ll have a chance to explain in detail. If you do provide many more services I suggest you go ahead and break those down into six major categories. And so here are six and they already gave you some ideas. There’s cloud solutions, managed IT services, disaster recovery, cloud desktop, network solutions, and support consulting. Those are the major areas of any IT company wanting to reach out and find more clients.

There’s also testimonials. Credibility as an IT company is really important so you definitely want to have testimonials from people that matter. You don’t want to be making up fake names or anything like that. You want to have authentic companies. Now if you are a local technology company let’s say you are in Southern California and you serve the Los Angeles areas, then pick out testimonials that speak to your local area. Everybody knows who the big players are in their part of town, so if you work with any of them, you want to make sure you include those in your testimonials.

what we’re gonna be talking about today is the IT Consulting and Services template from Wix.com. You don’t have to be in IT to really take advantage of this template. Just like any template, your job is to customize and make it your own. This website template is excellent for anybody who has a service that is a little more complicated and a little more detailed This is a multi-page website that’s actually very clean and yet allows for the
detail of services that you can provide and explain to your clients. So once again thank you for joining me here let’s talk about the IT consulting and services template from Wix.com..Let’s get started Hello. If you are new to the channel, my name is Michael Wood. I am the owner and Wix Certified Trainer with Captivatim Multimedia and Web Design. We’re going to be talking about the IT consulting and services template from Wix.com. It doesn’t
matter if you use Wix or not. These are great web design principles you can apply no matter what service you’re using. The first thing I want to do is go ahead and take a preview of the site and just show you what it looks like in a live session and I just want to give you my thoughts. After we do a quick tour of the site, I will show you some ways you can customize the template for your own service. If we look at the top right here it’s very
clean. That’s one of the great things about this design. It’s what we call flat and clean design. You’re not gonna see a lot of 3D buttons …things like that. Now what’s good about flat design is it does have a clean appearance. It also translates very well with mobile devices. So if I go ahead and scroll through here It starts off with a very colorful photo. You can use any of these stock images. You don’t necessarily have to have your own
image here. There are places where you want to have authentic images of your services or your staff and there are other times it’s okay to go ahead and use stock images. For this particular site, using a beautiful photograph for your cover is probably your best option. If you happen to have a window office that overlooks the city, then by all means, use an authentic photo. So here we have the main title. The call-to-action on this home page is
“find out more” And as you can see it stands out very clearly with that red accent. You only see red in the highlight of the page that we’re on and in the call-to-action. So it’s very clear and if you want to find out more that’s going to take you to the list of services. So in this web design, they believe that if you can look at the services they’re providing… that might equal a conversion. That the client will go ahead and call because they
realize that these are the types of services they need. Now if you happen to be an IT or informational technology company, then having a clean website is two things. Number one, it’s a big challenge because there are so many things and very complex things an IT department or IT company can actually provide. And the other thing is your website needs to look great. It needs to look clean and polished if you’re IT, because that shows your expertise.
If your design looks like it was made ten years ago, it’s easy for people to make a judgement about your ability as an IT company. So you really want to be cutting edge, but you don’t want to be cluttered. This website does a good job of being clean, neat, and yet provides lots of details. So if I scroll down, you have the main paragraph about sort of the main clients that you serve. That’s what I would put in the first paragraph. You know,
whether it’s entrepreneurs, big businesses, small businesses, or independent small business owners, you want to make that very clear on the first page. We scroll down and this is the highlight of the website. And that’s the “our services” tab and there are six. If I scroll down looks like, yep, there are six different services. You might provide more, but you’ll have a chance to explain in detail. If you do provide many more services I suggest
you go ahead and break those down into six major categories. And so here are six and they already gave you some ideas. There’s cloud solutions, managed IT services, disaster recovery, cloud desktop, network solutions, and support consulting. Those are the major areas of any IT company wanting to reach out and find more clients. There’s also testimonials. Credibility as an IT company is really important so you definitely want to have testimonials
from people that matter. You don’t want to be making up fake names or anything like that. You want to have authentic companies. Now if you are a local technology company let’s say you are in Southern California and you serve the Los Angeles areas, then pick out testimonials that speak to your local area. Everybody knows who the big players are and their part of town, so if you work with any of them, you want to make sure you include those in your
testimonials. There’s a navigation arrow left and right and it’s got this scrolling and fade effect that’s built in you also notice as I scroll up and down I won’t do it too fast you notice over here on the right is the social media bar you notice when I move up and down the social media bar does not move and that’s a great way to just have that persistent link to those social media channels that you’re maintaining and of course at the bottom it
says ready to find out more and you can get a free evaluation which is another call to action that leads the client to the contact us page where they can type in a message and send you might say why not just put your email well a lot of times it’s easier for people to go ahead and type their message send it through your page because number one they don’t have to leave your website to communicate with you number two they don’t have to rely on
their M provider to send that message to you and also it allows you to collect all of the messages in a central location that you can access on the Wix back-end it also does have the email in case you want to provide that and the telephone number and the address and of course the credits there’s also an arrow down here at the bottom and there’s no words next to it but it implies that if they click on this arrow it will bounce them back all the
way to the top that’s really handy when dealing with mobile devices and iPads where they don’t have to keep scrolling their finger up the screen to get back to the top menu they just click that arrow and it Springs right up to the top how do you guys like this template that’s just the home page I just want to see any reactions out there um if you liked it go ahead and give me a thumbs up or a heart or if you’re on youtube drop me a comment I’m
curious to see what part of this website you really enjoy alright let’s go ahead and continue moving through at the top is a menu navigation why choose us let’s click on that link and did you see that animation that went across the screen let me go to home and the home page has it as well well I choose us and it’s this really cool scrolling effect that does call the attention to their eye and they focus now on your words and why choose them well
there are one two three four five reasons I also wanted you to notice that those reasons faded in as we scroll down so I’m going back here let’s go down watch the fade okay see that text fade in okay so that’s a really nice effect and it’s also again very clean let’s go to the top our services and here it takes us to those six panels we saw and took us to the homepage so instead of recreating these squares it’s good to navigate to the place on
your website where this content is already existing so if you have it on your home page you don’t need to make another page with the same six blocks number one if you have any changes to the texture or copy you would have to change it twice the other thing is it keeps the code on your site much cleaner because you don’t have all that extra code from having duplicate content and that of course will help with your load page rates so again it goes
to the services right there now why would you have the link up here at the top menu but it’s also on your home page why don’t they just scroll down well because people will be approaching your website from different devices and people think differently some people if they go to the home page there right here they just want to know what you’re about and they could just click on our services and it’ll bounce right over there the other reason you
want why you want that in your top navigation because if I’m on a different page like why choose us and now they want to know about your services if you don’t have it listed they won’t know how to get to those services other than going to your home page but unless they memorized your website or add a map to it they’re gonna refer to which is completely unrealistic they’re just gonna click on our services which will take them to the home page all
right now then there’s the industries page and this is a different page and this talks about the different industries that you serve this has a nice parallax scrolling effect you’ll see as I move down that’s as if the city is just in a different layer behind the website so it gives a wonderful clean effect to your site and it’s a nice splash of color while the rest of the site remains very clean as I scroll down you could describe the different
industries that you’re that you service let me go back up here and if I click on contact us that will go ahead and jump down to the footer but I want you to notice instead of just sort of jumping over there there was a fade so let’s go to industries I want you to see this when I click on contact us watch the fade I don’t know if we saw at that time why choose us contact us see there we go there’s a nice fade that went over to the footer so the
end yes this is the footer so it’s not the same content being duplicated on every page the content is there one time and it persists across the pages keeps your code a lot cleaner and it’s much easier to update should you make any changes building websites page by page it can be done it’s kind of you know forcing the issue but as you could see it’s labor-intensive to make any kind of changes you want to be efficient with your web design and only
have the content there one time and then have multiple ways to get to that content and that’s really the art of making a good user experience all right let’s get under the hood before I do that I’m just going to look at my other monitor here see if there’s any comments or questions at this time okay if you like this so far give me a light give me a happy face a heart let me know what you think about this website so far and if you have any
questions feel free to write those down if you’re watching the replay you can still react and leave comments and I will actually receive them let’s go ahead and jump into the editor now it’s going to ask us to save our work go into the editor and let me just show you some quick ways to customize this site first of all the strip background so this this home page is built using a strip this box and we talked about this last week is a box that’s
overlapping two strips so here’s strip number one with the photo strip number two is a band of white and on top of that is the square okay so that’s the basic layout and then this is actual a button that can take the user wherever you want them to go on this strip all you need to do there are two columns one is plain white and the other one is the image so it’s an interesting design choice we could have the image stretch all the way across from
left to right but leaving this white space does give not only a feeling of cleanliness but it also gives sort of a flow as the color white flows and spills into the bottom strip it’s almost like taking your eye naturally across the screen and then down so this has two columns this column should be the same color as the strip underneath it let’s look at the image right here I’m going to do is manage columns actually let’s see we want to click on
the correct thing here what I want to do is there it is I want to change the column background you might need to click around a little bit till you find it so if I go to change the background we can change this to whatever matches your the imagery for your services obviously if you’re not IT you’ll want to pick something that’s more appropriate keep in mind you can also include video instead of an image so there’s some free videos I’m just
scrolling through right here let’s pick this video you won’t see the video unless we do a preview so here we have kind of this slow-moving slideshow you could see it there now you notice you may not see it very well that’s because there is a filter so I’m going to manage this go to settings there is a color filter on top so if I take out the filter do a preview you can see a little bit better as the city just kind of translates and fades into the
background so if you want to call more attention to your images you can just go ahead and change that to a video as I scroll down this is text that you can just simply click on and change the text okay and this also is text just click on the text and change the text now one thing I didn’t talk about is the level of detail on this site let’s go back to the preview and when I click on our services remember these six boxes well if you click on learn
more like disaster recovery there is a page that talks about disaster recovery so you can go in as much detail as you want you could even have pricing or whatever you want to do more testimonials may be video examples you could build out the disaster recovery page and you really should sort of creating a click funnel if you will showing testimonials and data and everything they need to know without cluttering your website you notice disaster
recovery is not on our menu navigation and that decision is to keep things clean if they go to our services that’s where they can click on the other services that you provide ok so I just want to point that out because when we go to customize when you click on learn more and which is a text button you click on this link right here and you could change where it goes in this case you would select the disaster recovery page so when you make the
buttons just like any button you have to build the content first so when you build the disaster recovery page it will be listed in this drop down menu where you can then tell the button hey this is where I want you to go when someone clicks on it you could change the buttons too if you don’t like the text button that’s no problem you can go in there click on the design and we could just change it to a button if you like buttons more than text
that’s fine the text is just there just trying to keep the design clean but you can customize all the different colors and shapes and sizes that you want if you want to know more about the types of design you should be making make sure you check out more detail at the webmaster Academy check out the class 201 which talks exclusively about Web Design color palettes and things of that nature okay let’s scroll down you have the testimonials these
are text and this is actually a slideshow so I can go into these slides let’s manage the slides there’s three slides each has a different testimonial on it I can duplicate that so now there’s four testimonials you can move the testimonials around as you can see you could change the order and I could delete them as well so this is the manage slide menu all you need to do is say manage slides you could change the slide background for each slide so
if you wanted a different color for some reason for each of the different ones you would just go to manage slides click on the slide and then change a slide background so let’s change this to red now that doesn’t look great let’s change it to orange and as you could see let’s do a preview you can change each slide background individually if you want to call attention to each of the different testimonials now I recommend you stay within the color
palette that you’ve decided for your website alright ready to find out more okay so that then you have this get a free evaluation let’s click one on preview and see what this does so this creates a lightbox you know it’s a lightbox it’s got this big X here in the corner and this is where they can go ahead and put in their information what’s nice about that is the contact us has a similar form right there but the get a free evaluation asks a few
more questions and it allows them to give more contact information so you could follow up with them that’s also big and centered on their screen which works great for mobile devices remember modern websites we always think about the mobile version when making these designs so that’s really the best part of customizing this site I showed you how to do the different strips and how to change out the buttons that’s pretty much what this site is now
if you don’t like the blue and white pick the colors that are gonna work for your organization so if I can change this strip background I’m going to select color and you notice this is the color palette it’s white this is the one in the middle is the palette so gray red purple blue and orange or this could be white or black or gray and then the palette will just expand out the different shades if those aren’t your company colors then you go to
select change and you can change the pre-selected palettes or you can go in and change each of them on your own I do a whole lesson in on palettes and how to change your website palettes in the 201 design course if you want more details on that so again what are the advantages of the site it’s nice and clean with the ability to create very detailed pages on your particular services so that is the IT consulting and services template from Wix com
if you have any questions feel free to type them in the comment other than that remember to Like and subscribe to the channel and let me know what kind of templates you’re interested in I do like to showcase the newest templates from Wix comm but let me know what kind of templates you want me to talk about in the comments I have links to the webmaster academy in the comments if you want to know more about how to learn how to create websites from
concept to automation at the webmaster academy thank you guys for joining me for this live session I hope you enjoy it and be sure to share it with somebody who you think can benefit from learning how to use these various templates thanks for your time guys and we will see you again next time at the webmaster academy bye bye you