Elementor 博客模板:10 个博客页面布局和 5 个单个帖子模板

Elementor 博客模板:五个博客页面和单个帖子模板设计并排显示,带有 Master Addons 徽标

Elementor中设计博客通常意味着两个工作:列出你的帖子的页面,以及每个帖子使用的布局,这个集合涵盖了两个。帖子列表有10个Elementor博客模板,文章本身有5个单个帖子模板,每个都以JSON文件的形式提供,您可以下载,可以点击的实时演示,以及设置它的简短指南。

这里的所有内容都是免费下载的。博客页面布局会落入任何 Elementor 页面。单帖布局需要主题构建器将其应用到您的帖子中,下面的单帖部分会显示如何执行此操作,包括使用您已经使用的主题构建器。如果您也想为网站的其余部分提供完整的页面,则 Elementor 页面模板库 其中有 200 多个格式相同。

您在每次免费下载中都会得到什么

每个模板都下载为一个小 zip 文件。首先解压缩它:Elementor 需要 .json file在里面, 你会发现三样东西:

解压缩的 Elementor 博客模板下载显示预览文件夹、模板 JSON 文件和 readme。txt 文件
  • a 涓锛涓锛 preview 带有两个设计屏幕截图的文件夹, desktop-1440.webpmobile-390.webp(因此)导入任何东西之前都可以先检查一下,
  • 模板本身,a .json 计()命名的文件ma-blog-mosaic-masonry.json 在上面的示例中),这是您导入到 Elementor 模板库中的文件,
  • a 涓锛涓锛 readme.txt 它列出了模板的需求并浏览基本导入,以及之后要更改的任何设置。

模板的所有造型都生活在设计顶部的一个 HTML 小部件中,范围覆盖到该模板。没有主题颜色或全局字体可以继承,文件中没有烘烤的图像,因此设计在您的网站上看起来与演示中相同的。您自己的帖子、特色图像和类别填写内容。

导入前您需要什么

模板类型它需要什么您在哪里使用它
博客页面模板 (10)WordPress、Elementor 和主插件任何元素器页面,例如称为博客的页面
单帖模板 (5)WordPress、元素器、带有主题构建器或任何其他主题构建器的主插件主题构建器中的单个帖子模板,应用于您的帖子

博客页面布局基于主插件构建 博客文章小部件(也就是将您的最新帖子拉到页面上的内容), 单个帖子布局使用主插件 动态标签扩展 填写标题、特色图像、内容、作者和日期,以访问者正在阅读的帖子。

WordPress 也需要去某个地方运行,如果你正在建立新博客,还没有主机, 主持人 这就是我们向人们推荐第一个 WordPress 网站的内容。

10个免费的Elementor博客页面模板下载

这些是列出您帖子的页面的布局。每个页面都使用不同的博客文章布局和不同的页面结构,从一列阅读列表到砖石照片墙。

1。信号:杂志网格与一个特色帖子

Signal Elementor 博客模板,在三列帖子网格上方带有特色帖子横幅

A杂志头版,你最新的帖子以全宽横幅形式运行,标题设置在照片上方,接下来的六篇文章坐在它下方的三栏卡格中,它适合新闻网站,杂志和任何经常发布的博客。

Grid 跳过第一个帖子,所以特色故事从来不会出现两次,如果更改横幅显示的帖子数量,请更改网格的偏移以匹配。

2、栏目:社论一栏目列表

列元素博客页面模板,显示带有小缩略图和衬线标题的帖子的单列列表

Writers的阅读清单,每篇帖子左边都有一个小缩略图,大衬线标题上方的日期和类别,两行站立在前面,页面宽820px,使行保持舒适的长度,对于时事通讯,散文和个人博客都很有效。

3、马赛克:砖石照片墙

Mosaic Elementor 砖石博客模板,包含交错的灰度照片和小标题卡

Image-led blog的三柱砖石墙,照片保持灰度直到悬停,每个标题都坐在一张与图像重叠的小白卡中,美食、旅游和摄影博客从中得到最大。

