Tivo - Landing Page
Documentation

# INTRODUCTION

Hello and thank you for using Tivo SaaS App HTML Landing Page Template. Tivo is an HTML landing page template built with Bootstrap featuring image slider, tabs, details lightbox, video lightbox, text slider, dropdown navigation, extra pages and working newsletter, sign up, log in forms.

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, Magnific Popup, Swiper.

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.

# FILES STRUCTURE

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 and the extra pages: article-details.html, log-in.html, privacy-policy.html, sign-up.html and terms-conditions.html. Besides index.html, you will also find the following folders:

- Css - Bootstrap, Font Awesome, Magnific Popup, Swiper and the template's custom stylesheet styles.css
- Images - Images used throughout the template including the favicon and logo
- Js - JavaScript files for Bootstrap, Popper, jQuery, jQuery Easing, Magnific Popup, Swiper, Validator, and Tivo's custom scripts: scripts.js
- Php - PHP script files for the contact forms
- Webfonts - Font Awesome files

# IMAGES

### Image Links

Here are the links to the images used throughout the template:

- Header app vector: https://www.freepik.com/free-vector/link-building-concept_3507157.htm#page=1&query=interface&position=19
- Description icons: https://www.freepik.com/premium-vector/programming-coding-isometric-set_5059166.htm#page=1&query=software&position=13
- Speakers: http://www.freepik.com/free-photo/close-up-of-pretty-woman-with-glasses-and-big-smile_898740.htm
- Speakers: http://www.freepik.com/free-photo/serious-man-walking-through-the-city_940147.htm
- Speakers: http://www.freepik.com/free-photo/clever-woman-writing-an-essay_857632.htm
- Speakers: http://www.freepik.com/free-photo/thinking-man-with-a-coat_916622.htm
- Article details image large: https://www.pexels.com/photo/photo-of-imac-near-macbook-1029757/
- Article details image small: https://www.pexels.com/photo/apple-office-internet-ipad-38544/

### Image Resources

You can find your own images while checking out the following free online sources:

- Freepik: https://www.freepik.com/home
- Pexels: https://www.pexels.com/
- SplitShire: https://www.splitshire.com/
- StartupStockPhotos: http://startupstockphotos.com/
- StockSnap: https://stocksnap.io/
- ISO Republic: http://isorepublic.com/
- Videezy: https://www.videezy.com/ - for videos

### Changing The Logo

- Place your image file in the images folder
- Open for editing index.html
- Find Navigation section
- Here find this line of code:

    <a class="navbar-brand logo-image" href="index.html"><img src="images/logo.svg" alt="alternative"></a>

- And replace logo.svg with your new file name
- Save the file and refresh the browser window to see the changes

### Curved SVG Background Frame

- Tivo uses an svg image as background decoration for some of the sections like Header and Footer
- This image doesn't come from an image file, instead it's generated by the following code found in index.html for each of the above mentioned sections
- For example here is the code for the Header section:

    <svg class="header-frame" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1920 310"><defs><style>.cls-1{fill:#5f4def;}</style></defs><title>header-frame</title><path class="cls-1" d="M0,283.054c22.75,12.98,53.1,15.2,70.635,14.808,92.115-2.077,238.3-79.9,354.895-79.938,59.97-.019,106.17,18.059,141.58,34,47.778,21.511,47.778,21.511,90,38.938,28.418,11.731,85.344,26.169,152.992,17.971,68.127-8.255,115.933-34.963,166.492-67.393,37.467-24.032,148.6-112.008,171.753-127.963,27.951-19.26,87.771-81.155,180.71-89.341,72.016-6.343,105.479,12.388,157.434,35.467,69.73,30.976,168.93,92.28,256.514,89.405,100.992-3.315,140.276-41.7,177-64.9V0.24H0V283.054Z"/></svg>

- To change the color of the frame you can update the color code #5f4def in this piece of code .cls-1{fill:#5f4def;}
- There are also some properties controlled in css/styles.css with the header-frame and footer-frame classes in the following lines of code in the Header section

    .header-frame {
    	margin-top: -1px; /* To remove white margin in FF */
    	width: 100%;
    	height: 2.25rem;
    }

- And in the Footer section

    .footer-frame {
    	width: 100%;
    	height: 1.5rem;
    }

- If you want to change the frame you can create it Adobe Illustrator or another vector software, export it, copy the code similar to the one above and replace the original code in index.html for each template section you want
- Don't forget to add the frame-decorative class to the index.html code and adjust the properties you need in styles.css

### Changing Features Section Images

- Edit and save the image files in the images folder
- Open for editing index.html
- Find the section Features and the following lines of code

    <div class="image-container">
    	<img class="img-fluid" src="images/features-1.png" alt="alternative">
    </div> <!-- end of image-container -->

- Here replace features-1.png with your own file name
- Save the file and refresh the browser window to see the changes
- Repeat the steps above for all the tabs
- For optimum results with the least amount of work I recommend using the same image size as the original in the Live Preview

### Changing Testimonial Section Images

- Edit and save the image files in the images folder
- Open for editing index.html
- Find the section Testimonials and the following lines of code

    <div class="image-wrapper">
    	<img class="img-fluid" src="images/testimonial-1.jpg" alt="alternative">
    </div> <!-- end of image-wrapper -->

- Here replace testimonial-1.png with your own file name
- Save the file and refresh the browser window to see the changes
- Repeat the steps above for all the slides
- For optimum results with the least amount of work I recommend using the same image size as the original in the Live Preview

Tivo uses the Swiper plugin for the text slider. You can change settings like: time between slides, pause on hover, reactions to keyboard and others by visiting the plugins page: http://idangero.us/swiper/api/ and adding them to the Text Slider - Swiper section in js/scripts.js

    /* Text Slider - Swiper */
    var textSlider = new Swiper('.text-slider', {
    	autoplay: {
    		delay: 6000,
    		disableOnInteraction: false
    	},
    	loop: true,
    	navigation: {
    		nextEl: '.swiper-button-next',
    		prevEl: '.swiper-button-prev'
    	}
    });

# ICONS

### Font Awesome Icons

Tivo 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-map-marker-alt, fa-envelope, fa-globe with the ones that you need from http://fontawesome.io/icons/

### Social Media 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

### Social Media Tip

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 An Introduction To Using Facebooks Open Graph Protocol courtesy of Engage Interactive

# CONTACT FORMS

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:

- loginform-process.php
- newsletterform-process.php
- privacyform-process.php
- signupform-process.php

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:

- index.html, scripts.js and the php file from the php folder.

### Setup A Redirect Page On Form Submit

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 sformSuccess() {
    	$("#signUpForm")[0].reset();
    	ssubmitMSG(true, "Sign Up Submitted!");
    	$("input").removeClass('notEmpty'); // resets the field label after submission
    }

- And change it to:

    function sformSuccess() {
    	$("#signUpForm")[0].reset();
    	window.location.href = "https://yourlinkhere.com";
    }

- And replace inside the quotes https://yourlinkhere.com with your link

# SUPPORT

Premium items: Support is taken very seriously and is offered via email lucian@inovatik.com for 12 months from the purchase date.

Free items: 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.