OpenCart 2.x. 如何管理“Templateog体育首页视差”模块

This tutorial shows 如何管理“templatemmonster” Parallax" module in OpenCart. Such module 默认情况下包含在模板中，并允许应用全宽 parallax background 在要求的页面内. 有几个阶段来创建一个.

I. 创建新的视差横幅

1. 打开网站的管理面板，导航到 Extensions> Modules section.

2. Search for TM Parallax module 在可用的列表中.

3. Click ‘Edit’ 默认TM旁边的按钮 Parallax module to create a new banner.

4. 填写所需字段:

   • name of the new banner;

   • its content (that is optional; you may keep content area empty to display single image only);

   • using ‘Image’ tab 选择图片 parallax background;

   • specify size of the parallax Area -它的宽度和高度(单位为px);

   • use ‘CSS Class’ tab 来应用特定的CSS规则 parallax area (that is optional; you may keep field empty to apply standard styles only);

   • make sure to update ‘Status’ of the banner. Select ‘Enabled’ to get new banner activated:

     

5. Save banner 一旦它的配置完成.

II. 将新的视差横幅应用到相应的布局(页面)

Once new banner ，则应该选择显示它的页面. Layer section is used for that; assign new parallax banner 到其中一个站点页面.

您可以使用链接到 Layout 从最上面的消息中摘录:

或者手动打开相同的部分: Designs> Layouts.

1. 选择页面模板 to put new parallax banner.

2. Click ‘Add Module’ button at the bottom.

3. Select newly created parallax banner from the list of available ones.

4. Define position for it to appear in.

5. Set Sort Order 并保存对页面的更改 layout:

   

III. 为新的视差横幅添加特定的CSS样式

While creating parallax banner 有一个选项可以输入特定的CSS类 banner only. If that tab has been filled in, stylesheet.CSS文件应该更新:

1. 创建特定的CSS规则 for the banner. They should define layout 项目的特性.

2. 打开服务器文件(使用 FTP, or hosting cPanel) and locate # # # # /目录/视图/主题/stylesheet/stylesheet.css file there. 打开它进行编辑.

3. 将创建的CSS类复制粘贴到 stylesheet.css file. 确保具有相应的类名(类标题应与中使用的相同) parallax banner settings). Save CSS changes.

   下面的类名在我们的例子中被使用在“CSS类”下面: parallax-4 . 因此，CSS规则可以用来管理新的样式 banner can be as follows:

   /*用于新的视差横幅#4 -可选*/
   div.parallax-4 {
     Padding: 144px 0 146px;
     text-align: center; }
     div.parallax-4 .container h2 {
       font: PT Serif;
       margin-bottom: 32px; }
     div.parallax-4 .btn-primary {
       font-size: 16px;
       line-height: 19px;
       font-family:宋体;
       填充:14px 41px 13px;
       color: #fff;
       background: none;
       边框:2px solid #fff;
       -webkit-border-radius: 25 px;
       -moz-border-radius: 25 px;
       border-radius: 25px; }
       div.parallax-4 .btn-primary:访问{
         color: #fff;
         background: none;
         边框:2px solid #fff; }
       div.parallax-4 .btn-primary:悬停,div.parallax-4 .btn-primary:活跃、div.parallax-4 .btn-primary:重点,div.parallax-4 .btn-primary:活跃:{焦点
         color: #fff;
         背景:# ce987c;
         border-color: #ce987c; }
   
   @media (max-width: 767px) {
     div.parallax-4 {
       padding: 90px 0; }
       div.parallax-4 .container h2 {
         font-size: 26px;
         line-height: 31px; }}
   
   @media (max-width: 479px) {
     div.parallax-4 {
       padding: 70px 0; }
       div.parallax-4 .container h2 {
         font-size: 21px;
         line-height: 25px; }}
         

   您可以随意使用这些规则作为创建自己的样式规则的示例.

4. 将CSS更改保存到stylesheet.css’ file.

Get back to the website. 刷新它以查看结果. New parallax 区域将出现在所选页面的相应位置.

现在你知道如何管理了 "Templateog体育首页 Parallax" module.

请随时查看下面的详细视频教程: