WordPress divi主题

如何绝对定位按钮以在 Divi 中创建独特的按钮布局

| 5月 6, 2022 | Divi主题使用教程 | 0 条评论

5分钟生成10篇英文软文article forge软件试用

Divi 的内置位置选项是一种方便的设计工具,可用于精确定位任何 Divi 元素,包括按钮。 大多数时候,我们依赖于与文档(或页面)流保持一致的按钮的默认静态位置。 但是,如果我们知道如何绝对定位按钮,我们可以为我们的 Divi 内容创建一些独特且实用的按钮布局。

google广告开户

在本教程中,我们将向您展示如何创建 4 种不同的按钮布局,这些布局将独特地强调 Divi 的 Blurb 模块。 在您的网站上使用简介时,这将派上用场。

让我们开始吧。

抢先看

快速浏览一下我们将在本教程中构建的四个按钮布局。

divi 按钮布局

divi 按钮布局

divi 按钮布局

divi 按钮布局

免费下载 Divi 按钮布局

要掌握本教程中的按钮布局设计,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

WordPress divi主题

要将布局导入您的页面,只需提取 zip 文件并将 JSON 文件拖到 Divi Builder 中。

让我们进入教程,好吗?

你需要什么开始

divi 按钮布局展开角标签

要开始,您需要执行以下操作:

  1. 如果您还没有,请安装并激活 Divi 主题。
  2. 在 WordPress 中创建一个新页面,并使用 Divi Builder 在前端(可视化构建器)编辑页面。
  3. 选择“从头开始构建”选项。

之后,您将有一个空白画布开始在 Divi 中进行设计。

创建按钮布局#1:双底按钮

divi 按钮布局

对于我们四个按钮布局中的第一个,我们将在一个简介模块下创建双底按钮。 这是展示需要两个 CTA 的内容(如服务)的绝佳选择。 另外,这是让您的按钮保持在等高的列底部的好方法。

首先,将两列(0ne 半半)行添加到该部分。

divi 按钮布局

行设置

  • 使用自定义装订线宽度:是
  • 天沟宽度:2
  • 均衡柱高:是
  • 宽度:100%
  • 边距:50px 底部
  • 内边距:0px 顶部,0px 底部

divi 按钮布局

fiverr建站WordPress程序员

第 1 列设置

  • 背景颜色:#2e3858
  • 内边距:底部 50px

divi 按钮布局

当我们添加绝对定位的按钮时,这个底部填充将为我们创建必要的空间。

模糊模块设计

接下来,将简介模块添加到第 1 列。

divi 按钮布局

然后上传一张图片到blurb模块,如下:

独立站选品工具

divi 按钮布局

转到设计设置并更新以下内容:

  • 图像/图标对齐:左
  • 标题字体:PT Sans
  • 标题字体粗细:粗体
  • 标题文字颜色:#ffffff
  • 标题文字大小:38px
  • 标题字母间距:2px
  • 正文文本颜色:#ffffff
  • 图片宽度:40%
  • 内容宽度:100%
  • 宽度:100%
  • 内边距:50px,顶部,50px 底部,30px 左侧,30px 右侧

divi 按钮布局

添加双底按钮

按钮 #1 设计

在 blurb 模块下添加一个新的按钮模块。

divi 按钮布局

高质量外链购买

然后更新按钮设置如下:

  • 按钮文字大小:16px
  • 按钮文字颜色:#ffffff
  • 按钮背景颜色:#2dc3a3
  • 按钮边框宽度:0px
  • 按钮边框半径:0px
  • 按钮字母间距:2px
  • 按钮字体:PT Sans
  • 按钮字体粗细:粗体
  • 按钮字体样式:TT
  • 边距:0px 底部
  • 填充:顶部 1em,底部 1em,左侧 1.5em,右侧 2.5em

divi 按钮布局

按钮 #1 绝对定位

要将按钮绝对定位在列的左下角,请更新以下内容:

  • 职位:绝对
  • 地点:左下角

