WordPress divi主题

如何为 Divi 滑块模块添加柔光箱阴影

by | Apr 27, 2022 | Divi主题使用教程 | 0 comments

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

为设计增加深度的最简单和最有效的方法之一是添加框阴影。 在今天的教程中,我们将向您展示如何设计带有柔光箱阴影的圆滑滑块。 诀窍是添加一个厚实的浅色边框以引起对边缘的注意。 这种设计微妙而优雅,可以轻松调整以适应几乎任何类型的网站。

google广告开户

让我们潜入吧!

抢先看

下面是我们将在本教程中构建的设计的快速浏览。

带柔光箱阴影的divi滑块

免费下载布局

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

要将部分布局导入 Divi 库,请导航到 Divi 库。

单击导入按钮。

在可移植性弹出窗口中,选择导入选项卡并从您的计算机中选择下载文件。

然后单击导入按钮。

迪维通知框

WordPress divi主题

完成后,部分布局将在 Divi Builder 中可用。

让我们进入教程,好吗?

你需要什么开始

扩展角落标签

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

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

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

在 Divi 中使用柔光箱阴影创建独特的滑块设计

第 1 部分:设计滑块的部分和行

设计截面

  • 添加背景图片(约 1920 像素 x 1080 像素)
  • 填充:18vh 顶部,18vh 底部

带柔光箱阴影的divi滑块

设计行

完成该部分后,向该部分添加一列行。

带柔光箱阴影的divi滑块

然后按如下方式更新行填充:

  • 内边距:0px 顶部,0px 底部

带柔光箱阴影的divi滑块

fiverr建站WordPress程序员

第 2 部分:使用柔光箱阴影设计滑块

现在我们的行已经到位,我们准备开始设计滑块。

将一个新的滑块模块添加到该行。

带柔光箱阴影的divi滑块

滑块背景

然后用半透明的白色更新背景。

  • 背景颜色:rgba(255,255,255,0.75)

带柔光箱阴影的divi滑块

独立站选品工具

导航和标题设计设置

在设计选项卡下,更新以下内容:

  • 箭头颜色:#776cb1
  • 点导航颜色:#776cb1
  • 标题字体:Raleway
  • 标题字体粗细:超粗体
  • 标题文字颜色:#000
  • 标题文字大小:65px(桌面)、38px(平板电脑)、28px(手机)
  • 标题行高度:1.2em
  • 标题文字阴影:见截图
  • 标题文字阴影颜色:透明

带柔光箱阴影的divi滑块

正文文字设计

  • 正文字体粗细:粗体
  • 正文颜色:#666
  • 正文文本大小:18px(桌面)、16px(平板电脑)、14px(手机)
  • 车身线高:1.8em
  • 身体阴影:见截图
  • 正文文字阴影:透明

带柔光箱阴影的divi滑块

按钮设计

接下来,更新按钮设计如下:

  • 按钮文字大小:20px(桌面)、18px(平板电脑)、16px(手机)
  • 按钮文字颜色:#776cb1
  • 按钮背景渐变左颜色:#776cb1
  • 按钮背景渐变右颜色:rgba(255,255,255,0.7)
  • 渐变方向:90度
  • 起始位置:7%
  • 结束位置:0%
  • 按钮边框宽度:0px
  • 按钮边框半径:0px
  • 按钮字母间距:3px
  • 按钮字体粗细:粗体
  • 按钮字体样式:TT
  • 按钮保证金:10%
  • 按钮填充:1em(顶部和底部)
  • 按钮框阴影:见截图
  • 阴影颜色:rgba(0,0,0,0.11)

带柔光箱阴影的divi滑块

高质量外链购买

填充和边框

  • 填充(台式机和平板电脑):顶部 8vh,底部 8vh,左侧 5%,右侧 5%
  • 填充(电话):顶部 8%,底部 8%,左侧 5%,右侧 5%
  • 边框宽度:15px
  • 边框颜色:#fff

带柔光箱阴影的divi滑块

盒子阴影

现在是时候为我们的滑块添加一个柔光箱阴影了。 这会给设计带来微妙的深度。

  • 盒子阴影:见截图
  • 盒子阴影垂直位置:0px
  • 盒子阴影水平位置:78px
  • 盒子阴影传播强度:-20px
  • 阴影颜色:rgba(0,0,0,0.5)

带柔光箱阴影的divi滑块

最后结果

现在让我们看看最终结果。

带柔光箱阴影的divi滑块

JasperAI 10000字免费额度试用

最后的想法

嗯,就是这样! 现在您知道如何创建一个带有柔和阴影的优雅滑块了。 希望您可以充分利用本教程,并随时在评论中发布您对它的使用!

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

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题