介绍

您好,感谢您使用 Corso 培训课程登陆页面模板。Corso 是一个使用 HTML 和 Bootstrap 构建的登陆页面模板,具有图像滑块、详细信息灯箱、视频灯箱、文本滑块、下拉导航、额外页面和工作表格。

它由 Bootstrap、HTML、CSS、PHP 和 JavaScript 构建,将帮助您以美观而高效的方式实现您的在线营销目标。

使用的框架和工具包:Bootstrap、Popper、jQuery、jQuery Easing、Validator、Magnific Popup、Swiper、The Final Countdown。

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

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


文件结构

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

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

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


图片

图片链接

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

图片资源

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

更改徽标

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

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

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

更改标题背景图案

- Corso 使用图案图像作为页眉和页脚部分的背景装饰
- 要更改图像,请将新图像保存在图像文件夹 中
- 打开以编辑css/styles.css
- 找到页眉部分
- 然后找到以下代码:

.标题 {
	位置:相对;
	背景:线性渐变(向右下方,rgba(0,0,0,0.8),rgba(0,0,0,0.8)),url('../images/header-background.jpg')中心中心不重复;
	背景尺寸:封面;
	顶部内边距:8rem;
	内边距底部:40%;
	文本对齐:居中;
}

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

更改滑块图像

- 编辑并保存Images文件夹 中的图像文件
- 打开进行编辑index.html - 找到 Header
部分,然后找到Image Slider,然后找到以下代码行

<!-- 幻灯片 -->
<div class="swiper-slide" >
	<img class="img-fluid" src="图片/details-slide-1.jpg" alt="alternative">
</div>
<!-- 幻灯片结束 -->

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

更改评价部分图片

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

<!-- 幻灯片 -->
<div class="swiper-slide">
	<div class="图像包装器">
		<img class="img-fluid" src="images/testimonial-1.jpg" alt="alternative">
	</div> <!-- 图像包装器结束 -->
	<div class="text-wrapper">
		<div class="testimonial-text">大约一年前,我参加了 SEO 培训课程,我很高兴。它教会了我搜索引擎优化的所有基础知识和一些技巧。</div>
		<div class="testimonial-author">Jude Thorn - 在线营销人员</div>
	</div> <!-- 文本包装器结束 -->
</div> <!-- 滑动按钮结束 -->
<!-- 幻灯片结束 -->

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

Corso 使用 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’
	},
	间距:70,
	每次观看幻灯片数量: 2,
	断点:{
		// 当窗口 <= 1199px 时
		1199:{
			每次观看幻灯片数量: 1,
		},
	}
});


图标

Font Awesome 图标

Corso 在许多部分和元素中使用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-atom, fa-key, fa-newspaper 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 Links in the Newsletter:
- 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:

  • contactform-process.php
  • newsletterform-process.php
  • privacyform-process.php
  • registrationform-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
- 在表单部分找到以下代码块

函数 rformSuccess() {
	$("#registrationForm")[0].重置();
	rsubmitMSG(true, "请求已提交!");
	$("input").removeClass('notEmpty'); // 提交后重置字段标签
}

- 并将其更改为:
函数 rformSuccess() {
	$("#registrationForm")[0].重置();
	window.location.href = "https://yourlinkhere.com";
}

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


支持

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

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