Elementor Pro 教程:编辑标题与段落小部件并应用全局样式

使用 Elementor Pro 构建页面时,内容和样式的调整效率直接影响整体视觉表现。本文讲解标题(Heading)和文本(Text Editor)小部件的使用方法,并介绍全局颜色与字体的配置方式,帮助实现统一设计与高效编辑。

一、Elementor Pro 小部件的三个核心设置区域

在 Elementor Pro 中,大多数小部件包含三个主要设置标签:

内容(Content):填写文字、插入链接、设置 HTML 标签

样式(Style):调整颜色、字体、阴影、间距等

高级(Advanced):设置边距、宽度、位置、滚动动画等参数

这种结构几乎出现在所有核心组件中,便于快速上手和统一管理。

二、编辑标题小部件(Heading)

1. 输入标题内容

点击标题小部件,进入左侧面板。输入文本后,画布中实时更新。HTML 标签建议根据结构选择,例如首页主标题常设为 <h1>。可以设置对齐方式,如居中。

2. 设置颜色样式

在“样式”标签中,点击颜色选择器左侧的地球图标,可以打开全局颜色面板。如果图标是彩色,说明当前使用的是全局样式。如果是灰色,表示为临时自定义颜色。

选择预设颜色样式快速完成配色。也可以手动选择颜色或输入色值,创建新颜色后点击“+”保存为全局颜色,并输入名称,方便后续重复使用。

3. 管理站点颜色

点击左下角齿轮图标,进入站点设置页面,选择“Global Colors”。此处可集中管理主色、辅助色、文本色等,同时支持新增和删除自定义颜色,方便全站统一风格调整。

三、字体样式统一设置

Elementor Pro 提供全局字体功能,帮助页面维持一致的排版风格。

1. 应用全局字体样式

在“样式”标签中点击铅笔图标,打开字体设置面板。可选择 Google 字体,调整字号、字体粗细、字距、行高等属性。设置完成后,使用该字体样式的所有模块将同步更新。

2. 集中管理字体风格

在站点设置中进入“Global Fonts”,可以设定多个字体角色,例如 Primary(主字体)、Secondary(副字体)、Text(正文字体)等。也可以新增自定义角色,用于菜单、按钮、提示语等不同场景。

四、段落文字小部件(Text Editor)

1. 添加段落文本

拖入文本编辑器小部件,输入或粘贴内容。Elementor Pro 提供内建 AI 文本辅助工具,点击“Write with AI”可快速生成、扩展或缩短段落内容。

生成后可以直接在画布中进行微调,非常方便。

2. 设置文本样式

文本段落同样支持全局颜色与字体。直接在样式标签中选择全局字体,配合文字颜色,实现视觉统一。

3. 调整文本布局

进入“高级”选项卡,将宽度设置为 Custom。通过拖动滑块控制段落内容的行宽,使其更适合阅读。再将 Align Self 设为居中,使排版更合理。

五、结语

Elementor Pro 提供强大的样式管理体系,配合全局颜色与字体功能,可以大幅提升编辑效率,并维持整体设计一致性。标题与段落是构建页面的基础模块,熟练掌握其设置方法将对后续页面搭建有极大帮助。

Leave a Reply

您的电子邮箱地址不会被公开。 必填项已用 * 标注