嘿迪维国家!我回来了另一支笔与您分享,这将添加一个浮动动作菜单到您的Divi网站。杭州网页制作将向您展示在您的站点上实现它的两种不同方法。第一种是利用Divi的代码模块,我希望在今年更多地鼓励它,第二种是使用Divi的主题选项。
如何添加代码

以下是如何将上述笔添加到Divi网站的单个帖子或页面中:
首先,确保您已经创建了一个免费的codemen.io帐户并登录。只要不到一分钟,你就可以起来跑步了。所以别担心,这是无痛的。一旦您登录到您自己的帐户,导航到我为本教程创建的笔,浮动动作菜单.
按“命令+s”将笔保存在您自己的帐户下。你应该会看到左上角的“一支笔”下的名字被更改为你的名字。既然你已经把钢笔复制到你的帐户上了,你就可以编辑它了。
杭州网页制作在html面板中,首先定位这一行代码:
<img alt="Andy Tran" src="https://en.gravatar.com/userimage/64217327/096c4ecedf5cf0259c707b7f5255246d.jpg?size=400" />
编辑这一行将更改配置文件图像。将ALT文本更改为您的名称,并将src链接更改为您自己的Gravatar映像。您还可以使用上传到WordPress网站的照片的图像链接,方法是导航到媒体库,编辑照片,然后将该图像的链接复制到上面所示的src空间中。
接下来,我们将通过编辑这行html来更改配置文件映像旁边的名称:
<h2 class="at-floating-navigation__title">Andy Tran</h2>
把“AndyTran”换成你自己的名字。
接下来,我们将通过更改这一行代码中的链接来更改文本的链接“查看概要文件”:
<a href="https://andytran.me">View Profile</a>
一旦完成,我们就可以继续更改菜单项设置、帮助桌面和注销的链接。
<a class="at-floating-navigation__item" href="https://andytran.me">Settings</a>
<a class="at-floating-navigation__item" href="https://andytran.me">Help Desk</a>
<a class="at-floating-navigation__item" href="https://andytran.me">Log Out</a>
因此,您也可以通过更改“设置”、“帮助台”和“注销”来更改菜单项本身。
当所有编辑完成后,再次按“命令+s”保存。然后复制页面url和转到我创建的代码生成器要将此代码编译为单个易于粘贴的代码块,请执行以下操作。

将url粘贴到url字段中,然后单击蓝色“Generate”按钮。现在,您将看到下面的代码块,蓝色按钮现在会说“复制代码”。再次单击蓝色按钮将代码块复制到剪贴板。
我们现在已经准备好将我们创建的动作菜单添加到我们想要的Divi POST或页面中。将代码模块添加到您希望浮动操作菜单出现的POST或页面中。代码模块位于何处并不重要。

打开代码模块并粘贴到从代码生成器复制的代码中。保存更改,并在完成后更新文章或页面。

然后,继续检查结果!

如何在范围内添加浮动操作菜单站点

如果您希望新的浮动操作菜单出现在整个站点上,而不是单个页面或帖子,请右击关闭新代码模块,并在WordPress Admin中导航到divi>主题选项>集成.
杭州网页制作将从代码生成器复制的代码粘贴到名为“将代码添加到博客的<head>”部分。保存您的更改,并查看浮动动作菜单,现在出现在您的Divi网站的每一页。
包起来
好吧,这是本教程的全部内容。如果你对此有任何疑问,请在下面的评论中告诉我。同样,如果您有任何关于代码模块教程的请求,或者使用代码模块可以做些什么,那么您也可以保留这些内容。