In this lesson you'll customize the Wordpress page used as the front page of the brochure site.
You'll also explore the differences between posts and pages in wordpress and add a site logo and icon
using the customize or by the end of this video.
You will have already set the brochure site apart and branded it for your client and you'll have an
understanding of how the customize or works within the Wordpress dashboard.
Plus you'll understand when to use posts and when pages are more appropriate.
Let's get started.
Let's start with editing this front page that we have inside of Word Press called sample page.
For now I think I'd just like to get rid of this title.
Add a nice big image and maybe keep some of this descriptive text in here so I'll go back to that page.
Inside the Wordpress dashboard which I have opened here and the first thing I'll do is if you look at
the permalink you can see that since I have it set as the front page of the site it's really the sites
you are l.
That's the permalink here but I'm going to go ahead and just get rid of that page title and click update.
And that once that saves I can go back to my other tab and hit refresh and you'll see that that title
of the page itself is gone.
Now I can trim this text a little bit down to what I want.
Let's see I'm just going to select a bunch of this text and hit backspace delete.
Get rid of that and get rid of this text as well.
Now as you can see this text is styled in a certain way.
If I select it you can see that this quotation called blockquote is selected.
If I get rid of it it's just the regular text but I kind of like that the way that styled as what's
called a block quote and above.
Here is where I'm going to put an image.
Let's just hit update and we'll take a look at that.
Once the page refreshes up here we go.
I'll hit refresh great Now if this is a descriptive piece of text about my Web site now I can put a
large image here.
Now I've prepared a huge image for you to use if you like or you can use your own.
This is at W.P. of course dot com slash huge image dot j peg.
It's a seven megabyte image.
Here it is in full size and so you could see it's a very large image.
And as I introduce to you in chapter one I'd like you to go ahead and open an image editing piece of
software that you should have for the course and trim this image down to a reasonable size.
Let's say 6500 pixels wide and preferably under 200 kilobytes in size.
So pause the video right now and see how you get the so if you click the image you can click save image
as and then go ahead and save that image.
I've already got a copy of it so what I'll do is open up Photoshop and click File Open and here's where
I've got the image and now I'll open that image in Photoshop and first thing I want to do is click image
image size and size that to 6800 pixels wide.
There it is at 100 percent so that we can see how large it really is.
It could be a full screen image if we want plenty big now.
Click file save for web and devices and that set on jpeg.
Hi I drag around I can see what it looks like.
Let's see what it looks like with the mediums setting.
It does look just as good on medium and it's only 119 K so I'll hit save and I've got a folder on my
desktop called brochure site and that's where I've been saving some of the images here.
Call it large image and save
now.
If I go back into WordPress one thing I'll do is just put my cursor there inside of the page where I
want that image click Add media upload files and then I'll select it on my desktop large image.
Open
you can see that's opening.
It'll give me some details over here how big it is.
The full size image is 6300 pixels wide and 123 kilobytes.
I might leave this as a left aligned image.
I don't need to link it to anything and if I look at the sizes these are the sizes I have set in the
media settings and I think I'll leave it at a large setting and then insert it into the page
I can see that since it's left aligned it's placed it inside of the block what line that's right here
if I want to sit that image above that block quote I might change it to no alignment.
There we go.
Now it sits above there nicely.
Update the page and let's take a look at it on the site.
Nice.
That's a nice big image.
Looks great.
Next let's make some edits to the site title and the tag line and add a small logo up here on the left
side.
I go back to my dashboard go ahead and under appearance click customize.
This will open up a live editor will where we'll be able to see the live site here on the right and
a customizing window over here on the left hand side under say identity.
You can see that there's a few options here.
The site title which of course is also available under settings general.
But what if I called this fire weed photography.
That's a fire weed plant there.
Potentially this could be a photographer's site
great.
You could see it updating in real time as we update the site title and the tagline here.
Of course we could uncheck the site title and tag line and have that not visible in the case that we
wanted to put a logo that had some copy or the name of the site inside of the logo.
For now let's leave that visible there and we can click save and publish
and there it goes.
It says saved.
So if we look over here at the site on a different tab for fresh air it is fire weed photography up
here in the tab as well as right here.
And then the home link is clickable to that to the home page site title
lets out a logo.
Now it says a suggested image dimensions of 240 by 240 and you might think of going into Photoshop and
or your image editor and preparing an image of that size.
I've already prepared an image that's 240 by 240.
I call it logo image so I'll go ahead and upload that.
Now since it's sized perfectly when it hit select it will give me an opportunity to crop it if I want
to.
To any size I like but I can skip cropping and we'll see what 240 by 240 looks like.
It's nice and square.
Great.
However you know what I might prefer if it's maybe I don't know about half that size so it doesn't push
the site down so far.
Well I suppose I wanted to change the logo.
I could actually select that same image and crop it differently.
So I wanted to bring it up like this and then hit Krop image.
I could size it appropriately.
Nice.
Now I would save and publish and I've got a nice logo that's also clickable to the home page.
Let's add an icon.
Or what we might call a favor on like this w from the wordpress site over here that appears in the browser
using the customize or if you look down here the site icon wants it to be 512 pixels wide and tall a
square icon.
Well I'll just open up Photoshop maybe do file new years where I am getting into a little bit of graphic
design 5:12 by 5:12.
Let's see maybe I'll just choose a background color of a nice dark green
and let's see let's do have a big F for fire weed.
See if I make that let's just make the color of the font nice black
try to find maybe a sort of an elegant capital F
You know it's going to show up better.
I think if I make it white instead of black
and here we go
sure
it's going to have to be pretty large to fill it up area.
How about even larger than that.
Six hundred point at a little too arch you know that fits nicely for a site icon you've got to keep
it pretty simple looking because it's going to be so small in certain browsers and it will use an icon
on mobile and things like that.
Great.
So now just save for web and devices this time since it's so graphic I'll just use a PMG only for k
I'm just going to call this one icon.
Now let's go back to WordPress and I can select the image I'll have to upload it.
Great care it shows with rounded corners and I can save and publish and you can see what it looks like
up inside of the site title inside of my tab.
Great nice for fire weed photography.
For the last part of this video let's take a look at the difference between pages and posts in wordpress.
Here in the sidebar by default you'll see that we've got a couple of widgets here on the sidebar one
of them is called recent posts.
Let's go ahead and click that hello world.
Let's take a look at this post now.
The header which contains the logo and the site title and the tag line is the same.
But what we have here is a post that contains a few extra things more than what that page contained
that we made as the front page of the Web site it looked virtually the same.
But what we've got is a site title and some content but then to the left side of this theme is an author
name and a Gravatar or an image avatar for the author a date.
And then there's an edit button if you're logged in many pages on your site will give you that edit
button so that you can come back to the dashboard very quickly.
But then as you scroll down you can also see that it says one thought on hello world this is a comment.
There was a default comment that also has a date and an author Avatar has the comment there and even
a reply button and a reply comment field down here in the bottom and the ability to post comments.
These are a few of the differences between pages and posts.
Now WordPress originally being a blogging software and now that it's developed into a CIMS we don't
always use the blogging functionality but when you look at posts inside of Wordpress you'll see it we
have if we look at that.
Hello world post some of the differences we have are the ability to have that day.
And that's called meta data.
Over here on the side or under the header of the post title and then there are post formats that a site's
theme are able to use and define posts in certain different ways.
Also a big difference.
Posts can be categorized and posts can be tagged.
And these are all navigation and find ability conventions so that users can browse different posts and
find what they're looking for.
Otherwise the editing area is virtually the same in a general sense.
Posts are designed to be news or blog areas on a web site somewhere that you post where people can comment
and that you put newer content and ever changing or periodical content on a Web site.
Pages on the other hand are designed to be static and maybe containing some information that doesn't
change often times we'll have a series of navigation buttons across the top that can point to different
pages on a Web site like an about page a contact us page and other pages like that and then we might
have a link to some post categories or on the sidebar we might offer some archive's to different posts
so that in May 2016 you can see that there was one post the default post posted on this day.
That way users can go through the website and find content they're looking for.
Or look at the blog section of the Web site and see the latest content in this video.
You've optimized an image and revised the home page of the website you've uploaded it to the media library
as well as uploaded and configured a logo image edited the site title in the tag line all using the
custom Mizer and the site identity section.
And you learned a little bit about the differences between pages and posts in wordpress in the next
video we're going to configure the navigation menu across the top and we're going to set up some interior
pages that users might like to navigate to like and about page and a contact us page and we'll also
configure the sidebar to be a little bit more appropriate for this brochure site.