1. 主页
  2. 插件
  3. LayerSlider 教程

LayerSlider 教程

购买地址:

https://codecanyon.net/item/layerslider-responsive-wordpress-slider-plugin/1362246

LayerSlider是一个优质的多用途动画平台。带有令人兴奋效果的幻灯片和图像画廊,华丽的动画着陆页和页面块,甚至可以使用LayerSlider创建完整的网站。每个网站都可以从这个插件的功能中受益。

拖放可视化编辑器使每个人都很容易开始使用LayerSlider。不需要编码或技术技能。越来越多的可导入模板选择是新项目的理想起点,它们涵盖了从个人到公司业务的所有常见用例。他们精心制作,美观,可以很容易地定制,以适应任何需要。

强大的支持和频繁的更新可确保充分利用您的购买。

介绍

感谢您购买此产品。如果您有任何超出本文档范围的问题,请随时与我们联系。

关于这个项目

LayerSlider WP是一款高级多功能滑块,用于创建图像库,内容滑块以及带有必看效果的令人兴奋的幻灯片,甚至可以从您的WordPress帖子和页面创建。

它采用尖端技术,提供最流畅的体验,并有超过200种预设的2D和3D幻灯片切换功能。它具有一个美观且易于使用的管理界面,支持现代化功能,例如拖放所见即所得的滑块构建器,实时预览,时间线视图,Google字体和用于定制动画的转换生成器。

它通过支持响应模式,多种布局,移动设备上的触摸手势以及使用延迟加载和条件脚本加载等技术来实现最佳性能,从而实现设备友好。您可以将任何内容添加到滑块,包括图像,文本,自定义HTML,YouTube和Vimeo视频或HTML5自托管多媒体内容。通过允许您使用自定义属性构建语义标记,搜索引擎可以轻松进行索引,这也对搜索引擎优化非常友好。

LayerSlider带有18个内置皮肤,它有很多选项可以以最小的细节完全自定义滑块的外观和行为。

LayerSlider的主页上查找完整的功能列表 。

安装

找到安装文件

主插件包(CodeCanyon默认提供下载)包含有用的资产,如文档,示例和源文件。然而,WordPress期望一个非常具体的安装文件。为了向您提供可安装插件和其他资源,我们已将它们捆绑在一起成为一个ZIP文件。这就是为什么在大多数情况下,您需要首先解压下载的ZIP文件,然后使用里面的可安装软件包。

  1. 如果您Installable WordPress file only 在从CodeCanyon下载插件时明确选择了该 选项,则无需执行任何操作。这是安装过程中需要使用的文件。
  2. 在任何其他情况下,您需要先解压从CodeCanyon下载的ZIP文件。可安装的文件将在里面,通常被称为类似 “layersliderwp-xxxinstallable.zip”.

通过WP管理界面进行安装

  1. 找到上面部分中描述的可安装文件。
  2. 在你的WordPress管理区导航到 Plugins – > Add new,然后按下Upload Plugin 页面顶部的 按钮。
  3. 选择前面提到的可安装ZIP文件,然后点击 Install Now 按钮。
  4. WordPress可能会要求您输入您的FTP登录凭据。点击 Proceed 完成后。
  5. 该插件现在已安装,请点击 Activate Plugin 按钮。
  6. 一个新的菜单条目 LayerSlider WP 应该出现在你的WordPress管理工具条上。

故障排除

  • 请注意,您必须使用 “layersliderwp-xxxinstallable.zip” 文件,当您尝试在WP管理区域上安装插件时。从CodeCanyon下载的主包包含很多其他资产。你必须首先解压它,然后在里面找到上面提到的文件进行安装。唯一的例外是如果您在CodeCanyon上明确选择了可安装的WordPress文件选项。
  • 如果您收到 No valid plugins were found 错误消息,几乎肯定会上传错误的ZIP文件。请再次阅读前面的内容和安装说明。
  • 该 Destination folder already exists 错误消息意味着您已经安装LayerSlider的另一个副本,你不能同时使用多个版本。确保在尝试安装新版本之前,停用并删除以前的副本或检查主题设置以禁用捆绑版本(如果有)。这不会影响您的滑块和设置,它们将保持不变并在完成新版本的安装后可用。
  • 在一些非常罕见的情况下,某些服务器设置(例如上传大小限制,内存限制)可能会阻止您从WordPress管理区域安装插件。如果您遇到任何问题,请联系您的服务器主机并要求他们更改相关设置。或者,您也可以恢复到FTP安装方法,因此您不必在此期间等待。
  • 如果您收到一条错误消息,说明 “Are you sure you want to do this?”最有可能与之前解释的服务器配置问题相同。WordPress会将此显示为一种通用类型的错误消息,因此可能还有其他原因。
  • 您的网站托管服务提供商可能会提供其他安装插件的方法,例如基于Web的FTP客户端或明确针对WordPress的第三方解决方案。虽然这些应该没问题,但在某些情况下,它们可能无法按预期工作,您需要恢复到其中一种常规方法。
  • 如果您在安装LayerSlider后遇到任何问题,请尝试暂时禁用其他插件并切换到其中一个默认WordPress主题,以查看是否有帮助。LayerSlider应该与您使用的任何插件/主题配合良好,但由于其他原因可能会出现不兼容问题。

激活插件

为什么激活?

除了您的购买之外,您还有权使用购买代码激活您的网站,以享受以下独家功能和服务:

  • 享受我们的优先支持服务,快速轻松地获得帮助。
  • 接收1-Click插件更新,包括早期访问版本。
  • 解锁插件中的高级功能,提供全新且有趣的方式来扩展滑块的功能。
  • 导入高级滑块模板,您可以将其用作项目的起点。我们定期发布并更新优质内容。

我收到了捆绑在我的主题中的LayerSlider

我们非常重视插件开发,我们致力于提供我们可以生产的最佳产品。即使您使用的是未激活的副本,它仍然具有强大的功能,几乎可以提供无限的功能以成为高级体验。不过,只有通过购买LayerSlider支持插件开发的直接买家才能获得一些附加功能。

通过向人群提供我们独特而有用的产品,主题包是增加我们知名度的好方法。但是,产品开发和客户支持需要大量资源,因此我们只能向我们的直接买家提供我们的服务。通过提供一些独家功能,我们鼓励用户支持未来版本的LayerSlider的开发。

我如何激活LayerSlider?

您只需 在购买LayerSlider后输入收到 的 物品购买代码产品激活 部分并按下 立即激活 按钮。

产品激活
产品激活
产品激活部分的插图

我可以激活多个网站吗?

购买代码可用于激活1个活动站点和最多3个额外的开发安装。根据Envato的许可条款,每个站点都需要单独的许可证和独特的购买代码。但是,通过 停用安装,如果您要移动站点,则可以将许可证自由迁移到其他服务器/域。

如果站点URL是以下任一项,则认为安装是开发环境:

  • 一个IP地址;
  • 没有TLD(例如localhost,local等)
  • TLD或子域名有一个典型名称(例如dev,test,local,stage,staging等)
  • 在白名单上(例如* .staging.wpengine.com)

WP Multisite环境中的子域和单个站点被视为不同的域/站点,您需要为使用LayerSlider的每个域/站点购买单独的许可证。唯一的例外是当您没有运行不同的网站并在同一安装中纯粹使用本地化或特殊着陆页的子域名。

我的购买代码在哪里?

您可以在购买时收到的电子邮件中找到您的购买代码。您也可以随时从CodeCanyon下载您的许可证书。只需导航到您的 下载页面,然后找到LayerSlider并选择 许可证书和购买代码 从下载按钮选项。您的购买代码位于下载的文本文件中。

购买代码
在CodeCanyon上下载您的许可证证书
购买代码
您的购买代码在下载的许可证证书文件中

为什么我的激活取消了?

尽管您可能有第一印象,但只有当您的网站未实际启用时才会显示此横幅。为了保持一致性,我们正在显示它,因为“卡住”激活可能会导致各种奇怪的症状,比如更新插件和下载模板等问题。这是一个自动错误检查机制,旨在通知您有关此问题。

如果您收到“LayerSlider产品激活已取消本网站”通知,请检查所有可能导致此问题的潜在问题:

  • 您移动了您的网站或您的域名已更改;
  • 您使用我们的在线工具远程停用了您的网站,或要求我们代表您做同样的事情;
  • 您的购买已退还或交易有争议;
  • Envato以未公开的理由撤销了您的购买代码;
  • 您的Envato账户由于持续的销售逆转而暂时停用 ;
  • 您的Envato帐户已被终止。

请注意,确切的情况可能与LayerSlider或我们没有直接关系,但是由您的Envato帐户的最近更改造成。在这些情况下,在任何持续争议解决后的几天内,您应该尝试重新激活插件。

如果上述任何原因都不能解释您的案例,并且您认为它发生错误,请通过打开支持通知单告诉我们 ,以便我们帮助您发现潜在问题并恢复产品激活。

重要提示: 请确保您使用的是最新版本的LayerSlider,并尝试使用该版本重新激活您的许可证。较新的版本总是包含很多错误修复,因此您可以消除可能相关的潜在问题。

我如何转让许可证或停用过去的网站?

停用您的网站

https: //kreaturamedia.com/reset-activations/

Envato支持 并寻求帮助以恢复您的账户或将购买转移到另一个账户。由于Envato是该市场的运营商,因此我们无法帮助您解决与帐户相关的问题。但是,如果您有确凿证据表明购买属于您,我们可能会帮助解决激活问题或提供购买代码。

故障排除

  • 如果您收到捆绑在主题中的LayerSlider,则无法使用主题的购买代码。有关更多信息,请阅读 上面的 主题包部分。
  • 如果产品激活不接受,请仔细检查您是否已正确输入购买代码。确认您没有意外地包含空格或其他周围的文字和字符。
  • 很少,我们/ Envato服务中的暂时中断也可能导致未识别的购买代码。请稍后再试。
  • 在某些边缘情况下,服务器的配置可能会阻止您的安装连接到我们的服务器。常见的症状包括 An unexpected error occurred 错误消息。如果您排除了其他可能性,值得向您的网络托管公司询问。另外,请检查 WP管理工具栏上的 LayerSlider – > System Status菜单,以确定您的网站上可能存在的问题。
  • 如果您的激活已取消,请参阅 为什么我的激活已取消? 部分。

更新插件

通过激活站点上的自动更新进行更新

激活后,LayerSlider更新将自动出现在您的网站上,就像任何其他WordPress更新一样。您可以检查Plugins 或 Dashboard – > Updates 页面上是否有新版本可用 。LayerSlider WP管理页面上还会显示一条通知,提供有关新版本的通知。

要访问早期访问版本,请在中选择Beta版本发布频道 产品激活 框。

购买代码
自动更新和网站激活设置的插图

手动更新插件

从CodeCanyon下载页面下载最新版本后,您可以停用并删除旧版本,然后安装新版本。您的滑块和设置位于数据库中,删除插件不会触及它们。您不必担心丢失工作,因为保持LayerSlider向后兼容是我们的首要任务之一,即使是真正的旧版本也是如此。

故障排除

  • 请注意,WordPress会在特定时间定期检查新的更新并缓存结果。即使有新版本可用,它也可能不会在激活后立即显示。
  • 我们的自动更新解决方案需要产品激活,并且仅适用于我们的直接客户,如 更新插件 部分所述。如果您Update package not available 在更新过程中收到 类似的错误消息,则可能是干扰第三方主题/插件的症状。每当我们注意到这样的问题时,我们都会不断通知并与各种作者一起工作。不幸的是,这些问题无法从我们的最终解决,临时解决方案是 手动更新 或临时禁用其他插件并切换到默认的WP主题。另一种可能性可能是卡住的激活。如果您使用我们的在线工具远程停用网站(或者要求我们代表您执行此操作),您的网站可能不再被激活。如果您的购买代码因退款或其他原因已被撤销,则情况也是如此。在这种情况下,停用您的网站,然后立即重新激活它可以提供帮助。
  • 保持LayerSlider向后兼容是我们的首要任务之一。但是,有时候主要更新会引入新功能和新设置,这些取决于它们的默认设置可能会稍微改变滑块。如果您遇到任何不必要的更改,检查滑块的设置总是一个好主意,可能有新的选项来控制这些更改。

管理滑块

行动 描述
添加一个新的滑块 按下 Add New Slider 位于LayerSlider管理页面顶部的 按钮。输入新滑块的名称后,该插件应导航到滑块构建器界面。
复制滑块 将鼠标悬停在滑块上,然后单击该图标以显示滑块操作,然后选择该 Duplicate 选项。这将创建相应滑块的相同副本。如果您想在不更改原始文件的情况下对滑块进行实验,则此功能非常有用。当您想要构建具有类似设置的滑块时,您还可以使用此功能获得基础。
删除滑块 将鼠标悬停在滑块上,然后单击该图标以显示滑块操作,然后选择该 Remove 选项。这只会隐藏所有页面的滑块,但数据库中的副本将作为备份保留。
恢复滑块 您可以使用页面顶部的过滤器列出已移除的滑块。点击还原图标()以恢复您的滑块。
永久删除滑块 从以前删除的滑块隐藏备份总是有用的。这不会影响您网站的效果,因此我们不建议永久删除滑块。但是,如果您决定这么做,只需选择滑块并在滑块Delete permanently 下方的下拉列表中选择该 选项。
合并滑块 如果您想要一起使用不同滑块的幻灯片,可以合并它们。只需选择适当的滑块并Merge sliders as new 从下面的下拉列表中选择 选项。
每页的滑块数量 您可以Screen Options 在页面顶部的菜单下找到该设置 。

导入滑块模板

按下 Templates Store 位于滑块列表之前的 按钮,以显示模板存储屏幕。

导入模板将允许您查看我们的设置并熟悉该插件。您可以找到简单和复杂的滑块来发现LayerSlider的功能。您可以自由地尝试使用这些滑块而无需担心,因为您始终可以导入新的未触摸的副本。

高级滑块模板作为您未来项目的起点特别有用。我们定期发布和更新高级模板。我们的目标是覆盖大多数用例,无论您是需要个人使用的滑块(例如家庭照片的幻灯片),还是希望将其用于商业网站或广告牌上。我们的选择包括零售店的很好的例子以及创意工作的模板。

“导入示例滑块”按钮的插图

故障排除

  • 检查LayerSlider -> System Status WP管理工具栏上的 菜单,以确定您的网站上可能存在的问题。
  • 导入我们的演示滑块需要在您的服务器上安装PHP ZipArchive扩展。要查看此扩展程序的可用性,请导航至 LayerSlider -> System Status。如果无法使用,请与您的网站托管服务提供商联系。
  • 导入滑块会将其图像添加到WP Media Library中。较大的滑块可能具有超过服务器上设置的上传限制的文件大小。要增加上传的最大文件大小,请联系您的网站托管公司。
  • 导入时,带有许多图像的较大滑块也可能消耗更多内存。大多数服务器不应该有较大的滑块的问题,但在某些情况下,您可能会遇到意想不到的问题,如部分导入的滑块。
  • 如果您在导入时遇到任何问题,则可能与服务器上的内存或执行时间限制有关。要解决这些问题,请联系您的网站托管公司,因为他们通常不提供远程更改这些设置的方法。

导入/导出滑块

导入滑块

在LayerSlider主屏幕的顶部按下 Import Sliders 按钮。这将打开一个模式窗口,您可以在其中选择以前导出的.zip或.json文件,通过按Import 按钮导入 。有关更多信息,请阅读模式窗口中的详细信息。

导入滑块按钮的插图

导出滑块

将鼠标悬停在滑块上,然后单击该图标以显示滑块操作,然后选择该 Export 选项。这将下载一个.zip文件,您可以在其他网站上传或用作备份。

您也可以导出多个滑块,方法是将鼠标悬停在复选框上,然后选择 出口 批量操作选项下方的滑块列表。请注意,选择包含图像的多个滑块可以大大增加导出的文件大小,并可能导致具有特定服务器设置的网站导入问题。

导出滑块的插图

