WordPress divi主题

如何在您的 Divi 网站上添加浮动 About Card

| 4月 26, 2022 | Divi主题使用教程 | 0 条评论

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

在您访问的几乎每个网站上,元素都会弹出并粘在页面上。 Cookie 警告和选择加入、电子邮件注册和聊天框。 我们都倾向于在某些时候忽略它们,对网站试图告诉我们的任何内容视而不见。 我们只需单击 X 而不阅读。 但这并不意味着这些元素没有用处,也没有一席之地。 使用 Divi,您可以轻松创建一个浮动卡片,为您的网站增加价值,不显眼地解释您是谁以及您的品牌做什么。 让我们看看它是多么容易。

google广告开户

预览

桌面

桌面版

移动的

手机版

1.创建页面模板

您要做的第一件事是确定要包含此浮动卡片的页面。 您可能希望它出现在您网站的每个页面上,或者您可能只希望它出现在特定的登录页面上。 无论哪种方式,您都可以使用 Divi Theme Builder 进行设置。 作为全局模板或仅适用于某些页面的模板。

使用主题生成器创建模板

要开始,请转到 Divi – 主题生成器 在您的 WordPress 仪表板中。 选择 自定义身体 您要应用浮动卡片的页面部分或 全球机构 到处应用它。

选择模板

加载 Divi Visual Builder 后,选择 白手起家 当给出选择时。

从头开始构建

添加 1 列行和发布内容模块

然后在出现提示时选择单列行。

漂浮在卡片行

WordPress divi主题

接下来,您要选择 发布内容 模块。 这是我们动态内容功能的一个示例。 该模块显示了 Divi 页面本身内置的随附设计,这意味着该模块将使用此模板为不同页面显示不同的内容。 对于博客文章,它将是博客内容。 对于商店页面,它将是产品。 对于单个页面,您使用 Divi 制作的自定义内容。

发布内容模块

调整节和行间距

有了这些,我们需要进行一些间距调整。 进入 部分 设置(Divi 构建器中的蓝色边框)并删除所有顶部和底部填充。 你在下面做这个 设计 制表符 间距 标题,然后设置 0像素最佳 底部 在下面 填充.

部分的填充

保存更改并输入 设置。 再次,设置 最佳底部 填充到 0像素.

行填充

接下来,找到 浆纱 标题和切换 使用自定义装订线宽度 on 并将其值设置为 1。接下来,设置 宽度最大宽度 到 100%。

卡片浮动的宽度和装订线

准备工作完成后,让我们开始制作浮动卡片吧!

2.添加浮动卡

添加新的部分和行

首先,您需要添加一个新部分。 通过滚动到页面底部并单击 蓝色+圆圈 并选择 常规的 当提示输入部分类型时。

fiverr建站WordPress程序员

部分

添加一个模糊模块

这将是专门用于浮动卡的部分。 在里面,我们要添加另一个单列行。 在里面,我们想使用 模糊 浮动卡本身的模块。 Divi Blurb 模块可能是构建器中最通用的模块,因此我们希望利用它为此功能提供的功能。

简介模块

调整部分和行设置

有了这些,我们需要调整这一行和部分的填充和定位。 所以首先,进入 部分 设置并设置 最佳底部 填充0像素 在下面 显示 – 间距.

部分的填充

独立站选品工具

然后,根据 先进的 选项卡,找到 位置 标题。 设置 Z 指数 到 12。数字越大,该部分及其内容将位于越“前面”的位置。 由于它是一张浮动卡片,我们希望它浮动在所有其他元素之上。

z 指数为 12

最后,进入 设置并设置其填充 最佳底部0像素 再一次。

行填充

Blurb 模块内容

现在是时候为卡片本身设置样式了。 输入 设置 对于 Blurb 模块。 由于它是描述您的业务的元素,因此您需要简要提及您的公司或品牌所做的事情。 因为这是一个示例帖子,所以我们在其中填充了一些僵尸风味的 定理. 您可以在下面设置标题和正文内容 内容 标签。

高质量外链购买

僵尸ipsum

设置背景颜色

您显然希望浮动卡片在视觉上与您的网站相匹配,因此选择正确的背景颜色非常重要。 我们一起去 #ffffff (白色的)。 这 内容 标签也包含这个,你会在下面找到它 背景 标题和 油漆罐.

背景油漆罐

选择一张卡片图片