Masonry只有在你的特色图像有不同的形状时才会错开,如果每张照片都是相同的裁剪,那么墙壁看起来就像一个规则的网格。

4。信息亭:带有过滤选项卡的类别集线器

Kiosk Elementor 博客模板,在带有日期徽章的卡网格上方带有类别过滤选项卡

1个卡格,顶部横跨分类标签,读者可以不留就将页面缩小到1个主题,每张卡片上都带有照片上的日期徽章,下方带有分类标签,如果跨几个主题发布,则选择它。

Tabs来自小部件的按类别筛选设置,而不是来自你的帖子碰巧使用的类别,导入后打开博客帖子小部件,进入高级设置并在那里选择自己的类别,如果将其留空,则获得单个“All”选项卡。

Marquee Elementor 博客模板,两列明信片上方有一个特色明信片转盘

4个特色帖子的旋转横幅在顶部,带有自动播放和箭头,然后是两列卡片,其文本在图像上升起,它作为博客页面或作为主页的帖子部分。

转盘正上方有一个第二行单行 HTML 小部件,它将页面的其余部分保留在其容器内,因此请将其保留到位。

6。大报:带侧边栏的经典博客

Broadsheet Elementor 博客模板,带有水平帖子行和带有搜索和最新帖子的粘性侧边栏

Dayout大多数人说“博客页面”时图片。左侧向下运行水平帖子的提要, 右侧粘性侧边栏中装有搜索框、最近发布的帖子、主题链接和订阅卡。搜索框是主插件搜索小部件。

Topic链接是占位符。将每个指向您的一个类别页面,并将订阅按钮指向您的注册表单。

7。午夜:暗卡博客

午夜黑暗元素博客模板,在近黑色背景上带有玻璃风格卡片

深色两列卡片布局,带有玻璃风格的卡片,标题后面有柔和的光泽和薄荷色,专为产品、开发人员和代理博客以及想要看起来像产品一部分的更改日志而设计。

Page 设置自己的暗背景,所以即使在浅色主题上也可工作,如果您的主题在其周围添加了浅色标头和页脚,则将页面布局设置为 Elementor Canvas。

8、账本:知识库清单

Ledger Elementor 帮助中心模板,带有搜索栏、下划线主题选项卡和紧凑的文章行

紧凑的帮助中心布局:搜索栏、下划线主题选项卡,然后每篇文章一行,右侧有一个"阅读"按钮。将其用于文档、发布说明或资源库,读者可以在其中扫描标题列表以找到他们需要的标题。

Kiosk 一样,标签来自按类别筛选,因此导入后选择自己的类别。

9、霜:全宽特征行

Frost Elementor 博客模板,每行一张宽图像,上面举着一张白色标题卡

1行1帖。每個獲得一個寬430px的圖像,並在它的左下角舉起一個白色字幕卡。它給每個故事一個全寬的插槽,適合工作室,作品集和長篇寫作,你發布的頻率較低,每件作品都值得空間。

10、素:最小二列

简单的最小 Elementor 博客页面模板,以两张列卡和衬线标题为中心

Soft paper背景上一个安静的、居中的两列索引,每张卡片上都显示一张4:3的照片、一个日期和一个衬线标题,没有边框、按钮或类别标签,是当你的主题已经很小并且博客应该匹配时挑选的。

Elementor模板创建博客页面的方法

Blog页面模板工作在任何Elementor页面上,步骤对所有十个都是相同的。

  1. 下载 zip 并将其解压到您的计算机上。元素导入器导入 .json 文件;一个 .zip 仅当在 Elementor > 设置 > 高级下打开启用未过滤文件上传选项时导入。
  2. 在仪表板中,转到模板 > 已保存的模板,然后单击导入模板。
  3. 选择 .json file,然后点击立即导入,模板出现在您保存的模板列表中。
  4. 创建一个新页面,将其称为博客(或任何您喜欢的内容),然后使用 Elementor 打开它。
  5. 单击文件夹图标,打开"我的模板"选项卡,然后单击模板旁边的"插入"。
  6. 发布该页面并将其添加到您的菜单中。

