Hello and thank you for using Vera Business Landing Page Template. Vera is an HTML landing page template built on Bootstrap featuring filterable portfolio, pricing table, contact forms and 6 header versions. It features the following header versions: Rotating Text, Header Slider, Sliding Background, YouTube Background, Video In Header, Launch Countdown.
Built with 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 v3.3.7, jQuery v2.2.4, jQuery Easing v1.3, jQuery YTPlayer, Validator.js v0.11.8, Magnific Popup v1.1.0, Swiper v3.4.2, Morphtext v2.4.4, Isotope v3.0.4, imagesLoaded v4.1.3, Counter-Up v1.0, Waypoints v2.0.3 and Font Awesome v4.7.0
You can edit the template's Html, Css, Php, Js files directly with Notepad++ or with your preferred code editor.
For graphics editing you can use Adobe Photoshop or any other graphics software of your choice.
Your downloaded package includes all 6 versions of the template: Rotating Text, Header Slider, Sliding Background, YouTube Background, Video In Header, Launch Countdown
You get all the fonts, icons, form scripts you saw in the Live Preview, except the images which are for demo purposes only and are replaced by placeholders. Removing images from the actual downloaded package is a ThemeForest requirement.
If you need the landing page with all the images as in the Live Preview just email me at lucian@inovatik.com
The downloaded file also includes this documentation.
Documentation - Is the folder of this help file.
01-rotating-text, 02-header-slider, 03-sliding-background, 04-youtube-background, 05-video-in-header, 06-launch-countdown contain the html, css, js and php files for each version of the template.
Each version contains the index.html file which you will use to open the template. Besides index.html, you will also find the following folders:
Images and photographs seen in the Live Preview are not available in the download package due to ThemeForest's item upload policies. You can reach me by email if you need the landing page with the exact images and videos from the Live Preview at lucian@inovatik.com. Also, you can find your own images browsing through the following free resources online.
Here are a few good resources for free images that you can use in your landing page:
To add your own images to the landing page:
- Edit and save them in the images folder
- Then in index.html or styles.css replace links that resemble this "http://placehold.it/1920x1080/3a3a3a/fff/" with your own links e.g. "images/header-background.jpg"
- For optimum results please take into consideration the recommended images sizes displayed in the placeholders
To change the images that slide in the header background of the Sliding Background version, you need to:
- Open css/styles.css
- Find the line: header .swiper-container-header .swiper-slide.first .slider-background
- And replace: http://placehold.it/1920x1080/3a3a3a/fff/ with the url to your image e.g. images/background-slide-1.jpg
- And repeat for each slide: first, second and third
To change the video in the background of the YouTube Background version, you need to:
- Open index.html inside the template folder
- Find the line
<a id="bgndVideo" class="player" data-property="{videoURL:'https://www.youtube.com/watch?v=_smyOW8JKSw',containment:'.video-section', quality:'highres', autoPlay:true, showControls: false, startAt:0, stopAt: 15, mute:true, opacity: 1}"></a>
Attention: for Internet Explorer you need to be on a live server online for the video in the background to work. It will not play while you work locally on your hard drive. But this is jut in IE. The rest of the browsers work without issues both offline and online.
To add images in the Image Gallery Swiper you need to:
- Open index.html from the template folder
- Find the Swiper section and these lines:
<div class="swiper-slide">
<div class="image-container">
<img class="img-responsive" src="http://placehold.it/180x40/aaa/4f4f4f/" alt="event gallery">
</div>
</div>
Vera uses Font Awesome icon font for all the icons throughout the landing page, including social media.
To change one of the Font Awesome icons you can simply replace the classes that you'll find in index.html e.g. fa-cutlery, fa-glass, fa-facebook with the ones that you like 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 lines:
<a href="#your-link"><i class="fa fa-facebook fa-lg circle-icon"></i></a>
<a href="#your-link"><i class="fa fa-twitter circle-icon"></i></a>
<a href="#your-link"><i class="fa fa-instagram circle-icon"></i></a>
<a href="#your-link"><i class="fa fa-pinterest circle-icon"></i></a>
<a href="#your-link"><i class="fa fa-linkedin circle-icon"></i></a>
<a href="#your-link"><i class="fa fa-google-plus circle-icon"></i></a>
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" />You can check out this article courtesy of Engage Interactive
Vera uses Bootstrap's carousel option for the testimonials section. You can change settings like: time between slides, pause on hover, reactions to keyboard and others. Here is the link to the documentation on Bootstrap's website: Bootstrap Carousel
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:
Support is offered according to ThemeForest's policies and you can always reach me by email lucian@inovatik.com