故障排除

  • 检查LayerSlider -> System Status WP管理工具栏上的 菜单,以确定您的网站上可能存在的问题。
  • 导入滑块需要在服务器上安装PHP ZipArchive扩展。要查看此扩展程序的可用性,请导航至 LayerSlider -> System Status。如果无法使用,请与您的网站托管服务提供商联系。
  • 导入滑块会将其图像添加到WP Media Library中。较大的滑块可能具有超过服务器上设置的上传限制的文件大小。要增加上传的最大文件大小,请联系您的网站托管公司。
  • 导入时,带有许多图像的较大滑块也可能消耗更多内存。大多数服务器不应该有较大的滑块的问题,但在某些情况下,您可能会遇到意想不到的问题,如部分导入的滑块。
  • 如果您在导入时遇到任何问题,则可能与服务器上的内存或执行时间限制有关。要解决这些问题,请联系您的网站托管公司,因为他们通常不提供远程更改这些设置的方法。

使用Google字体

LayerSlider可以在fonts.google.com上加载由Google托管的自定义字体 。从您的WordPress管理工具栏选择LayerSlider – >选项,然后选择Google字体选项卡以查找相应的部分。使用编辑器加载的自定义字体将自动添加到您可以在Slider Builder中选择的预定义字体。

Google Fonts部分的插图

权限设置

从您的WordPress管理工具条上选择LayerSlider – > Options来查找权限设置。从那里您可以轻松选择任何用户角色。所选角色的成员将有权更改插件设置并管理滑块。通过选择自定义选项并输入功能,您可以更准确地定位用户。有关WordPress功能的更多信息,请阅读 Codex页面

权限设置的插图

关于高级设置部分

从WordPress管理工具栏导航到LayerSlider – >选项,然后选择高级选项卡。您可以找到许多疑难解答选项来解决您在网站上可能遇到的常见问题。

请注意,如果使用不当,这些设置可能会破坏您的网站,我们不建议更改默认设置。这些设置可能有助于解决由第三方项目引起的问题,但您只应在必要时使用它们。
高级设置部分的插图

系统状况

从WordPress管理工具条上选择LayerSlider – > Options,然后点击System Status按钮。系统状态旨在帮助您识别可能的问题并显示有关您的站点的相关调试信息。它还提供了列出每个服务器设置的工具,轻松设置调试帐户或删除所有插件数据。要了解有关使用系统状态的更多信息,请在导航到管理界面上的页面时按照屏幕上的说明进行操作。

 

开始使用滑块生成器

由于LayerSlider允许您构建专业级动画材质,因此它的滑块构建器界面起初可能有些压倒性。有很多选项可以控制内容的各个方面。这就是为什么重要的是要花时间并尝试通过以下技巧来了解基础知识:

  • 阅读工具提示: 几乎管理界面上的所有内容都可以通过工具提示显示更多信息。只需将鼠标光标移动到选项字段,按钮和其他界面元素上,这些内容的确切描述就会出现在工具提示消息中。
  • 使用预览模式: 通过按预览按钮,您可以立即看到您的工作正在进行。不要害羞改变设置。如果您不确定某个选项的工作原理,只需更改它并观察预览模式中的差异即可。预览图层时,您可以即时更改内容和设置,并立即查看更改,而无需在每次更改时跳入和跳出预览。
  • 使用滑块模板: 在Getting Started / Importing滑块模板下讨论 ,您可以看到我们如何构建我们的演示滑块以及我们用于实现某些动画的设置。您可以找到简单和复杂的滑块来发现LayerSlider的功能。不要害怕对这些样本进行更改,您随时都可以导入新的副本。高级滑块模板也可以作为项目的起点,因为我们专注于覆盖大多数用例。

滑块设置

这是LayerSlider在添加新滑块后导航到的页面。在此屏幕上,您可以设置常用设置,如滑块的大小,并自定义其外观或其他小节中的功能。

由于每个选项的说明都显示在管理界面上,因此我们不提供广泛的设置列表。请仔细阅读它们,以便您可以按自己喜欢的方式自定义滑块行为和外观。

滑块设置的插图

幻灯片默认值

当您使用幻灯片和图层时,您可能会注意到某些选项可以继承更高级别的值。图层可以从幻灯片继承选项值,并且以相同的方式,幻灯片可以从滑块范围的全局选项继承值。这使您有机会拥有一个主开关来控制某些设置。例如,您不必为每个幻灯片背景逐个设置尺寸模式,只需将它们留在该值上 inherit,然后在滑块设置中仅设置一个选项。我们在默认情况下使用了继承值,因为您不必为此而烦恼。请记住,您可以从中心位置控制某些选项。

默认幻灯片选项部分的插图

高级设置

滑块设置部分包含可以单独显示的隐藏选项。主要目标是消除用户界面上的混乱,因为这些选项控制过度特定的功能,或者它们意味着由有经验的用户使用。您可以使用右上角的开关显示这些选项。见下图。

高级幻灯片选项部分的插图

添加幻灯片

如前所述,由于管理员用户界面包含所有这些信息,因此我们没有本文档中所有可用选项的大量列表,您可以即时访问它们。只需将鼠标悬停在选项/按钮上,然后会出现一个工具提示来描述相关选项。

请注意,在保持空间效率的同时,我们会隐藏一些较少使用的选项。只需点击 显示更多选项 按钮,则可以显示每个幻灯片选项。

幻灯片列表和幻灯片选项区域

管理幻灯片

