首页

这里以房地产案例中的News模板来讲解如何使用Elementor编辑器创建网站的文章聚合页面。

该页面分为左侧和右侧，左侧有两个标题，右侧有一个文本描述部分，因此我们首先创建一个一行两列的待编辑内容块，其"内容宽度"为1400px，"高度"为最小高度，尺寸为600px。然后，在内容部分的"样式"中设置"背景类型"为经典，"颜色"参数为#FFF7F1。

输入标题"Stay Updated"，将其"HTML标签"设置为H3，文本对齐为左对齐，然后在该标题的"样式"中设置"文本颜色"为#848484，在"排版"中设置字体为Montserrat，字体"尺寸"为15px，"重量"为400。

输入标题"News & Updated"时，首先，你需要在News和&之间添加HTML标签，这样就可以实现文字的换行显示。然后我们将其"HTML标签"设置为H1，文本对齐为左对齐，然后在此标题的"样式"功能中，将"文本颜色"设置为#011640，在"排版"中设置字体为Montserrat，字体"尺寸"为60px，"重量"为300。

现在我们处理右边的描述性文本。首先，将Elementor中的"文本编辑器"功能元素添加到对应的待编辑内容块中，输入相关的描述性文本，在其"样式"功能中将对齐方式设置为左对齐，文本颜色为#848484，然后在"排版"功能中设置字体为Montserrat，"尺寸"为16px，"重量"为300，"行高"为2em。

在添加标题和文本描述的第一部分后，我们将添加Posts部分的内容。

这部分内容涉及到以前的案例。首先，创建一个一行一列的待编辑内容块，并设置其"内容宽度"为1400px，然后在"高级设置"中设置其"内距"的顶部和底部为200px。

然后将Elementor编辑器中的专业版功能元素Posts拖到新创建的大内容块中。在Posts的"内容"功能中设置"Layout"的"皮肤"类型为Cards，"Columns"为3，"Posts Per Page"为9，"Show Image"为Yes，"Masonry"为OFF，"图像尺寸"为完整的，"Image Ratio"为0.62（注意，这个参数需要根据自己的实际图片大小微调，不要和案例中的参数一样），"Title"为SHOW，"Title HTML Tag"为H3，"Excerpt"为SHOW，"Excerpt Length"（摘要长度）为25（注：摘要长度在中英文状态下会有比较大的差别），然后在"Meta Data"中选择Date，不需要设置其他选项，只需保持默认状态即可。

"Layout"参数设置完成后，我们必须对"Query"中的参数进行设置。首先在"Source"下拉列表中选择"文章"，即Posts，"Include By"不需要设置，所以每次我们发布新的原创内容，这个Blog文章聚合页面将根据内容的新鲜度进行排列，用新内容代替旧内容。然后将"Date"设置为All，"Order By"设置为Date，"Order"设置为DESC，"Ignore Sticky Posts"设置为是。

在Pagination中，我们应该选择Numbers+Previous/Next，也就是说，我们目前设置的是单页只显示9篇原创文章，但我们的整个网站肯定有不止9篇文章，所以我们需要设置翻页功能。Pagination设置的效果是用数字页码和上一页和下一页按钮翻页。

我们在"Posts"功能元素的"样式"中，将"Columns Gap"和"Rows Gap"分别设置为50和35，"Card"不需要设置（如果是自己的网站，可以设置鼠标指针悬停效果）。然后在"Image"中设置"Spacing"参数为15，在"Content"中设置"Title Color"为#011640，字体为Montserrat，字体"尺寸"为18px，"重量"为400。

设置Meta的文字颜色为#011640，"Separator Color"不需要设置，然后在"排版"中设置字体为Montserrat，字体"尺寸"为15px，"重量"为300。

设置"Excerpt"的文字颜色为#848484，"Spacing"为5，在"排版"中设置字体为Montserrat，"尺寸"为16px，"重量"为300。

这样，我们就完成了文章聚合页面的制作，案例中"Posts"功能元素下方还设置了"Get Updates And Stay Connected-Subscribe To Our Newsletter"等功能板块，也是不错的设置，甚至可以在页面上添加"最受欢迎的博客文章列表"、"我猜你可能对这些内容感兴趣"、"读过上述博客文章的访客也读过以下内容"等部分，以提高访问者在我们网页上访问的深度。