2.5 Customize the Icons, Testimonials, and Screenshots
In this lesson, you’ll learn how to use different icons from the built-in set, and also how to add or remove testimonials and screenshots.
1.Introduction1 lesson, 00:40
2.Building a Landing Page6 lessons, 42:18
2.5 Customize the Icons, Testimonials, and Screenshots
Hello and welcome to the fifth lesson of this course, where we'll learn how to use different icons from the built-in icon font. And also how to add or remove testimonials and screenshots, so let's see about those icons. If we scroll down to our features, you can see that the author gives us the option to use vector icons, to present features like this. Icon, title, and of course, feature and description, so how would we change this? Well, I'm just gonna change one of them so I can show you the process, and you can do the same for the rest. So this first feature right here, Let's go back to quote and let's search for responsive, there we go. So instead of responsive, we're gonna say cross-platform, and the paragraph here is gonna say something like this. Project works on both MAC OS and Windows and is available to purchase from the respective app stores. And our feature now looks like this. Now let's change this icon to one that's more fitting for the content that we have underneath it. So to do that, we're gonna open up the documentational folder, rapid-icon-font > icons-reference. This contains a full list of the icons from the Rapid Icon Font which is included in the template. So let's just scroll down until we find an icon that could work for our specific feature. Maybe something like this or maybe something like this, with two displays. Yeah, I think something like this would work better. So you just click here, copy that code, and we'll go back and enter the new value in the data-icon attribute, so paste that in, save. And now if you go back to the page we'll get our updated icon and of course, you can go ahead and do the same for the rest. When it comes to customizing these images, well, it's that simple, they're a simple image. And you just change the image path here with your own, make sure you use a PNG. Just in case you're changing the background of this section later on, you want a PNG with that transparency to be able to work on every kind of background. And also make sure you use the class of img_responsive so that the image will resize correctly on different screen sizes. Now what about these testimonials? Well, the testimonials, or it says, clients, here are presented in a carousel, and can basically click on these items or just swipe with your mouse. I imagine on mobile, it also works to swipe with your finger. So how do you add, for example, your own tutorial? Well you just scroll down, Where it says client reviews and all you have to do is modify or if it's a single review just add your own text here and your own image. Or if you want to add a new one simply copy this, And paste it below. So let's change this text, where it says h4, this is the text that will be shown as the actual quote, let's say, I highly recommend this app, it's made my life a lot easier. Okay, let's change the image to something else, and I'm just showing you a quick tip here. There's a website called UI Faces where you can find, basically, faces of people, you can also filter them. So let's grab this one, we're simply gonna copy the image address. Normally, you would have to export this image and load it separately but I just wanna quickly show you how to do it. So I'm just gonna copy it here, and I can change the name here to the person who gave the quote. So now if we go back to clients you'll see that we have four testimonials, before, we had three of them, and the latest is the one that we just added. You can see the new face here, the updated description, and the new quote. Now if you want to remove one of these quotes, well you simply find the one that you want, Make sure you select the whole thing or not copy select the whole thing and then just delete it, just like that. And now we have three testimonials. Finally, let's see about these screenshots. Screenshots open up in a nice lightbox which allows you to scroll through them by using your keyboard or these two buttons here, Previous and Next. Now here we have four screenshots per row, but what if you want, for example, three screen shots per row. Well let's take a look at the code behind this, so screenshots, this uses Bootstrap, Bootstrap uses a 12 column grid system by default. And that means, when you see something like this, col-md-3 or col-lg-3, you divide 12 by 3, and that gives you 4. That means you'll have four columns on that particular row of elements. So if we want three, we'll have to change this to 4 because 12 divided by 3 is 4, right? So we'll change col-mg and col-lg 3 to 4 and let's do the same for the others. Now, I'm gonna delete the last two screenshots because I don't need that many, I just want to display six. So let's do a refresh, Let's go to Screenshots and now we have three screenshots per row, and none of the functionality is different, they also open up in this lightbox. So how do you make this work? Well, it's actually quite simple, you create an anchor tag that links to the big image. Then you specify data-lightbox-gallery and you give that a handle. And basically, any image with this handle will be opened in the same lightbox. This, if you want, is a set of images, you can look at it like that. And then you would specify the image with the thumbnail. So if I want to add my own screen shot, I'm just gonna quickly demonstrate this, you would do the following. I'm gonna link to screenshots/custom-large, so I'm linking to the large image. And then in here, I'm loading the small image, so custom/screenshots/custom-thumbnail. So I'm gonna save that, and when the page refreshes, You will see this screenshot which I have just added. And let me show you these files right here. We'll go to custom > screenshots, this is the thumbnail, as you can see it's 350 by 216 and this is the large image which is 1200 by 740, all right? So right here we're showing the thumbnail and when we click we're gonna get to the large image in the lightbox. And you can do the same for the rest of the screen shots. All right, finally the last thing that we need to do is customize this contact form. That's super easy to do, so we'll see you in the next lesson.