样式和布局 Styling and Layout

样式和布局

Elementor 提供丰富的样式选项，让您可以细致地控制页面的外观。

全局字体和颜色

Global Fonts（全局字体）：

• 设置方法：在 Panel 的“Global Settings”中，选择“Global Fonts”。
• 作用：定义网站的 Primary（主要）、Secondary（次要）、Text（正文）、Accent（强调）等字体样式。

Global Colors（全局颜色）：

• 设置方法：在 Panel 的“Global Settings”中，选择“Global Colors”。
• 作用：设定网站的主要颜色，如 Primary、Secondary、Text、Accent 等。

优势：

• 一致性：确保网站各部分的样式统一。
• 高效性：修改全局设置后，相关元素会自动更新，无需逐个调整。

使用 Style（样式）选项卡

每个 Widget 都有三个选项卡：Content（内容）、Style（样式）、Advanced（高级）。

1. Content（内容）：
   • 设置 Widget 的基本内容，如文本、图像、链接等。
2. Style（样式）：
   • Typography（排版）：字体、大小、颜色、行高、字间距等。
   • Background（背景）：纯色、渐变、图片、视频背景等。
   • Border（边框）：设置元素的边框类型、颜色和圆角程度。
   • Box Shadow（盒子阴影）：添加阴影效果，提升视觉层次感。
3. Advanced（高级）：
   • Margin（边距）和 Padding（内边距）：调整元素与其他元素之间的空间。
   • Motion Effects（动态效果）：添加 Entrance Animation（进入动画）、Hover Animation（悬停动画）等动态效果。
   • Custom CSS（自定义 CSS）（Pro 功能）：针对特定元素添加自定义样式。

调整边距和内边距

Margin（边距）：

• 作用：元素与外部其他元素之间的距离。
• 设置方法：在“Advanced”选项卡中，输入 Top（上）、Bottom（下）、Left（左）、Right（右）的边距值。

Padding（内边距）：

• 作用：元素内容与其边框之间的距离。
• 设置方法：同样在“Advanced”选项卡中设置。

注意事项：

• Link Values Together（链接值）：默认情况下，四个方向的值是链接的，修改一个方向会同步修改其他方向。点击链接图标可取消链接，单独设置。
• 单位选择：可以使用 Pixels（px）、Percent（%）、Viewport Width（vw）等单位，灵活控制布局。