Hello and thank you for using Aria Business HTML Landing Page Template. Aria is an HTML landing page template built with Bootstrap featuring morphtext, text slider, grid filtering, lightbox details, count-to numbers, call request and contact form.
Built with Bootstrap 4, HTML5, CSS3, PHP and JavaScript it will help you achieve your online marketing goals in a beautiful and efficient manner.
Frameworks and toolkits used: Bootstrap 4, Popper, jQuery, jQuery Easing, Validator, Isotope, Magnific Popup, Swiper, CountTo
You can edit the template's Html, Css, Php, Js files with your preferred text and code editor: Notepad++, Visual Code, Sublime or any other...
For image editing you can use Adobe Photoshop or any other graphic editor of your choice.
Documentation - is the folder of this help file.
Web - contains the html, css, js and php files of the template.
Web folder includes index.html file which you will use to open the template. Besides index.html, you will also find the following folders:
You can find your own images while checking out the following free online sources:
Images are mostly from Freepik.com:
- Place your image file in the images folder
- Open for editing index.html
- Find Navbar section
- Here find this line of code:
<a class="navbar-brand logo-image" href="index.html"><img src="images/logo.svg" alt="alternative"></a>
- Edit and save the image file in the images folder
- Open for editing css/styles.css
- Find the Header section and the following lines of code:
.header {
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)), url('../images/header-background.jpg') center center no-repeat;
background-size: cover;
}
- Edit and save the image file in the images folder
- Open for editing css/styles.css
- Find the section Details 1
- Here focus on the following lines:
.accordion .area-1 {
height: 27rem;
background: url('../images/details-1-background.jpg') center center no-repeat;
background-size: cover;
}
.tabs .area-2 {
height: 27rem;
background: url('../images/details-2-background.jpg') center center no-repeat;
background-size: cover;
}
Aria uses Font Awesome icon font in many sections and elements.
To change one of the Font Awesome icons you can simply replace the classes that you'll find in index.html e.g. fa-binoculars, fa-list-alt, fa-chart-pie with the ones that you need from http://fontawesome.io/icons/
To change social media icons in the Footer section of the template, you need to:
- Open index.html from the template folder
- Find the section Social Media in the Footer:
- And replace fa-facebook, fa-twitter, and so on... with the classes name that you need from http://fontawesome.io/icons/ in the Brand Icons section
- Also don't forget to replace href="#your-link" with the link to your social page or account
If you want to control the way the posts look like when you share the landing page on social media (Facebook, Google+ and LinkedIn especially) don't forget to update the OG Meta Tags (OpenGraph) in the Head section of the index.html file.
<meta property="og:site_name" content="" /> <!-- website name --> <meta property="og:site" content="" /> <!-- website link --> <meta property="og:title" content=""/> <!-- title shown in the actual shared post --> <meta property="og:description" content="" /> <!-- description shown in the actual shared post --> <meta property="og:image" content="" /> <!-- image link, make sure it's jpg --> <meta property="og:url" content="" /> <!-- where do you want your post to link to --> <meta property="og:type" content="article" />
To receive emails with data from your visitors simply change the line $EmailTo = "yourname@domain.com"; to your email address in the php folder in the following files:
Attention:The script only runs online (on a liver server with PHP support) so the forms will not work while the landing page is offline on your hard-drive
If you want to change input fields names, you will need to update them accordingly in the following files:
To setup a redirect to a thank you page on form submit, you need to:
- Open js/scripts.js inside the template folder
- Find the following block of code in the form section
function cformSuccess() {
$("#ContactForm")[0].reset();
csubmitMSG(true, "Message Submitted!")
}
function cformSuccess() {
$("#ContactForm")[0].reset();
window.location.href = "https://yourlinkhere.com";
}
The Projects section uses Isotope plugin which can be configured as described here https://isotope.metafizzy.co/
To add a new project in the projects section, you need to:
- Open for editing index.html and find the Projects section
- Here focus on the code area just below
<div class="grid">
<div class="element-item development"> <a class="popup-with-move-anim" href="#project-1"><div class="element-item-overlay"><span>Online Banking</span></div><img src="images/project-1.jpg" alt="alternative"></a> </div>
To add a new project category in the projects section, you need to:
- Open for editing index.html and find the Projects section
- Here in the Filter section duplicate a line like the one below:
<a class="button" data-filter=".development"><span>DEVELOPMENT</span></a>
<div class="element-item development">
Because of limited resources at this point I am not able to provide support for free items but don't hesitate to send your questions at lucian@inovatik.com and I will try to help and at least point you in the right direction.