如果您之前没有导入过 Elementor 模板,则 导入 Elementor 模板指南 穿过这些屏幕中的每一个。一旦你把设计变成你的了,你就可以了 将页面保存为模板并将其导出为 JSON 在另一个网站上重复使用它。

请勿将其设置为 WordPress “Posts 页面”

WordPress 在设置 > 阅读下有一个 Posts 页面选项, 将其留空给刚刚构建的页面, 当一个页面被设置为 Posts 页面时, WordPress 将其替换为主题自己的存档, 而您的 Elementor 设计从未显示将模板作为普通页面发布, 而是从菜单链接到我们的教程如何 使用 Elementor 创建博客页面 更详细地解释原因。

导入后值得检查的设置

  • Blog Posts 小部件的显示选项中实时发布每页帖子和订单,每个模板每个小部件的发帖量在 4 到 10 个之间。
  • Kiosk 和 Ledger 需要在按类别过滤中找到自己的类别,然后他们的选项卡才有意义。
  • 列数应保持在列表布局(列、大报、分类账和霜)上的 1 列,否则列表将变成网格。

打开分页

我们实时演示中的帖子下方不会看到页码。我们故意在那里关闭分页,将每个演示保留到一个帖子屏幕。在您自己的网站上,您只需点击几下即可打开它,并对其进行样式调整以匹配您选择的模板。

  1. 单击博客文章小部件并保留在内容选项卡上。
  2. 在显示选项中,将分页切换为是。然后设置每个页面上显示的帖子数量。
  3. 如果您想要不同的标签,请更改下一页文本和上一页文本,并选择对齐方式。
分页在 Elementor 博客文章小部件中打开,信号博客模板下有编号的页面链接

Style 选项卡来改变页码的外观,打开 Style 选项卡,展开分页部分,你得到排版,正常、悬停和活动页面的颜色分开,加上边框、半径、填充和间距,在下面的截图中,活动页使用 Signal 的生锈口音,其他都是白色,边框很薄,所以数字与卡片融为一体。

Elementor 博客文章小部件中的分页样式设置显示活动页面颜色、边框、半径和填充

Signal 和 Marquee 上,仅打开第二个博客文章小部件的分页,即特色帖子下方的网格。特色横幅和顶部的旋转木马旨在在每个页面上保持不变,因此请为它们留下分页。

使您的类别页面匹配

Blog 页面模板为其所在的页面进行样式设计,您的类别、标签和作者存档是独立的页面,除非您替换它们,否则它们会保留您主题的存档设计。为了给它们相同的外观,请在主题构建器中构建存档模板,插入相同的设计,并将 Blog Posts 小部件的来源设置为当前查询,以便它遵循正在查看的类别。 档案模板指南 涵盖主插件主题生成器方面。

5 个免费的 Elementor 单帖模板

These控制读者打开你的一篇帖子时看到的内容,每个字段都充满了动态标签,因此站点上的每一篇文章都有一个模板样式,下面的实时演示中都充满了示例文章,这样你就可以看到它们有真实的内容;下载中包含了拉入你自己的帖子的动态版本。

导入的 Elementor 单帖模板显示灰色占位符,帖子标题、特色图像和内容将出现在其中

由于字段为动态标签,附带免费的 Master Addons 插件,导入模板大约需要一分钟,导入后如果看起来半空,标题、图像和文章应为灰色框(如上面的屏幕截图),请不要担心模板在有真实帖子可供阅读之前不会显示任何内容,因此您至少需要一篇带有标题、特色图像和一些内容的已发布帖子。一旦您将其应用到主题构建器中,博客上的每篇文章都会自动切换到新设计的步骤中 Elementor 中如何创建单个帖子模板紧接着五种设计。

11、对开本:经典社论

Folio Elementor 单帖模板,带有类别标签、衬线标题、署名和宽特色图像

Reliable杂志文章。一个类别行,一个衬线标题,一个站立式和一个带有作者照片的署名坐在一个宽阔的特色图像之上。下面是一个“内容框,一个748px阅读栏中的帖子,一张作者卡片和三个相关帖子。内容框是Master Addons 目录小部件.

