In this lesson we're going to transform this home page Tillich's something like this.
Yes it's simple and we're going to build on from here to make it even better later on.
But what we need to do is learn how to change the title of the Web site up here from what it was at
when we actually created our Web site.
And you might have already created it with the right title but we're going to learn how to change that.
And then we're going to learn how to customize our home page to look something like this with some titles
and image and things like removing the page header which is right here or the page title.
Then also removing this page sidebar right here which we probably don't want in our home page unless
we're creating a Web site where the home page is a blog theme or a blog designed home page with a list
of articles and the sidebar.
But for most web sites you want a clean with no sidebar home page.
The first thing we'll do is change the site title right here.
So there's a couple of different ways to do that within this theme in general what you'll do is actually
go under settings to general settings.
Here you see the site title and the tagline.
Let me also show you where you can edit it under appearance if we go to customize.
This brings up a lot of different theme options.
So under this customized men you can see that there's this site identity option.
And here we have the same things the site title and the tagline.
So here I can change to eggbeater designs and then we also want to change the tag line because this
is something that the search engine such as Google will look at and display when your site appears in
the search.
So we don't want it to just say just another WordPress site will want to use our tagline.
Now this is something that you want to think of.
You want to make it keyword friendly.
You want to make sure that it's catchy and it shows some sort of benefit so that when someone is actually
searching for your web site they see your title and they perhaps see your tagline and it really makes
them want to click on your Web site.
So let me just say something really quick something like clean simple
and DIY woodworking projects for beginners.
So that's what my website is going to be about.
So now if I save and publish and then refresh what happens is the site title changes.
And so now if I go to this home page which is our home page and refresh we now have the Ebner designs
title at the top.
Now one thing I didn't mention is that this is our home page.
This home page that I created right now is just a demo page that I created.
It's an extra page.
So now let's go ahead and see where that page is.
So to edit the home page what you'll have to do is go to pages and all pages.
And here you can see that we have the home page the front page which we had created and set as the front
page.
And then this is just a separate page that I added that you don't have to do.
I would just add it the home page if you want.
So go ahead and click at home page.
So now we have our home page editor and like you mentioned earlier we have this text editor box and
this is where we add text we add content to our page.
So for example we can type in some words so maybe simple
clean DIY I believe that's what I had said before.
Simple modern DIY So that could be our top text.
Now if I want to see what this looks like on the actual page I can click this preview changes button.
This is.
This opens up a preview window of our changes right here.
So now you can see this text simple.
Modern DIY.
I'm going to go out and close down this preview window.
So now we can just kind of compare these two pages.
The demo that I created and the one we're working on right now.
So the first thing I want to do is actually get rid of this sidebar.
That's what this is called.
It has different things like.
Here we have recent posts recent comments archive's categories.
These are called widgets and we're going to learn how to edit the widgets later on this sidebar is something
that you can add to many different pages and it stays the same for all of the pages and you can edit
this sidebar in the content of the sidebar and what's in it and it will change for all the pages making
it really easy to change what your sidebar looks like across your entire site.
So to get rid of that sidebar there is typically on most themes an option for layout.
Now this might appear down here below the text editor or the content editor and that's what it appears
for this theme.
You have a default template.
A right sidebar left sidebar a no sidebar and a full width template.
So if I change to the left sidebar let me just do that and then say preview changes a little sidebar
goes to the left if I choose.
No sidebar what happens is there's no side bar but the width of this content box is kind of skinny compared
to this one where the width of this content boxes the entire width of the site.
Well at least the menus of the site.
So we want to change this to actually full with care.
So that makes this the full width of the site.
OK so now let's go ahead and add our next text and I can just type it out or since I already have it
I can copy and paste it.
So let me put this text underneath this top text.
Now if I hit preview changes and look at this the text at the top simple modern D.I.Y. is the same size
as the bottom text.
So to make this top text larger in wordpress when you first install WordPress you have a few different
options for sizes.
And this is under this paragraph heading option dropdown menu.
So if I choose one of these different heading options it becomes a different size and with or bulled
this.
So if I preview the changes now we have simple modern D.I.Y..
And then in the bold text but it's a different color.
So we're going to learn how to change that color in just a minute but let's center this text so let's
select all of this text and use this align center option.
So on this top menu we have Boulding R-TX italic sizing.
We can create bulleted lists numbered lists.
We can do a block quote which basically indents whatever we select and highlight and choose.
BLOCK quote We can left center or right justifier align rather and then we can edit and remove links
or hyperlinks if we want to link out to a separate page or a separate web site.
There's a read more tag which we'll get into.
And then there's a more options with this toggle toolbar option which allows more things like strikethrough
horizontal lines changing the text color clearing any formatting increasing the indentation.
Undoing all of those kinds of things that you want in your typical text editor.
One other thing you'll notice is that we have two tabs visual and text.
If you do no aged female you can actually edit your website using HVM.
And we might have to do this for a few things in the future and you can see that there's these aged
female tags basically saying that the text within here is simple modern D.I.Y. is a heading 1 style.
That's what that H-1 represent right there.
But for those of us who are beginners we don't need to do that.
We can just use the visual editor.
OK so now we have our text if we preview the changes.
Now it's centered lets out a photo.
So to add a photo I'm just going to return can you space and then click this add media button.
You can see that I already added this photo right here if I want to add a new photo.
I can click this upload files select files and then go to my folder where I have my images and you could
upload images from wherever.
But I have an images folder that I put together for this Web site.
So this is the photo that I uploaded before I already uploaded it but I just want to show you that I
can upload another image say this one this is a bath ladder and now it's uploaded to the Web site over
here on the right hand side.
We have the Ural of this photo so if you want to go directly to this photo file on the Internet you
can go to this link.
We have a title for this actual photo.
You can add captions and alternative text and a description if you want as well.
The alternative text is what appears to the viewer if they for some reason there's an issue with loading
your image.
So if you want you can take this bathroom title and it's a good idea for Search Engine Optimization.
And just for usability to have alternative text for your images and then you have your alignment.
So if you want to center right justify left justify or if you want to link it to a custom your rules
say you have a picture and you want to link it to a blog or article or another page you can do that.
Then you have size and we can choose for specific options thumbnail medium large or full size.
I'm just going to like large and we can edit this later on too.
So let me just say insert into page to see what this looks like.
So now we have this image in our page and if we preview changes we'll see that this image is on our
page.
It's a little too big though so let me go ahead and decrease the size.
There's different ways to decrease the size.
If I click on this image you see that we get these little tools on the corners of this image where I
can grab and literally just shrink the size.
If we have a specific size that we don't want you can see the numbers appear.
So we want this to be 350 pixels wide.
We can just see that and at it that way or we can go into the edit menu.
So click photo then click add it and now you see the display settings where there's a custom size option.
So if I change the with say I want it to be 300 it's automatically going to change the height so that
it has the same aspect ratio and it doesn't get squished.
Here you can also link it to a custom your L if you want say I wanted just to point back to our home
page.
We can do that.
That doesn't really make much sense.
It might not be good to link this to anything unless you do want it to link out to any other page so
a click Update now it's decreased in size.
Now if I click preview changes we have this small image right here.
Say I want to actually edit it and add a caption.
So if I add a caption let's just say bathroom ladder.
I want to show you what this looks like.
So if I add a caption say update for some reason it went to the no alignment so let's just select the
photo and center it.
Now has this caption bathroom ladder.
And if I preview the changes let's see what it looks like on this page.
So now on this page it creates this sort of outline box around the photo with the caption I don't really
like that and I don't really use captions on my photos much but you might like that option.
So I'm just going to go back at it delete the caption click Update So now we have our Web site.
It's getting closer to what we want it to look like.
Here we have this image here.
We have the text.
It's a little bit more spaced out.
It's a different color and the other difference is we don't have this home title page text right here.
So first let's just space out this text here.
Basically what I did was a simple space between these simple modern DIY.
So I put nine spaces in between each one.
One two three four five six seven eight nine.
And then there was one extra.
So now if we preview this it will look better up.
We've got to add one more.
Now let's change this photo so I'm just going to click this photo remove it go back add media and now
we already have our two files uploaded so I can select files that I've previously uploaded.
Select it.
Just going to use the large and insert into page.
Now we're getting closer.
OK so we see our two pages.
So how do we get from here to here.
First let's change the color of this text.
Now the color of your heading tags might change how you edit depending on your theme.
But in this theme we're going to go to our customized theme options.
I'm going to open this up in a new tab by control or command.
Clicking it on a Mac under the sparkling options under type biography have the heading color option.
These are the color headings for all headings h one h six.
Those are the levels.
Remember we saw H 1 heading 1 heading 6.
This is just the default color it's that red that we saw here.
That's as the default for this thing.
But say we want to change it to blue we can just click this blue or we can just pick a custom color
by moving it around maybe we want it to be sort of a brown because this is woodworking and we want it
to look kind of like wood something like that might be kind of cool.
So if we save and publish.
And then we refreshed this page both our page title heading and are heading right here that we change
this text to changes to Brown.
So now let's remove this home page title.
This gets a little bit advanced but I know you can follow along.
Removing this depends on the theme as well.
And whenever you download a theme or install a new theme you might have to search a little google search
yourself to see how you remove the page title.
Sometimes on the edit page page there is an option for removing the page title.
And if you don't see all of the page options or the options on this page where you can do is click the
screen options button right here and there are different options that aren't appearing on this editor.
So say we want to be able to edit the author and the comments and maybe some custom fields.
Let's turn those on.
And then we can see down below that we have discussions authors if we have multiple authors we can change
the author of this page.
All kinds of other stuff.
So these are more editing options for this page.
This isn't going to help us out with the page title but in some themes that page title option will appear
under your screen options.
Hope that makes sense.
So I'm just going to turn off those options right now because I like having a clean editor.
So how do we get rid of this page title.
So what I did was I search for Remove page title in sparkling Wordpress and that's all I typed in this.
First option comes from color lib.
I might be short for color library.
This is the creator of this WordPress theme and they give custom C-s apps that you want to add that
will actually change the display off.
So I took this code and what I also do and this is a little tip for you is I actually add this to a
notebook or to a word document or something so that if I ever need to change this later are at it again
later I have it.
So this is just a tip for you as might happen with other SS things as well.
So let's go back to our Web site and where we add this is under this customized page where we were before
and then under other.
And this is where we can add additional C-s us CSA us is basically code that affects the appearance
of our website.
So I copied that code from that web site and if I paste it here it gets rid of that page header so you
can see basically what this is saying is that the page header We want the display to turn off.
Now I'm a beginner at c SS.
I'm a beginner at age 2 male code but I was able to figure this out just by a simple Google search and
searching around.
So if you're using a different theme you might have to do a little bit of research yourself.
So I'm going to save and publish this.
Now if I go back to my home page that I've been editing and refresh.
Now we have our home page with our title.
Not really the title of our website but these keywords.
A little blurb about the Web site and our image and the only difference from before is the color of
the text.
But now we know how to go back and color that tax.
Awesome.
Thank you so much for watching.
I hope this makes sense if you have any questions please let me know.
Otherwise in the next lesson we're going to be adding to this Web site and what we're going to be doing
is adding a menu.
So this shows our home page.
Our blog page and perhaps even creating some more pages that will be editing later on.