divi 按钮布局

Divi 使用内置的可点击位置网格使这一切变得容易。 由于我们希望按钮与列底部齐平,因此不需要偏移值。

JasperAI 10000字免费额度试用

按钮 #2 设计和位置

要创建按钮 #2,请复制上一个按钮模块。

divi 按钮布局

副本将直接堆叠在上一个按钮的顶部,因此如果您使用的是可视化构建器,它可能看起来什么都没有发生。 点击打开按钮模块的设置,更新如下:

  • 背景颜色:#df4570

divi 按钮布局

  • 位置位置:右下角

divi 按钮布局

WordPress备份工具updrafplus

现在擦除当前为空的第 2 列并复制第 1 列,以便在右列中也获得精确的重复设计。

divi 按钮布局

按钮布局 #1 结果

检查结果。 请注意,右栏中的内容将栏推到页面下方,但由于我们的按钮是绝对定位的,它们继续紧贴底部以获得漂亮的对称设计。

divi 按钮布局

创建按钮布局#2:三个侧边按钮

divi 按钮布局

对于下一个按钮布局,我们将在单列中将三个按钮放置在简介模块的右侧。

要快速启动下一个按钮布局设计,请复制上一行。

divi 按钮布局

模糊设置

更新简介设置如下:

  • 背景颜色:#df4570
  • 图像宽度:60%
  • 宽度:56%(台式机和平板电脑),100%(手机)

divi 按钮布局

这将在简介右侧创建我们需要的房间,以添加我们的三按钮布局。

定位按钮 #1

要定位 Button #1,请打开左下角绿色按钮的按钮设置并更新以下内容:

  • 位置:绝对(台式机和平板电脑),相对(手机)
  • 位置:右上角
  • 垂直偏移:20%(台式机和平板电脑),0%(手机)
  • 水平偏移:5%(台式机和平板电脑),0%(手机)

divi 按钮布局

定位按钮 #2

要定位按钮 #2,请复制您刚刚定位的按钮。 您可以删除右下角的红色按钮,因为我们不需要它。

divi 按钮布局

然后打开复制按钮的设置并更新以下内容:

  • 背景颜色:#df4570

divi 按钮布局

然后通过增加垂直偏移量将按钮向下移动一点。

divi 按钮布局

定位按钮 #3

最后,通过复制上一个按钮并更新以下内容,再次重复该过程:

  • 背景颜色:#3599e5
  • 垂直偏移:50%

divi 按钮布局

按钮布局 #2 结果

查看三按钮布局的最终​​结果。

divi 按钮布局

创建按钮布局#3:分散和缩放按钮

divi 按钮布局

对于下一个布局,我们将稍微零散地放置按钮,然后使用变换比例调整几个按钮的大小。

首先,复制包含三按钮布局的前一行。

divi 按钮布局

模糊设置

然后打开第 1 列中的简介模块的设置并更新以下内容:

divi 按钮布局

  • 背景颜色:透明
  • 宽度:60%
  • 模块对齐:中心

divi 按钮布局

  • 文字对齐:居中
  • 模块对齐:中心

divi 按钮布局

  • 边框宽度:2px
  • 边框颜色:rgba(255,255,255,0.15)

divi 按钮布局

divi 按钮布局

divi 按钮布局

按钮 #1 定位

  • 垂直偏移:8%
  • 水平偏移:-7%

divi 按钮布局

按钮 #2 定位

  • 位置位置:右上角
  • 垂直偏移:34%
  • 水平偏移:-10%

divi 按钮布局

divi 按钮布局

按钮 #3 定位

  • 位置位置:右下角
  • 垂直偏移:-3%
  • 水平偏移:5%

divi 按钮布局

divi 按钮布局

行设置

  • 天沟宽度:4
  • 宽度:80%(桌面)

divi 按钮布局

按钮布局 #3 结果

查看最终结果。

divi 按钮布局

创建按钮布局#4:下拉式按钮

divi 按钮布局

