不管是B2C类型还是B2B类型的外贸企业站都需要有博客文章来丰富网站内容,本篇文章将学习如何使用Bebuilder页面编辑器制作外贸独立站的文章分类页。
前置要求
为了保证设计过程中的效果,需要增加 3 个文章分类和 10 篇文章,内容随意,文章可分布在任意文章分类中。如果你还不会这些操作的话,请学习 WordPress 教程内容中的《WordPress基础之操作界面初识》和《WordPress基础之内容管理》这 2 篇文章。
Bebuilder设计文章分类页框架
这部分内容其实不需要太多内容,只增加分类页 Tittle 和 Blog archive 元素即可,当然,如果你想要页面更加丰富的话,可以参考竞争对手的网站文章分类页是如何设计的。
以下为详细的设计步骤:
- 打开 WordPress 后台 -> 点击左侧 Templates 。
- 点击上方 Add New 添加新模板。
- 选择模板类型为 Blog。
- 输入模板名称,英文!这里的名称会转变为URL,编辑模版时可以把标题改回中文。
- 新建 Section ,添加 1 个 Wrap ,里面再次添加 Title 和 Blog 元素。
以上内容都可以根据自己的设计喜好来改变。
自定义 Blog 元素的内容和样式
这里主要讲 Shop products 元素的样式设置,以下为调整示例:
- Posts number:设置显示文章数量
- Style:设置列表显示方式,我个人推荐使用 grid 样式
- Columns:设置文章列数,有时需要在上方的 Style 范围内才能有更好的显示效果。
- Title tag:文章标题H-tag标签,建议设置为:页面标题H-tag – 1,假如页面标题为 H2 ,那请将这里的标签设置为 H3,可保证搜索引擎更好的理解本页面。
- Post image:设置文章封面图。
- Category:设置文章显示区间,可自定义显示的目录。
- Multiple categories:可设置多个显示目录,需要输入URL中包含的完整关键词。
- Order by:设置排列方式,以日期、标题或者随机为准。
- Order:设置显示顺序,降序或升序。
- Sticky posts:固定显示文章
- Exclude posts:排除显示文章,需要输入文章URL中的关键词
- Use as related posts:作为相关文章显示。
- Filters:设置显示过滤器。
- Excerpt:设置显示文章摘要。
- Read more:设置显示显示更多按钮。
- Pagination:设置列表翻页按钮。
- Load more:设置加载更多按钮。
- Grayscale:这个功能基本不用。
- Margin:设置外边距,保持默认。
Style 中是对 Settings 中各项的详细设置,包括颜色、边框、图片、过滤器等等内容,具体操作可以看这篇文章:《Bebuilder各模块元素的样式设置与Advanced选项设置教程》
所有设置完成后保存更新即可。