Elementor动态内容是一种可以从网站其他地方获取数据的功能。在Elementor Pro的主题构建器中经常需要用到这项功能。本文将详细介绍Elementor动态内容是什么以及如何使用动态内容来构建我们的网站。
在使用之前你需要安装激活Elementor Pro,否则无法使用动态内容。
本站提供Elementor Pro官方授权,49元1个站点每年,如有需要可以联系获取。
1、Elementor动态内容是什么?
动态内容本质上就是去读取和展示WordPress中动态的内容,比如博客的列表、标题、博客对应的分类、博客发布的日期等等。
我们在使用Elementor Pro构建主题模板时通常都需要通过动态内容来调取和展示网站后台中博客、产品等的数据。
2、Elementor的动态内容如何工作?
我们在制作主题模板时,模板展示的对应的内容的数据都是通过动态内容来呈现的。
以下面的产品详情页面模板为例:
两个一个标题,一个用静态标题标签(就是一个普通Heading元素),另外一个用动态内容(Heading元素动态标签或者直接用动态内容Product Ttile元素)
静态标签在每个产品页面显示的内容都是你在模板中设置的文本内容,而动态内容在不同产品的显示内容是不同产品的标题。
这是因为动态标签可以自动去抓取和展示当前产品的标题。如果你设置的动态内容是其他动态标签,比如产品分类的信息,它也会展示当前产品所属分类的信息。
需要注意的是,不同动态内容类型的需要通过不同的的元素来展示,比如特色图片就需要通过图片元素来展示,文本内容需要通过文本元素来实现。
以上就是动态内容的运作方式。
3、如何使用Elementor的动态内容?
1)主题模板的动态元素
我们在通过Theme Builder制作主题模板时,在元素库里面会出现很多模板可以使用元素,比如下图时Single Product模板,其中红色框出的就是模板可以使用的动态元素。
动态元素可以自动去获取对应字段的内容。
比如: Product Title就是可以自动获取并展示产品标题的动态元素,我们将它放在Single Product模板中,所有通过该模板展示的产品的标题就可以通过你设置的Product Title的元素外观和位置来进行展示。
2)元素的动态标签
元素的动态标签是针对普通元素而言的。
Elementor会给元素的可编辑内容添加动态标签。像下图中编辑内容有箭头指示的图标就代表该内容可以设置动态标签。
没有动态标签标志则不可以设置动态标签,部分扩展也可以帮助你实现元素更多的动态标签内容,比如E-addon插件。
4)动态标签的内容有哪些?
当我们点开动态内容标签标志的时候,会出现下拉,里面就是可以选择的动态标签内容。
下来列表你可以看到更多的动态标签内容。
不同的动态标签内容代表不同的字段,比如:上图中的Post Title就代表文章标题,如果你动态内容设置成Post Title,则元素的内容将展示对应文章的标题。
但是,你需要注意,你最好是在文章详情页面模板中使用,如果在一个普通页面中,比如About页面中在某一个元素内容中设置动态标签为Post Title,获取的将是当前页面的标题。
同时你还需要注意的是,图片只能选择图片类型的动态标签内容,比如你在博客详情页模板中,想要设置字段来展示文章的特色图片(Featured Imge),你只能通过图片元素或者带有图片内容的元素,并设置图片的动态数据来获取和展示特色图片。
由于动态内容较多,我这里就不一一再做说明,你可以自己去尝试每一个字段以了解这些动态字段的含义。
3)高级自定义字段(Advanced Custom Field)+动态内容
Elementor Pro支持高级自定义字段插件,也就是Advanced Custom Field插件,以下简称ACF。
我们可以通过ACF给内容添加自定义字段,比如我想要给我产品添加一个视频的字段,我们可以设置一个字段组,并在字段组中添加一个Url类型的字段,设置字段名称为Youtube。
同时设置好显示条件。
之后我们就可以产品编辑中的自定义字段添加一个Youtube链接。
添加链接之后,我们在Single Products模板中添加一个视频元素,并设置视频来源的动态内容为ACF字段,让后设置字段的Key为我们添加的Youtube字段即可。
同时你还可以给视频设置封面,封面可以设置产品的特色图片,你可以添加一个图片类型的自定义字段来上传视频的封面。
这样设置之后,只要产品的Youtube自定义字段中添加了视频地址的,就能够通过模板展示出来,如果没有添加则不显示任何内容(即空白的视频也不会显示)。
当然,ACF提供了非常多的字段类型,有些字段你需要借额外的Elementor扩展插件才能展示,比如Relatinal类型的字段,你就需要能够提供relational设置的元素才可以获取。
一个非常典型的例子,你可以给产品设置一个Ralational的Post Object类型字段,这个字段可以在编辑产品的时候去选择一些相关的文章,比如说和这个产品相关的项目介绍等等。
然后你需要在产品详情页模板中添加一个可以展示Ralational的Post Object类型的元素,Dynamic Content for Elementor就提供这样的功能。