泉州做网站:如何使用Divi代码模块向站点添加浮动操作按钮

2019.04.29 |
标签

Divi代码模块可能是Divi中最误用的模块之一.作为这里优雅主题的前端开发人员,我想利用今年的机会来改变这一点。我的目标是全年使用这篇文章和其他文章,通过为代码模块的使用提供资源和教程,激励人们更多地使用代码模块。从今天开始!

泉州做网站在今天的文章中,我将向您展示如何使用Divi代码模块和我创建的代码生成器来向您的网站添加一个浮动操作按钮。

我们跳进去!

使用代码生成器

泉州做网站在这篇文章中,我将利用我为Divi社区创建的代码生成器。此代码生成器所做的是从给定的代码页编译代码,并导出一个代码块,该代码块将在Divi代码模块中正常运行。

泉州做网站

使用它的机制再简单不过了。您所要做的就是复制您创建的代码库(或其他人为在Divi中使用而创建的代码),并将其粘贴到生成器顶部字段的空间中。然后单击蓝色的“生成”按钮。

CodePen Code Generator 2

这将使用在Divi代码模块中使用的代码块填充下面的文本框。您还会注意到蓝色按钮现在显示“复制代码”。再次单击它,将编译后的代码复制到剪贴板中,以便方便地粘贴到所需的Divi代码模块中。

使用Divi代码模块向Divi网站添加浮动操作按钮

订阅我们的YouTube频道

上面的代码是一个浮动动作按钮的例子。当您悬停在它上时,它会显示文本和链接。在这种情况下,它是一个“关于”按钮与我的形象和链接到我的网站。但是,您可以编辑它以显示您的图像、文本和选择的链接。

以下是如何:

首先,如果您还没有一个,创建一个免费的代码帐户。接下来,导航到“关于Fab”的密码我创造了。

泉州做网站在html选项卡中,找到以下代码行:

<img alt="Andy Tran" src="https://en.gravatar.com/userimage/64217327/096c4ecedf5cf0259c707b7f5255246d.jpg?size=200" />

将src链接替换为指向所选图像的链接。你可以像我一样使用你的凹版链接,或者你可以上传一个图片到你的WordPress安装和使用媒体库链接。您还应该更改ALT文本以反映您所选择的图像。

接下来,找到这一行html:

<h2>Andy Tran</h2>

在这里放任何你想要的短信。如果您只是将图像更改为自己的形象,那么请将您的名字放在这里。

最后,找到这一行html:

<a href="https://andytran.me/">https://andytran.me</a>

将链接更改为所需的链接和描述性文本。

一旦您的所有更改都已完成,请按命令+s拯救。这将自动创建一个副本,我的原始代码在您的帐户下,但与您的更改。

现在你可以复制你的新编辑代码的网址了,我在这里创建的发电机.

在你按下蓝色的“生成”按钮并复制代码后,头转到你的Divi网站上你想要你的新的浮动动作按钮被显示的页面。

在该页的第一个标准部分中,添加一个代码模块。

add-code-module

泉州做网站在该代码模块中,粘贴复制的代码并单击“保存”。

paste-code-into-code-module

更新页面并查看结果。

floating-action-button-divi-code-module-final

添加浮动操作按钮站点范围

如果您希望同时将创建的浮动操作按钮添加到所有Divi页面,则非常简单。与其将生成的代码粘贴到代码模块中,不如导航到divi>主题选项>集成>向博客的<head>添加代码把代码粘贴在那里。保存更改并在前面查看。浮动动作按钮现在应该显示在右下角的所有页面!

泉州做网站

此时,我可以听到你们中的一些人问:“如果这是可能的,为什么要通过代码模块将它添加到一个页面中呢?”

通过以我前面展示的方式使用代码模块,而不是站点范围内的选项,您可以在特定页面上放置自定义按钮-希望能得到更高的点击率-基于为该帖子或页面定制的消息传递率。

更多的军士来了!(及关于使用其他守则的注)

泉州做网站创造了更多这样的笔,专门用于Divi。我计划在开发计划允许的情况下,通过博客帖子分享这些信息。如果您对创建一个与Divi一起工作的笔感兴趣,并且可以使用生成器轻松地添加到代码模块中,那么只需简单地创建您的笔,记住使用Divi的样式可能导致的潜在CSS冲突。例如,在上面的笔中,我使用了‘at-’前缀来防止任何可能发生的冲突。

我希望你喜欢这个教程,我知道我期待着分享更多的代码模块教程今年!如果您有请求,请将它们放在下面的注释中。

一定要订阅我们的电子邮件通讯YouTube频道这样你就不会错过一个重大的公告,有用的提示,或Divi免费!


相关推荐

最新文章

热门推荐

联系电话 400-6065-301

微信咨询 寒总监