Blurb 模块为您提供了包含图像或模块图标的选项,我们想要一个代表我们公司的图像。 再次,根据 内容 标签,找到 图像和图标 并简单地上传适用于您的模块的图像。

图片

JasperAI 10000字免费额度试用

塑造卡片角

接下来进入 设计 选项卡并进入 边界 标题。 找出 圆角 选项并将每个角设置为 25像素. 这将平滑尖锐的方形边缘,而不会改变整个卡片的形状。

将 about 卡的四角修圆

文本对齐

在下面 文本 标题,设置 文本对齐 居中。

简介对齐

设置浮动卡片标题文本的样式

您之前设置的标题文本默认为 H4. 要对其进行样式设置,请进入 标题文字 标题,选择 H4 选项卡,然后更改以下内容 标题 选项:

WordPress备份工具updrafplus
  • 字体: 波平斯
  • 字体粗细: 胆大
  • 文字颜色:#22303f
  • 字体大小: 20像素
  • 线高: 1.3em

标题选项

然后,我们需要进入 响应能力 设置和更改移动设备的标题大小。 更改 标题文字大小14像素.

设置卡片文本的样式

接下来,导航到 主体 并改变 正文字体波平斯 以匹配标题字体。

主体

然后点击 关联 选项卡(链图标)并交换 链接文字颜色 为您的网站提供免费的颜色。 我们选择了 #97c357.

链接文字颜色

调整 About 卡的大小

在下面 浆纱 标题,将以下值添加到这些设置中:

  • 图像宽度: 75%
  • 内容宽度: 25大众
  • 宽度: 25大众
  • 最大宽度: 30vw

内容宽度

在响应设置下,调整以下值:

  • 内容宽度: 90vw
  • 宽度: 90vw
  • 最大宽度: 95大众

流动价值

这些值将确保卡片占据移动设备屏幕的整个宽度,因为角落中的浮动卡片通常无法读取。

Blurb 的间距

间距 标题是一个快速修复,您需要在其中设置 左边距0像素, 这 最佳底部 填充 2大众剩下右填充1大众。

间距

对于响应式设置,只有 最佳底部填充 会改变。 我们将这些设置在 5%.

响应式填充

添加盒子阴影

因为浮动卡片将固定在其位置,我们希望它看起来好像实际上是浮动在您的内容之上。 通过向模块添加一个基本的盒子阴影,这个效果很简单。 这个选项可以在下面找到 盒子阴影,我们选择了基本的底影。

阴影

调整响应式 CSS

现在是有趣的部分。 我们正在进入 先进的 选项卡,我们将在其中将浮动卡片粘贴到页面上。 为此,我们的第一步是关闭我们为桌面添加的图像。 中的图像 模糊 模块确实会影响移动设备上的大小和可用性,而且它是页面加载的其他内容。

所以我们要添加 显示:无; 在下面 仅限移动设备 模糊图像 字段下 自定义 CSS.

不显示图像

使用位置设置固定和浮动卡

最后,我们要将卡片放置在我们希望它浮动的位置。 首先,我们要前往 先进的 选项卡并滚动到 位置. 选择 固定的 从下拉菜单中。

浮动卡固定位置

接下来,找到 地点 选项。 这是浮动卡片将停留在屏幕上的点。 对于桌面,我们希望它位于屏幕的下角。 所以我们点击与之相关的方块。 我们还希望它稍微偏离窗口边框,因此我们将更改 垂直偏移3% 水平偏移2%。

浮动卡偏移的位置选项

接下来,我们要为移动设备创建不同的位置和偏移量。 上面,我们将卡片的宽度设置为拉伸屏幕的整个宽度。 考虑到这一点,我们将改变 固定位置 到底部中心,因此卡片将始终漂浮在屏幕底部。

移动偏移和固定位置

此外,我们只会更改 垂直偏移 对于移动。 将此值设置为 3%. 不需要水平偏移,因为它是移动屏幕的宽度并且居中。

最终结果

当一切设置正确并针对您的个人网站进行调整后,最终产品应该与此类似。

桌面

桌面结果

移动的

手机版

结论

借助 Divi 强大的选项和直观的界面,您可以立即在您的网站上设计和粘贴浮动卡片。 通过让您的用户从一开始就知道他们正在与谁打交道,您一定会获得一些品牌忠诚度。

您在您的网站上使用浮动卡片做什么? 让我们在评论中知道!

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