如何使用 Elementor 创建博客页面(免费,无需专业人士)

使用 Elementor 创建博客页面

Free Elementor 无法列出您的帖子,帖子小部件、存档帖子、帖子标题和其余的帖子小部件都是 Elementor Pro,在免费安装上,它们显示在小部件面板上,带有挂锁,没有其他任何东西。要在不支付 Pro 费用的情况下构建博客页面,请安装免费 主插件 插件并使用其博客文章小部件,该小部件列出了网格、列表或砖石中的帖子,并在普通元素编辑器内工作。

本指南构建了一个从头到尾的设置,在免费安装时会显示 Elementor 4.2。4 和 Master Addons 3.2 的屏幕截图。它涵盖了布局选择、查询过滤器、大多数教程未错过的类别过滤器选项卡以及决定您的网格是否看起来整洁或破烂的两种设置。

Elementor free 有博客或帖子小部件吗?

No。在免费安装上搜索小部件面板中的“邮”,这就是回来的东西。

Elementor 小部件面板搜索帖子,显示主插件博客帖子已解锁,Elementor 帖子、帖子标题和存档帖子锁定在 Pro 后面

Blog Posts和时间轴上携带紫色主插件徽章,可以拖动,帖子,帖子标题,帖子摘录,存档帖子,帖子评论,帖子导航和帖子信息都带有挂锁,这是Elementor广告Pro从免费插件内部。

所以你有四个选择:

选项列出帖子?成本布局
素(自由)本身否免费的不适用
Elementor Pro 帖子小部件是的每年付费经典、卡片、完整内容
主插件博客文章(免费)是的免费的网格、列表、砖石,加上 14 种卡片和列表样式
Your 主题的默认博客是的免费的无论主题是什么

本指南的其余部分使用免费的 Master Addons 小部件。下面显示的每个控件都在免费插件中。Blog Posts 小部件中的任何内容均未锁定。

开始之前你需要什么

  • WordPress 与 元素 安装。免费版没问题。
  • 免费的主插件。 安装笔记就在这里 如果你想要它们。
  • 几篇发表的帖子。六个或更多使布局更容易判断。
  • 每个帖子上都有一个特色图像。没有一个帖子会在网格中留下空白,并且没有布局设置可以修复这一点。

如何一步一步免费创建 Elementor 博客页面

1步:创建页面

去 页面 → 添加新页面、标题为博客,然后单击 使用元素器编辑WordPress 内容区留空,一切都发生在元素者画布中。

请勿将此页面设置为"设置 → 阅读"下的 WordPress Posts 页面。将 URL 交给您的主题并丢弃 Elementor 设计。有一个关于正确方法的部分可以进一步向下执行。

第 2 步:添加博客文章小部件

搜索小部件面板 博客 和拖 博客文章 on the canvas。它会立即渲染您的最新帖子,因此您可以在更改时看到您正在更改的内容。

3步:选择布局

打开 显示选项。此处的控件设置页面的形状。

显示主插件博客文章小部件的选项面板,其中包含博客布局、博客类型、帖子顺序、顺序、列数和标题 HTML 标签

最重要的两个控件位于顶部:

  • 博客布局:经典或卡片经典将文本放在页面背景上,卡片将每个帖子包裹在自己的面板中。
  • 博客类型:网格布局、列表布局或砖石布局。

在这些下面,设置 列数。是响应式控件,所以可以通过编辑器顶部的切换设备给桌面三列和移动一列,三是带有图像的博客的安全默认值。

现在还有两个值得设置。 标题 HTML 标签 默认值为 H2,这对于博客索引来说是正确的,因为页面标题是 H1,每个帖子标题都位于其下方。和 来源 last Posts和当前查询之间进行选择,将其留在正常博客页面的最新帖子上; 当前查询是为了 存档模板的,其中小部件应该遵循正在查看的类别或作者,而不是其自己的设置。

4步:选择卡片或列表样式

将博客布局设置为卡片和 a 卡布局 控制出现有七种设计。

卡片布局下拉显示七种卡片设计,包括内容重叠、左上元、横幅卡和中心对齐梯度 BG

