WordPress divi主题

填写 Divi 表单时如何为元素添加 CSS 焦点状态样式

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

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

大多数网站的主要目标之一是提交表单。 这是公司获得销售线索、电子邮件订阅者等的方式。 有效的网页设计可以使表单提交对访问者更具吸引力,提高参与度的一种方法是在“填写”过程中为表单添加额外的样式。 为此,我们可以利用 CSS 中焦点状态的力量。 事实上,Divi 具有内置于 Divi 表单模块(Contact、Email Optin 等)的表单字段的焦点样式选项,因此您不必依赖外部 CSS 来设置焦点状态下的表单字段的样式。

google广告开户

在本教程中,我们将介绍一种令人兴奋的方法,当访问者单击 Divi 表单上的字段时更改多个元素的样式。 您不仅可以为焦点中的特定字段添加 Divi 的内置焦点样式,还可以更改该字段周围元素的样式。 这将允许您通过微妙的动画和设计来改进表单提交的 UI。

让我们开始吧!

抢先看

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

为divi中的元素添加CSS焦点状态样式

为divi中的元素添加CSS焦点状态样式

免费下载布局

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

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

单击导入按钮。

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

WordPress divi主题

然后单击导入按钮。

迪维通知框

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

让我们进入教程,好吗?

你需要什么开始

扩展角落标签

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

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

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

使用 :focus-within CSS 伪类

因为 Divi 已经内置了用于在焦点状态下设置表单字段样式的选项,所以本教程还将将该焦点样式扩展到其他元素。 为了实现额外的焦点状态样式,我们将使用 Divi Builder 和一些使用 :重点 伪类。

别担心,它并不像看起来那么复杂。

:focus 和 :focus-within 之间的区别

:重点

如同 :徘徊, 这 :重点 CSS 中的伪类用于在元素处于焦点状态时将样式应用于元素。 焦点状态通常通过单击表单上的输入字段等元素来触发。 例如,一旦用户在表单域内单击,它就会激活该域的焦点状态。 这允许您使用 :重点 psuedo-class 以 CSS 中该字段的样式为目标。

fiverr建站WordPress程序员

:焦点内

:重点 伪类目标(或表示)处于焦点状态的元素的样式。 然而 :焦点内 伪类更进一步。 这 :焦点内 伪类定位焦点元素的样式,以及 包含焦点元素的任何元素. 这意味着您可以定位焦点元素的任何父元素,并在元素处于焦点时应用这些样式。 换句话说,我可以在表单域内单击并更改表单域背景颜色(使用 :重点)并同时使用更改表单字段的父部分背景颜色(使用 :焦点内)。

填写 Divi 表单时向元素添加焦点状态样式

现在我们对如何 :重点:重点 工作,让我们通过在本教程中添加一些焦点状态样式来测试它。

添加预制布局

首先,添加 Travel Blog Contact 页面预制布局以快速启动本教程的设计,并准备好联系表单作为我们的示例。 为此,请单击构建器设置菜单中的从库中加载图标。 在预制布局选项卡下,单击 Travel Blog Layout Pack,然后选择联系页面布局。 然后单击“使用此布局”按钮。

为divi中的元素添加CSS焦点状态样式

更新联系表设置

在联系页面布局上,打开联系表单模块的设置并使用文本“获取联系”更新标题。

独立站选品工具

为divi中的元素添加CSS焦点状态样式

现场焦点风格

在设计选项卡下,更新字段焦点样式如下:

  • 字段焦点背景颜色:rgba(255,107,90,0.15)
  • 字段焦点文本颜色:#000000

这将为实际字段的焦点状态设置样式(方便地为 Divi Builder 设置提供的选项)。

为divi中的元素添加CSS焦点状态样式

联系表格 CSS 类

接下来,在高级选项卡下的联系表单中添加自定义 CSS,如下所示:

高质量外链购买
  • CSS 类:divi-form-focus

这将是我们在表单字段获得焦点时用于定位表单样式的类。

为divi中的元素添加CSS焦点状态样式

更新列设置

接下来,打开联系表单的父列的设置。

填充

  • 填充:顶部 5%,底部 5%,左侧 3%,右侧 3%

为divi中的元素添加CSS焦点状态样式

列 CSS 类

在高级选项卡下,为该列提供以下 CSS 类:

JasperAI 10000字免费额度试用
  • CSS 类:divi-column-focus

当表单字段(子元素)获得焦点时,这将是我们用来定位列样式的类。

为divi中的元素添加CSS焦点状态样式

添加部分 CSS 类

为了在关注表单字段(也是该部分的子元素)时使用 CSS 来定位部分样式,请打开包含联系表单的部分的设置并添加以下 CSS 类:

  • CSS 类:divi-section-focus

为divi中的元素添加CSS焦点状态样式

使用代码模块添加自定义 CSS

如前所述,我们将使用 :重点 CSS 伪类,用于在表单字段获得焦点时设置其他 Divi 元素的样式。 我们要设置样式的元素(表单、列和部分)已经被赋予了一个自定义类,我们可以在 CSS 中使用它们来定位它们(​​“divi-form-focus”、“divi-column-focus” ,“分割焦点”)。

WordPress备份工具updrafplus

现在,我们需要做的就是添加我们的 CSS 代码。 为此,请在联系表单模块下添加一个代码模块。

为divi中的元素添加CSS焦点状态样式

然后在代码内容区粘贴以下代码:

确保使用必要的包装代码 风格 标签。

  /*add smooth transitions for focus state styles*/
  .divi-form-focus, .divi-column-focus, .divi-section-focus, .divi-form-focus h2 {
    transition: all 300ms
  }
  
  /*style form module h2 heading in form focus state*/
  .divi-form-focus:focus-within h2 {
    font-size: 14px !important;
    color: #888888;
  }
  
  /*style parent column in form focus state*/
  .divi-column-focus:focus-within {
		background: #ffffff;
    transform: scale(1.2);
    box-shadow: 0 0 30px rgba(0,0,0,0.2);
  }
  
  /*style parent section in form focus state*/
  .divi-section-focus:focus-within {
    background: rgba(255,107,90,0.15);
  }
 

为divi中的元素添加CSS焦点状态样式

请注意,每个具有元素 CSS 类(即“divi-column-form”)的 CSS 片段都有 :焦点内 伪类,以便在表单字段获得焦点时表示该元素类的样式。 一个片段在表单的焦点状态中设置表单的 h2(或标题)样式。 一个片段在表单的焦点状态下设置父列的样式。 一个片段在表单的焦点状态下设置父部分的样式。

为divi中的元素添加CSS焦点状态样式

最后结果

这是最终结果。 注意填写表格时不同元素如何改变样式。

为divi中的元素添加CSS焦点状态样式

为divi中的元素添加CSS焦点状态样式

最后的想法

在 Divi 中填写表单时为元素添加 CSS 焦点样式可以真正提升表单提交的用户体验。 关键是使用 :焦点内 当表单处于焦点状态时,伪类以及添加到要设置样式的元素的自定义类。 这可以通过向页面添加最少的自定义 CSS 来完成,如果您熟悉添加自己的自定义 CSS,那么可能性是巨大的。

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

干杯!