Elementor 垂直线 - CSS

在使用 Elementor 设计网页过程中，经常需要使用垂直线来分隔页面内容。这篇文章将介绍如何使用 CSS 在 Elementor 中添加垂直线。

代码实现

在 Elementor 中添加 CSS 的方法有两种：使用主题自定义 CSS 或使用插件添加 CSS。

方法1：使用主题自定义 CSS

如果您的主题支持自定义 CSS，则可以使用该功能添加垂直线。进入 WordPress 后台，选择“外观” -> “自定义” -> “附加 CSS”，在其中添加以下 CSS 代码：

.elementor-vertical-line {
    border-left: 1px solid #ddd;
}

方法2：使用插件添加 CSS

如果您的主题不支持自定义 CSS，或者想使用插件来添加 CSS，则可以使用插件“Simple Custom CSS and JS”。在 WordPress 插件库中搜索该插件并安装。安装完成后，选择“自定义 CSS & JS”，并添加以下 CSS 代码：

.elementor-vertical-line {
    border-left: 1px solid #ddd;
}

自定义样式

您可以根据自己的需要对垂直线进行自定义。例如，您可以更改线条颜色、粗细、长度等等。

以下是一些自定义示例：

更改线条颜色

.elementor-vertical-line {
    border-left: 1px solid red;
}

更改线条粗细

.elementor-vertical-line {
    border-left: 2px solid #ddd;
}

更改线条长度

.elementor-vertical-line {
    height: 100%;
}

结论

在 Elementor 中添加垂直线是很容易的。通过简单的 CSS 代码，您可以轻松地改变线条颜色、粗细和长度等等。