按钮和链接需要的不仅仅是一个网址,它们需要一个新窗口打开切换、一个 nofollow 选项,有时还需要自定义属性。 URL 字段 在主插件中 小部件生成器 elementor 在其他地方使用相同的链接控制为您的自定义小部件提供相同的链接控制,因此编辑器会获得熟悉的链接选择器而不是纯文本框。
与每个 Widget Builder 字段一样,URL 字段也支持 条件.其价值通过 Twig-语法模板引擎 有点访问, {{ link.url }}, {{ link.is_external }}(so)个部分落地右属性,两个指南都涵盖了细节。
URL 字段掉到小部件面板中,选择要暴露的链接选项,然后用短代码将其连接到标记,本指南主要关注 URL 字段,但它也会快速掉落 文本字段 所以你可以同时设置按钮标签。
URL 字段的作用 #
URL 字段在您的小部件的选项面板中渲染 Elementor 的链接控制,编辑器粘贴链接,翻转他们需要的选项,您的小部件输出一个适当的锚标记,一个文本字段中持有原始地址无法为 URL 字段为您处理目标和 rel 属性,因此外部链接打开正确,nofollow 一键即可。
它自然地与可见标签的文本字段配对。在号召性用语按钮中,URL 字段携带链接,文本字段携带按钮上的单词。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。
- Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
- Widget 生成器编辑器中打开的自定义小部件,如果这是您的第一个,请阅读 小部件生成器概述 首先。
URL 字段的添加方法 #
在 Widget Builder 编辑器中,找到左侧的字段面板并拖动 网址 字段放入下面的部分 内容, 风格、或者 高级 tab。link控件通常生活在content下,一旦到位,字段的选项就会在左侧打开,其短代码就会显示在 文档 代码编辑器旁边的侧边栏。
URL 字段选项进行了解释 #
URL 栏位来打开它的设置,前几个选项与其他栏位匹配,那么你就得到一组特定于链接的选择。
- 标签: elementor 中控制上方显示的文本,例如 “Url” 或 “Button Link”。
- 名称: field的唯一标识符,字母、数字、下划线只。这就成了你的短码,所以一个字段被命名
url给你{{url}}. - 描述: 可选的帮助者文本显示在控件下方。
- 占位符: 当链接框为空时显示的微弱提示。
- 默认值: 起始链接,如果您希望在任何人编辑之前将按钮指向某个地方。
URL 选项 #
的 URL 选项 group 决定链路控件的哪些部分出现在 Elementor 中, 只勾选小部件需要什么:
- URL 输入: link 字段本身,编辑器在其中粘贴地址。
- 在新窗口中打开: 设置的切换
target="_blank"在链接上。 - 添加不关注: 添加的切换
rel="nofollow"的,对赞助或不受信任的链接有用。 - 自定义属性: 中额外属性的字段
key|value格式,方便分析挂钩或数据属性。
常见设置:响应式、动态等 #
URL选项下面,您会得到相同的 常用设置 as 构建器中的每个字段:显示标签、标签块、响应式控制、动态支持、可用前端、分离器和条件 动态支持在这里是有用的,因为它让链接从动态源中拉出 文本字段文档 详细解释每一个。
将字段连接到您的代码 #
URL 字段给你一个短代码加上几个子代币,所以你可以将每个链接选项映射到右边的 HTML 属性。对于一个名为的字段 url:
{{url.url}}输出链接地址href属性。{{url.is_external}}输出目标,因此新窗口中的"“切换"有效。{{url.nofollow}}输出 “Add nofollow” 切换的 rel 值。
将它们放入锚标签中,然后添加 a 文本字段 令牌喜欢 {{button_text}} 为可见标签:
Anchor 现在从单个 URL 控件中拉出它的链接、目标和 rel,Text 字段提供单词。将小部件和按钮渲染保存为编辑器设置的任何内容。一件值得了解的事情:如果您只放置 {{url}} 您可以自行获取地址,但无法获取目标或 nofollow 行为,因此当这些切换很重要时,请使用子代币。
在元素器中使用 URL 控件 #
Elementor编辑器中拖动自定义小部件到页面上打开,网址字段显示为标准链接控制:地址的框,加上您启用的切换。粘贴链接,如果需要,打开“新窗口打开”,按钮实时更新。
Demo 中,标有 “Button Text” 的 Text 字段将按钮设置为 “选择你的计划”, URL 字段将其指向目标链接。两个小字段,并且您有一个完全可编辑的号召性用语按钮,任何人都可以从 Elementor 更新。
常见用例 #
- 呼叫操作按钮 具有可编辑的链接、文本和新窗口行为。
- 定价或计划按钮 那一点要结账。
- 阅读更多链接 在卡片和功能块上。
- 赞助商或附属链接 哪里不重要。
- 跟踪链接 使用自定义属性进行分析数据。
URL 字段的操作技巧 #
- 仅公开您需要的选项。 如果按钮从未打开新选项卡,请关闭该选项以保持控制干净。
- 使用子代币,而不仅仅是
{{url}}. 地图{{url.url}},{{url.is_external}}、和{{url.nofollow}}所以每个切换实际上都会做一些事情。 - 将其与文本字段配对 为按钮标签,而不是硬编码HTML中的单词。
- 打开 nofollow 获取赞助商链接 留在搜索指南的右侧。
- 在引用其短代码之前构建该字段。 该令牌仅在字段位于面板上之后才存在。
常见问题 #
Master Addons Widget Builder 中的 URL 字段是什么?
URL 字段将 Elementor 的链接控制添加到自定义小部件中,编辑器粘贴链接和切换选项,例如在新窗口中打开和 nofollow,并且您的小部件使用字段的短代码和子代币输出正确的锚标记。
如何使"在新的窗口中打开"切换在我的自定义小部件中工作?
使用锚标签中的子令牌。对于指定的字段 url,设置 target="{{url.is_external}}" on the link。elementor 中,当编辑器翻转切换时,目标属性会更新,因此链接会在新选项卡中打开。
我可以将 nofollow 添加到 Widget Builder 小部件中的链接吗?
是。启用在字段的 URL 选项中添加 nofollow,然后输出 rel="{{url.nofollow}}" on your anchor 标签。Elementor 中编辑器打开 nofollow 时,rel 属性会自动添加。
如何将按钮文本与链接分开设置?
URL 字段旁添加一个 Text 字段,URL 字段带有链接,Text 字段带有可见标签,放置 Text 字段令牌,像 {{button_text}}、开闭锚标签之间。
自定义属性有什么用途?
自定义属性让编辑器向链接添加额外的 HTML 属性 key|value format。they对于分析挂钩,数据属性,或者你的脚本或跟踪工具在锚元素上需要的任何属性都很有用。
包裹起来 #
Widget Builder URL 字段将一个普通链接变成您自己的自定义小部件内部的完整 Elementor 链接控制。选择要曝光的选项,将子代币连接到您的锚标签中,将其与标签的文本字段配对,并且您有一个可编辑的按钮,可以处理链接、新窗口和无硬编码标记的 nofollow。查看其余部分 主插件小部件和扩展并且检查 定价页面 对于每个计划包含的内容。
