您想创建一个带有 Z 索引的浮动按钮吗 Elementor ?

我们确信您熟悉出现在所有屏幕内容前面的按钮,通常是圆形和中心的图标。 嗯,这就是浮动操作按钮。

浮动动作按钮可以触发动作或让您航行到某个地方。 例如电子邮件、社交网络的触发器、 游客 订阅一个频道,等等。

Elementor,创建浮动动作按钮有两种方法,分别如下:

  • 通过设置 Z-Index
  • 通过创建弹出窗口-Popup-

在本教程中,我们将只向您展示如何通过设置 Z 索引来创建浮动操作按钮。我们将使用专业版来实现它。

但首先,找出: 如何在WordPress上安装Elementor

如何在 Elementor 中创建浮动操作按钮

您可以使用免费版本Elementor 使用此方法创建浮动操作按钮。 但是,您需要将您在每个页面上设计的按钮粘贴到您希望该按钮显示在您的 现场网络.

同 Elementor临,您还可以访问该功能 自定义 CSS,我们将在本教程中使用它。

转到您的 Elementor 编辑器; 您可以修改现有内容(页面、文章等)或创建新内容。 在本教程中,我们将修改一个页面。

首先,创建一个包含单列的新部分。 选择按钮小部件 并将其从小部件面板拖放到编辑区域。 然后更改按钮 文本 等乐 链接。 

在本教程中,我们将使用按钮作为触发器来推动 游客 浏览 网站Web 元素。 然后,在选项上 对准,将其设置为 右边 et, 最后,改变 尺寸 On 按钮的 很大.

创建一个带有 Z 索引的浮动按钮

正如您在上面的 GIF 中看到的,此按钮在该部分中是固定的。 接下来,我们将让它在滚动时移动,同时保持它在相同的位置。

转到标签 先进. 在参数中 米斯恩页, 设置宽度 在线(汽车)上, 定义 固定位置, 放 水平方向 上 右边 并调整它 差倾角 如需要的话。

创建一个带有 Z 索引的浮动按钮

接下来,我们将定义此方法中的要点。 在该领域 Z-指数, 输入数字 9999 它会使按钮始终在前面(浮动)。

创建一个带有 Z 索引的浮动按钮

现在是时候旋转浮动操作按钮了。 总是在标签下 先进, 使用权 CSS类 来自街区 布局, 然后写 rotate 内。

另见: Elementor:介绍最好的 WordPress 页面构建器

之后去街区 自定义CSS ,然后将以下代码粘贴到该字段中:

.rotate.rotate
{transform: rotate(90deg);}

可以看到旋钮刚刚旋转了,但是屏幕的侧面之间有一个奇怪的间隙。 所以,让我们通过调整 差倾角 -92

创建一个带有 Z 索引的浮动按钮

最后,我们将为这个浮动操作按钮做最后一点点触摸。 访问块 变压器,选择它 概述, 访问选项  并将每个选项设置为 7.

创建一个带有 Z 索引的浮动按钮

在 Elementor 中实现某件事有几种选择。 对于浮动按钮,您可以使用两个选项。 这里我们只介绍了一种方法,另一种方法将是另一个教程。

另请参阅: Elementor:如何迁移 WordPress 网站

如果您希望有更多样式选项,使用 Popup 的构建器创建一个浮动操作按钮将是一个更好的选择,因为您可以选择自定义按钮以及行为,例如按钮关闭时间、持续时间、进入或退出动画等.

您刚刚轻松完成了这项任务。 只需预览您的平板电脑和智能手机的工作,尝试更改边距以匹配每个设备。

立即获取Elementor Pro!

结论

所以 ! 这篇文章就是这样,向您展示如何在个人资料卡上应用缩放效果。 如果您对如何到达那里有任何疑虑,请告诉我们 评论.

但是,您也可以咨询 我们的资源,如果您需要更多的元素来执行创建Internet网站的项目,请参考我们关于 WordPress博客创建 或者那个 Divi:有史以来最好的WordPress主题.

但与此同时, 在您不同的社交网络上分享此文章.

...