Generic filters
Exact matches only
Search in title
Search in content
Search in excerpt

页面

教程分类

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

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

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

Elementor Pro自定义文章模板

本次教程需要用到Elementor Pro插件,在Well建站注册用户可免费下载Elementor Pro,下载链接:

Elementor Pro GPL 破解版插件免费下载

排版规划

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

文章模板排版规划

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

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

创建模板

进入Elementor模版页面

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

创建Single Post模板

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

模板布局

添加容器

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

设置容器宽度

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

复制容器
两个容器分别包含两个小容器

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

添加元素、丰富内容

添加元素到容器里

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

添加元素后的效果

形成如上图所示的效果。

设置容器内容居中

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

添加元素到下方容器

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

效果预览

效果如上图所示。

添加search元素

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

添加menu元素

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

添加toc元素

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

侧边栏

效果如上图所示。

设置粘性toc

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

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

发布模板并预览效果

发布,应用到所有文章

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

预览文章页面效果:

自定义文章模板预览

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

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

还推荐你看:

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

WordPress添加文章目录功能

: ) 文章内容均为原创,转载须注明出处并添加原文链接,否则视为侵权
Well企业微信
专业网站搭建,扫码直接咨询
外贸服务器推荐(Well在用的服务器)
vultr-logo
一线品牌VPS服务器,稳定、不贵、性能强
Clouvider-logo
二线品牌VPS服务器,稳定、便宜、性能强
文章标签
文章推荐
文章目录
相关文章
没有账号? 忘记密码?