您好,感谢您使用 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 Code、Sublime或任何其他...
对于图像编辑,您可以使用Adobe Photoshop或您选择的任何其他图形编辑器。
文档- 是此帮助文件的文件夹。Web
-
包含模板的 html、css、js 和 php 文件。
Web文件夹包含index.html文件,您将使用它来打开模板和附加页面:article-details.html、privacy-policy.html、terms-conditions.html。除了 index.html,您还会找到以下文件夹:
以下是整个模板使用的图像的链接:
您可以在查看以下免费在线资源时找到自己的图像:
- 将图像文件放在图像文件夹
中
- 打开进行编辑index.html
- 查找导航部分
- 在此处找到这行代码:
<a class="navbar-brand 徽标图像" href="index.html"><img src="images/logo.svg" alt="alternative"></a>
- Corso 使用图案图像作为页眉和页脚部分的背景装饰
- 要更改图像,请将新图像保存在图像文件夹
中
- 打开以编辑css/styles.css
- 找到页眉部分
- 然后找到以下代码:
.标题 { 位置:相对; 背景:线性渐变(向右下方,rgba(0,0,0,0.8),rgba(0,0,0,0.8)),url('../images/header-background.jpg')中心中心不重复; 背景尺寸:封面; 顶部内边距:8rem; 内边距底部:40%; 文本对齐:居中; }
- 编辑并保存Images文件夹
中的图像文件
- 打开进行编辑index.html - 找到
Header
部分,然后找到Image Slider,然后找到以下代码行
<!-- 幻灯片 --> <div class="swiper-slide" > <img class="img-fluid" src="图片/details-slide-1.jpg" alt="alternative"> </div> <!-- 幻灯片结束 -->
- 编辑并保存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> <!-- 滑动按钮结束 --> <!-- 幻灯片结束 -->
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, }, } });
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/
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
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:
要在表单提交时设置重定向到感谢页面,您需要:
-在模板文件夹内
打开js/scripts.js
- 在表单部分找到以下代码块
函数 rformSuccess() { $("#registrationForm")[0].重置(); rsubmitMSG(true, "请求已提交!"); $("input").removeClass('notEmpty'); // 提交后重置字段标签 }
函数 rformSuccess() { $("#registrationForm")[0].重置(); window.location.href = "https://yourlinkhere.com"; }
高级产品:我们非常重视支持,并通过电子邮件lucian@inovatik.com提供,自购买之日起 12 个月内有效。
免费物品:由于目前资源有限,我无法提供免费物品的支持,但请随时将您的问题发送至lucian@inovatik.com,我会尽力提供帮助,至少为您指明正确的方向。