Thank you for choosing the NEXGEN HTML Template. The purpose of this documentation is to help you make the most of what this product offers. If you have not yet purchased your license or need more licenses, click on the "Buy Now" button above.
This is an HTML Template, so it is important that you have some basic knowledge to change the source code. Do not use the notepad to edit the template files. There are many more appropriate publishers for you to do this.
The Master Package contains only one file (.zip). Just extract it in a folder of your choice to see the contents. We recommend that you check the files locally before uploading to your server.
In this folder are all files that give style to HTML pages. Note that everything is organized and separated by function. The third party files are in the "vendor" folder and the support files in the "support" folder, while the main files are loose at the root of the css folder.
If you need to change the font families, just change the default invocation in the "main.css" file. Search for "@import". Google provides many free fonts and installation is very easy, see more at this link: https://fonts.google.com
If you need to create your own styles, we recommend that you create a new file called "custom.css" and relate it to your HTML file.
In this folder are the JavaScript files. They are responsible for all the interaction of the HTML pages. Here it is also organized by function but you can change some things in the "main.js" file if you need to.
In this folder are the source files, these are only responsible for formatting the icons. Looking for how to choose your own icons, see the Changing Icons section.
In this folder are all the images of the template, but they are not the same as the ones you saw in the demo. We leave the size of each image in the art so you can easily include your own images.
Search for "Unsplash" or "Pexels" on Google. They have many professional-grade images for free. But never include a very heavy image, try to make them smaller using an editing program or try https://compressjpeg.com.
This folder contains files for sending emails, read more in the section below.
php/form.php
This file is responsible for making the template send emails. The only thing you need to do is type in your email where it says “Enter the recipient’s email address here”. And translate the texts just below that, if you wish.
This feature of sending emails pre-configured in the template is courtesy of our team. We do not support other types of applications that send email, such as PHPMailer, etc. But if you have any questions, let us know.
php/recapctha.php
This file connects with the Google API reCAPCTHA, you just have to enter your secret key where it says “Put your secret key here”, see in the next section how to configure reCAPCTHA.
reCAPTCHA helps to detect abusive traffic on your site without any user friction. It returns a score based on interactions with your site and provides more flexibility to take the appropriate actions.
Very first thing you need to do is register your website on Google reCAPTCHA. It is very simple and fast and you will do it in 2 minutes. To do this click here.
You will have to log in to a Google account, do that.
After logging in with your account and seeing the reCAPCTHA panel, just fill out the form:
Accept the terms of service and click the SEND button. Once submitted, Google will provide you with the following two information:
Site key / Secret key
Copy the Secret Key and Paste it in the file /php/recaptcha.php where it says “Put your secret key here”.
Copy the Site Key and Paste it into the HTML (and also in /assets/js/main.js) file where it says “Put your site key here”.
Done! When accessing your website, you can check if everything went well by typing F12 and inspecting the source code. Learn how to inspect the source code.
This HTML Template uses CSS Variables. We recommend that you access this link for more information. https://www.w3schools.com/css/css3_variables.asp.
Colors, Typography and Primary Buttons have a pattern defined in the file "default.css". You can change the colors directly in this file. However, some Demo Pages included have a personalized style. You can identify this by looking at the "Theme Settings" area between the <head> tags in the HTML files.
In the HTML files, you will find something like --section-1-bg-color between the <head> tags in the "Theme Settings" area. This helps a lot in personalizing your page, as the name of this variable already says, it is responsible for the background color of each section of the page.
All buttons in the template are styled by the primary-button class. To obtain a outlined button with colored outlines, just use the outlined-button"class.
This template uses icon fonts. In particular we use a library of font icons that we think contain all the essential icons with an incredibly simple and beautiful design.
We are working hard to create something that will help developers and web technology enthusiasts. We are very grateful that you entrust your creative work to our product. So, if you need help with something or find a problem, we will be ready to resolve and help you as soon as possible.
If you can help us with an rating, just go to your downloads page and choose NEXGEN. Thanks.
© 2020 NEXGEN is Proudly Powered by Codings.