文章分类
新手入门学习建站主机推荐
非常适合外贸新手入门的一款共享主机,非常简洁的管理面板,第一年费低至300元!
文章标签

Elementor动态内容是什么?如何使用?

文章导航

Elementor动态内容是一种可以从网站其他地方获取数据的功能。在Elementor Pro的主题构建器中经常需要用到这项功能。本文将详细介绍Elementor动态内容是什么以及如何使用动态内容来构建我们的网站。

在使用之前你需要安装激活Elementor Pro,否则无法使用动态内容。

本站提供Elementor Pro官方授权,49元1个站点每年,如有需要可以联系获取。

1、Elementor动态内容是什么?

动态内容本质上就是去读取和展示WordPress中动态的内容,比如博客的列表、标题、博客对应的分类、博客发布的日期等等。

我们在使用Elementor Pro构建主题模板时通常都需要通过动态内容来调取和展示网站后台中博客、产品等的数据。

2、Elementor的动态内容如何工作?

我们在制作主题模板时,模板展示的对应的内容的数据都是通过动态内容来呈现的。

以下面的产品详情页面模板为例:

两个一个标题,一个用静态标题标签(就是一个普通Heading元素),另外一个用动态内容(Heading元素动态标签者直接用动态内容Product Ttile元素)

Elementor的动态内容如何工作

静态标签在每个产品页面显示的内容都是你在模板中设置的文本内容,而动态内容在不同产品的显示内容是不同产品的标题。

这是因为动态标签可以自动去抓取和展示当前产品的标题。如果你设置的动态内容是其他动态标签,比如产品分类的信息,它也会展示当前产品所属分类的信息。

Elementor动态内容

需要注意的是,不同动态内容类型的需要通过不同的的元素来展示,比如特色图片就需要通过图片元素来展示,文本内容需要通过文本元素来实现。

以上就是动态内容的运作方式。

3、如何使用Elementor的动态内容?

1)主题模板的动态元素

我们在通过Theme Builder制作主题模板时,在元素库里面会出现很多模板可以使用元素,比如下图时Single Product模板,其中红色框出的就是模板可以使用的动态元素。

动态元素可以自动去获取对应字段的内容。

比如: Product Title就是可以自动获取并展示产品标题的动态元素,我们将它放在Single Product模板中,所有通过该模板展示的产品的标题就可以通过你设置的Product Title的元素外观和位置来进行展示。

Elementor动态内容

2)元素的动态标签

元素的动态标签是针对普通元素而言的。

Elementor会给元素的可编辑内容添加动态标签。像下图中编辑内容有箭头指示的图标就代表该内容可以设置动态标签。

没有动态标签标志则不可以设置动态标签,部分扩展也可以帮助你实现元素更多的动态标签内容,比如E-addon插件。

image 13 - Elementor动态内容是什么?如何使用? - NUTSWP

4)动态标签的内容有哪些?

当我们点开动态内容标签标志的时候,会出现下拉,里面就是可以选择的动态标签内容。

下来列表你可以看到更多的动态标签内容。

image 14 - Elementor动态内容是什么?如何使用? - NUTSWP

不同的动态标签内容代表不同的字段,比如:上图中的Post Title就代表文章标题,如果你动态内容设置成Post Title,则元素的内容将展示对应文章的标题。

但是,你需要注意,你最好是在文章详情页面模板中使用,如果在一个普通页面中,比如About页面中在某一个元素内容中设置动态标签为Post Title,获取的将是当前页面的标题。

同时你还需要注意的是,图片只能选择图片类型的动态标签内容,比如你在博客详情页模板中,想要设置字段来展示文章的特色图片(Featured Imge),你只能通过图片元素或者带有图片内容的元素,并设置图片的动态数据来获取和展示特色图片。

image 15 - Elementor动态内容是什么?如何使用? - NUTSWP

由于动态内容较多,我这里就不一一再做说明,你可以自己去尝试每一个字段以了解这些动态字段的含义。

3)高级自定义字段(Advanced Custom Field)+动态内容

Elementor Pro支持高级自定义字段插件,也就是Advanced Custom Field插件,以下简称ACF。