特征 描述
命名幻灯片 您可以通过在标签栏中双击其名称来重命名幻灯片。输入新名称,然后按 或点击离开以保存您的更改。
重新订购幻灯片 您可以通过在选项卡栏中抓取其选项卡并将其移动到预定位置来拖动和重新排列幻灯片。
重复的幻灯片 点击 Duplicate slide 按钮,使用完全相同的设置和图层制作当前幻灯片的新副本。如果您想在不影响实际工作的情况下进行副本试验,或者想要制作类似的幻灯片,则此功能非常有用。
隐藏幻灯片 隐藏幻灯片会将其从前端页面上的实际滑块中排除。这意味着您的访问者看不到它,但您仍然可以在Slider Builder中访问它。当您想要隐藏半成品幻灯片或保留较旧的幻灯片而不实际删除幻灯片时,此功能特别有用。请注意,目前无法在前端显示这些幻灯片,即使您使用自定义编码。
删除幻灯片 选择一张幻灯片并按 在相应选项卡的右侧。

关于幻灯片切换

LayerSlider提供200多个预定义的2D / 3D幻灯片切换。通过使用 Transition Builder ,可以根据自己的需要轻松扩展定制的。幻灯片切换只会使用幻灯片的背景图片,因为网页标准不提供“捕捉”滑块内所有内容的方法。请务必记住,图层不会用于幻灯片切换,即使它们看起来像背景图像。

3D转换才能正常工作需要现代Web浏览器。如果您选择任何3D转换,LayerSlider将优先于2D。每当访问者的机器无法显示特定转换时,该插件就有多个后退级别。一般来说,所有主流网页浏览器都支持2D转换。

链接幻灯片

链接幻灯片将使其整个表面可点击。您还可以链接图层以添加按钮或更小的控件。图层出现在幻灯片的顶部,如果您链接幻灯片和其中一个图层,将会获得优先级。

预览区域功能

预览区有许多隐藏功能,可以大幅度提高您的工作效率。

Slider Builder中预览区域的插图

添加图层

图层列表和图层选项区域

管理图层

特征 描述
命名图层 制作复杂的幻灯片需要很多层次。在制作幻灯片时对它们进行命名对于在它们之间快速导航非常有用。
重新排序图层 您可以通过抓取图层来拖动和重新排序图层 图标。当您使用重叠图层时,确切的顺序尤其重要,因为它控制着哪一层应该位于另一层之上。
锁定图层 使用。锁定图层 图标将禁用预览中的拖放功能,以防止它无意中移动。
隐藏图层 用图层隐藏图层 图标将使其在视觉编辑器和前端页面中不可见。当您想要保留图层供以后使用时,这非常有用,但是可以防止它在实际的滑块中显示。

图层类型

类型 目的
图片 显示图像。您可以上传新图像或从WP媒体库中选择一个现有的图像。您也可以从网址插入或从帖子中提取精选图片。
文本 这种图层类型应该用于大多数文本内容。您可以使用子控件选择图层的角色。不要将您的内容包装在HTML元素中,因为它会根据您的选择自动完成。除了<br>,<b>,<strong>,<i>,<u>和其他通用内嵌文本格式元素外,您不应在此字段中使用任何HTML代码。
HTML 您应该选择这种类型的图层来使用自定义HTML内容或WordPress简码。请注意,图层内容将自动放置在<div>元素中,因此不需要插入包装元素。为了使用语义HTML,您可以在文本类型下选择多个元素角色,而不是不必要地使用HTML。
视频/音频 该图层类型保留用于多媒体内容。如果您想嵌入YouTube,Vimeo或HTML5视频/音频,请选择它。在将多媒体内容放入HTML图层的较旧滑块中将继续正常工作。但是,要利用LayerSlider 6中引入的新多媒体设置,您需要更改图层类型。
动态内容 如果要使用从WP帖子和页面动态获取的内容,请选择此类型的图层。有关 更多信息,请参阅 使用Slider Builder / Dynamic Layers部分。

设备支持

通过动态显示和隐藏图层,可以在同一滑块中为不同设备构建多个布局。随着 在以下设备上显示此图层 按钮,您可以选择当前所选图层出现在哪些设备上。

选择要显示的图层的设备
图标 角色 标准
在桌面电脑上显示/隐藏图层。 屏幕宽度> 1024px
在平板电脑上显示/隐藏图层。 屏幕宽度> = 768px,<= 1024px
显示/隐藏手机上的图层。 屏幕<= 767px

嵌入视频

LayerSlider支持开箱即用的YouTube,Vimeo和自托管的HTLM5视频/音频。我们为这些解决方案集成了许多功能,例如设置自动播放,预览图像,音量和其他控件。他们还会在播放时自动暂停并恢复播放幻灯片。

只需选择 Video / Audio 图层类型即可嵌入多媒体内容。对于YouTube和Vimeo视频,您需要将其网站中的嵌入代码粘贴到文本字段中。否则,请点击 Add Media 按钮添加自托管的HTML5视频或音频。

要使用HTML5自托管视频/音频,请确保您使用的是此处所述的支持的媒体格式 。我们推荐使用 MP3 要么 AAC采用MP4 对于音频和 WebM中的VP8 + Vorbis 要么 H.264中的MP4 + MP3 / AAC 视频。支持的格式可能因浏览器而异,但如果需要,还可以通过按住Ctrl / Cmd键并从WordPress媒体库中选择多个项目来提供多种格式。