Default, 内容重叠, 顶部左元, 右对齐卡, 中心对齐卡, 中心对齐渐变BG和横幅卡内容重叠和横幅卡将文本放在图像上, 因此他们需要照片与房间在默认和右对齐卡是比较安全的选择的一组混合的特色图像。

将博客类型切换到列表,卡控件替换为 列表布局类型另外还有七个。

列表布局类型下拉显示七个列表设计,包括列表元背景、列表右按钮和列表缩略图悬停

这总共是 14 种现成设计,其中 7 种用于网格,7 种用于列表,位于三种布局类型之上,因此您很少需要从头开始设计卡片。

5步:设置缩略图大小和悬停效果

打开 缩略图设置。一个破烂的博客页面通常在这里得到修复。

缩略图设置面板,包含缩略图拟合、自定义高度、悬停动画和颜色效果下拉列表十六种效果

默认情况下,小部件会将每个特色图像保持在自己的比例,因此一排风景中的一张肖像照片会将该卡片推到页面上。转动 自定义高度 on 并设置最小值和最大值为相同的值,大约 200 到 240px,每个缩略图裁剪到同一个框。 缩略图适合 设置为覆盖物可以防止农作物压碎任何东西。

在那之下, 悬停动画 使用 Elementor 自己的动画,以及 颜色效果 添加十六种覆盖效果之一:放大和缩小、旋转和缩小、滑动、灰度、模糊、棕褐色、两种模糊组合、两种不透明度褪色、冲洗、闪耀和圆形。 缩略图形状 在顶部添加五个帧:帧、对角线、有边界、梯度有边界和正方形。

挑一种效果,随处使用,一页三不同的读作噪音。

6步:选择要显示的元

打开 帖子设置 并关闭读者不需要的任何东西。

帖子设置面板包含摘录长度、阅读更多文本以及帖子标题、作者、日期、类别、标签和评论计数的切换

摘录长度 55个单词默认,这对于一张卡来说是很长的。将其降至15到25,因此网格保持可扫描状态,点击进入帖子而不是摘要。 阅读更多文字 是自由文本,因此“阅读指南”和“阅读更多”一样有效。

下面的切换控制帖子标题、作者头像、作者姓名、日期、类别、标签和评论独立计数。转动 显示类别? on通常是值得的,因为它为读者提供了进入相关帖子的第二种方式。

7步:过滤出现哪些帖子

打开 高级设置.这是查询部分。

高级设置面板,包含偏移帖子计数、类别过滤器选项卡、按类别过滤器、按标签过滤器、按作者过滤器和要排除的帖子
  • 按类别过滤, 按标签过滤 並 按作者过滤 缩小查询范围。每个都接受几个值。
  • 排除的帖子 按名称删除特定帖子,这就是将固定公告保留在主网格之外的方式。
  • 偏移后计数 n 个帖子跳过,在网格上方设置一个特色小部件,显示最近三个,然后将网格偏移三个,没有帖子出现两次。
  • 新选项卡中的链接 按照它说的去做。

8步:发布并检查结果

Hit 在普通浏览器选项卡中发布并打开页面,这里是完成的网格:三列,卡片,统一缩略图,类别选项卡横跨顶部。

完成的 Elementor 博客页面显示带有类别过滤选项卡的三列卡网格、特色图像、摘录和帖子元

一旦您知道控制装置在哪里,总时间不到十分钟。

将类别过滤器选项卡添加到博客页面

Tabs 横跨那个截图顶部的过滤标签是免费的,而且是人们错过的部分,读者可以按类别缩小网格,而无需离开页面。

Elementor博客页面,其中选择了购买指南类别选项卡,将网格过滤到两个匹配的帖子

打开 类别过滤选项卡 在高级设置中。然后在按类别过滤器字段中选择您想要的类别作为选项卡。选项卡是从该选择构建的,而不是从页面上帖子的类别中构建的。将字段留空,您将获得单个选项卡,而没有其他选项卡,看起来已损坏,但正在按设计工作。

所有文本 重命名第一个选项卡,并且 对齐 行向左、向中或向右移动。过滤选项卡和转盘是相互排斥的,因此如果启用转盘,选项卡将停止渲染。

网格、列表或砖石:使用哪种布局

