如何使用 Elementor 创建博客页面(2 种简单方法)

如果你愿意的话 使用 Elementor 创建博客页面,根据您的预算,您有几种可靠的选择。专门的博客页面可以让您的帖子井井有条,帮助 Google 索引您的内容,并让访问者有理由坚持更长时间。

您不需要为此编写任何代码。与 Elementor 帖子小部件 (Pro) 或免费插件,例如 Elementor 的主插件,你可以构建一个自定义 Elementor 博客页面 这与您的品牌相匹配。

本教程涵盖两种方法 使用 Elementor 在 WordPress 中创建博客页面:

1. 方法一: 使用 Elementor Pro Posts 小部件(付费)
2. 方法2: 使用主插件博客小部件(免费)

最后有一个比较表,这样您就可以准确地看到每个选项提供的内容。如果您愿意,我还录制了视频演练。

为什么您的 WordPress 网站需要博客页面

Blog页面是你所有帖子出现的单一场所,访问者可以从一个网址浏览文章、教程、新闻、更新,对于企业主来说,拉动有机搜索流量,对于博主来说,基本上就是站点的全部点。

一个好的 WordPress 博客页面设计 为您做一些事情:

• SEO流量 当新鲜内容组织在适当的博客页面上时,谷歌会更快地索引新鲜内容。
• 更长的会议 工业安 elementor 博客布局 通过缩略图、摘录和类别,访问者可以点击更多帖子而不是弹跳。
• 权威 定期发布某个主题使您成为利基市场的首选资源。
• 转换 者博客文章引导读者向您的产品,服务或电子邮件列表。

WordPress开箱即用,只是把帖子按时间倒序堆叠起来,没什么好看的,右边 Elementor 博客小部件、可以将其换成网格、卡片布局、旋转木马等,所有这些都是无代码的。

开始之前:先决条件

在开始之前您需要准备好一些东西:

1. 安装了 WordPress 在您的托管上(任何最近的版本都有效)
2. 元素器插件 安装并激活(来自 WordPress。org 的免费版本)
3. 发表了一些博客文章 题你至少需要3-6个帖子,所以博客页面有内容可以显示。在每个帖子中添加特色图像以获得最佳的视觉效果。
4. 静态主页集 ,去 设置>阅读 并选择“静态页面” 设置您的主页并为帖子创建单独的页面。

对于方法 1,您需要 元素专业版.方法二,你只需要免费的 主插件插件的,它与自由版本的元素器一起工作。

视频教程:使用 Elementor 创建博客页面

如果视频更多的是你的东西,那么本次演练将展示如何做到这一点 在 Elementor 中创建博客页面 从头到尾使用主插件博客小部件。

好的,继续两种方法。

方法 1:使用 Elementor Pro Posts 小部件创建博客页面

如果你有的话 元素专业版,你已经有了 帖子小部件 (有时在面板中列为“Posts”元素),它是Elementor自己在任何页面上显示博客文章的工具。

第 1 步:将帖子小部件添加到您的页面

Elementor编辑器中打开希望博客出现的页面,在左侧的小部件面板中,搜索“帖子”并拖动 帖子小部件 进入您的页面部分。

该小部件将立即拉入您发布的帖子并以默认布局显示它们。

第 2 步:选择您的布局皮肤

Elementor Pro 为您提供三种布局皮肤供您选择:

• 经典 席默认皮肤。显示干净网格中的帖子,其中包含精选图像、标题、元数据和摘录。
• 卡 题在每个帖子周围添加一个卡片式的盒子,具有微妙的阴影效果。
• 完整内容 (I) 显示完整的帖子内容,而不仅仅是摘录。

Classic皮肤默认显示一个3列的网格,有6个帖子,您可以将其从1列调整到6列,并为每页的帖子设置任意数字。

3步:配置布局设置

的 布局选项卡 您拨打方式的地方 Elementor 博客页面 实际上看起来:

• 图像位置 的将特色图像放在顶部,左侧,右侧,或完全隐藏。
• 图像大小和比率 (s) 为您的设计选择正确的缩略图尺寸。
• 标题标签 立为帖子标题设置 HTML 标签(H2、H3、H4 等),这对于 SEO 来说很重要。
• 摘录长度 控制显示帖子摘录的单词数。
• 元数据 者选择要显示的元信息:作者姓名、日期、时间和评论。
• 阅读更多文字 者自定义“阅读更多”按钮文本。

4步:设置查询和分页

的 内容选项卡 有两个重要的部分:查询和分页。

查询 logbage页面上出现哪些帖子,让你控制,可以按帖子类型、类别、标签或特定的帖子id进行筛选,也可以将某些帖子包含或排除在结果之外。

分页 控用户如何浏览多页帖子 三种选项可选:

• 数字(1、2、3...)
• 上一个/下一个箭头
• 数 + 上一/下一组合

第 5 步:调整您的博客布局

的 样式选项卡 有四个部分用于视觉调整:

• 布局 符调整列间隙、行间隙和内容对齐。
• 盒 的为每张明信片设置边框样式、边框半径、填充和盒子阴影。
• 图像 定义特色图像的边框半径和间距。
• 内容 改变帖子标题、元数据、摘录和"阅读更多"链接的排版、颜色和间距。

提示: Blog页面上使用一致的间距和排版,为图像和卡片设置相同的边框半径,以创建抛光的外观,将阅读更多链接颜色与品牌的重音颜色相匹配。

这就是 Elementor Pro 方法。基本工作正常 Elementor 博客网格 布局,但您很快就会遇到限制:没有旋转木马,没有悬停效果,只有 3 个皮肤。

Pro 不付费想要更多选项,那么下一步的方法就值得一看。

方法 2:使用主插件使用 Elementor 创建博客页面(免费)

的 主插件博客小部件 (在编辑器中标记为“MA Blog”)是免费的, 并且比 Elementor Pro Posts 小部件包含更多的布局选项。21 种布局变化、悬停动画、内置旋转木马、高级过滤。它是功能更齐全的之一 Elementor 博客小部件 在那里。

1步:安装和激活主插件

抓住 Elementor 的主插件 wordpress。org(免费)中,激活后,您将看到 “MA Blog” 元素显示在您的 Elementor 小部件面板中。

第 2 步:添加博客小部件并选择布局

拖动 MA博客 widget到你的页面上,默认情况下,它显示了一个经典的博客布局,在一个4列的网格中。

Zhe里变得有趣了, 你得到 三种布局类型:

• 网格 标准网格布局适用于干净、有组织的博客页面
• 卡 、带阴影和边框的高架卡片设计
• 列表 工横向列表布局,非常适合新闻或杂志风格的博客

每种布局类型都有 7种独特的风格变化共给你 21种不同的博客页面设计 (加上砖石支撑), 您可以在它们之间进行单击切换。

7种风格变体包括:默认、内容重叠、左上元、右对齐卡、中心对齐卡、中心对齐渐变背景和横幅卡。将这些与网格、卡或列表布局混合以构建真正的 elementor 中的自定义博客页面.

3步:配置显示选项

您可以对博客文章的显示方式进行精细控制:

• 邮寄订单 [] 按日期、标题、修改日期或随机排序。
• 列 第 1 至 6 列。
• 帖子格式图标 显示不同帖子格式(视频、音频、图库)的图标。
• 元分离器 (管子)、点、破折号(破折号)分隔元项的字符进行选择。
• 标题 HTML 标签 工业选择帖子标题(H2、H3、H4 等)的标题标签。
• 帖子类型 显示常规帖子、自定义帖子类型或页面。
• 行和列间距 if 微调帖子之间的间隙。
• 内容对齐 左、中、右对齐您的帖子内容。
• 每页帖子 设置每页显示多少帖子。
• 分页 (i) 启用或禁用页面导航。

4步:设置缩略图选项

Master Addons 领先 Elementor Pro 的地方。缩略图面板让您:

• 启用或禁用特色图像
• 设置缩略图的自定义高度
• 选择缩略图位置(顶部、左侧、右侧)
• 挑选 26个悬停动画效果 (悬挂, 脉冲,推, 流行,浮动, 沉,等等)
• 申请 16种颜色效果 (潮红、棕褐色、灰度、亮度等)
• 选择从 5个缩略图形状 (默认, 圆, 圆, 梯度有界, 等等)

在上面的屏幕截图中,我应用了“Hang”悬停动画、“Flushing”颜色效果和“Gradient Bordered”缩略图形状。像这些这样的小细节是将通用外观的博客页面与实际上看起来像是有人设计的博客页面分开的 Elementor 博客页面 故意。

5步:配置后置元数据

下 帖子设置,你控制每篇博文出现什么元信息:

• 帖子标题(显示/隐藏)
• 作者头像图像
• 作者姓名
• 出版日期
• 类别
• 评论数
• 摘录长度(设置确切的字数)
• 阅读更多文本(完全可定制)
• 显示完整内容与摘录

6步:使用高级过滤

的 高级设置 panel 你缩小了究竟哪些帖子出现的地方:

• 不包括特定帖子 真实 从博客页面中通过 ID 删除某些帖子。
• 按标签过滤 。仅显示带有某些标签的帖子。
• 按作者过滤 显示特定作者的帖子(对于多作者博客有用)。
• 偏移 跳过前 N 个帖子。当您单独展示了一篇文章时,请方便。
• 在新选项卡中打开 工在新的浏览器选项卡中打开博客文章链接。

