Transcripts
1. How to Deliver a Website to a Client like a Pro: Hey, and welcome to the skill share class. My name is Reno Into this skill share class. I'm going to show you how you can deliver a website like a professional to a client. So let's say you're done with the design and with the building process inside of her press , how do you deliver it like a pro? That's all I'm going to show in the short class. Very essential step if you want to have your own Web design business, so I hope to see you in the next episode.
2. Create a custom login experience: All right, let's just get started with step number one, and that is create a custom lugging experience. I've been getting this question a lot lately, and that is how do you custom, mighty looking experience. So, for example, when you look in that, you see a logo on the left over here. And also, when you look out or rent, somebody locks in that you can see your logo or your clients logo in here. So let's just go and let me show you how that is done. But the begin that we're gonna use for this is called White Label CMS. So what you need to do go to plug ins? I'm going to switch to my client's websites to actually show you a real example. All right, it's this one. Okay, so now deploy again is installed, and then you can go to settings, and then it's over here. White label CMS. So you need to set up your local in two places. First of all, you can skip this part and then you can go to log in, and here you can set up your lugging logo. So that's the logo that you see when you look out. So I'm gonna click on upload over here. My client already has a logo. You can pick a black version over here. That is perfect when you don't add a background. But if you want at a background, then a white version is better. So let me show you what a background looks like. You can also set up a background. So this is my client's website. Um, where I've set up a background and a logo. And of course, if you have ah, background and the background needs to be a little bit darker, so you need to adjust that in exterior photo shop and then also upload a wide local. So now we're gonna upload the logo that we see right here for dis website, which is just gonna be this black version, because I'm not going to set up a background over here, but I will show you where that is. If you scroll down, you can see that you can also upload a background image in here and make sure that he black overlay like I have over here is a blight already do the image and then, of course, also use a white image. If you want a custom background like this for now, I'm just going to click safe and see what happens. So click safe, then log out. And here you can see the logo. So now every time you look in, you will see the logo. So now over here, you will need a white version off the logo, and that is something that you can set up under branding over here. So if you scroll down the Edmund Bar, that's this bar. And then if you scroll down to cite menu, that is this menu. So if you upload a local right here, so here we need a white version and we click on insert and we click on safe. You will see what happens that it's absolutely massive. So what you can do? What I did on my own website is create a logo. But then at a little bit of white space on the right in your PNG image, So I will show you what I mean. Here I made a custom PNG with a little bit of white space. If you don't know how to do that, you can easily do that In most creative tools. but I always do it at in a photo shop. Eso just add a little bit of white space over here in your PNG and then ableto look like this on. Otherwise it would look like this. It's not super ugly, but with some locals, you want to make it a little bit smaller to make it look clean.
3. Install Google Analytics & connect it: all right. Step number to install Google analytics. So if you go to my dashboard over here, you can see the page fuse that this website has, so you can see that my actually doing pretty well, my own portfolio that I have received 138 Fister's yesterday. Eso you can see a little graph over here, so that's just super nice. And I will show you how to set this up. So you will need Google analytics for this. I've already insulted on this website, so I'm gonna do that right now on a new website. But you want to do is go to analytics dot google dot com, create an account with your Gmail, and then you can create a account over here. So how you do that is you just go to the ATM Penhall over here, and then you can create a new account. So for every new website, you create a new account with Google Analytics. So if you click on create a new account right now, I want to create an account for my sub domain testing. Everyone aboard comes I'm gonna copy a euro, gonna go back to Google Analytics for? You're gonna give it a name, so that doesn't need to be the link. You can just do it like this or name it. Whatever you want, you can click on next. Weap. That's perfect. Lickle. Next, My website name that can be the same two Euro Welsh. Space it over here. But make sure you don't at the https delete that and selected over here like this. So if your website already has SSL, then you can select this one. You can select an industry over here. Maybe business and industrial. Marcus says perfect. The time zone of a Put that on your own country. So for me, that's the Netherlands. Click on Creates here, select your own country again. I make sure that you agree to the terms. All right. And now you are done. Now this account is created, and now you can connect this Google Analytics accounts to you over press websites of that purpose. Consent the data to Google analytics, and then you can see all the data in Google Analytics and you can see a preview over here in your own website. So let's just do it right now. I'm gonna go back to my website and the black in that I'm gonna install. It's called except metrics. So just search for Google analytics. And if you screw them, you can see exact metrics over here. It has a low rating, but this waas the best school analytics Blufgan before the updated it. I still think it's pretty good, but they've made a lot of features. Pro. But if I want to see all the date of Google analytics, I just go to analytics dark Google that comes to see everything. So for me, this works. I know a lot of people didn't like the new update, but I think it's still a decent Blufgan. You can also install something like this, but that's a little bit too heavy for me A little bit too much for just on my website. I just want to have a quick brief. You also for my clients. How much visitors this, mom. So that is what I'm going to install right now, Okay? And now you can click on lunch to reserve because we need to connect this to our website and here you need to connect it to go analytics. So this needs to be the same email issue used on at least doc google dot com For me, that's my personal email. So I'm gonna click on this and then allow exact metrics to see my data. And then here we need to select the website that we I want to connect because I have a lot off website connected to that one Gmail accounts. So inside of my Google analytics, I can go to the analytics off different websites. So here we need to select the right website. Okay, So just select all website data and then click on complete connection. So then if you scroll down, there's one thing that you need to check and that is that the editor role is over here because you want to create in our counts for your client. In most cases, that has to Editor roll. So you need to make sure that you see the editor over here. Just click on saving. Continue. We don't need this. So just right click Skip this step and then we are done. I will ask you 100 times if you want to upgrade to pro, but we don't want to upgrade to pro. We just want this thing on our dashboard. So if you click on your desperate right now and you scroll down, you can see that the tap is over here. So if you close this one and then bring this one to the top, then you will always see the page stats over here. So that is actually all I want. And then if I want to see more data, I just go to analysts are google dot com. And if your client wants to, you can invite them to a Google Analytics account. So you can do that by going to Google analytics than going to the settings over here and then go to account user management. And then you can at them on their Gmail to also give them access to the whole Google Analytics account off that website, right, because one website can have different users inside of Google analytics. Okay, so there's actually all you need to know for this step a little bit complicated. I think this is the most complicated steps, but it's really nice because right now your clients and you can see the data inside of Silver Press Dashboard
4. Setup the Fav / Site icon: The next step is the site I can back in the day. This was called FF Aiken. So if you want to research information on that is called FF so f a V. But right now it's called site Aiken, and that is that little I can that you can see in all of the taps over here. So that just set this up for dyspepsia. Right now. You can do that. I go to appearance and then click on customize, and then you need to search for a tap called site identity. If you have a different theme than sometimes it's hidden in some off the taps over here. Sometimes it's inside of the header or inside of the stele. So you need to click on the few taps to find these site identity than scroll down, and you can see the site I can over here so you can now scroll down and then select the site I can for the site. Eigen. Make sure that it's not white because it's gonna be on a white or almost white background in most cases, and you also want to make sure that there is enough spacing on the left and on the right. Otherwise, you will have problems with the cropping. Right? So if you just direct this in like this, you can see a preview over here. Click on select. And you can see that this is perfect because right now there's enough space on top on the bottom, so this looks perfect. So if you click on skip cropping, click on publish, Click on the X And there I changed, right. You saw it exchange from the WordPress Aiken too. Not my side. I can. So this is for the whole website, and now we're done with this step.
5. Setup Wordpress user roles: Okay, So the next step is to add users for your clients because most clients wants to be able to log in themselves and make simple changes to the text into the images. But you don't want them to change everything about the websites over Press has a great system for this, and that is called a user roles. Elements are also uses those user roles, which I'm gonna explain the next step. But in this step, I'm gonna show you how you can properly create a user for your client because you should never share your own looking details just for safety reasons. So if you go to users over here, this is actual claim website. You can click on ads new over here and here you can add a user for your client. You can just put in a front name. It doesn't really matter, doesn't have to be a very difficult name, and you need to put in their email because they will get an email from ver press when you add them as a user, but also if they want to change their password so you only need to feel in the user name and the email. Then you can scroll down. You can skip all of this, make sure that decision checked and then put them on the editor role. And that is one roll below the admin role, which is the highest. But I have to say that sometimes your clients wants full access to the whole website, and then you can at them as an ethnic. But I would say for most Glines, just give them the editor role because you don't want your clients to touch things that they shoot in touch, right? Maybe. Ah, they're very curious. And they're going to change a few settings over here because because they think that things could be better. So I always recommend that you start out with that of the ruling. Only make them admit if they really asked for it, because at the end of the day it's their website, right? So just click on at a new user, and then they will get an email. So that's all you need to know. For this step, let's go to the next step
6. Setup Elementor user roles: The next step is to set up element or user roles, and this is very important because L. A mentor, doesn't know that we have just created a new user inside of ver press. Elemental cannot read everything. Inver press right? So you need to tell a mentor that you want to give the editor role limited access to all of the element or features. So if you go to elements or if you have elemental pro, you can go to the role manager. And if you don't have elemental pro than this option is not available. That's why I always recommend that people use elemental pro. If you're still using element of refree for your client websites, you can watch my video about elements of pro, and I think that you will be convinced that Elemental Pro is the right fit for your Web design business. But there's a feature that I talked about. You can click the editor open, and then I would check this box, which is access to edit content on Lee. And with this feature, you tell a mentor that all the editors can now only access the limited version off element or pro if you check this box, then they will not be able to ever see the elementary editor Sometimes you wanted with clients. But in my experience, this is the best option for most clients. If you click save changes and you look into a website with the editor roll, you will see that there is limited access over here that the editor already doesn't have all the features that the mean has, but also, if you go too deep ages and this is the most important part and you click on Edit with Element or as an editor, right? So I've now created an avatar accounts for myself. That's why I can see this. So I have to accounts on this website. As you can see, there are not a lot of options over here to drag in new elements. Actually, I cannot drag a new element in, As you can see right here, I cannot direct this button. It's impossible, but I can added a few simple things. So there's only one tab over here for your client. So in this way they can mess up the design they don't even see all the columns and everything is just a limited version, and the only thing that they can do, for example, exchange the Eiken exchanged text. But they cannot change margin batting at a new elements. So that is a feature that I recommend you use when you're working with clients. Eso that's it's for dis step.
7. Customize what clients can see in Wordpress: okay. And then the next step is a very interesting one. Actually found his one myself. And it's called Vaping at me and you I a customized. If you go to the plug ins and you click on at New and you search for display gin WP at menu , I customize you can see display gin. If you click on it, it will say Desplechin has not be decimate your current version. I use it on all of my website, and this is because this developer actually started a new Blufgan. But I think discipline is actually much better than his newer version, which I also tested. And it still works absolutely fine. And it also has very good ratings at you. As you can see, 4.5 stars. So what this allows you is to limit what your client can see inside of purpose, because right now my client can see all of these things. So, for example, the templates. But let's say that I only want my my clients to be able to see the pages and maybe not even the Commons in the media right or even exact metrics report. Maybe you wanna Onley give him a preview on the dashboard. And also, as you can see on this website, this stop Edmund bar on Lee has one button. I've changed that with depth plug in. Right, So you can make it a really clean for your clients. So let me show you what I mean. If you go to the plug in and then click on this first option, um, you need to select what role you want to add it. It's a little bit of clunky. I would say it's not a perfect looking, but it works, but the technique is very good. So if you check this box and then click on safe, then you can go to the sidebar over here. So now we're editing the sidebar off all the people that haven't editor accounts within this represents site. So here you can see all the things that a normal actually admin user see, So blinking is not perfect, but you can see right now to my client's website, for example, has to stem plates option where they can go to the theme builder. If you don't want your clients who edits the menu, for example, in the food er, you could just turn this whole thing off. So if you go back and you search for templates, you can see that is this one. Because it's elemental templates you can scroll down, you can click on remove, and then if you scroll down, click on safe, go back to your client's account and click on Refresh. You can see that now that option is gone, so you can also do that for the tools. Let's go back. That's just delete the tools over here. Remove. Maybe we also want to delete the comments. Let's screw up where the Commons. Over here. Click on remove scroll down, click on Safe Coterie clients accounts to check it, click on the refresh, and here you can see that we now only have a few options that my client would need. You can also do this for the main bar, which by actually already did so In this way. It's not very hard for your clients because for most client, it's just too technical. You want to make it as easy as possible, so I think this is an excellent begin to make the experience for your clients better
8. Make an explainer video: okay. And then this next step is to explain their video. What I always do when uh, client needs to fill their own content is that I make an explainer video on how to use the website, because still, we've made it much easier and nicer for your client. But for most clients, it's still a little bit hard. So what I always do is I just record my screen not with the camera, like like this and a microphone, but just my laptop. I put on my screen floor my quick time and on Windows there's a great stool called Bloom that's actually free. Ever put a link in the description where you can record your screen and your microphone at the same time, but that is something that your client will really appreciate. I've done it with almost all of my projects, and I just don't make claims like, Hey, if you log into your account, you can change the basic things off your website over here. Just go to pages, and I just exactly tell them where to click in the same way as I'm doing it right now for you. But then much more basic, without a microphone. And, uh, actually, I'm using and external microphone right now. But of course I'm using the microphone den in my my laptop. Enough way to camera. Just a very simple video. Maybe just take your iPhone and recorded like this, make it super easy. And give your client a little bit of confidence that they can make the simple changers to our website how they connect portfolio items, how taken at block boasts and where you can see the analytics. Right. So this is just something that I always do. And your clients will love this because day will not feel lost. And it is very important because if your client has a nice experience with the in the last few weeks that they work with you, they're gonna tell other people about you to make sure that you don't forget them. After the website is on, tell them what they can do with it, and they will be very happy with you. So here you can see a few of those videos where I show my client what I did or how they can use the website. I need to blur a few titles over here, but I just make a video like this. I put it on YouTube and I send them an unlisted YouTube link. So when you upload a video like this, you can put that video on unlisted. And that means that only the people who have that link and watch that video so your video will not be life on YouTube is just for you and your client to watch that video.
9. Ask if your client want anything else: and then step number eight is to make sure that your client understands everything. So what I would do is call your client after a week. So a week after you've sent that video and just give them a call and be like, Hey, that you understand everything. Is everything clear for you? Do you have any other wishes? And that's just a very nice and warm ending to that conversation. And then afterwards, if they're really happy, you can send them the invoice. I always do a pre payment of 50% up front and then also 50% afterwards. But that is different for everybody. But that is what I would do for the less staff to give your client that very nice experience. Okay, so that is all for this short skill shack lies. I hope that you enjoyed it. If you want me to make other videos on skill share than please, let me know also, if you have questions and you can leave them down below, I've put down all the steps below as a project that you can follow for your next website project. And then I hope to see you in my next skill share class
Rino De Boer, Designer & Content creator