我们可以通过ACF给内容添加自定义字段,比如我想要给我产品添加一个视频的字段,我们可以设置一个字段组,并在字段组中添加一个Url类型的字段,设置字段名称为Youtube。

image 16 - Elementor动态内容是什么?如何使用? - NUTSWP

同时设置好显示条件。

image 17 - Elementor动态内容是什么?如何使用? - NUTSWP

之后我们就可以产品编辑中的自定义字段添加一个Youtube链接。

image 18 - Elementor动态内容是什么?如何使用? - NUTSWP

添加链接之后,我们在Single Products模板中添加一个视频元素,并设置视频来源的动态内容为ACF字段,让后设置字段的Key为我们添加的Youtube字段即可。

image 19 - Elementor动态内容是什么?如何使用? - NUTSWP

同时你还可以给视频设置封面,封面可以设置产品的特色图片,你可以添加一个图片类型的自定义字段来上传视频的封面。

image 20 - Elementor动态内容是什么?如何使用? - NUTSWP

这样设置之后,只要产品的Youtube自定义字段中添加了视频地址的,就能够通过模板展示出来,如果没有添加则不显示任何内容(即空白的视频也不会显示)。

当然,ACF提供了非常多的字段类型,有些字段你需要借额外的Elementor扩展插件才能展示,比如Relatinal类型的字段,你就需要能够提供relational设置的元素才可以获取。

一个非常典型的例子,你可以给产品设置一个Ralational的Post Object类型字段,这个字段可以在编辑产品的时候去选择一些相关的文章,比如说和这个产品相关的项目介绍等等。

然后你需要在产品详情页模板中添加一个可以展示Ralational的Post Object类型的元素,Dynamic Content for Elementor就提供这样的功能。

相关内容
Zapier Webhook 实现询盘提交关键词过滤和邮件转发教程

本文介绍如何使用Zapier Webhook 实现询盘提交关键词过滤和邮件转发教程,将Zapier流程集成到Elementor Form中可以实现表单消息关键词过滤和转发。 此方法适合需要过滤垃圾关键词询盘邮件消息的用户,一般表单安全验证主要是防止机器人提交垃圾信息,但是无法阻止人工发送的垃圾询盘,

阅读全文 »
Elementor的操作记录和修订版本

本文介绍如何借助Elementor的操作记录和修订版本进行Elementor页面恢复操作? 如果你在找古腾堡编辑器的修订版本的操作方法,请阅读《古腾堡编辑器的修订版本》 Elementor目前有2种画布窗口模式,所以我会分别介绍修订版本操作在哪里进入编辑。 如果你是传统的画布窗口 在编辑窗口左侧工具

阅读全文 »
Elementor Floating Buttons移动端全宽不生效

Elementor新出的Floating Buttons功能,发现了Mobile Bar的移动端全宽不生效,这个问题我在本地测试发现所有的Mobile Bar模版的移动端全宽开启都不生效。 根据排查的方法,我也进行了一些的排查工作,发现问题任然存在。 于是通过自定义CSS代码,修复了这个问题。 CS

阅读全文 »
RankMath面包屑使用教程详解(附视频)

本文介绍RankMath面包屑使用教程,如果你安装的RankMath SEO就可以使用它提供的面包屑功能,免费版的通常是通过短码来实现,但是RankMath SEO Pro提供集成到Elementor的面包屑元素,你可以通过Elementor来编辑它的外观。 RankMath面包屑设置详解 在使用之

阅读全文 »
Elementor元素管理器

Elementor元素管理器是Elementor的一项基础功能,通过它你可以管理网站中所有的Elementor元素,包括Elementor第三方插件的元素。通过Elementor 元素管理器禁用不需要的Elementor 元素,可以加快网站加载的时间,并避免一些兼容性问题。 Elementor 元素

阅读全文 »
文章分类
新手入门学习建站主机推荐
非常适合外贸新手入门的一款共享主机,非常简洁的管理面板,第一年费低至300元!
文章标签
想快速搭建一个完全属于自己的外贸独立站?
本站提供专业的外贸建站服务,如果你不想自己花时间精力搭建网站,可以将你的需求告诉我,我来帮助你搭建一个专业外贸独立站!
文章导航
文章分类
文章标签
建站咨询请联系企业微信
感谢你的信任!
咨询和购买请通过微信和我联系!