第 7 步:启用博客文章旋转木马

您可能已经看到过在主页上的滚动旋转木马中显示其最新帖子的网站。主插件博客小部件内置了此内容。切换 Elementor 博客旋转木马 打开并配置它:

• 自动播放 的帖子以您设置的速度自动滚动。
• 导航风格 者点或箭头之间进行选择。
• 箭头位置 方可将导航箭头放置在旋转木马内部或外部。

将旋转木马与高级设置相结合,过滤特定帖子(例如“featured”或“editors pick”标签)并将其放置在您网站上的任何位置,而不仅仅是博客页面。

重要: 确保您已启用 “负载字体真棒 4 支持” 从 元素器 > 设置.否则,转盘中的箭头图标将无法正确显示。

第 8 步:调整博客页面的风格

的 样式选项卡 涵盖所有视觉调整:

• 缩略图 采用叠加颜色、CSS 滤光片(亮度、对比度、饱和度)
• 标题和元 字体排版、文本颜色和悬停颜色
• 内容 字体颜色、背景颜色、排版、框阴影、填充和内容边距
• 盒 整个明信片的背景颜色、边框和盒子阴影
• 分页 字体排版、正常状态颜色、悬停状态颜色、边框和填充

在这些控件之间,您可以匹配您的控件 elementor 博客布局 到您网站的品牌,一直到像素。颜色、字体、间距、阴影,所有这些都可以从 Elementor 面板进行调整。

Elementor Pro 发布小部件与主插件博客小部件

这里是一切并排布置的,以便您可以看到哪些 Elementor 博客小部件 适合您的情况。

对于基本博客页面,Elementor Pro Posts 小部件可以完成工作。如果您需要悬停效果、旋转木马或更多 wordpress 博客页面设计 综艺,主插件博客小部件免费涵盖所有这些内容。

更好的元素博客布局的提示

WordPress网站的数十个网站建立博客页面中学到的一些东西:

1。始终使用特色图片

Blog 网格中出现一个没有特色图片的帖子,它看起来像是一个空白的矩形,它看起来是破碎的,为每个帖子设置一个特色图片,即使它是一个简单的品牌图形,如果文件大小是一个问题,这里是我们的指南 最佳 WordPress 图像优化器插件.

2。节选要短

Long摘录把网格弄得乱七八糟,把帖子推到折叠下面,15-25个字就足以告诉读者帖子涵盖了什么,目标是让他们点击,而不是从博客页面上读出整个东西。

3、使用一致的列计数

三个专栏最适合大多数博客页面。两个专栏适合内容较多的网站,摘录较长。当您有很多具有强烈特色图像的短帖时,四个专栏就会起作用。一旦读者点击进入全文,请帮助他们留在那里— wordpress 的最佳目录插件 添加跳转链接,因此长帖子很容易浏览。

4。设置正确的标题标签

H1你的博客页面标题,博客网格内发帖标题应该是H2或者H3,这有助于搜索引擎了解你的页面结构,更多SEO技巧,请阅读我们的 elementor 的最佳 SEO 实践 指南。

5。将类别添加到元数据中

在帖子元数据中显示类别可帮助访问者查找相关内容。主插件博客小部件可让您在每个帖子标题下显示类别。

6、移动端测试

Mobile和平板电脑上预览您的博客页面,然后再发布,一个3列的网格堆叠到小屏幕上的1列,这很好,但有时在崩溃后间隔或字体大小会显得很明显,在手机上快速滚动,以获得更多控制,请查看我们的指南 elementor 断点的响应式设计.

7。在主页上使用旋转木马

放一个 elementor 博客旋转木马 blog页面本身之外的你的主页上,这样,每个访问者在你最新的帖子落地时都看到对了,即使他们从不点击nav中的“blog”大师插件blog小部件内置了旋转木马,所以设置大约需要30秒。

常见问题

最后的想法

建筑物a elementor 中的自定义博客页面 10-15分钟左右,任一方法。elementor Pro Posts小部件处理基础知识很好,如果你已经拥有Pro许可证。

对于更多布局选项, 主插件博客小部件 为您提供 21 种布局变化、26 种悬停动画、16 种色彩效果、一个旋转木马和高级帖子过滤。这足以 使用 Elementor 创建博客页面 看起来你聘请了一位设计师。

它也适用于 Elementor 的免费版本。 下载主插件 并测试一下。

如果设置过程中某些东西无法正常工作, 给我们留言 我们会解决这个问题。

相关阅读:

• 如何使用 Elementor 创建一页网站
• 如何加快 Elementor 网站的速度
• 如何在 Elementor 中创建粘性标头
• 如何使用 Elementor 在 WordPress 中编辑页脚