12、沉浸式:全血英雄

沉浸式元素单帖模板,带有全屏黑白特色图像及其标题

Feature 图像在屏幕的大部分区域都充满了标题、类别和署名,然后文章坐在照片上抬起的白色面板上,当您滚动时,共享按钮会停留在文本旁边。一个黑暗的订阅带和两个相关的帖子关闭页面。将其用于具有强大摄影功能和故事。

分享按钮在加载时从页面地址构建其 X、Facebook 和 LinkedIn 链接,第四个按钮复制链接。不涉及第三方脚本。

13、手册:粘性侧边栏教程

手动 Elementor 单帖模板,带有粘性内容侧边栏,突出显示当前部分

没有特色图像的文档布局。类别徽章和 “更新”日期位于干净的标题上方,左侧的粘性内容栏突出显示了您正在阅读的部分。代码块、内联代码和标注框的样式用于技术写作。页面末尾有一个 “本文有帮助吗?”行以及下一步要阅读的内容的简短列表。

14、静:课文第一篇

Quiet Elementor 单柱模板,带有大衬线标题、灰色支架和落帽

完全没有图像:衬线标题、灰色支架、落帽和衬线面设置的 660px 列。拉引号以中心和斜体为主。文章后有小作者签收、订阅卡和纯文本进一步阅读列表。它适合网络上生活的散文、评论文章和时事通讯。

15。案例档案:可视化案例研究

Casefile Elementor 案例研究模板,包含标题、项目事实卡和宽封面图像

为以帖子形式发布作品的机构和工作室而建,标题位于左侧,项目事实卡位于右侧,后面是宽封面图片、文章、三栏画廊、行动呼吁和另外两个案例研究。

事实卡在每篇文章上读取三个自定义字段: client, yearservice.图库显示贴在帖子上的图片,也就是说从该帖子编辑器内部上传的图片,readme对两者都有解释。

Elementor 中如何创建单个帖子模板

单个帖子模板只有在主题构建器内部才有意义。动态标签掉到普通页面上会显示页面自己的标题和空图像,因为页面不是帖子。主题构建器是告诉 WordPress 每当访问者打开帖子时使用您的设计的内容。

与主插件主题生成器

5个模板是这样构建和测试的,主插件中的Single模板类型 主题构建器 是的一部分 硕士插件专业版.

  1. 导入 .json "模板"下的文件 >"已保存的模板 ", 与博客页面模板的方式相同。
  2. 转到主插件 > 主题生成器,单击"添加新建"并选择"单人"作为模板类型。
  3. Elementor编辑新模板,打开文件夹图标,转到我的模板并插入设计。
  4. 将显示条件设置为包含 > 单数 > 帖子 要仅对一种内容(例如案例研究)使用布局,请选择条件中的那些帖子而不是所有帖子。
  5. Save,然后打开您网站上的任何帖子来检查它。

单模板文档 显示这些屏幕中的每一个,并且 Elementor 主题构建器指南 解释其他模板类型(页眉、页脚、存档等)如何组合在一起。

使用 Elementor Pro 或其他主题构建器

Elementor Pro 的主题构建器,或者是另一个让你在 Elementor 中设计单帖布局的主题构建器,那么你也可以在那里使用这些模板。在你的构建器中创建一个新的单帖模板,从我的模板中插入设计,然后将其设置为适用于你的帖子。

保持主插件已安装并处于活动状态,标题、图像、内容和作者字段来自主插件 动态标签者, 并且内容框和相关帖子来自Master Addons小部件,如果没有插件,那些部分将是空的,我们在Master Addons主题构建器中测试了模板;如果在另一个构建器中出现一些东西,则自述笔记是第一个检查的地方。

要留下的两个细节

  • Folio、Immersive、Manual、Quiet 和 Casefile 中的文章正文小部件包含一个名为 CSS 的类 entry-content。目录小部件在该元素内部查找标题,因此删除类会清空内容框。
  • HTML 小部件在每个模板的顶部持有样式表, 在对开页和手册中, 如果小部件还没有完成, 则会填充内容列表的短脚本。编辑那里的样式, 但不要删除小部件。