对于最后一个按钮布局,我们将在简介的右上角创建一些拉动标签。

要快速启动设计,请复制按钮布局 #2 的行。

divi 按钮布局

列设置

接下来,更新列 #1 的背景设置,如下所示:

  • 背景颜色(桌面):无(默认)
  • 背景颜色(电话):#2e3858

divi 按钮布局

在“高级”选项卡下,更新可见性选项,以便在电话显示屏上隐藏溢出。

  • 水平溢出(电话):隐藏
  • 垂直溢出(电话):隐藏

divi 按钮布局

位置拉片按钮 #1

现在我们可以将当前列中的三个按钮用作我们的拉动标签按钮。 打开顶部按钮的设置并更新以下内容:

  • 垂直偏移:0px
  • 水平偏移:0px

divi 按钮布局

由于我们将使用按钮作为选项卡,因此我们需要为右侧图标腾出空间,以便当它从简介模块后面伸出时它看起来是居中的。 继续更新按钮填充,如下所示:

  • 填充:左 2em,右 3em

然后将以下自定义 CSS 添加到 After 元素:

padding-left: 10px;

然后更新手机上的水平偏移量如下:

  • 水平偏移(电话):-134px

这会将按钮的左侧隐藏在电话显示列之外,以便在悬停/单击时显示完整按钮。

divi 按钮布局

定位拉片按钮 #2

要定位第二个拉出按钮,请复制前一个按钮并更新副本的背景颜色。

  • 背景颜色:#df4570

divi 按钮布局

然后,更新位置如下:

divi 按钮布局

然后更新手机显示的以下位置选项:

  • 职位(电话):相对
  • 垂直偏移(电话):0%

divi 按钮布局

定位拉片按钮 #3

最后,要定位第三个拉片按钮,复制前一个按钮模块。 然后打开复制按钮模块的设置并更新以下内容:

  • 背景颜色:#3599e5
  • 垂直偏移:126px

divi 按钮布局

一旦第三个按钮到位,通过按住 Cmd(或 Ctrl)并单击每个按钮模块来使用 Divi 的多选功能。

divi 按钮布局

然后打开其中一个按钮模块的设置,并在悬停时添加以下变换翻译。

  • 变换平移 X 轴(悬停):68%

divi 按钮布局

这将通过将其移动到右侧 68% 来使用悬停时的拉标签功能更新所有三个按钮。

模糊模块定位

此按钮布局需要 blurb 模块部分隐藏三个按钮。 因此,我们将给简介一个 100% 的宽度,然后使用右边距来显示按钮选项卡的必要部分。 然后我们需要做的就是给宣传片一个高 Z 指数,以确保它位于按钮上方。

打开简介模块设置并更新以下内容:

  • 宽度:自动
  • 边距:50px 右
  • 职位:相对
  • Z指数:11

divi 按钮布局

然后更新背景颜色。

  • 背景颜色:#2e3858

divi 按钮布局

行设置

完成简介和下拉选项卡按钮后,打开行设置并更新宽度以给这些选项卡一些移动空间。

divi 按钮布局

删除第 2 列,然后复制第 1 列,以便在每个列中具有相同的设计。

然后打开第 1 列的设置并为其提供以下 Z 索引:

divi 按钮布局

这将确保第一列中的按钮在悬停时不会隐藏在第二列中的内容后面。

如果需要,您可以更新每个按钮的图标以满足您的需要。

divi 按钮布局

按钮布局 #4 结果

查看下拉式按钮布局的最终​​结果。

divi 按钮布局

最终结果

divi 按钮布局

divi 按钮布局

divi 按钮布局

divi 按钮布局

最后的想法

定位按钮绝对为 Divi 中无尽的按钮布局打开了大门。 希望本教程可以帮助您了解如何最好地使用 Divi 中的绝对位置。 其他有用的内置功能,如变换选项和 Z 索引,使设计绝对定位按钮。

我期待在评论中收到您的来信。

干杯!