FREELessons:12Length:1.1 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.4 Customizing the Rest of the Homepage

Our portfolio homepage is not complete just yet—we still have four more sections to deal with. Let’s begin with the one just under the main slider.

3.4 Customizing the Rest of the Homepage

Our portfolio home page is not ready just yet. We still have four sections to deal with. So let's start customizing the section that's right below our main slider. And this is what I'm talking about right here. So we're gonna go back to the main page. In the back end, of course. And here we can see the four columns of content represented by these columns in the front end. So the first thing I'm gonna do is get rid of this fourth column, because I don't want that. Instead, we're gonna focus on three columns. So I'm gonna delete that image block right there. And then I'm gonna hover this custom text here. I'm gonna select the number of columns that I want. And in my case, I want three columns of equal size. So I'm gonna hit that. Let's hit Update. Now if we refresh. And we're gonna see the updated layout. Awesome. Now going back. I'm gonna edit this text block and instead of bonjour, I'm gonna simply say, Hello. And I'm gonna edit this text block, and instead of this text, and I'm gonna use this text. Now I wanna link my portfolio to the portfolio page, so I'm simply gonna hit this. And I do a search my work and it finds the page automatically. I'm gonna apply that. And then get in touch, I'm gonna create a link to the contact page, which is this. All right, perfect. Save changes there as well. And then for this third section I'm gonna edit. And I'm gonna paste a quote by Steve Jobs that I really, really like. So I'm gonna hit Blockquote. And the quote says, Design is not just what it looks like and feels like. Design is how it works. Really nice quote there from Steve Jobs. And, let's see. I'm gonna edit this manually because I want to add a site. Yeah, let's save changes, let's update the page. I think I want a little bit more space here. For some reason it doesn't give me the space that I need. I try it in visual mode, save changes, update, and there we go. All right, and that's how this about section, or the hello section, should look like. Now let's move on to the case study, and this will be used for the portfolio mostly. As you can see from the demo here, the case study basically displays a list of portfolio entries and also filtering. So I'm gonna go back here to Latest Works. I'm gonna hit this edit button. I can choose the style. I can choose to show the heading if that's what I want. So I'm gonna simply say, Portfolio. And here I can edit the categories that I wanna bring portfolio posts from. So from now I'm gonna save the changes. I'm gonna hit update. And we're gonna go ahead and create some portfolio entries. All right, currently it grabs all of the categories that I have in the portfolio, but maybe I don't want that. So let's see, let's open the portfolio here. And these are all of the projects for the portfolio, but I think I'm gonna add some of my own. So Add New. We're gonna enter the title. And for the title, I'm actually gonna start with these, like for example Winter landscape. Yeah, this should be categorized as photography. And I can choose to add or to create a gallery for it, if that's what I want. But because this is about photography, I think I'm just gonna set it to a Lightbox, so the image will open in a Lightbox. And the only image that I'm gonna add is this. And also, I'm gonna set it as a featured image. That's very important. If you don't set it as a featured image, it will not show up in the portfolio. So I'm gonna publish that. And then we're gonna go back to our page and right here, for Latest Works, I'm gonna choose the categories that I want, photography to start with. And then we go back here and we scroll down to the portfolio, we're gonna see all of the posts from the photography category. If I decide to add another category, let's add a new portfolio item, for example, for mobile design. All right, let's say Demo mobile app. And we're gonna choose Add New Category. I'm gonna call it Mobile Design. And let's create a slide show for this. So I'm gonna select this. As one slide, I can give it a title if that's what I want. And then I'm gonna add another slide, maybe this. And yet another slide, maybe this. Let's actually give these a title. Let's say Slide 1. Again, this is just for demo purposes, Slide 2, and Slide 3. All right, so this will link to a single portfolio page. And also, I'm gonna set a featured image. Let's say this, for example. All right, let's publish that and then we're gonna go back. To our main page here. And we're gonna do a quick refresh. And in the Latest Works, I'm simply going to add another category here, Mobile Design, and I'm gonna save changes. So hit Update, and now if I do a refresh, you'll see that the portfolio displays the items from mobile design and photography. And I can filter these. Like this. And of course, if I click on this image, which I set to open in a Lightbox, it's just gonna open in a Lightbox. If I click this image it's gonna open in a single portfolio page. And right here, you can actually see the slider for that portfolio item. And right here, it's the title that we set previously. So this section is pretty much done. Let's move on to the blog stories. For the blog stories, we have a couple of blog posts that were added as part of the demo content. So let's go back to my main page, scroll down. Where it says Blog News. Or actually, instead of stories here, I'm gonna say, From the blog. Save changes. For the blog news, I'm gonna select the categories that I want to display posts from. In my case, let's say for example, from design. We have a couple more options here like how to order these, or how many posts per page do we want. But I'm gonna stick with the defaults. And for the Twitter stream, I'm gonna to enter my own username here. Hit Update. So now we go from this section to this section, which has a different title. It displays blog entries from my chosen category, and also displays my own personal Twitter stream. Finally, lets turn our attention to the footer. Now the footer can be controlled from two different places. It can be controlled on each individual page, and you can select different template. You can choose whether or not to display the footer. You can choose a different logo for it. You can choose whether or not to show the social icons and also to modify the copyright text. So this is locally, this will only work for the home page. If you want to effect the footer globally, then you need to go to Appearance, Theme Options, and then go to Footer and edit pretty much the same options. But the difference is, this will be applied to all pages. So the changes that I wanted to make are very small here. Simply wanna say, copyright 2017, my own name or your own name, or whatever it is, and I'm gonna save the changes. And then, I want to display the social icons but I don't want as many social icons as we're seeing here. Currently there are five social icons but I only want three. I want Twitter, Facebook, and may be Dribble or LinkedIn. So to edit those, you would go to Social Sites. And here, you can see the five social sites that are defined for this particular demo. So what you can do is trash the ones that you don't need. For example, RSS, I don't want RSS so I'm gonna trash that. And I don't want Pinterest, so I'm gonna delete that as well. So what you do in order to get the correct link, you just edit these entries. And instead of the hash sign, you just put, for example, this is for Twitter, so And then you can select whatever icon you want for that particular social site. All right, so I'm gonna hit Update. And then I'll do a quick refresh. And apparently I didn't choose an icon. I said I would choose an icon, but I didn't. So let's choose Twitter here. Update. And now we go back. And now we have just three social sites. And the Twitter link, or the Twitter icon, links to the correct page that we set in the back end. And as we can see, the copyright text was also changed. And with that, we've actually finished customizing the home page, of course, for this particular demo. In your own project, you will probably do way more than this. But again, I wanted to focus on the technical side of this and show you exactly where and how you can customize the various aspects of the Adios theme. So as I was saying, home page is now done, let's move on to the portfolio page, that's coming up.

Back to the top