WordPress divi主题

如何在 Divi 中设计流畅的英雄部分

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

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

网站的英雄部分是流畅设计的最佳候选者之一。 与在不同断点处进行调整的传统响应式设计不同,流畅的设计可与浏览器视口无缝缩放,并使设计在任何设备上保持一致。 毕竟,英雄部分是用户在网站上看到的第一件事。

google广告开户

您可能已经在之前关于流体排版、流体模块和/或流体按钮的教程中看到了流体设计。 在本教程中,我们将向您展示如何在 Divi 中创建一个完整的流体英雄部分。 创建这种流畅设计的关键是为每个使用的模块添加一个流畅的根字体大小,然后在整个模块的设置中结合 em 长度单位(相对于根正文字体大小)。

让我们开始吧!

抢先看

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

divi-fluid-hero-section-设计

请注意流体设计如何随着浏览器视口宽度平滑缩放。

免费下载布局

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

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

单击导入按钮。

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

WordPress divi主题

然后单击导入按钮。

迪维通知框

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

让我们进入教程,好吗?

你需要什么开始

扩展角落标签

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

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

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

如何在 Divi 中设计流畅的英雄部分

divi-fluid-hero-section-设计

为了构建流畅的英雄部分,我们将为三个模块中的每一个添加一个流畅的根字体大小。 这些模块将组成标题、副标题和按钮。 然后我们将在模块设计设置中使用 em 长度单位,以确保设计元素与流体根字体大小相关。 然后我们要用绝对位置和偏移量将图像定位在页面的左侧。 结果将是一个流畅的英雄部分,它与视口宽度完美缩放,因此设计在所有设备上都是一致的。

部分设置

首先,让我们更新该部分的现有设计设置。 打开部分设置并更新以下内容:

fiverr建站WordPress程序员
  • 背景渐变左颜色:#ff2000
  • 背景渐变右颜色:#121212
  • 渐变方向:45度
  • 起始位置:30%
  • 结束位置:0%

divi-fluid-hero-section-设计

在设计选项卡下,更新填充:

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

divi-fluid-hero-section-设计

创建行

接下来,向该部分添加一列行。

divi-fluid-hero-section-设计

独立站选品工具

行设置

打开该行的设置并在设计选项卡下更新以下内容:

  • 天沟宽度:1
  • 宽度:100%
  • 最大宽度:1700px
  • 最小高度:100vh(桌面),无(平板电脑和手机)
  • 内边距:0px 顶部,0px 底部

divi-fluid-hero-section-设计

创建带边框的流动标题文本

现在部分和行已经完成,我们可以将流畅的标题文本添加到英雄部分。 我们还将为创意设计元素的文本模块添加流畅的边框。

添加文本模块

要创建标题文本和边框,请将新文本模块添加到列中。

divi-fluid-hero-section-设计

高质量外链购买

文字设置

在内容选项卡下,使用以下 HTML 更新正文内容:

<h1>Fluid Fullscreen Page Design<span style="color: #ff2000;">.</span></h1>

divi-fluid-hero-section-设计

为了使设计元素流动,我们首先需要使用 CSS Clamp() 函数为模块添加流动的根字体大小。 在高级选项卡下,通过以下 CSS 片段:

font-size: clamp(32px, 4.1vw, 70px);

divi-fluid-hero-section-设计

有了流畅的根字体大小,我们就可以更新设计设置了。 始终使用 em 长度单位很重要,因为 em 长度单位是相对于元素的根字体大小的。

JasperAI 10000字免费额度试用

在设计选项卡下,更新以下标题文本设计设置:

  • 标题类型:H1
  • 标题字体:蒙特塞拉特
  • 标题字体粗细:重
  • 标题文字颜色:#ffffff
  • 标题文字大小:1em
  • 标题字母间距:0.1em
  • 标题行高度:1.2em

divi-fluid-hero-section-设计

此外,更新模块填充如下:

  • 填充:1em(上、下、左、右)

divi-fluid-hero-section-设计

要创建流体边界设计,请更新以下内容:

WordPress备份工具updrafplus
  • 边框宽度:1em
  • 边框颜色:#ffffff
  • 底边框颜色:透明
  • 左边框颜色:透明

divi-fluid-hero-section-设计

创建强调边框

要创建重音边框,我们可以复制现有的文本模块。

divi-fluid-hero-section-设计

取出现有的正文内容并更新设计设置如下:

  • 最大宽度:6.5em
  • 高度:3.25em
  • 边框宽度:0.5em
  • 边框颜色:#ff2000

