使用Elementor Pro自定义文章模板样式,创建Single Post

Elementor Pro自定义文章模板配图
很多主题自带的文章模板样式并不适用于大多数网站,这时候我们可以使用Elementor Pro自定义文章模板,创建符合网站风格的Single Post。
文章目录

本篇文章共 877 字,预计阅读时间 4 分钟

Elementor Pro自定义文章模板

本次教程需要用到Elementor Pro插件,Well这里有GPL版本的Elementor Pro插件,有需要的伙伴可以联系Well免费获取。

排版规划

在正式制作文章模板之前,我们先简单规划一下页面的排版:

文章模板排版规划
使用Elementor Pro自定义文章模板样式,创建Single Post 20 - Well建站

Well这里的排版方式是将标题和文章图与内容作了一个分区,内容右侧还布置了侧边栏。

你也可以根据自己的产品或网站风格再对排版做出一些调整,宗旨就是怎么看着舒服怎么来。

创建模板

进入Elementor模版页面
使用Elementor Pro自定义文章模板样式,创建Single Post 21 - Well建站

WP后台 – 模板 – Theme Builder,进入到模版创建页面。

创建Single Post模板
使用Elementor Pro自定义文章模板样式,创建Single Post 22 - Well建站

点击Single Post并点击右上角创建模板按钮。

模板布局

添加容器
使用Elementor Pro自定义文章模板样式,创建Single Post 23 - Well建站

进入到模板编辑页面后,先添加一个大容器包含两个小容器的布局。

设置容器宽度
使用Elementor Pro自定义文章模板样式,创建Single Post 24 - Well建站

设置左侧小容器宽度70%,右侧小容器宽度30%。

复制容器
使用Elementor Pro自定义文章模板样式,创建Single Post 25 - Well建站
两个容器分别包含两个小容器
使用Elementor Pro自定义文章模板样式,创建Single Post 26 - Well建站

然后复制整个大容器,形成两个大容器分别各自包含了两个小容器的排版。

添加元素、丰富内容

添加元素到容器里
使用Elementor Pro自定义文章模板样式,创建Single Post 27 - Well建站

添加Post Title和Post Excerpt元素到上方左侧的小容器,添加Featured Image元素到右侧小容器里。

添加元素后的效果
使用Elementor Pro自定义文章模板样式,创建Single Post 28 - Well建站

形成如上图所示的效果。

设置容器内容居中
使用Elementor Pro自定义文章模板样式,创建Single Post 29 - Well建站

分别设置两个小容器内部的方向,居中对其,并简单设置标题和短描述的样式。

添加元素到下方容器
使用Elementor Pro自定义文章模板样式,创建Single Post 30 - Well建站

添加Post Content和Table of Contents元素到下方左侧的小容器里。

效果预览
使用Elementor Pro自定义文章模板样式,创建Single Post 31 - Well建站

效果如上图所示。

添加search元素
使用Elementor Pro自定义文章模板样式,创建Single Post 32 - Well建站

添加Search元素到下方右侧小容器。

添加menu元素
使用Elementor Pro自定义文章模板样式,创建Single Post 33 - Well建站

添加Menu元素到下方右侧小容器。

添加toc元素
使用Elementor Pro自定义文章模板样式,创建Single Post 34 - Well建站

添加TOC元素到下方右侧小容器。

侧边栏
使用Elementor Pro自定义文章模板样式,创建Single Post 35 - Well建站

效果如上图所示。

设置粘性toc
使用Elementor Pro自定义文章模板样式,创建Single Post 36 - Well建站

设置侧边栏里的文章目录元素跟随页面滚动。

接着再根据网站风格调整其他元素的样式细节。

发布模板并预览效果

发布,应用到所有文章
使用Elementor Pro自定义文章模板样式,创建Single Post 37 - Well建站

最后将模板应用到所有文章,并保存。

预览文章页面效果:

自定义文章模板预览
使用Elementor Pro自定义文章模板样式,创建Single Post 38 - Well建站

至此,文章模板创建完成。

大家也可以再在模板中添加一些板块,比如文章推荐、弹出式表单等。

还推荐你看:

使用Elementor Pro制作文章列表模板

WordPress添加文章目录功能

: ) 文章内容均为原创,转载须注明出处并添加原文链接,否则视为侵权
B2B外贸建站服务 - well建站
Well提供外贸建站服务,高性价比、不玩套路、终身售后。
文章标签
文章推荐
文章目录
相关文章