Here’s another WordPress Wednesday video helping you customize the Twenty Seventeen WordPress Theme. Learn how to apply the large images that appear on the homepage. Customize the whole theme to meet your needs.
Full Video Transcript
Hey y’all, welcome to another WordPress Wednesday. My name is Kori Ashton in San Antonio, Texas. If you’re familiar at all with our YouTube Channel, you know that every Wednesday, I’m producing some sort of video just like this, to help you improve your online marketing with WordPress. Whether it’s social media marketing, search engine optimization or your actual website. The theme, your content. How do you improve it? How do you get conversion?
Today we’re going to be looking at the “Twenty Seventeen” theme. So, last week we did a video on how to update to 4.7, which is super important that you always update your core. If you don’t know what I’m talking about, you’re going to want to watch this video here and I’ll put the link to it in the description box below. I also introduced you to the brand new theme “Twenty Seventeen”. This is a theme created by the owners of Word Press, AUTOMATTIC. We know right away that it’s going to be secure. We know it’s going to function correctly and we also know that it’s in our budget; because, it’s free.
This is the example that I showed you last week. They’re using the Twenty Seventeen theme as a coffee house website, which is kind of a cool version and way to use it. Of course, you can use it any way you would like. We just have to get creative. You’ll see your main navigation comes across here and then there’s this really large imagery that covers edge to edge, in kind of a fixed way. It’s really cool and there’s this two-column break where the page title goes over here and then your page content goes down this right side. It’s kinda really neat.
How do we make it look like this, though? How do we add these awesome images? Alright, I’ll tell you and we’re going to actually walk through it. Here’s the first thing you need. You need to go install “Twenty Seventeen”. So, let’s go do that. Super, simple process. You’re going to go into your themes by going into “Appearance Themes” and you’re going to click “Add New”. You’re going to be looking for the “Twenty Seventeen” theme and it’s typically going to be right here in this spot, if not, you can go ahead and do a quick search for “Twenty Seventeen” and click “Install”. If I’m going too quickly, just pause and rewind me. Simple to do. That’s why we do video. You can pause me. Now that it’s installed you can click”Activate”. (Let me go back here for a second) You can click “Activate” and there you go. Now, there’s an option to customize. Customize here or your can customize there, either one takes you to the same screen.
Now, I’m going to take you back to the front side of our website now that we have this activated and click “Refresh”. You can see what it looks like in the opening scene, now. By default they give you this cactus picture here. Really beautiful to kind of spread out and be in this space. Your title appears here and your tagline there. Then, there’s your main navigation.
Scrolling down, right now, my content that I have applied already is just my homepage. That’s all I have, right now, and then there’s my footer. How do I get it to look like this and add in all of this other content, right here? The first thing you’re going to need to do, right away, is know what content you want featured on the homepage. So, this particular theme they use all four areas. You have up to four areas that you can use as breakout sections on this homepage. They’re using all four.
They’ve created those pages, so that’s what you’re going to want to do. They’ve created a page called “Our Drinks”. They titled it “Our Drinks” and put all of this content inside the page, itself. Then, what they did, was they set this image as the “Featured Image” of that page. So, I’ll show you exactly what that looks like. Coming over here, we’re going to go into “Pages” and I’m thinking we’ll use “About Us”.
We’ll use “Our Team” and maybe “Portfolio”, and of course, the homepage is going to be on there. So, let’s use a couple of these on our homepage. You’re just gonna click “Edit”. Once you’ve created a page you just want to be sure that there is a set featured image inside of there. Of course, you want the images to be nice and large. I’m using 1280 X 400. That’s the dimensions I’ve got here.
“Set Featured Image”.
Click “Update”.
I’m going to do that to four different pages that I think I want to use here on our homepage. “Our Team” and all this is just default content for now. Just something to have in this space for now. Just filler content. So, that’s “About Us” and “Our Team”. Let’s do one for “Portfolio” here. I might just use only three instead of all four. For now, let’s do that. I’m going to click “Update”. Now that we’ve got the content created, let’s go into our “Customize” area and assign it to appear on the homepage. That’s all it takes.
We’re going to go back to “Customize”.
“Appearance Customize”.
Now what we’re looking for…as you scroll down this area, I can give you a quick run-down of what all this is. The “Site Identity” area is where you can upload your logo. It would sit here with your site title and your tagline. If you didn’t want these to appear, you could uncheck that box and they’ll go away. If you only wanted one thing, you can just remove it and that’ll display just like that. It also gives you an area for your site icon to upload. That is that little tiny picture that appears by
your site title up by the tab.
It’s kinda cool, so you can add a quick picture in there. It’s typically a smaller picture of your logo. That’s how you play with that area. Colors you can set to a light theme of colors. You can set to dark and it goes this route, which is kinda cool, as well. You can also give a custom color when it comes
to assigning something like this. If you needed a custom color of your buttons or site titles. Your “H1”.
There’s a nice red color there. You can also change the header text color. These two. If you wanted those to be a different color. You can set those to red if you’d like. Of course, you’re going to click “Save”
and “Publish” once you make the changed you want made.
Going back into “Customize”, though. “Appearance Customize”. I want to show you a little bit further down. This is how you change this opening scene. You also have the ability to set video in here. It gives you an option to upload an MP4. Remember though, if you’re uploading your own video that it needs to be optimized to load very quickly. You probably want less than 8 seconds of a video. Of course, now audio.
You just want it looping. Something cool, something different. You can also use a YouTube video inside
of here. That’s kind of a fun thing. That’s easy to do. You just drop in the URL or the link to view the video.
Click “Save”.
This, of course, is this default image that’s sitting here. Let’s click “Hide” and say “Add New”. We can go in here and add a new image and there is our beautiful balloon picture sitting there now. So, that actually addresses this opening header or hero scene. I’m going to click “Save and Publish”, so we can come back to the front side of our website and click “Refresh”. That’s the way that looks now. Let’s go in and customize. This area is what you’re looking to do. The “Theme Options”. We want to go in here and it gives you four different areas that you can assign, if you will. Four different areas that you can assign to your homepage.
This is what it’s asking when you say “Do you want a two page layout or one column?”. Right now, remember I mentioned that it allows you to put the page title on this left side over here and then they’re going to put the content running down the middle of the page. If you didn’t want that, if you wanted it to stack like a page normally would, you can select that different option. Totally up to you.Going in here, we can change out the different sections that we want to have.
I’m going to put “Our Team” and then I’m going to put “Our Portfolio” and I’m going to put leave the fourth one blank just for now; because, I didn’t have a whole lot of content created. I’m going to “Save” and “Publish” and we’re going to come back to the front side of the website and see what it looks like now. Scrolling down, I’ve got my home content. Then there’s the really cool featured image for my “About Us” section. Very nice.
Scrolling down again, here’s this gorgeous pastry shot for “Our Team” section. Then, there’s the really cool fire shot for “Our Portfolio” and then the footer dynamically appears there, as well. So, that is how y’all get to take the “Twenty Seventeen” theme and apply your own unique, dynamic content into that homepage and set that content easily.
I hope you’re having a great one. If you have questions about the “Twenty Seventeen” theme be sure to put them in the comment thread below and I’ll get back to you as soon as possible. I will see y’all next WordPress Wednesday. Bye everybody.
How to Update to 4.7 WordPress & The Twenty Seventeen Theme Review