网格 是默认的,适合大多数博客。等卡,三跨,可扫描。使用它与自定义缩略图高度,因此行排成一排。

列表 list 的时候把一行一帖,缩略图放在文本旁边,把列数设置为 1 列,或者你得到三个列表项并排塞住。

Elementor 博客页面采用列表布局,每行一篇文章,左侧为缩略图,右侧为标题和摘录

List 给摘录提供了喘息的空间,因此它适用于摘要正在进行销售的论文式博客。

砌体 保留列但降低固定行高度,因此卡片按内容堆叠,间隙关闭。

Elementor 博客页面采用砖石布局,三列卡片包装在不同的高度

Masonry是你应该离开自定义高度的一个案例,因为不均匀的高度是它工作的原因,它适合照片主导的博客,当每个特色图像都是相同的形状时就会崩溃。

同一小部件兼作帖子转盘,这是您想要的主页而不是博客页面本身。

旋转木马设置面板具有自动播放、自动播放速度、滚动幻灯片、循环和动画速度控制

开关 启用旋转木马? on和转盘设置部分打开:自动播放和自动播放速度,悬停悬停,滑动到每个设备滚动,中心滑动,抓取光标,无拖动模式,循环和动画速度。layout控制还提供了覆盖流效果,具有自己的旋转,拉伸,修改器和深度设置。

观察者 如果转盘位于选项卡、手风琴或页面加载中隐藏的任何其他内容内,则应该是"是",否则它会以零宽度测量自身并呈现为堆栈。

显示修改后的日期而不是公布的日期

博客文章小部件可以 排序 按修改日期:设置 订单由 到显示选项中最后修改和最近更新的帖子上升到顶部,仅此一项往往是人们真正想要的,因为它可以保持刷新内容的可见性。

将修改后的日期显示为可见文本是不同的,小部件在卡中打印已发布的日期,而底层 <time datetime> atterient 携带修改后的日期,搜索引擎读取该属性,因此即使卡片另有说明,您的更新日期也会被发布,但读者会看到原始日期。

要将修改后的日期显示为文本,您需要 Elementor Pro 的动态标签,其中"帖子日期"标签有一个修改后的选项,用于 Pro Posts 或 Loop Grid 小部件。没有免费的 Elementor 等效项,因为动态标签首先是 Pro 功能。免费上的替代方案是一个过滤的小片段 get_the_time 为您的博客模板。

Blog页面还是帖子页面?设置正确

WordPress 有自己的帖子页面,设置在下面 设置→阅读。你刚建的页面是一个常规页面,两者的行为不同。

如果您将 Elementor 页面指定为"设置 → 阅读"中的"帖子"页面,WordPress 会将 URL 交给主题的存档模板,而忽略您的 Elementor 设计。这是完成博客页面显示主题默认列表的最常见原因。

正确执行此操作的两种方法:

  • 保持正常页面。 留下设置 → 单独阅读,并将您的博客页面添加到"外观 → 菜单"下的菜单中。该页面呈现您的 Elementor 设计,这就是您想要的。
  • 建立真正的档案。 如果您希望 WordPress 存档 URL 本身使用您的设计,请在 中构建存档模板 主插件主题生成器 并将博客文章小部件的来源设置为当前查询,因此它会跟踪正在查看的任何档案。

主插件博客文章与 Elementor Pro 帖子小部件

特点Elementor 专业帖子主插件博客文章(免费)
价格需要 Elementor Pro免费的
适用于自由元素器否是的
布局类型网格、砖石网格、列表、砖石
现成的款式3张皮肤7卡牌样式,7列表样式
缩略图悬停效果CSS 过滤器元素动画加上 16 种颜色效果
缩略图形状边界半径5种形状
元选项作者、日期、时间、评论、头像头像、作者、日期、类别、标签、评论
查询过滤器帖子类型、包含和排除条款类别、标签、作者、排除、偏移
类别过滤器选项卡否是的
旋转木马单独的循环旋转木马小部件内置,带覆盖流
分页数字,上/下,加载更多,无限滚动带有自定义 prev/next 标签的数字
动态标签(修改日期和类似日期)是的不,Pro Elementor 功能
自定义帖子类型是的是的

