版式

的 版式字段 gives一个自定义小部件完全相同的排版面板elementor的核心小部件使用:字体系列与谷歌字体,大小,重量,变换,样式,装饰,行高,字母间距和单词间距,所有响应每个设备的主插件内部 小部件生成器、你添加一次字段,将其指向一个 CSS 选择器,任何编辑 Elementor 中的小部件的人都可以重新调整文本的样式,而无需触摸代码。

与每个小部件生成器控件一样,Typography 支持 条件因此,您可以将其隐藏起来,直到自定义样式切换打开。跨构建器的令牌输出贯穿于 Twig-语法模板引擎;两份指南都涵盖了细节和局限性。

Typography字段与文本或颜色字段不同,在你的CSS中,Typography字段不使用短代码,你告诉字段它控制哪个选择器,Elementor将排版样式自己写到那个选择器上,一个字段,一个选择器,完成。

Typography 字段的作用 #

Typography 字段在您的小部件的选项面板中渲染 Elementor 的排版组控件, 当有人选择该小部件并单击该字段标签旁边的铅笔图标时, 弹出窗口将打开, 显示全套文本控件:

• 字体系列: 可搜索的下拉,其中包含系统字体、google 字体以及网站上注册的任何自定义字体。
• 字体大小: 滑块和输入具有 px、em、rem 和 vw 单位,每个设备响应。
• 字体重量: 100 到 900 加上普通和粗体。
• 变形、风格和装饰: 大写和小写,斜体和斜体,下划线和直线。
• 线高、字母间距和字间距: 每个都有自己的响应输入。

Globe图标也在那里,因此小部件可以关注该网站 全球字体 presets 而不是一个一次性的样式,这跟其他 Widget Builder 字段遵循相同的模式:丢弃字段,命名它,连接它,一个区别是它如何连接,通过选择器而不是短代码,如果你是新建小部件的人,从 小部件生成器概述 首先。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
• Widget Builder 编辑器中打开的自定义小部件。我们的示例是一个餐厅英雄小部件,带有 <h1 class="bfh-title"> 标题和a <p class="bfh-lede"> 其 HTML 中的介绍段落。

如何添加字体排印字段 #

在 Widget Builder 编辑器中,滚动左侧的字段面板,直到找到 版式 字段,与其他样式组字段一起列出。

将版式字段拖动到下面的部分中 内容, 风格、或者 高级 tab。style是它的天然家园,虽然它可以在任何地方工作,一旦它降落,该领域的选项在左侧打开。

字体排印字段选项已解释 #

选择"字体排印"字段以打开其设置。

• 标签: elementor中控件旁显示的文本, “Typography”默认情况下, 在一个小部件中带有几个排版字段, 使用 “Title Typograph” 和 “Button Typograph” 这样的名称。
• 名称: field的唯一标识符,它必须只包含字母、数字和下划线,例如 title_typography.
• 描述: 可选的帮助者文本显示在控件下方。
• 选择器: CSS选择器排版样式适用于。这是使现场工作的一个设置,在下一节中介绍。
• 默认值: elementor的全局字体预设之一的可选链接字段—主、次、文本或重音。然后,小部件以应用的预设开始,如果网站的全局字体发生变化,则跟随它。
• 显示标签 並 分离器: 标准显示切换,加上仅在另一个控件具有一定值时显示字段的条件。

将字段指向您的选择器 #

这是如果人们习惯了其他领域,就会绊倒他们的部分: 版式字段没有 {{shortcode}} 为您的 CSS。 排版值是一整捆属性,而不是单个值,因此它无法打印成一个 CSS 声明,而是填写 选择器 option 和 Elementor 为您生成样式。

Hero的介绍段落, 选择器是:

{{WRAPPER}} .bfh-lede

