www.wpcitation.com/

Tag: Elementor CSS技巧

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

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

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

    什么是CSS？

    图片[1]-361Sale WordPress Care

    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

    图片[2]-361Sale WordPress Care

    将自定义 CSS 添加到 Elementor

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

    图片[3]-361Sale WordPress Care

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

    图片[4]-361Sale WordPress Care

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

    图片[5]-361Sale WordPress Care

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

    将自定义 CSS 添加到页面

    1、转到页面设置面板。

    图片[6]-361Sale WordPress Care

    2、单击高级选项卡。

    图片[7]-361Sale WordPress Care

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

    将自定义 CSS 添加到网站

    1、转至站点设置面板。

    图片[8]-361Sale WordPress Care

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

    图片[9]-361Sale WordPress Care

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

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

    图片[10]-361Sale WordPress Care

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

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

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

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

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

    图片[11]-361Sale WordPress Care
    • 选择标题小部件
    图片[12]-361Sale WordPress Care
    • 从“标题”小组件的“高级”选项卡中选择“自定义 CSS” 。
    图片[13]-361Sale WordPress Care
    • 选择使用 AI 编码。

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

    • 在文本框中输入“Make this heading turn red on hover”。
    图片[15]-361Sale WordPress Care
    • 单击生成代码。
    图片[16]-361Sale WordPress Care

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

    图片[17]-361Sale WordPress Care

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

    图片[18]-361Sale WordPress Care

    动画标题

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

    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. 选择插入代码。

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

    总结：

    图片[19]-361Sale WordPress Care

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

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