Hey guys, my name is Rino welcome to LivingWithPixels and in this video, I'm
going to show you how you can deliver a website like a professional. What do you do
when you're done designing and building
a whole website inside of WordPress? Let's just get started. Okay, so I've
divided this video into eight steps
that I think that you should follow if
you deliver a website. So, I hope that
you will learn a lot of new
things, all right. Let's just get started
with step number one. And that is create a
custom login experience. I've been getting this
question a lot lately and that is how do you customize the
login experience? So, for example,
when you login that you see a logo on the left over here and also when you log out or when somebody logs in that you can see your logo or your
client's logo in here. So, let's just go
and let me show you how that is done. The plugin that we're
going to use for this is called White Label CMS. So, what you need to do go to plugins. I'm going to switch to
my client's website to actually show you
a real example. All right, it's this one. Okay, so now, the
plugin 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 logo in two places. First of all, you
can skip this part and then you can go to login. And here you can set
up your login logo. So, that's the logo that you see when
you log out. So, I'm going to 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 to
add 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, where I've set up a
background and a logo. And of course, if you
have a background then the background
needs to be a little bit darker. So, you need to adjust that in Xd or in Photoshop and then also upload
a white logo. So, now we're going to upload the logo that we
see right here for this website, which is just going to
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
the black overlay like I have over here is applied already
to 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 save and see what happens. So, click save then log out. And here, you can
see the logo. So, now every
time you log in, you will see the logo. So, now over here, you will need a white
version of the logo. And that is something
that you can set up under branding over here. So, if you scroll
down the admin bar, that's this bar and then if you scroll
down the side menu that is this menu. So, if you upload a
logo right here. So, here we need
a white version and we click on insert and we click on save. You will see what happens, that is absolutely massive. So, what you can do, what I did on my own website is create a logo but then add 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
that in Photoshop. So, just add a little bit of white space over
here in your PNG and then it will
look like this and otherwise, it
would look like this. It's not super ugly, but with some
logo you want to make it a little bit smaller to make it look
clean, all right. Step number two. Install Google Analytics. So, if you go to my
dashboard over here, you can see the page views that this website has. So, you can see that my website's actually
doing pretty well, my own portfolio
that I have received 138 visitors yesterday. So, you can see a
little graph over here. So, this is super nice and I will show you
how to set this up so you will need Google
Analytics for this. I've already installed
it on this website. So, I'm going to do that
right now on a new website, what you want to do is go to analytics.Google.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
admin panel 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
as Rinodeboer.com. So, I'm going to
copy that URL, I'm going to go back
to Google Analytics. First, you're going
to 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. Then you can click
on next web that's perfect,
click on next. My website name, that can be the same to URL, just paste it over here, but make sure you
don't add the https. Delete that and select
it 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, an industry or
market is perfect. The time zone, I will put
that on your own country. So, for me that's
the Netherlands. Click on create, here select your
own country again and 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 account to your WordPress website so that WordPress
can send 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
that right now. I'm going to go
back to my website and the plugin that
I'm going to install is called ExactMetrics. So, just search for
Google Analytics. And then if you scroll down, you can see
ExactMetrics over here. It has a low rating but this was the best Google Analytics plugin before they 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 data of
Google Analytics, I just go to
analytics.Google.com 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 plugin. 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 preview also for my clients how much visitors this month? So, that is what I'm going to install right now, okay. And now, you can click
on launch the wizard because we need to connect this to our website. And here, you need to connect it to
Google Analytics. So, this needs to
be the same email as you use on
analytics.Google.com. For me, that's my
personal email. So, I'm going to
click on this and then allow ExactMetrics to see my data. And then here we
need to select the website that
we want to connect because I have a
lot of websites connected to that
one Gmail account. So, inside of my
Google Analytics I can go to the analytics
of different websites. So, here we need to select the right website. Okay, 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 an account for your client in most cases that has the editor role. So, you need to
make sure that you see the editor over here. Just click on save
and continue, we don't need this so just right click,
skip this step and then we are done. It will ask you
a hundred 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
dashboard right now and you scroll down, you can see that the
tab 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
analytics.Google.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 then going into the
settings over here and then go to account
user management. And then you can add
them on their Gmail to also give them access to the whole Google
Analytics account of that website, right. Because one web site can
have different users inside of Google
Analytics, okay. So, this is actually all you
need to know for this step, a little bit complicated. I think this is the
most complicated step, but this is really
nice because right now your clients and you
can see the data inside of the
WordPress dashboard. The next step is
the Site Icon. Back in the day, this was called the Favicon so if you want to research
information on that it's called the Fav so F-A-V. But right now, it's
called Site Icon and that is that little
icon that you can see in all of the tabs over here. So, let's just set this up for this website right now. You can do that by go to appearance and then
click on customize. And then, you need
to search for a tab called site identity. If you have a
different theme, then sometimes it's hidden in some of the
tabs over here. Sometimes it's
inside of the header or inside of the style. So, you need to
click on a few tabs to find the site identity then scroll down and you can see the
Site Icon over here. So, you can now scroll down and then select
the Site Icon. For the Site Icon, make sure that it's not white because it's going
to 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 drag
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 the top and on the bottom. So, this looks perfect. So, if you click
on skip cropping, click on publish, click on the X, and there it changed, right. You saw it, it's changed from the WordPress icon
to now my Site Icon. So, this is for
the whole website and now we're done
with this step. Okay, so the next step is to add users for your client because most clients want to be able to
log in themselves and make simple changes to the text and
to the images. But you don't want them to change everything
about the website. So, WordPress has a
great system for this and that is called
user roles. Elementor also uses
those user roles, which I'm going to explain
in the next step. But in this step, I'm
going to show you how you can properly create a user for your client because you should
never share your own login details
just for safety reasons. So, if you go to
users over here, this is my actual
client website. You can click on
add 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 it doesn't have to be a
very difficult name. And you need to put
in their email because they will get
an email from WordPress when you add them as a user, but also if they want to
change their password. So, you only need to fill in the user name and the email. Then you can scroll down you can skip all of this. Make sure that
this is checked and then put them
on the editor role. And that is one role below the admin role,
which is the highest. But I have to say that sometimes your client wants full access to
the whole website and then you can add
them as an admin. But I would say
for most clients just give them
the editor role because you don't
want your clients to touch things that they
shouldn't touch, right. Maybe they are very
curious and then they're going to change a
few settings over here because they think that things could be better. So, I always recommend that you start out with
the editor role and only make them an admin if they really ask for it because at the end of the day it's their website, right. So, just click on
add 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. The next step is to set up Elementor user roles. And this is very important because Elementor
doesn't know that we have just
created a new user inside of WordPress. Elementor cannot read
everything in WordPress, right. So, you need to
tell Elementor that you want to
give the editor role limited access to all of the Elementor
features. So, if you go to Elementor, if you have Elementor Pro, you can go to the
role manager. And if you don't
have Elementor Pro then this option
is not available. That's why I always
recommend that people use Elementor Pro. If you're still using
Elementor for free for your client websites you can watch my video
about Elementor Pro and I think that you
will be convinced that Elementor Pro is
the right fit for your web design business. But this is the feature
that I talked about you can click the editor open and then I will
check this box, which is access to
edit content only. And with this feature, you tell Elementor that all the editors can now only access the limited version
of Elementor Pro. If you check this box then they will not be able to ever see the
Elementor editor. Sometimes you wont
tell that to clients, but in my experience, this is the best option
for most clients. If you click save changes and you log into a website with the editor role, you will see that there is limited access over here. That the editor
already doesn't have all the features
that the admin has. But also, if you
go to the pages and this is the most
important part. And you click on
edit with Elementor as an editor, right. So, I've now created an
editor account for myself that's why I can see this. So, I have two 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 drag this
button, it's impossible. But I can edit a
few simple things. So, there's only one tab
over here for your client. So, in this way, they can't 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, is
change the icon, is change the text. But they cannot change
margin, paddings, add in new elements. So, that is a feature
that recommend you use when you're working
with clients. So, that's it for
this step okay. And then the next step is a very interesting one. I actually found
this one myself and it's called WP
Admin UI Customize. If you go to the plugins and you click on add new and you search
for this plugin, WP Admin UI Customize, you can see this plugin. If you click on
it, it will say this plugin has not been tested
with your current version. I use it on all
of my websites and this is because
this developer actually started
a new plugin. But I think this
plugin 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 as you can see four and a half stars. So, what this allows you is to limit what your client can see inside of WordPress 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 clients to be able
to see the pages and maybe not
even the comments and the media, right. Or even ExactMetrics report. Maybe you want
to only give him a preview on the dashboard. And also, as you can
see on this website, this top admin bar only has one button. I've changed that with
that plugin, right. So, you can make it really clean for your client. So, let me show
you what I mean. If you go to the plugin and then click on
this first option, you need to select what role you want to edit. It's a little bit
clunky I would say. It's not a perfect
plugin but it works. But the technique
is very good so if you check this box
and then click on save then you can go to the
sidebar over here. So, now we're
editing the sidebar of all the people that
have an editor account within this
WordPress website. So, here you can
see all the things that a normal, actually
admin user sees. So, plugin is not perfect, but you can see right now
that my client's website, for example, has this
templates option where they can go to
the theme builder. If you don't want your client to edit the menu for
example, and the footer, you can 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 the
Elementor templates. You can scroll down, you can click on remove and then, if you scroll
down click on save. 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. Let's just delete the
tools over here, remove. Maybe, we also want to
delete the comments. Let's scroll up, where
are the comments? Over here, click on remove. Scroll down, click on save, go to your client's
accounts to check it. Click on 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 admin bar, which I actually already did. So, in this way, it's not
very hard for your clients because for most clients, it's just too technical you want to make it
as easy as possible. So, I think this is
an excellent plugin to make the experience
for your clients better. Okay, and then
this next step is the explainer video. What I always do when the 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
this and a microphone but just my laptop. I put on my ScreenFlow
or my QuickTime. And on Windows, there's a
great tool called Loom that's actually free. I will 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 tell my
client like, hey, if you log into your account you can change
the basic things of 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 actually I'm using an external microphone
right now. But of course, I'm using
the microphone then in my laptop but not
with the camera. Just a very simple video, maybe just take your iPhone and record it like this. Make it super easy and give your client a
little bit of confidence that they can make the simple changes
to a website. How they can add
portfolio items, how they can add blog posts, and where they can see
the analytics, right. So, this is just something
that I always do and your clients
will love this because they will
not feel lost. And this is very important because if your client
has a nice experience in the last few weeks
that they work with you, they are going to tell
other people about you. So, make sure that you
don't forget them after the website is done. 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 can watch that video. So, your video will not
be live on YouTube, it's just for you
and your client to watch that video. And then the last step which is step number eight. And that is to use a
tool like Manage WP. Something like this is super useful for your client's websites. Because if you have
a lot of websites that means that
you also need to update a lot of plugins. I actually charge my
clients for this. And if you want to
know how I do that then you should check out
my Elementor Pro video because that is where
I explain that. But I will show you quickly
what I do with this. You can sign up for
Manage WP for free. And here I just connect all the accounts
of my clients. So, for example, this
is the yoga website that you just saw on YouTube. And as you can see right now there are four plugins that needs to be updated. So, if I click on update all and I click on update
then these four plugins will start updating. It's just actually two
clicks for one website so that is pretty nice. And again, I charge
my clients for this. So, how you do that is you make an account
on Manage WP. And that's just
very easy to do, just your email
and a password. And then what you need to do on your client's website is download a plugin
called Manage WP. And I have installed
this already because I actually use
this on this website. And then if you go to
your installed plugins, you scroll down,
you can see that there is a button over here that's called
connection management. When you click it, there's
a connection key. If you copy that
connection key you can go to your Manage WP and you can add a new
website over here. So, if you add a new website you can type in the link. So, for example, and then you can click on use a connection key instead. And if you paste
that key over here, then this website
will be connected to your Manage WP. And here you can have
a simple overview of all of your clients websites. And what's great
about this tool even if you wanted you can update all of
your client plugins from this button over here with just one click. How amazing is that? You can install backups. As you can see,
I've installed 20 websites via the
Manage WP backups. So, that's also a safe way. If you guys want me to make a separate video about this because this is a
very big system. So, please let me
know if you want me to make a separate
video about this. So, this is actually all I do to make the experience
for my client as nice as possible. So, if you have any
questions then you can leave
them down below. So, I hope that you found
this video valuable. If you did, then
please leave a like because that is very good for the YouTube algorithm. And if you want to
learn more about how to start your own
web design business then you should check
out my channel because I have a lot
of videos about this. And then, again, I hope to see you
in the next video.
