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

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

什么是CSS？

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

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

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

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

自定义 CSS 示例

如何添加添加自定义 CSS

将自定义 CSS 添加到 Elementor

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

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

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

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

将自定义 CSS 添加到页面

1、转到页面设置面板。

2、单击高级选项卡。

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

将自定义 CSS 添加到网站

1、转至站点设置面板。

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

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

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

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

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

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

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

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

• 选择标题小部件

• 从“标题”小组件的“高级”选项卡中选择“自定义 CSS” 。

• 选择使用 AI 编码。

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

• 在文本框中输入“Make this heading turn red on hover”。

• 单击生成代码。

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

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

动画标题

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

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

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

使Elementor具有粘性

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

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

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

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

总结：

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

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