Solo Portfolio One Page: https://themeforest.net/item/solo-portfolio-one-page/19344271?ref=TransGent
Turn on English subtitles!
Hi, I’m Matthew. In this tutorial, I want to show you how you can customize products purchased on Envato Market. For this example, we’re going to use the Solo Portfolio One Page HTML5 template, which is available on ThemeForest for $14. The most important features of the template are as follows: It’s based on Bootstrap, version 3.3.7. It’s developed in HTML5, uses CSS3 and jQuery. It’s fully responsive and uses Fonts Awesome icons. A link to this product can be found in the video description. To purchase the template, simply click on the Buy Now button. We’ll be navigated to the page, where we can create an account by entering our first name, last name, and email address. Then we can our fill billing details, and select a payment method. If we already have an account on Envato Market, we can log in, and our details will be filled automatically, then we can confirm our payment. I’ve already bought the template, so I’ll go back to the product’s main page and log into my account on Envato Market. After logging in, I can directly download the purchased template. We can also get our template from the Downloads section. Before buying any product on Envato Market, there is possibility to preview it, so we can see how it looks like. We can do this by clicking on the thumbnail on the product’s main page. This way, we can display the template which is composed of several sections: the About section, the Services section, the Portfolio section, and the Contact section. After browsing the template, we can make a purchase by clicking on the Buy Now button. I have already done that, so I’ll go back to product’s main page and download the template on my computer’s hard disk.
After the template is downloaded, we can open a folder which contains our template, then extract it. We’ll get a new folder which contains a documentation and the template folder in which we can find all files. At the moment, the path to our template is a little too long, so let’s rename the folder to “solo”, then let’s move our template to the parent folder. To edit the template files, we’re going to use Notepad++ editor. A link to download this application can be found in the video description. In this editor, we’re going to modify the following: .css, .html and .js files. Let’s open the index.html, our template main file by right clicking on it and choosing the “Edit with Notepad++” option. Now, we can see our template file which looks like this. At first sight, it seems to be very complicated, but this will turn out later not to be the case. To easily see all changes made to the template, let’s split the screen into two parts. On the left side, let’s place the browser with our template. On the right side, let’s place the HTML code editor in which we are going to make changes. Now we can open our index.html file in the browser to see how our template looks like.
First, we need to change our website language. I’m going to change it to Polish language. Next step should include a change of our text. In this case, this code snippet corresponds to the browser title. Website is divided into sections, so it’s very easy to find a specific part which appears in the browser on the left side. For example, here is Navbar section, where you can find all buttons which navigate visitor to a specific section. To keep my tutorial short, I’m going to show you how to you can change a text for the navigation bar. We can see here that sOLO corresponds to the website title. I’m going to change it to “TransGent”, then I’m going to change every button which navigates a user to a specific section. The first section name is “Start”, the second section is “O mnie”, the third section is “Usługi”, the fourth section is “Projekty”, and the fifth section is “Kontakt”. You can save any modification in the editor, then refresh the browser. As you can see, all changes have been applied. Now, I’m going to change the entire text and I’ll be back in a minute. All website contents have been changed, but there are some elements on the website which I don’t want to see. In this case, it’s Hire Me button in the About section and two parts of text in the Services and the Portfolio sections. Now, I’m going to show you how to remove them. Let’s start from the beginning. We need to search for the Hire Me button in the About section. The About section begins here, and here you can find this button. Simply select it, and press BACKSPACE. When it comes to text that we want to remove, we can search for it, then select it and press BACKSPACE...
Youtube limits description size to 5000 characters. Full transcription can be found here: