您所在的位置:佛山网站建设 > 网站设计

珠海企业网站建设:divi插件突出显示

发布时间:2019.05.06

作者:珠海企业网站建设

点击量:1423

【导读】
divi overays是DiviLife的一个插件,DiviLife是一个由社区成员TimStrifler开发的第三方Divi开发公司。它允许您使用DiviBuilder轻松地创建弹出窗口。这不仅仅是一种模式。您可以创建全屏覆盖,并添加任何类...

divi overays是DiviLife的一个插件,DiviLife是一个由社区成员TimStrifler开发的第三方Divi开发公司。它允许您使用DiviBuilder轻松地创建弹出窗口。这不仅仅是一种模式。您可以创建全屏覆盖,并添加任何类型的内容,在覆盖使用DiviBuilder,然后触发它与任何在页面上,包括按钮,链接,图像等。您可以调整背景色、字体颜色,并选择开始动画。

覆盖可以包括表单、定价表、购物车、视频、图像、下载链接、地图等等。您甚至可以将其设置为在页面加载时打开覆盖。它们允许您显示其他内容,而不必等待页面加载。

当然,使用DiviBuilder的能力意味着您可以访问每个模块和设置来创建覆盖。这意味着您可以访问近40个模块,并且可以使用来自其他插件的短代码。通过访问这个数量模块,您只会受到想象力的限制。

下载:divi覆盖下载

珠海企业网站建设在这个概述中,我将看一下1.1版,它包含了客户所要求的一些新特性。最后,我将介绍一些您可以在2.0版中看到的特性。作为示例,我使用的是多用途线框套件卷。一。让我们挖…

安装

上传,安装和激活插件,就像任何高级插件一样。珠海企业网站建设一旦激活,您将需要输入您的许可证密钥。去设置并选择重叠激活在仪表盘里。

输入API密钥和电子邮件(从DiviLife的帐户)并选择保存更改。现在,您已经准备好开始创建覆盖。

添加新的Divi覆盖

这些覆盖与内容分开创建,然后使用简单的代码从内容中打开。

若要创建覆盖,请转到divi覆盖并选择添加新在仪表盘里。珠海企业网站建设在这里,您可以选择使用DiviBuilder。这与使用DiviBuilder的任何普通页面或帖子一样,包括特殊的Divi插件和模块,您甚至可以使用Divi引线运行A/B测试。它们甚至在一个全局模块中工作。您还可以导入和导出您的覆盖。

从右上角的下拉框中选择叠加动画和设置。在DiviBuilder下面是一个背景和字体颜色的选择。

珠海企业网站建设

一些设置被添加到右侧。一个名为Divi重叠动画的框包括一个下拉框,您可以在其中选择11个动画。这决定了覆盖在屏幕上的显示方式。

添加了一个复选框,以防止在屏幕上覆盖时主页面滚动。这使用户在屏幕上的相同位置,所以当他们关闭覆盖时,他们知道他们在哪里。如果他们点击多个按钮中的一个来打开覆盖层,这就特别有帮助了。这样,他们就知道他们点击了哪个按钮,而不会失去他们在屏幕上的位置。

我添加了一个视频模块,并选择了Genie作为覆盖动画,并选择了防止主页面滚动。

现在我已经创建了覆盖,我可以在页面上使用它。要做到这一点,请到divi覆盖在仪表板中选择divi覆盖若要查看可用覆盖的列表,请执行以下操作。要使用覆盖,复制要使用的代码并将其粘贴到适当的位置。让我们详细看看如何做到这一点。

链接是使用CSS ID创建的。复制CSS ID并添加一个开头<a id=并关闭</a>标记,如示例所示。

珠海企业网站建设在这个例子中,我使用了一个登陆页面。我想添加一个触发器到文本,应用商店的标志,到电话图像,创建一个按钮,并在菜单中放置一个链接。

文本链接

珠海企业网站建设

复制内容短码并将其粘贴到页面上的代码或文本模块(任何接受短代码的模块)中。我把它粘贴到一个代码模块中。您可以在此模块中放置任意数量的Divi覆盖短代码。你把模块放在哪里并不重要。我建议您进行测试,以确保模块不影响您的布局。

我想使用文本观看演示作为一个链接打开视频。为此,请从仪表板屏幕的覆盖列表中复制CSS ID。

将代码粘贴到文本模块中,并将文本格式化如下:

<a id="overlay_unique_id_211154">WATCH A DEMO</a>

在这种情况下,文本已经嵌入到一些HTML中,但这没关系。只需将代码放置在HTML中的正确位置即可。

文本现在是蓝色的,以显示它是一个链接。

当我点击文本时,我会看到我在覆盖层中放置了一个链接的视频。覆盖是用我选择的动画打开的。

图像链接

有两种方法可以将CSS ID添加到图像中。应该使用的方法将取决于图像在内容中的放置方式。以下是两个例子:

文本模块

我想让应用商店的图像点击,但不是带你去应用商店,我希望它提供一些选项和信息。这需要一个新的覆盖,这也需要一个新的短代码在代码模块内。

现在,珠海企业网站建设当我点击应用程序的标志,我得到了一个与两个不同的应用商店链接覆盖。为了更好地使用UX/UI,我将更改按钮的图形,但这显示了在保持内容整洁的同时提供多个选项的潜力。在本例中,我将覆盖背景设置为白色,透明度为90,字体颜色设置为深灰色。

图像模块

在上面的示例中,我将代码添加到HTML中,因为图像被放置在文本模块中。另一个选项是将图像放在图像模块中,并在自定义CSS标签。

在此布局中,移动电话位于图像模块中。我将添加CSS ID,以便打开视频覆盖。

链接URL使用#打开-覆盖(或类似的文本与#符号)。现在我可以点击图片并打开一个覆盖。

按钮链接

将叠加链接添加到按钮与将其添加到图像中是一样的。请记住将短代码添加到代码模块中。

将#text添加到按钮的URL中。我和以前一样使用#open-overage,因为它是描述性的(我从TimStrifler那里偷了它,但不要告诉他)。

将CSS ID代码添加到自定义CSS标签。

珠海企业网站建设

就这样!新按钮现在打开联系人表单。

菜单链接

若要创建菜单链接,请复制菜单ID然后去容貌, 菜单,然后选择要向其添加链接并加载它的菜单。(见本文如何在WordPress中创建自定义菜单结构以获取更多信息)。

选择屏幕选项在右上角选中标有标签的框。链接关系(XFN).

选择自定义链接。添加#符号作为链接,添加希望它显示的文本,然后选择添加到菜单。将菜单ID粘贴到链接关系字段并保存菜单。确保将菜单分配到下面的显示位置菜单设置如果你还没有。在本例中,我已将其设置为主菜单.

菜单项现在出现在菜单结构中。点击它将打开覆盖层。这具有在导航结构和站点范围内提供CTA(调用操作)的优点。

小部件

插件还包括一个新的小部件区域。使用小部件和任何其他方法的不同之处在于您放置短代码的位置。与其将短代码一遍又一遍地放在模块中,您还可以将其放置一次,使其成为全局的。然后,您可以从任何页面上的任何项、侧边栏、主菜单或页脚菜单中触发它。

这是我从多用途线框套件卷。一。我想让按钮点击,这样它就会打开视频在一个覆盖。我将我的短代码添加到小部件区域(通过将它们放置在文本小部件中),并将CSS ID添加到页面上的图像中。

小部件中的短代码工作时,小部件甚至是不可见的。我不需要在页面上放置一个侧边栏,也不必在页脚中放置任何小部件。它之所以工作是因为这个新的小部件区域在幕后加载。如果您在这个小部件区域中删除其他小部件,它们将显示在页面的左上角。默认情况下,短代码不显示为文本,因此小部件可以保持不可见性。

关闭覆盖层

可以通过单击覆盖层的背景或单击转义键来关闭覆盖层的X。

另一种选择是向覆盖范围内的链接添加一个关闭类。使用此方法,您可以创建一个关闭按钮或文本。这使您可以向CTA添加一个Cancel按钮或使Close按钮更加可见。

关闭类如下所示:

类=“关闭-divi-覆盖”>“不,谢谢”。

2.0版

下面是一些值得期待的特性:

时间延迟功能将允许覆盖打开基于设定的时间,在页面加载后,让读者看到您的内容在自动打开覆盖之前的特定时间。

像素特性将根据滚动的像素数或滚动页面的百分比打开覆盖。

当读取器选择后退按钮或将光标放在地址栏上时,另一个选项将打开覆盖。

文献资料

文献资料在分部的网站上提供。它包括概述和例子,您可以使用插件的各种方式。文档包括文本、视频和示例代码。

定价

divi覆盖是优质插件。在一个网站上使用它需要花费15美元,在三个网站上要花费29美元,对于无限网站要花费59美元,在终身无限制许可上要花费129美元。每个许可证都包含所有的核心特性和文档。前三年包括一年的更新和支持,而最后一个包含终身更新和支持。

最后思想

divi覆盖是使用DiviBuilder创建覆盖的一种很好的方法。DiviBuilder允许您使用Divi模块或其他插件的短代码向覆盖层添加几乎任何类型的内容。很难想象Divi覆盖无法创建的覆盖。珠海企业网站建设确实需要几个步骤来在需要的地方添加代码,但是这样做很容易,文档也会让你通过它。回报远远超过了学会使用它所需的几分钟。


【版权申明】

本文章由佛山网站建设公司极简慕枫整理收集与网络,不代表本网站观点。如果你想了解更多关于佛山网站设计,企业网站建设的文章,请访问佛山网站设计板块,为客户免费提供优化方案。

原创文章,作者:极简慕枫,如若转载,请注明出处:http://www.jhszjm.com/newsshow-19-582-1.html
联系电话 400-6065-301

微信咨询 寒总监