• {{WRAPPER}} stands代表小部件自己的容器,所以样式只曾经击中过这个小部件,并且永远不会泄漏到页面的其余部分,总是用它启动选择器。
• .bfh-lede 是小部件 HTML 中控件应样式的元素。
• 要使用一个控件驱动多个元件,请使用逗号分隔选择器并给出每个元件自己的选择器 {{WRAPPER}}: {{WRAPPER}} .bfh-title, {{WRAPPER}} .bfh-lede.

Selector 留空,则字段会回落到小部件的整个容器中,它会一次为小部件中的每一段文本进行样式,那通常比你想要的要多。设置选择器,然后单击 保存设置.

CSS 选项卡中的样式表一直作为小部件的起始外观。随便 font-family 或 font-size 您写入该位置会一直保留到用户在面板中选择某些内容为止;然后控件的值会覆盖它。

使用 Elementor 中的印刷控制 #

Elementor 中的页面中添加自定义小部件,或者如果页面已经打开,则重新加载编辑器。选择小部件,并且打印控制显示在其面板中,其中包含您设置的标签、全局字体的全局图标和自定义值的铅笔图标。

选择字体系列和大小 #

单击铅笔图标可打开排版弹出窗口。 家庭 dropdown 搜索系统字体和完整的谷歌字体库,当你输入。在它下面, 尺寸 px、em、rem或vw中取值,设备图标可让您设置每个断点不同的大小—一个96px的桌面标题可以从同一控制下在手机上降至48px。

设置重量、间距和其他 #

同样的弹出窗口成立 重量, 变换, 风格, 装饰, 线高, 字母间距、和 字距。每个更改都住在预览中,因此您可以看到标题在拉低字母间距时收紧,如果似乎没有任何变化,请检查您的选择器是否实际上与小部件 HTML 中的元素匹配;类名中的错别字会默默失败。

或者关注该网站的全球字体 #

击"地球图标,而是选择"主、次、文本或"重音,小部件的文本现在遵循该全局预设,当重新设计交换站点的字体时,此小部件遵循该字段,而无需任何人触摸。如果在字段上设置"默认值,则当小部件首次丢弃在页面上时,此链接已经处于活动状态。

在我们的示例中,标题以 98px 的速度切换到脚本面,直接从 Google 字体列表中选择,并且预览会在字体加载时重新绘制。

常见用例 #

• 英雄和横幅小部件中的标题 每个网站都想要自己的显示字体。
• 按钮 这需要匹配网站现有的按钮排版。
• 卡片标题和摘录 每个都有单独的字段,因此标题和正文独立缩放。
• 推荐和引用小部件 引文采用斜体衬线,归因保留在正文字体中。
• 面向客户端的小部件 编辑者应该在不打开 CSS 的情况下自由地重新调整文本。

使用印刷领域的提示 #

• 选择器选项是整个连接。 没有排版短代码可以粘贴到您的 CSS 中 —设置选择器并让 Elementor 编写样式。
• 始终启动选择器 {{WRAPPER}}. 没有它,样式将适用于页面上的每个匹配项,而不仅仅是您的小部件。在逗号分隔的列表中,每个部分都需要自己的部分 {{WRAPPER}}.
• CSS 选项卡中保留基本样式。 它们是小部件在新滴上的样子;该控件仅覆盖用户实际更改的内容。
• 每个文本角色一个字段。 Title字段、body字段、按钮字段,让编辑器控制干净,一个字段指向整个小部件,将所有内容都压平为单一风格。
• 使用客户端站点的全局字体默认值。 将字段链接到主页或副页从第一天起就使自定义小部件与网站的设计系统保持一致。

常见问题 #

包裹起来 #

Widget Builder 字体排印字段将他们已经从 Elementor 自己的小部件中知道的面板进行编辑,使用 Google 字体、响应式大小和全局预设,在自定义小部件的任何元素上命名字段,将选择器设置为 {{WRAPPER}} plus 元素的类,并且每个字体决定都会从你的样式表中移出并进入面板。将其与。 边境领域 和 文本字段 在一个地方构建一个涵盖内容和风格的小部件面板。探索其余部分 主插件小部件和扩展,并看到 定价页面 对于每个计划包含的内容。