定制颜色和字体

每个模板都将其颜色保留在样式表顶部的少数 CSS 变量中:标题为墨水,段落文本为正文,日期为静音,链接和标签为重音。打开 HTML 小部件,更改这些值,整个设计遵循相同的样式表中设置字体,因此将 Georgia 替换为您的品牌衬线是一行更改。

如果您愿意逐节工作,同样的方法也贯穿我们的工作 免费元素部分模板的,当你构建网站的其余部分时,它与这些博客布局很好地配对。

故障排除

导入时“文件中的无效内容”

您正在上传 zip 本身,或者不是 Elementor 导出的文件。解压缩下载并导入 .json 文件。

博客页面为空

Blog Posts 小部件需要发布带有特色图片的帖子 在 Kiosk 和 Ledger 上,空网格通常意味着按类别过滤仍然指向您网站上不存在的类别 打开小部件并选择自己的。

设计看起来与演示不同

您的主题可能是在模板周围添加自己的标头、页脚或页面宽度。在页面设置中将页面布局设置为 Elementor Canvas 或 Elementor Full Width。

我的帖子上没有显示单个帖子模板

Check 三样东西在你的主题生成器中,模板类型必须是 Single,显示条件必须包含你的帖子,并且只有一个 Single 模板应该匹配相同的帖子,在 Master Addons 主题生成器中,当两个活动模板匹配时,最新的获胜者保存后清除你的缓存插件也有所帮助。

Swipers在页面加载时测量它们的宽度,如果将Marquee的转盘移动到隐藏的选项卡或手风琴面板中,请在其转盘设置中将观察者设置为Yes。

常见问题

这些 Elementor 博客模板免费吗?

15个都是免费下载的,你需要Elementor和Master插件才能使用,博客页面布局在任何页面上都有效;单个帖子布局还需要一个主题构建器来应用到你的帖子中。

我可以使用 Elementor 免费版本创建单个帖子模板吗?

Elementor 单独使用不。免费 Elementor 没有主题构建器,因此它不能取代您主题的帖子布局。您需要一个:Elementor Pro 的主题构建器,或 Master Addons 主题构建器,其单一模板类型是 Master Addons Pro 的一部分。我们在 Master Addons 主题构建器中构建并测试了这些模板。

我可以对不同的帖子使用不同的单个帖子模板吗?

是的。每个布局创建一个单一模板,并给出每个模板自己的显示条件。在主插件主题构建器中,您可以选择模板适用的特定帖子,这就是您如何保留案例研究的 Casefile 和其他所有内容的 Folio。

我现有的帖子会出现在模板中吗?

They will。模板中没有任何内容是硬编码内容,博客页面布局列出了您发布的帖子,单个帖子布局从正在查看的帖子中提取标题,特色图像,文本,作者和日期。

我可以在主页上使用博客页面模板吗?

您可以。以与其他页面相同的方式将其插入主页。 Marquee 和 Signal 的设计就是考虑到这一点,因为两者都以特色帖子打开。

在哪里可以找到更多 Elementor 模板?

对于单页,例如主页、关于、联系方式和定价 主插件模板库 拥有200多种相同JSON格式的设计,对于一个整站,请立即浏览 Elementor 模板套件.

选择布局并构建您的博客

Elementor博客模板开始,它与您发布的方式相匹配:如果您经常发布并想要首页,则为Signal或Marquee;如果单词最重要,则为Column或Quiet;如果照片重要,则为Mosaic或Frost;以及用于文档的Ledger或Manual。JSON下载,导入它,然后将其指向您自己的帖子。

博客完成后,您网站上的每个其他页面(从主页到联系表)都将执行相同的导入步骤。

“Get hosting” 本帖链接为推荐链接,如果您通过一个购买托管,我们可能会赚取佣金,而不会给您带来额外费用。

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

留下回复

您的电子邮件地址不会被发布。 标记必填字段 *