介绍

您好，感谢您使用 Tivo SaaS App HTML 登陆页面模板。Tivo 是一个使用 Bootstrap 构建的 HTML 登陆页面模板，具有图像滑块、选项卡、详细信息灯箱、视频灯箱、文本滑块、下拉导航、额外页面和工作通讯、注册、登录表单。

基于 Bootstrap 4、HTML5、CSS3、PHP 和 JavaScript 构建，它将帮助您以美观高效的方式实现您的在线营销目标。

使用的框架和工具包：Bootstrap 4、Popper、jQuery、jQuery Easing、Validator、Magnific Popup、Swiper。

您可以使用您喜欢的文本和代码编辑器编辑模板的 Html、Css、Php、Js 文件：Notepad++、Visual Code、Sublime或任何其他...

对于图像编辑，您可以使用Adob​​e Photoshop或您选择的任何其他图形编辑器。

文件结构

文档- 是此帮助文件的文件夹。Web -
包含模板的 html、css、js 和 php 文件。

Web文件夹包含index.html文件，您将使用它来打开模板和附加页面：article-details.html、log-in.html、privacy-policy.html、sign-up.html 和 term-conditions.html。除了 index.html，您还会找到以下文件夹：

• Css - Bootstrap、Font Awesome、Magnific Popup、Swiper 和模板的自定义样式表styles.css
• 图像- 整个模板使用的图像，包括图标和徽标
• Js - Bootstrap、Popper、jQuery、jQuery Easing、Magnific Popup、Swiper、Validator 和 Tivo 自定义脚本的 JavaScript 文件：scripts.js
• Php——联系表单的 PHP 脚本文件
• Webfonts - Font Awesome 文件

图片

图片链接

以下是整个模板使用的图像的链接：

• 标题应用程序矢量：https://www.freepik.com/free-vector/link-building-concept_3507157.htm#page=1&query=interface&position=19
• 描述图标：https://www.freepik.com/premium-vector/programming-coding-isometric-set_5059166.htm#page=1&query=software&position=13
• 演讲者：http://www.freepik.com/free-photo/close-up-of-pretty-woman-with-glasses-and-big-smile_898740.htm
• 演讲者：http://www.freepik.com/free-photo/serious-man-walking-through-the-city_940147.htm
• 演讲者：http://www.freepik.com/free-photo/clever-woman-writing-an-essay_857632.htm
• 演讲者：http://www.freepik.com/free-photo/thinking-man-with-a-coat_916622.htm
• 文章详情大图：https://www.pexels.com/photo/photo-of-imac-near-macbook-1029757/
• 文章详情图片小：https://www.pexels.com/photo/apple-office-internet-ipad-38544/

图片资源

您可以在查看以下免费在线资源时找到自己的图像：

• 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 共和国：http://isorepublic.com/
• Videezy：https://www.videezy.com/ - 用于视频

更改徽标

- 将图像文件放在图像文件夹 中
- 打开进行编辑index.html
- 查找导航部分
- 在此处找到这行代码：

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

- 并用新文件名 替换logo.svg
- 保存文件并刷新浏览器窗口以查看更改

弯曲的 SVG 背景框架

- Tivo 使用 svg 图像作为某些部分（如页眉和页脚）的背景装饰
- 此图像并非来自图像文件，而是由 index.html 中针对上述每个部分生成的以下代码生成 - 例如，以下是页眉
部分的代码：

<svg class="header-frame" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" retainAspectRatio="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.4 92-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>

- 要更改框架的颜色，您可以更新此代码段中的颜色代码#5f4def .cls-1{fill:#5f4def;}
- 还可以使用header-frame和footer-frame类在css/styles.css中控制一些属性，这些属性位于 Header 部分的以下代码行中

.header-frame {
	margin-top: -1px; /* 删除 FF 中的白色边缘 */
	宽度：100％；
	高度：2.25rem；
}

- 在页脚部分

.页脚框架 {
	宽度：100％；
	高度：1.5rem；
}

- 如果您想更改框架，可以使用 Adob​​e Illustrator 或其他矢量软件创建它，将其导出，复制类似于上面的代码，然后替换 index.html 中您想要的每个模板部分的原始代码
- 不要忘记将frame-decorative类添加到 index.html 代码中，并在 style.css 中调整所需的属性

更改功能部分图像

- 编辑并保存Images文件夹 中的图像文件
- 打开并编辑index.html - 找到 Features
部分和以下代码行

<div class="图片容器">
	<img class="img-fluid" src="images/features-1.png" alt="alternative">
</div> <!-- 图像容器结束 -->

- 在此处将features-1.png替换为您自己的文件名
- 保存文件并刷新浏览器窗口以查看更改
- 对所有选项卡重复上述步骤
- 为了以最少的工作获得最佳效果，我建议在实时预览中使用与原始图像相同的图像大小

更改评价部分图片

- 编辑并保存Images文件夹 中的图像文件
- 打开并编辑index.html - 找到 Testimonials
部分和以下代码行

<div class="图像包装器">
	<img class="img-fluid" src="images/testimonial-1.jpg" alt="alternative">
</div> <!-- 图像包装器结束 -->

- 在此处将testimonial-1.png替换为您自己的文件名
- 保存文件并刷新浏览器窗口以查看更改
- 对所有幻灯片重复上述步骤
- 为了以最少的工作获得最佳效果，我建议在实时预览中使用与原始图像相同的图像大小

Tivo 使用 Swiper 插件作为文本滑块。您可以更改设置，例如：幻灯片之间的时间、悬停时暂停、对键盘的反应等，方法是访问插件页面：http://idangero.us/swiper/api/并将它们添加到js/scripts.js中的文本滑块 - Swiper部分

/* 文本滑块 - Swiper */
var textSlider = new Swiper('.text-slider', {
	自动播放： {
		延迟：6000，
		disableOnInteraction：false
	}，
	循环：真，
	导航： {
		nextEl: ‘.swiper-button-next’，
		prevEl: ‘.swiper-button-prev’
	}
});

图标

Font Awesome 图标

Tivo 在许多部分和元素中使用Font Awesome图标字体。

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

要在表单提交时设置重定向到感谢页面，您需要： -在模板文件夹内
打开js/scripts.js
- 在表单部分找到以下代码块

函数 sformSuccess() {
	$("#signUpForm")[0].reset();
	ssubmitMSG(true, "注册已提交！");
	$("input").removeClass('notEmpty'); // 提交后重置字段标签
}

- 并将其更改为：

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

- 并将引号内的https://yourlinkhere.com替换为您的链接

支持

高级产品：我们非常重视支持，并通过电子邮件 lucian@inovatik.com 提供，自购买之日起 12 个月内有效。

免费物品：由于目前资源有限，我无法提供免费物品的支持，但请随时将您的问题发送至lucian@inovatik.com，我会尽力提供帮助，至少为您指明正确的方向。

Tivo - 由Inovatik提供的软件业务 HTML 登陆页面模板