Columns 列设置

Estimated reading: 1 minute 18 views

在 Elementor 中创建、编辑和样式化列

是 Elementor 中的基本组成部分,它允许您精确控制页面的布局和设计。以下是如何有效创建、编辑和样式化列的方法。

column right click Create, edit, & style columns in Elementor 3

如何创建和编辑列

  1. 添加新列:
    • 右键方法: 在现有列的手柄上右键,然后从弹出的上下文菜单中选择“添加新列”。
    • 复制: 也可以通过选择相同上下文菜单中的“复制”来复制现有列。
  2. 编辑列:
    • 点击列手柄选择它,这将在左侧的 Elementor 面板中显示列的选项。

列布局选项

  • 列宽(%): 使用百分比值调整列的宽度,以控制其相对于部分中其他列的大小。
  • 垂直对齐: 设置列内容的垂直对齐方式。选项包括顶部、中间、底部、空间之间、空间周围和均匀空间。
  • 水平对齐: 在列中水平对齐内联小部件。选择项包括开始、中心、结束、空间之间、空间周围和均匀空间。
  • HTML 标签: 为列设置特定的 HTML 标签(例如 div、section),以获得更好的语义和 SEO。

样式选项

  • 背景:
    • 背景类型: 选择经典(颜色或图片)、渐变或幻灯片。
    • 背景覆盖: 添加背景覆盖,并设置混合模式和 CSS 滤镜,如模糊或亮度。
  • 边框:
    • 边框类型: 选择边框类型并设置其宽度、样式和颜色。
    • 边框半径: 通过设置边框半径来圆化列的角。
    • 盒阴影: 添加阴影效果以创建深度。
  • 排版:
    • 设置列内的文本颜色和排版设置,但这只有在禁用默认颜色时才适用。

高级设置

  • 边距和填充: 分别定义列周围和内部的空间,以创建间距。
  • Z-index: 在元素重叠时控制列的堆叠顺序。
  • 入场动画: 选择列的入场动画,当用户向下滚动页面时激活。
  • CSS ID 和类: 分配自定义 ID 和类以进行进一步的 CSS 自定义。

响应设置

  • 反转列: 反转列的顺序,特别适用于移动响应性。
  • 可见性: 控制列在不同设备(如桌面、平板或手机)上的可见性。

专业功能

  • 自定义属性: 添加自定义属性以实现更复杂的功能(在 Elementor Pro 中可用)。
  • 运动效果: 应用动态效果,如滚动动画和鼠标效果(在 Elementor Pro 中可用)。
  • 自定义 CSS: 直接在列设置中编写您自己的 CSS,以实现最终的自定义(在 Elementor Pro 中可用)。

实用提示

  • 右键导航: 使用右键菜单快速复制、粘贴或删除列,以及访问导航器以获取页面结构概览。
  • 一致的样式: 使用样式和高级选项卡在您的网站上的所有列中保持一致的外观和感觉。

Elementor 中的列提供了广泛的自定义选项,可以改变您的网页的外观和功能,掌握这些工具对于有效的网页设计至关重要。

Leave a Reply

Your email address will not be published. Required fields are marked *

Share this Doc

Columns 列设置

Or copy link

CONTENTS