WordPress divi主题

如何在 Divi 中应用替代文本下划线样式

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

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

文本下划线样式一直很受限制。 在 Web 上为文本添加下划线的最常用方法是使用 CSS 属性“text-decoration: underline”。 Divi 甚至允许您在 Divi Builder 模块设置中部署和设置这种类型的下划线。 但是这种标准的下划线方法在样式和跨浏览器支持方面确实存在局限性。

google广告开户

当然,在大多数情况下,下划线文本不需要很复杂。 例如,在您网站上的所有链接下划线以表明它们是可点击的,这是一个标准应用程序,不一定需要任何替代方法。 但是,如果您希望将下划线提升到一个新的水平,这篇文章可能会有所帮助。

在本教程中,我将向您介绍如何在 Divi 中将一些替代文本下划线样式应用于您的文本。 我将向您展示使用 Divi 的内置选项为文本添加下划线的标准方法。 我还将向您展示如何使用底部边框作为文本下划线的替代方法。 使用底部边框不仅可以让您更好地控制样式,而且还支持所有浏览器。

让我们开始吧。

用文字修饰给文字加下划线(常用方法)

给文本加下划线最常见和最直接的方法是使用文本装饰 CSS 属性。 事实上,Divi 允许您在模块的内置选项中使用此方法轻松设置文本样式。 只需寻找 文字字体样式 选项并选择“ü”图标部署下划线文本装饰。 选择下划线字体样式后,您还可以选择自定义下划线的颜色和样式。

文本下划线样式

这使您可以使用与实际文本颜色不同的下划线颜色。

您可以从以下下划线样式中进行选择:

  • 坚硬的
  • 双倍的
  • 点缀
  • 虚线
  • 波浪状的

文本下划线样式

您甚至可以定位正文中链接的下划线样式。 这使您在使用文本模块时可以更好地控制设计。 只需选择文本设计类别切换下的链接字体选项卡。 对于链接字体样式,选择“下划线”。 然后您可以相应地自定义链接下划线的颜色和样式。

WordPress divi主题

文本下划线样式

文字装饰下划线样式限制

缺乏调整线条宽度和位置的能力

不幸的是,当使用 Divi 的内置设置添加 text-decoration: underline css 属性时,没有调整线条宽度或线条位置的选项。 线的宽度与字体大小有关,因此它会随着您增加字体大小而增加。 并且因为下划线的位置位于基线上,下划线(低于基线的小写字母)会妨碍线条,导致一些不一致,特别是对于有很多下划线的单词(如“排版”) .

文本下划线样式

如果您使用全大写文本,则此限制可能不是问题,因为您无需担心任何下降。 如果支持调整下划线宽度和下划线位置会很好,但现在我们运气不好。

缺乏浏览器支持

Internet Explorer 不支持 text-decoration-style 或 text-decoration-color 属性,因此无法自定义下划线样式(双线、点线、虚线等)和下划线颜色。 Safari 也不支持 text-decoration-style 属性,但您可以更改下划线颜色。

这种缺乏支持不仅限于Divi。 即使自定义 CSS 也无济于事。

使用底部边框为文本添加下划线

如果您正在寻找下划线文本样式的替代解决方案,我认为最好的选择是使用底部边框。 这里有一些很好的理由这样做:

  • 边框支持八种不同的边框样式来设置下划线的样式,包括:虚线、虚线、实线、双线、凹槽、脊线、插入和开始。
  • 您可以自定义与字体大小无关的边框宽度(粗细)。
  • 您可以将边框放置在离文本更近或更远的位置。
  • 您可以在边框上添加任何您想要的颜色。
  • 所有浏览器都支持边框样式。

使用底部边框进行下划线的限制

  • 仅限于块元素上的单行文本。 但是有一些方法可以解决这个问题(见下文)。
  • 完全位于下降器下方,并且有点难以正确定位(但可行)。

了解块元素和内联元素之间的区别

为了了解边框下划线的工作原理,您需要了解块元素和内联元素之间的区别。

块元素

块元素将自动跨越其容器的整个宽度(除非设置了自定义宽度)并从新行开始。 网站(包括使用 Divi 构建的网站)充满了块元素。

常见块元素的一些示例包括:

fiverr建站WordPress程序员
  • Divi 部分、行、模块 (div)
  • 正文或段落 (p)
  • 标题(h1、h2、h3、h4、h5、h6)
  • 列表(ol,ul)

为块元素添加底部边框时,边框将位于整个块的下方。 因此,如果您有一段文本 (p) 或一个标题 (h1) 分成两行或多行,则底部边框将仅应用于块的底部,而不是单独的文本行。

下面是当文本分成多行时向 h1 标题块元素添加底部边框的示例。

文本下划线样式

即使 css 以 h1 标记为目标,该行也仅应用于块元素。 因此,这条线只应用于最底部,而不是单独应用于每条线。

内联元素

与块元素不同,行内元素可以拆分为多行。 因此,如果您将底部边框添加到内联元素(例如链接),即使链接中断成新行,也会应用底部边框下划线。 此外,您可以调整内联元素的填充而不影响正文的行高,这对于定位底部边框下划线非常有用。

独立站选品工具

这是一些具有底部边框下划线的链接(默认为内联元素)的示例。

文本下划线样式

简而言之,内联元素在分成多行时可以有底部边框下划线,而块元素则不能。

如何将底部边框下划线添加到单行文本(块元素)

下面是如何使用文本模块内置设置为单行文本添加底部边框的示例。 此选项最适合标题,因为您将文本限制为单行。

创建一个具有一列行的新部分。 然后添加一个文本模块,内容如下:

高质量外链购买
Underlining Typography

然后更新文本模块设置如下:

  • 文字文字大小:46px(桌面)、40px(平板电脑)、26px(手机)
  • 文字行高:1.8em
  • 宽度:517px(桌面)、450px(平板电脑)、293px(手机)
  • 底部边框宽度:2px
  • 底部边框颜色:#0c71c3
  • 底部边框样式:虚线

文本下划线样式

如您所见,边框可以使用宽度、颜色和样式设置样式。 由于底部边框正在应用到模块,因此需要将模块的宽度调整为与文本的宽度相同。 因此,您需要相应地修改文本大小和模块宽度。

如何在跨行拆分的块元素(如标题)上添加底部边框下划线

如前所述,像标题(h1、h2、h3 等)这样的块元素不允许在每个换行符上内联应用底部边框。 为了解决这个问题,我们可以简单地用 span 标签包装我们的文本。 跨度允许您将内联元素(如一组文本)组合在一起以向这些元素添加样式。 因此,如果我们想要一个 h1 标签(块元素)的底部边框,我们可以用一个额外的 span 标签将文本包装在 h1 标签内。 然后我们可以给 span 标签添加下边框下划线样式。 这将允许我们在 h1 标记文本(或它的一部分)下划线,即使它中断到另一行。

下面是一个示例,说明如何为使用自定义 CSS 拆分为多行文本的块元素(如标题)添加底部边框。

JasperAI 10000字免费额度试用

首先,添加一个具有一列行的新部分。 然后将一个文本模块添加到该行。 在内容框中,将默认模拟文本替换为以下内容:

<h1><span>This is a Heading with Bottom Border Underlining Styled with a Span Tag</span></h1>

由于我们要添加底部边框下划线,让我们增加 h1 标题行的高度,如下所示:

文本下划线样式

接下来在高级选项卡下添加以下自定义 CSS ID:

CSS ID:边框下划线

WordPress备份工具updrafplus

文本下划线样式

接下来打开页面设置模式并添加以下自定义 CSS:

.border-underline span {
border-bottom: 2px dashed #0c71c3;
padding: 0.1em 0;  
}

此底部边框样式应用于 span 标签内的元素。 并且因为 span 标签是一个内联元素,所以下划线将应用于每一行的文本。

文本下划线样式

可以根据需要自定义border-bottom 属性。 第一个值 (2px) 设置边框的粗细(或宽度)。 第二个值(虚线)设置边框的样式。 不要忘记,您还可以使用以下边框样式:虚线、点线、双线、凹槽、脊线、插入和开始。 第三个值(#0c71c3)设置边框的颜色。 您还可以结合文本模块内置选项中的文本行高值调整自定义填充 css,以使间距也恰到好处。

如果您不需要 span 标签,并且想将整个 h1 标签转换为内联元素,则可以在页面设置中使用此 CSS:

.border-underline h1 {
border-bottom: 2px dashed #0c71c3;
padding: 0.1em 0;  
display: inline;
}

请注意,此 css 以 h1 标记为目标。 除了底部边框和填充样式外,“display: inline”将 h1 标签更改为内联元素,允许 h1 文本在多行上有下划线。

在 Divi 中为内联链接添加底部边框下划线

这是一个示例,说明如何使用自定义 CSS 为 Divi 中的内联链接文本添加底部边框。 首先创建一个具有单列行的新部分,然后在该行中添加一个文本模块。

然后使用所见即所得编辑器向正文文本添加一些链接,以便您可以使用一些链接。

文本下划线样式

然后在 Advanced 选项卡下添加一个自定义 CSS 类,如下所示:

CSS 类:边框下划线

文本下划线样式

现在打开页面设置并添加以下自定义 CSS 以将底部边框应用于文本模块内的所有链接。

.border-underline a {
border-bottom: 1px solid #333333;
padding: 0.1em 0;  
}

文本下划线样式

可以根据需要自定义border-bottom 属性。 第一个值 (1px) 设置边框的粗细(或宽度)。 第二个值(solid)设置边框的样式。 不要忘记,您还可以使用以下边框样式:虚线、点线、双线、凹槽、脊线、插入和开始。 第三个值(#333333)设置边框的颜色。

因此,如果您想要一个 2px 宽、虚线样式和不同颜色的底部边框下划线,您可以将这些值替换为以下内容:

border-bottom: 2px dashed #0c71c3;

文本下划线样式

也可以调整填充值以垂直定位边框下划线。 因此,如果您希望该行离文本更远,您可以将填充值增加到如下所示:

padding: 0.3em 0;

文本下划线样式

您还可以将此自定义填充与文本模块内置选项中的文本行高值结合使用,以使间距也恰到好处。

由于链接是内联元素,边框下划线保留在跨行拆分的链接上。

文本下划线样式

分频器呢?

如果您想通过为单行文本(块元素)加下划线来获得真正的创意,您可以随时使用 Divi 的分隔符模块。 分隔器模块有许多内置选项,如样式、高度、宽度、背景、边框、框阴影等。 您甚至可以将分隔线堆叠在一起以获得更多自定义外观。

这是一个分隔模块的快速示例,用于使用带有渐变背景的双线为文本下划线。

只需在包含您的文本的文本模块下直接添加一个分隔模块。 然后更新以下内容:

  • 背景渐变左颜色:#2b87da
  • 背景渐变右颜色:#29c4a9
  • 渐变类型:线性
  • 渐变方向:90度
  • 颜色:#ffffff
  • 分隔线重量:2px
  • 高度:2px
  • 宽度:400px(这需要调整到上面文字的宽度)
  • 自定义填充:5px 顶部,5px 底部

文本下划线样式

最后的想法

我希望本教程为您提供在 Divi 中添加文本下划线样式的有用替代方法。 使用“文本装饰:下划线”的常用方法是迄今为止…

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