请记住,此复制模块中包含相同的流体根字体大小。 所以,我们可以使用 em 长度单位来调整边框的大小和宽度。 这将确保设计将随着标题文本模块的设计进行调整。

divi-fluid-hero-section-设计

要定位重音边框,请在标题文本模块 (1em) 中添加一个偏移量等于边框宽度的绝对位置。 在高级选项卡下,更新以下位置选项:

  • 职位:绝对
  • 地点:右上角
  • 垂直偏移:1em
  • 水平偏移:1em

divi-fluid-hero-section-设计

创建流畅的字幕正文

在标题文本下方,我们将添加流畅的字幕正文。 由于此文本较小,我们将添加较小的流体根字体大小。

添加新的文本模块

要创建字幕文本,请在现有标题文本模块下方添加一个新文本模块。

divi-fluid-hero-section-设计

您可以添加几句填充文本,如下所示:

  • 身体内容:Vestibulum ac diam sit amet quam vehicula elementum sed sat amet dui。 Lorem ipsum dolor sit amet, consectetur adipiscing elit。

divi-fluid-hero-section-设计

添加流体根字体大小

接下来,我们需要添加一个更适合较小文本的新流体字体大小。 在高级选项卡下,将以下 CSS 片段粘贴到主元素下:

font-size: clamp(14px, 1.4vw, 24px);

divi-fluid-hero-section-设计

文字设计设置

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

  • 文本字体粗细:半粗体
  • 文字文字颜色:#ffffff
  • 文字文字大小:1em
  • 文字行高:1.6em

divi-fluid-hero-section-设计

然后更新大小和间距如下:

  • 最大宽度:19em
  • 边距:底部 2em,自动向左,向右 5em

divi-fluid-hero-section-设计

创建流体按钮

要创建流体按钮,请在字幕文本模块下方添加一个新按钮模块。

divi-fluid-hero-section-设计

然后将按钮文本更新为“7 天免费试用”。

divi-fluid-hero-section-设计

添加流体根字体大小

接下来,我们需要添加一个适合按钮的新流体字体大小。 在高级选项卡下,将以下 CSS 片段粘贴到主元素下:

font-size: clamp(20px, 2.35vw, 40px);

divi-fluid-hero-section-设计

按钮设计设置

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

divi-fluid-hero-section-设计

  • 按钮文字颜色:#ff2000
  • 按钮背景渐变左颜色:透明
  • 按钮背景渐变右颜色:#ffffff
  • 渐变方向:45度
  • 起始位置:25%
  • 结束位置:0%
  • 按钮边框宽度:0px
  • 按钮边框半径:0px
  • 按钮字体:蒙特塞拉特
  • 按钮字体粗细:重
  • 按钮字体样式:斜体
  • 按钮图标:右三角箭头(见截图)
  • 按钮图标位置:左

divi-fluid-hero-section-设计

  • 边距:8em 正确
  • 填充:顶部 0.2em,底部 0.2em,左侧 1.5em,右侧 1em

divi-fluid-hero-section-设计

为英雄部分创建图像

在页面大小合适的情况下,我们准备将英雄部分图像添加到左侧。 为此,首先在按钮下添加一个图像模块。

divi-fluid-hero-section-设计

打开图像设置并上传图像。

divi-fluid-hero-section-设计

图像设计设置

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

  • 图像对齐方式:左(台式机和平板电脑),居中(手机)
  • 最大宽度:48%(台式机和平板电脑),70%(手机)
  • 填充:左 4%

divi-fluid-hero-section-设计

最后,使用 vmin 长度单位给图像一个带有偏移的绝对位置,如下所示:

  • 位置:绝对(台式机和平板电脑),相对(手机)
  • 位置:左上角(台式机和平板电脑)
  • 垂直偏移 30vmin(台式机和平板电脑),0px(手机)

divi-fluid-hero-section-设计

最后结果

这是实时页面上的最终结果。

divi-fluid-hero-section-设计

以下是流体设计如何随着浏览器视口宽度平滑缩放。

浏览器支持

CSS clamp() 函数(用于本教程中的流体字体大小)令人惊讶地得到除 IE 之外的所有主要浏览器的良好支持。 有一个奇怪的 safari 错误,在调整浏览器窗口时不会动态缩放,但在页面加载时会正确显示。 要解决这个问题,您似乎需要做的就是给每个模块一个 0vw 的最小高度。

最后的想法

将流畅的设计添加到 hero 部分是一种方便的方法,可以确保首屏在所有浏览器大小上都保持美观一致,而无需在特定断点处更新设计或使用媒体查询。

不要忘记查看我们关于流体设计的其他文章,包括如何创建流体排版、流体模块和流体按钮。

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

干杯!

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