Elementor Pro 在动态标签、加载更多和无限滚动上获胜。免费的 Master Addons 小部件在布局多样性、悬停效果、过滤选项卡和内置旋转木马上获胜。如果弹出窗口、表单和主题构建已经在拉您走向 Pro,请购买 Pro。如果博客页面是您考虑的唯一原因,这会毫无意义地覆盖它,并且 主插件许可证 仅当您想要其他地方的 Pro 小部件时才值得一看。

看起来错误的博客布局有七个修复

  1. 破烂的卡片高度。 在缩略图设置中打开自定义高度,并将最小值和最大值设置为相同的值,这是十个中的九个固定值。
  2. 网格中的空白矩形。 That post没有特色图片,加一个,甚至是普通的品牌图形。
  3. 吞下卡片的摘录。 将摘录长度从 55 字降至约 20 字。
  4. 三个列表项目并排。 列表布局需要 列数设置为 1 列。
  5. 过滤选项卡仅显示全部。 按类别筛选过滤器中的类别,选项卡来自该字段。
  6. 所有内容都堆叠在一根长列中。 That通常是正确的,用设备切换器检查,故意设置移动列而不是任凭偶然,我们的指南到 元素断点 涵盖其余部分。
  7. 慢博客页面。 在指责小部件之前检查您所显示的图像的大小。首先压缩它们;查看我们的 图像优化器综述 以及笔记 加快元素站点.

常见问题

我可以使用 Elementor 免费版本创建博客页面吗?

Elementor单独使用,因为帖子小部件是Pro。Add免费的主插件及其博客帖子小部件为您提供网格,列表和砖石布局,14卡和列表样式,类别过滤器选项卡,查询过滤器和旋转木马免费。

Elementor free 有帖子小部件吗?

No。A免费安装上,帖子,存档帖子,帖子标题,帖子摘录,帖子评论,帖子导航和帖子信息都出现在带有挂锁的小部件面板中。每个都被锁定,并且只为Elementor Pro做广告。

如何将 Elementor 博客页面添加到网站菜单?

发布页面,然后转到外观→菜单,将其添加到主菜单中并保存。将其保留为普通页面,而不是将其指定为"设置→阅读"下的"帖子"页面,否则 WordPress 将将 URL 交给您的主题。

每页应该显示多少篇博客文章?

Six to tweceld。few 少于 six 在三列网格上看起来很薄,超过 tweld 会使页面减慢速度,因为每张卡片都会加载一个特色图像。打开分页,让读者更深入。

我只能显示一个类别的帖子吗?

是在高级设置中,在按类别筛选中选择类别,可以这样构建几个页面,每个类别一个,或者打开类别筛选选项卡,让读者在单个页面上在类别之间切换。

SEO最好的元素者博客布局是什么?

带有特色图像的网格、设置为 H2 的帖子标题、20 个单词左右的摘录、元中显示的类别以及启用的分页。将标题 HTML 标签控件设置为 H2,以便页面保留一个 H1 和一个干净的标题顺序。

Master Addons 博客小部件可以显示修改后的日期吗?

它可以按它排序:将 Order By 设置为 Last Modified。每张卡上的可见日期是发布的日期,尽管 time 元素的 datetime attribute 携带修改后的日期,将修改后的日期显示为文本需要 Elementor Pro 的动态标签。

博客小部件适用于自定义帖子类型吗?

是显示选项中的帖子类型控件列出了每个注册的公共帖子类型,因此同一个小部件构建了一个投资组合、案例研究或产品索引。

为什么我的博客页面显示主题布局而不是我的设计?

该页面可能被分配为"设置 → 阅读"下的"帖子"页面。 WordPress 将该 URL 路由到主题的存档模板并忽略 Elementor 内容。取消分配它,或者在主题生成器中构建存档模板。

罗伊·杰米的照片
罗伊·杰米
I’m Roy Jemee,Pixar Labs 的内容牧马人和营销人员,为 Elementor 编写主插件,我编写教程,录制视频,并保持文档的最新状态,所以你总是知道如何使用每个功能,我还处理支持,所以如果你遇到障碍,我就是帮助你修复它的人真正的答案,来自每天使用这些工具的人。