如何向您的 Divi 站点添加浮动关于卡

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

预览

桌面

移动的

1. 创建页面模板

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

使用主题生成器创建模板

首先，转到 WordPress 仪表板中的Divi – Theme Builder 。 选择页面的自定义正文部分，将浮动关于卡片或全局正文应用到任何地方。

加载 Divi Visual Builder 后，选择从头开始。

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

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

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

调整节和行间距

有了这些，我们需要进行一些间距调整。 进入部分设置（Divi 构建器中的蓝色边框）并删除所有顶部和底部填充。 您可以在“设计”选项卡、“间距”标题下执行此操作，然后在“填充”下将“顶部”和“底部”设置为0px 。

保存更改并输入行设置。 再次，将顶部和底部填充设置为0px 。

接下来，找到Sizing标题并打开Use Custom Gutter Width并将其值设置为 1。接下来，将Width和Max Width设置为 100%。

准备工作完成后，让我们开始制作浮动卡片！

2.添加浮动卡

添加新的节和行

首先，您需要添加一个新部分。 通过滚动到页面底部并单击蓝色 + 圆圈并在提示输入部分类型时选择常规来执行此操作。

添加模糊模块

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

调整部分和行设置

有了这个，我们需要调整这一行和部分的填充和定位。 因此，首先，进入部分设置并在Display – Spacing下将Top和Bottom Padding 设置为0px 。

然后，在“高级”选项卡下，找到“职位”标题。 将Z 索引设置为 12。数字越大，该部分及其内容所在的位置越“靠前”。 由于它是一张浮动卡片，我们希望它漂浮在所有其他元素之上。

最后，进入行设置并再次将其在顶部和底部的填充设置为0px 。

Blurb 模块内容

现在是我们设计卡片本身的时候了。 输入 Blurb 模块的设置。 由于它是描述您的业务的元素，因此您需要简要提及您的公司或品牌的业务。 因为这是一个示例帖子，我们用一些僵尸风味的lorem ipsum填充它。 您可以在“内容”选项卡下设置标题和正文内容。

设置背景颜色

您显然希望浮动卡片在视觉上与您的网站相匹配，因此选择正确的背景颜色非常重要。 我们将使用#ffffff （白色）。 Content选项卡也包含它，您可以在Background标题和Paint Can下找到它。

选择卡片图像

Blurb 模块为您提供了为模块包含图像或图标的选项，我们需要一个代表我们公司的图像。 同样，在内容选项卡下，找到图像和图标，然后上传适用于您的模块的图像。

塑造卡片角

接下来，进入“设计”选项卡并进入“边框”标题。 找到圆角选项并将每个角设置为25px 。 这将平滑锋利的方形边缘，而不会改变整体卡片的形状。

文本对齐

在文本标题下，将文本对齐设置为居中。

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

您之前设置的标题文本默认为H4 。 要设置样式，请进入标题文本标题，选择H4选项卡，然后更改以下标题选项：

• 字体: Poppins
• 字体粗细：粗体
• 文字颜色：# 22303f
• 文字大小： 20px
• 线高： 1.3em

然后，我们需要进入响应设置并更改移动设备标题的大小。 将标题文本大小更改为14px 。

设置卡片文本的样式

接下来，导航到正文并将正文字体更改为Poppins以匹配标题字体。

然后单击链接选项卡（链图标）并将链接文本颜色交换为您网站的互补颜色。 我们选择了#97c357 。

调整关于卡的大小

在Sizing标题下，将以下值添加到这些设置中：

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

在响应设置下，调整以下值：

• 内容宽度： 90vw
• 宽度： 90vw
• 最大宽度： 95vw

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

Blurb 的间距

Spacing标题是一个快速修复，您需要将Left Margin设置为0px ，将顶部和底部填充设置为2vw ，将左右填充设置为1vw 。

对于响应式设置，只有顶部和底部填充会发生变化。 我们将这些设置为5% 。

添加框阴影

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

调整响应式 CSS

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

所以我们要添加display:none; 在自定义 CSS下的仅限移动设备的Blurb Image字段下。

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

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

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

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

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

最终结果

为您的个人站点正确设置并调整所有内容后，最终产品应与此类似。

桌面

移动的

结论

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

您在网站上使用浮动卡做什么？ 让我们在评论中知道！