如何在Elementor中添加和管理自定义CSS以增强网站的视觉体验

自定义 CSS 可让你向网站添加自定义代码,从而赋予网站独特的外观和感觉。

什么是CSS?

如何在Elementor中添加和管理自定义CSS以增强网站的视觉体验

CSS(层叠样式表)是一种向网页添加样式的方法,例如颜色、字体、间距和位置。 Elementor 编辑器的一大优点是它允许你在不了解 CSS 的情况下添加许多此类样式元素。然而,Elementor Pro 还允许具有 CSS 知识的 Web 创建者添加自定义 CSS,为它们的页面提供独特的外观和感觉。

在哪里可以使用 Elementor 添加自定义 CSS?

Elementor 编辑器允许你在三个不同级别添加自定义 CSS:

  • 站点级别:在此处添加自定义 CSS 会影响您的整个站点
  • 页面级别:在此处添加自定义 CSS 只会影响特定页面
  • 元素级别:在此处添加自定义 CSS 只会影响特定元素

自定义 CSS 示例

输入代码的地方插入这段代码CSS 将产生的效果
站点设置面板body {
  background-color: red;
}
为网站上的所有页面提供红色背景
页面设置面板body {
  background-color: blue;
}
页面背景蓝色。 
注意:此页面级 CSS 会覆盖任何站点级 CSS 设置,因此即使你使用上述站点 CSS,此页面仍将具有蓝色背景
元素的高级选项卡#my-element {
  background-color: green;
}
它以CSS ID “my-element”为目标的特定元素,并为其提供绿色背景。 
注意:此 CSS 会覆盖任何站点级或页面级 CSS,为元素提供绿色背景,因此即使你使用上述站点和/或页面 CSS,此页面仍将具有蓝色背景。

如何添加添加自定义 CSS

如何在Elementor中添加和管理自定义CSS以增强网站的视觉体验

将自定义 CSS 添加到 Elementor

1、通过单击或从导航器中选择一个元素来选择它。

如何在Elementor中添加和管理自定义CSS以增强网站的视觉体验

2、在面板中,单击“高级”选项卡。

如何在Elementor中添加和管理自定义CSS以增强网站的视觉体验

3、向下滚动并展开自定义 CSS。

如何在Elementor中添加和管理自定义CSS以增强网站的视觉体验

4、在打开的文本框中输入 CSS 代码。

将自定义 CSS 添加到页面

1、转到页面设置面板。

如何在Elementor中添加和管理自定义CSS以增强网站的视觉体验

2、单击高级选项卡。

如何在Elementor中添加和管理自定义CSS以增强网站的视觉体验

3、在打开的文本框中输入 CSS 代码。

将自定义 CSS 添加到网站

1、转至站点设置面板。

如何在Elementor中添加和管理自定义CSS以增强网站的视觉体验

2、从列表中选择自定义 CSS 。

如何在Elementor中添加和管理自定义CSS以增强网站的视觉体验

3、在打开的文本框中输入 CSS 代码。

如何使用 Elementor AI 添加自定义 CSS

如何在Elementor中添加和管理自定义CSS以增强网站的视觉体验

Elementor AI不仅可以帮助你编写网站内容,还允许专业版用户为网页和元素添加自定义CSS样式。专业用户还可以向网站添加自定义代码。所有用户都可以通过HTML小部件使用Elementor AI在页面上添加HTML代码。

在使用Elementor AI添加自定义CSS或代码时,请遵循以下建议:

  • 在添加自定义CSS之前,一定要保存和备份你的页面,以防不小心改变了页面布局。
  • 当你向一个特定元素添加CSS时,确保使用“选择器”,这样代码才不会影响到页面上的其他部分。
  • 如果你使用Elementor AI重新生成代码,之前的代码会被覆盖。因此,将原有代码备份到另一个文档中是个不错的选择。
  • 插入多个代码片段时,有些代码可能会互相冲突。
  • 我们正在不断改进Elementor AI的编码功能,但生成的代码可能需要你手动调整以满足具体需求。
  • 请注意,Elementor官方不提供自定义CSS代码的技术支持,用户需要自行检查和调试代码。

使用 Elementor AI 将自定义代码添加到Elementor

以下示例将向该主页的标题添加 CSS 自定义代码:

如何在Elementor中添加和管理自定义CSS以增强网站的视觉体验
  • 选择标题小部件
如何在Elementor中添加和管理自定义CSS以增强网站的视觉体验
  • 从“标题”小组件的“高级”选项卡中选择“自定义 CSS” 。
如何在Elementor中添加和管理自定义CSS以增强网站的视觉体验
  • 选择使用 AI 编码
如何在Elementor中添加和管理自定义CSS以增强网站的视觉体验

注意:首次使用 Elementor AI 后,带有 AI文本的代码将替换为 Elementor AI 图标。

  • 在文本框中输入“Make this heading turn red on hover”。
如何在Elementor中添加和管理自定义CSS以增强网站的视觉体验
  • 单击生成代码
如何在Elementor中添加和管理自定义CSS以增强网站的视觉体验

这将添加以下 CSS 自定义代码:

如何在Elementor中添加和管理自定义CSS以增强网站的视觉体验

单击“预览”查看自定义 CSS 的工作原理。

如何在Elementor中添加和管理自定义CSS以增强网站的视觉体验

动画标题

现在让我们向标题添加一些动画。

  1. 返回到 Custom CSS 并选择Code with AI
  2. 在文本框中输入“在此标题中,悬停时文本会弹起”。
  3. 单击生成代码
  4. 单击“插入”

转到预览并查看结果。当您将鼠标悬停在文本上时,它应该弹起并变成红色。

使Elementor具有粘性

一个设计师常用的技巧是让页面的某些元素始终可见,即使当访问者滚动网页时也不例外。这种效果称为“粘性Elementor”,通常用于网页的标题部分。这样做的目的是让访问者在浏览页面的任何位置时,都能方便地使用菜单。

下面是一个例子,展示如何让网页的标题保持粘性,确保它总是显示在屏幕顶部:

  1. 选择编辑标题
    图 39 使用 Elementor AI 添加自定义 CSS 17
  2. 在标题中选择容器
  3. 选择自定义 CSS。 
  4. 选择使用 AI 编码。 
  5. 在文本框中输入“使此容器具有粘性”。
  6. 单击生成代码。生成的代码将如下所示:
    图 40 使用 Elementor AI 添加自定义 CSS 19
    Elementor AI 为你提供生成的代码,并且在代码框下方的区域中,它将用简单的英语解释代码的用途。
  7. 选择插入代码

使用预览来查看结果,向下滚动页面时,标题将保留在屏幕顶部。

总结:

如何在Elementor中添加和管理自定义CSS以增强网站的视觉体验

CSS(层叠样式表)的基本概念,它是一种强大的工具,用于添加和调整网页的样式,如颜色、字体、间距和布局。特别地,Elementor提供了在不同级别(站点、页面和元素级别)添加自定义CSS的功能,使用户能够针对具体需求进行细致调整。

文章还提供了具体的步骤说明,如何在Elementor的不同部分添加CSS代码,包括通过Elementor AI技术帮助生成和管理代码。强调了使用自定义CSS时应注意的问题,如代码备份、使用选择器和处理代码冲突等,以确保网站设计既美观又功能强大。


联系我们
文章看不懂?联系我们为您免费解答!免费助力个人,小企站点!
电话:020-2206-9892
QQ咨询:1025174874
邮件:info@361sale.com
工作时间:周一至周五,9:30-18:30,节假日休息
发布者:光子波动,转转请注明出处:https://www.361sale.com/9388/

(0)
上一篇 6天前
下一篇 6天前

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

联系我们

020-2206-9892

QQ咨询:1025174874

邮件:info@361sale.com

工作时间:周一至周五,9:30-18:30,节假日休息

客服微信
购买我们的托管服务器,享受免费运维!