目前我们不支持其他媒体播放器,因为这些解决方案都有自己独特的API来控制媒体播放。但是,具有Web开发经验的用户可以使用 LayerSlider API 检测滑块事件并运行自定义代码来控制第三方媒体播放器。

使用WP简码和交互式内容

确保将WP短代码或其他交互式内容(例如Google地图嵌入,自定义脚本等)添加到 HTML 图层中。简码只会显示在前端页面上,所以如果滑块生成器界面没有显示您期望的结果,请不要害怕。

使用高度依赖Javascript的交互式内容可能会有问题,并且可能无法正常工作。由于我们无法在其他人的代码中解决每个可能的问题,因此可能会破坏一些简码和嵌入。

值得一提的是,在响应模式下,LayerSlider只能缩放图层元素以获得额外的性能。里面的内容应该自己调整尺寸的变化。虽然这在大多数情况下会自动发生,但短码和复杂的HTML可能无法与滑块同步调整大小。

层转换

这是您可以构建图层转换的地方。由于LayerSlider提供了很多选项来定制您工作的每个方面,因此本节可能首先令人望而生畏。但是,通过遵循前面提到的提示,每个人都可以快速轻松地学习它:

  • 阅读工具提示: 几乎管理界面上的所有内容都可以通过工具提示显示更多信息。只需将鼠标光标移动到选项字段,按钮和其他界面元素上,这些内容的确切描述就会出现在工具提示消息中。
  • 使用预览模式: 通过按预览按钮,您可以立即看到您的工作正在进行。不要害羞改变设置。如果您不确定某个选项的工作原理,只需更改它并观察预览模式中的差异即可。预览图层时,您可以即时更改内容和设置,并立即查看更改,而无需在每次更改时跳入和跳出预览。
  • 使用滑块模板: 在入门/导入滑块模板下讨论 ,您可以看到我们如何构建我们的演示滑块以及我们用于实现某些动画的设置。您可以找到简单和复杂的滑块来发现LayerSlider的功能。不要害怕对这些样本进行更改,您随时都可以导入新的副本。因为我们专注于覆盖大多数用例,所以高级滑块模板也可以作为项目的起点。

有多种类型的动画,您可以通过单击标题或图标来查看其中的一种。在每个部分中,您可以找到它的作用和使用时间的描述。为了清楚起见,我们制作了动画插图,您可以通过将鼠标悬停在图标上进行查看。绿色高亮显示图层正在使用哪种过渡类型,而缩放(较大)图标显示当前打开的过渡部分。

图层转换选项的插图

链接图层

您可以在其Link & Attributes 选项卡下链接一个图层 。输入一个URL并设置是否要在当前页面或新标签页/窗口中打开它。

智能链接也可用于通过预定义的特殊链接控制幻灯片和滑块导航。只需在链接字段中输入以下内容之一,链接的内容就会自动执行相应的操作。

链接 行动
#开始 从暂停状态恢复幻灯片放映。
#停止 停止幻灯片放映,因此滑块不会离开当前幻灯片。
#prev 回到上一张幻灯片。
#下一个 前进到下一张幻灯片。
#重播 重新开始幻灯片,从头开始重播所有图层转换。
#相反 播放幻灯片和所有向后转换,然后在幻灯片的开头暂停。
#反向重播 播放幻灯片和所有向后转换,然后继续正常播放幻灯片。
#closepopup 关闭 弹出窗口
#{N} 跳转到指定的幻灯片。更换 {N} 部分带有幻灯片号码。例如,#3将切换到第三张幻灯片。请不要在散列标记和您的电话号码之间加入空格。

图层属性

您也可以在同一部分的图层上应用常用的属性(例如唯一的ID或类)。这些设置适用于具有Web开发经验的用户,他们希望使用自定义编码实现可视化编辑器无法提供的自定义级别。

除了预定义的属性列表之外,还可以添加自己的属性。在自定义属性部分,您可以输入任何属性名称,包括预先定义的属性名称以覆盖它们。许多第三方插件使用自定义属性,如果您想 在LayerSlider图层上设置FancyBox图像库,则此部分很重要 。

图层样式

在 Styles 图层选项卡下,您可以找到常用的格式选项来自定义其外观。我们强烈建议您尽可能使用这些设置,而不是将不必要的HTML代码添加到图层的内容中。

这也是您可以使用Left 和 Top 选项设置图层的位置的位置 。虽然您可以使用可视化编辑器来移动图层,但为了达到像素完美的效果,在此优化它们通常会更好。

图像编辑器

借助Adobe的Creative SDK,LayerSlider 6现在具有内置的图像编辑器。您可以执行常规任务,如调整大小,裁剪,旋转图像,以及照片修饰,添加框架,文字,效果,贴纸等等。这就像一个迷你Photoshop。

查找 任何图像选择器按钮左上角的 图标,以使用当前选定的图像启动编辑器。

图像编辑器按钮的插图
图像编辑器的插图

Popout编辑器

LayerSlider 6的主要设计目标之一是能够在预览区域正常工作,而不必不断地上下滚动以更改设置。除了键盘快捷键,我们还添加了一个 Pop out editor 按钮,它将图层选项转换为浮动窗口,可以调整大小并放置在任何位置。这使得在一个地方编辑所有内容变得非常容易。

弹出窗口编辑器的插图

时间线

时间轴功能可用于一次查看幻灯片上发生的所有层转换。颜色标记的标记清楚地显示何时发生。您甚至可以抓住播放头并按照自己的节奏来回播放片段。

幻灯片时间线的例证

来自帖子的动态图层

动态图层设置的插图

您可以使用帖子占位符来提取个人发布信息。这些工作与WordPress简码非常相似。您可以在图层的内容区域中输入一个或多个占位符,然后LayerSlider会自动将它们替换为来自帖子的适当内容。你甚至可以将它们与静态内容混合。例:

这篇文章是由[作者]在[日期发布]上
撰写的这篇文章由管理员于2015年3月13日撰写

多语言滑块

如何翻译管理员用户界面?

  1. 下载PoEdit有几个应用程序可以帮助您翻译.PO文件。PoEdit是一个很受欢迎的软件,它在每个主要平台都可用。你可以从这里下载 。
  2. 开始翻译从“/ wp-content / plugins / LayerSlider / locales /”文件夹中打开默认的LayerSlider-en_US.po文件。当您保存您的工作时,PoEdit会生成一个.MO文件,这将用于应用您的工作。
  3. 正确命名您的文件 WordPress可以通过特殊格式的文件名识别您的本地化。您需要包含正确的 语言国家 代码,以便识别您的工作语言。例如,法文本地化将具有文件名:LayerSlider-fr_FR.po和LayerSlider-fr_FR.mo。您必须遵循此语法,包括短划线,下划线和小写或大写字母。
  4. 应用您的本地化将新创建的.PO和.MO文件复制到“/ wp-content / plugins / LayerSlider / locales /”文件夹中。如果您正确命名了文件,WordPress应立即使用它们。

使用qTranslate创建多语言滑块

qTranslate(及其后续版本,qTranslate X)是在LayerSlider中创建多语言滑块的最简单方法之一。它是一个免费且简单的插件,支持类似短代码的语法以多种语言输入文本,因此可以为访问者显示正确的插件。LayerSlider支持图层内容中的短代码和其他特殊语法,因此您可以输入如下内容创建多语言滑块:

[:en]English text[:de]German text

如果访问者选择了英文页面,则上面的行将输出“英文文本”,如果访问者选择了德文,则输出“德文文本”。您可以在WP.org 插件页面上阅读更多关于qTranslate的信息 。

不要忘记在主LayerSlider管理页面的Advanced选项卡下禁用“Use slider markup caching”选项。由于技术上的困难,无法在缓存副本中动态显示多语言内容。如果您保持启用缓存,您的滑块总是可以显示相同的语言字符串。

使用WPML插件进行翻译

您需要WPML的“多语言CMS”版本以及已安装的WPML字符串翻译插件。

点击这里阅读他们的指南。

不要忘记在主LayerSlider管理页面的Advanced选项卡下禁用“Use slider markup caching”选项。由于技术上的困难,无法在缓存副本中动态显示多语言内容。如果您保持启用缓存,您的滑块总是可以显示相同的语言字符串。

键盘快捷键

当您与表单元素进行交互时,键盘快捷键可能不起作用,因为在键入文本字段时,许多键具有特殊含义。为了避免任何问题,一些快捷方式将被禁用,直到表单元素失去其焦点状态(即围绕它的发光环)。为了克服这个不便,只需按下 。这将使您正在使用的表单项目不重定位,并重新启用所有键盘快捷键。

滑块修订版

LayerSlider 6.3.0引入了一个新的高级功能:修订。请放心,因为您的滑块编辑总是安全的,您可以随时恢复不需要的更改或错误的保存。该功能不仅可以作为备份解决方案,而且还可以作为一个完整的版本控制系统,您可以直观地比较您在此过程中所做的更改。

将滑块恢复到较早版本会将另一个快照添加到修订版本,如果您改变了主意并且宁愿返回到原始副本,也可以恢复该版本。Slider Revisions也保存了撤消/重做控制。即使没有完美的快照,您也可以撤消中间的更改以找到您要查找的内容。

查找Slider修订选项的插图。
还有一种方法可以用短代码覆盖“启动幻灯片”选项。使用 firstslide 简码参数,即使滑块具有不同的设置,也可以强制嵌入滑块以指定的幻灯片开始。当您想要多次嵌入相同的滑块来显示不同的幻灯片时,此功能特别有用。在下面的例子中,我们迫使滑块从第二张幻灯片开始: [layerslider firstslide=”2″]

编辑器助手实用程序

我们还在WordPress文本编辑器工具栏中添加了一个小工具。它会弹出一个模式窗口与最近的滑块可供选择。选择滑块并根据需要更改嵌入选项后,按下“插入后”按钮将相应的简码放入编辑器中。请参阅下面的插图。

找到LayerSlider简码
在WP Post和Pages中使用简码的插图
通过简码工具插入滑块
使用LayerSlider编辑器工具列出并插入滑块

这里 是关于将您的主题widgetizing的官方文档。但是,这需要Web开发知识,我们不建议没有经验的用户。

对于高级自定义,您可以在小部件设置中输入自定义过滤器来控制滑块应显示在哪些页面上。阅读 使用过滤器 部分了解更多信息。

通过在“覆盖开始幻灯片”选项字段中输入自定义值,即使滑块具有不同的设置,也可以强制嵌入滑块从指定幻灯片开始。当您想要多次嵌入相同的滑块来显示不同的幻灯片时,此功能特别有用。

使用LayerSlider WP Widget插入滑块
使用LayerSlider WP Widget插入滑块。

方法3:页面构建器,Visual Composer

主题中的大多数页面构建器都支持嵌入LayerSlider滑块。无论您使用的是自定义解决方案还是Visual Composer这样的流行插件,都有可能通过LayerSlider使用它们。

可以为LayerSlider提供专用的模块/块/小部件,也可以按照第一种方法中所述的相同方式插入简码。

如果您遇到任何问题,请查看您的页面构建器提供的可用选项。由于每种解决方案的设计和行为都不相同,因此没有通用的指南。您也可以考虑只使用方法1和2中分别介绍的更简单的方法,如简码和小部件。

用Visual Composer插入滑块。

检查LayerSlider WP滑块列表页面上相应的滑块ID很重要。当你删除一些滑块时,它们的ID将不会被重新编制索引,并且您期望的序列可能会分解。这对数据一致性很重要。

发布弹出窗口

关于弹出窗口

LayerSlider是拥有多年背后经验的完善产品。结合我们强大的基础和我们已经与新推出的Popup插件拥有的大量功能,使得LayerSlider成为弹出式插件中的最佳选择之一。您在滑块中使用的所有功能也可以在Popups中使用。这包括我们功能丰富的图像和内容编辑器,多语言弹出窗口,来自WP帖子的动态内容以及LayerSlider的动画功能。

此外,LayerSlider Popup插件还附带了各种新选项,用于微调外观并控制何时以及如何显示弹出窗口。使用设计精美的动画横幅,通过订阅电子报或其他优惠活动,在您的网站上迎接新访客。当他们变得空闲时显示一条消息。在离开网页或阅读完文章之前向他们显示推荐的内容。有很多可能性,并且LayerSlider的所有内容创建和动画功能都可以让您从众人中脱颖而出。

点击这里获取更多信息和现场示例

Popup设置的插图。

嵌入弹出窗口

弹出窗口可以像传统滑块一样嵌入到页面中。发布滑块中描述的任何方法 都可以工作。我们还提供了一种新方法来微调如何以及何时显示Popup。请参阅下一节以了解如何使用自动包含功能。

使用自动包含功能

鉴于Popups的本质,您可能希望将其包含在多个页面中,并对其出现的时间和对象进行微调。尽管包含滑块的常规方法的工作原理相同,但您可能希望使用专门用于弹出窗口的自动包含功能。

下面介绍的功能只适用于自动包含方法。如果您使用其他方法(如短代码,小部件,页面构建器或PHP函数),Popup将始终显示。
  • 选择您的目标网页: 在目标网页部分,您将看到一些预定义的选项,以选择弹出窗口应显示在哪些页面上。通过关闭所有页面,可以选择更多选项来选择将Popup包含在哪里。通过在包含自定义页面文本字段中输入逗号分隔的页面ID,标题或slu list的列表,您可以添加单个页面。还有一个选项可以用相同的方式排除页面。
  • 选择您的目标受众: 选择您想要显示弹出窗口的角色和用户组。您可以选择仅针对已注册或未注册的用户显示您的作品,或者甚至仅针对首次访问者。
  • 设置重复: 如果您只想向访客显示一次Popup,请禁用重复弹出选项。启用“重复弹出”选项,如果要在每次页面加载时显示弹出窗口,请将#天后重复选项保留为空。或者,您可以输入0到365之间的值,以在指定的天数过去之后重复。
  • 微调你的工作: 不要忘了查看Launch Popup部分,设置触发器来控制Popup何时可见。您还可以使用我们在此未提及的其他设置来微调Popup其他方面的外观。

附加功能

正如 链接层 部分所述,#closepopup 如果您想要设计具有独特外观和转场的自己关闭按钮, 智能链接可以非常有帮助。连接幻灯片的整个表面时,该选项也可用。

或者,您可以将 ls-close-popup-button 类名称应用于滑块内的任何元素以实现相同的目标。

如果在同一页面上有多个弹出窗口,则可能需要一个按钮将其全部关闭。在这种情况下,只需ls-close-all-popups-button 在页面上的任何元素上应用 类名称即可。

故障排除

  • 我的弹出窗口不显示: 查看启动弹出窗口部分并确认您设置了触发器。同时检查重复控制选项。您以前可能已经看到了Popup,并且没有正确的重复设置。根据目标网页和目标受众群体设置,确保弹出窗口对您和您测试它的页面可见。此外,请查看您是否选择了滑块设置 – >布局下的弹出选项。Popup是一项高级功能,如果您尚未完成,它还需要产品激活。
  • 我的弹出窗口显示为常规滑块: 确保您选择了滑块设置 – >布局下的弹出选项。如果没有这些,你的作品将会以常规滑块的形式显示,或者根本不显示。
  • 我可以使用相同的滑块作为弹出式和常规滑块吗? 不,Popups有不同的布局选项,这会使它变得非常不切实际。但是,如果您正在寻找解决方法,则可以复制滑块滑块并使用稍微不同的设置。
  • 我如何在Popups中使用表单,电子邮件订阅等? 目前,LayerSlider不提供表单构建或电子邮件订阅功能。但是,您可以使用第三方解决方案来实现这些目的。LayerSlider可以识别短代码,只需创建一个HTML图层并粘贴您选择的任何第三方插件的简码。这使您能够结合和使用两个世界的最佳而不妥协。
  • 您是否跟踪展示次数和其他统计信息? 我们计划在未来的更新中引入这样的功能。在此之前,您可以嵌入自定义HTML和WordPress简码,因此不应该有障碍使用您选择的第三方解决方案。
更新于 2018年12月4日

帮到你了吗?

相关文章