文本字段

的 文本字段 是您在任何时候都触及到一个自定义小部件需要一行文本,有人可以编辑:标题,标签,简短的标题,按钮字。在主插件内 小部件生成器、您将文本字段放入小部件面板中,为其起一个名称,该名称就会成为您在 HTML、CSS 或 JS 中放置的短代码。无论 Elementor 中的用户类型如何,都可以直接打印到您的标记中。

与每个 Widget Builder 字段一样,文本字段也支持 条件的,所以可以根据另一个字段的值显示或隐藏控件,它的输出也贯穿于构建者的 Twig-语法模板引擎的,它可以让你把令牌包裹进去 {% if %} 检查或应用过滤器等 |upper.两份指南都涵盖了设置和限制。

不过,它的作用不仅仅是打印普通字符串。文本字段会挂钩 Elementor 的响应式控件和动态标签,因此一个字段可以在移动设备上保存与桌面不同的标题,或者从帖子标题等动态源中提取其值。

Text 字段的作用 #

Text字段在小部件的选项面板中呈现单行文本输入,当有人在Elementor中编辑你的自定义小部件时,他们会看到该输入,键入一个值,你的小部件无论你将匹配的短代码放在哪里都会输出它。

它与构建器中的其他输入字段配对良好。对于较长的多行内容,请访问 文本区域字段.对于格式丰富的内容,使用 所见即所得领域。text 字段是短的、纯字符串的正确选择,如果您是构建小部件的新手,请阅读 小部件生成器概述 首先。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
• Widget 生成器编辑器中打开的自定义小部件。

如何添加文本字段 #

在 Widget Builder 编辑器中,找到左侧的字段面板,然后拖动 文本 字段放入下面的部分 内容, 风格、或者 高级 tab。text输入大多属于content下,一旦到位,字段的选项在左侧打开,其短代码显示在 文档 代码编辑器旁边的侧边栏。

文本字段选项已解释 #

Text 栏位选择打开其设置, 这些选项控制输入在 Elementor 面板中的外观和行为。

• 标签: elementor中字段上方出现的文字。保持简短清晰,如“标题”或“按钮文字”。
• 名称: field 的唯一标识符,它必须只包含字母、数字和下划线,所以没有空格和破折号,这个名字就成了你的短码,所以一个字段被命名 heading 给你 {{heading}}.
• 描述: 栏(field)下方所示的可选帮助文本。用它来解释输入控制的内容。
• 占位符: field 为空时显示的灰色提示,例如“写出标题”, 它在不设置真实值的情况下指导用户。
• 默认值: 该字段以 的值开始。设置类似“构建更好的体验”的东西,以便在任何人编辑之前小部件看起来已经完成。

常见设置:响应式、动态等 #

向下滚动到 常用设置 对于决定字段灵活性的控件。这是您打开响应式值和动态标签的地方。

• 显示标签: 切换标签是否出现在字段上方。
• 标签块: 将标签显示在输入上方而不是旁边自己的行上。
• 响应控制: turn this on,让用户为桌面、平板、移动端设定不同的值,对于小屏幕上需要更短的头条新闻来说是好的。
• 动态支持: 打开此功能可启用 Elementor 动态标签,因此该字段可以从帖子标题或作者名称等来源而不是静态文本中提取其值。
• 前端可用: javascript 前端提供控件的值。当您的小部件的 JS 需要读取该值时启用它。
• 分离器: 设置控件周围出现分界线(无、之前、之后、默认)。
• 条件: 根据另一个控件的值显示或隐藏此字段。单击 添加条件 制定规则。

将字段连接到您的代码 #

Text 每个字段都会从其 Name 中生成一个短代码。添加一个名为 的字段 heading 和令牌 {{heading}} documentation 侧边栏中显示。无论文本属于何处,都将该令牌放入您的 HTML 中。

对于英雄标题来说,变化很小:

• 更换您内部的静态文本 <h1> 与 {{heading}}.
• 保存小部件。现在 <h1> 打印用户在 Elementor 中设置的任何值。

由于短代码只是一个令牌,因此您也可以在 CSS 或 JS 中重复使用相同的字段值。一个字段,很多地方。

使用 Elementor 中的文本控件 #

Elementor编辑器中拖动自定义小部件并打开。文本字段显示为正常控件, 标签、占位符和默认值已就位。两个小图标位于输入旁边: a 设备图标 对于响应式值,以及 动态标签图标 当您启用这些选项时。

Type a new value,小部件更新 live 在下面的例子中,更改标题字段会重写页面上的英雄标题,相同的字段类型对于一个段落、一个按钮标签或任何其他短字符串来说都同样有效,那就是文本字段的全部点:小部件需要打印文本的任何地方,这就是您使用的控件。

从动态标签中提取文本 #

"动态支持"打开, 单击动态标签图标并选择一个源。主插件和元素器列表分组标签, 如存档标题、作者姓名、作者信息和评论编号。选择一个, 字段拉取实时数据而不是静态文本, 这可以节省您在数十个帖子中编辑相同标题的费用。

每个设备设置不同的值 #

Responsive Control开启,点击设备图标在桌面、平板、移动之间切换,然后为每个输入一个单独的值,一个长桌面标题在手机上可以变成一个较短的,而无需触摸桌面版本,值得知道:如果将平板或移动值留空,它会回落到桌面文本,因此您只会覆盖实际需要的断点。

常见用例 #

• 英雄头条 编辑器可以在不打开代码的情况下更改。
• 节段落 和简短的描述。
• 按钮和 CTA 标签 widget 的链接绑定。
• 徽章、标签和小标题 不需要格式化的地方。
• 动态标题 从帖子或存档中提取可重复使用的模板。

使用文本字段的技巧 #

• 有意义地命名字段。 名称成为您的短代码,因此 heading 代码读起来比 field_1.
• 始终设置默认值。 它使小部件在编辑器和第一滴时保持完整。
• 仅当您需要时才打开响应式和动态。 Extra控件使面板混乱,以获得简单的文本。
• 使用占位符作为指导,而不是内容。 它永远不会打印到页面,因此不要依赖它来获取真实文本。
• 在引用其短代码之前构建该字段。 仅当字段位于面板上时,令牌才存在。

常见问题 #

包裹起来 #

Widget Builder Text 字段是使自定义 Elementor 小部件可编辑的最简单方法,命名它,在代码中删除其短代码,设置默认值,并在项目调用时打开响应式或动态支持,之后,任何人都可以从 Elementor 更新文本,而无需触摸一行代码,看看其余部分 主插件小部件和扩展并且检查 定价页面 对于每个计划包含的内容。