Avada主题教程 4：网站post文章主体页面排版设计

教程总目录：Avada主题详细教程：从0开始创建一个网站

前面我们已经写过文章的顶部和底部全局内容设计了。因为文章内容过长，从本篇文章开始里面截图会进行部分简化，减少截图数量。如果是纯小白建议从第一篇文章开始看。

排版说明

文章主体排版会应用到整个网站所有文章上，不包括page页面。以后只需要正常发布文章内容即可。

page页面本教程不进行全局排版设计，详细的原因等后面教程会说明。

主体内容排版说明图片：

整体排版还是常见的博客布局，如果你喜欢其他布局的话，也通过查看本文可以自己进行排版设计。

实际的效果图片可以在本文末尾查看长截图。截图中右侧栏未进行任何调整，可以忽略右侧栏的丑陋排版。

创建布局

在Avada布局生成中我们创建一个新的布局，将其用作文章全局的排版。

然后点击右上角工具图标，进行修改布局显示关联关系。

在设置中我们关联“ALL文章”，并且排除“ALL页面”和“Front Page”首页即可。

条件选择完成后，直接点击右上角叉号，会自动保存关联关系。

修改布局

下面就是修改我们刚创建的文章布局了。这个实际也是一个页面的形式。先放一下总体布局我使用的元素截图。你过你跟着本教程照做，可以参考下。

文章标题区域

首先是文章标题的显示区域，我们就放在最顶部。直接添加一个1/1的显示列。

然后在列中再嵌套一个列（为了添加遮罩层）。嵌套的同样是一个1/1的列。

嵌套之后我们先在外层列中添加特色图片的背景。

在背景图片里面，我们可以选择显示文章的特色图片。

背景位置 Background Position ：中心 中心 Center Center
背景重复 Background Repeat ：无重复 No Repeat
背景混合模式 Background Blend Mode ：禁用 Disabled

下面就是在我们嵌入的列里面添加标题了。

在嵌入列中添加“Title”元素工具。点击左侧图标可以调用文章的标题进行显示。然后标题排版居中显示。

然后因为我们需要给图片添加遮罩层，所以需要在嵌入列设置中背景里加一个半透明遮罩。

rgba(248,248,248,0.68)

这个遮罩层，你可以自己设置 黑色半透明和白色半透明，具体可以自己测试看下效果。一般不建议其他颜色，会和底部图片混合出现其他奇怪的颜色。

嵌入列的底部边距我们需要手动填入一下0px，否则默认有20px的边距，底部图片会显示一部分没有遮罩。

文章右侧栏区域

右侧边栏因为是让他显示的小工具区域。所以本文就不多讲了。排版这里也不再进行更改，自己在 WP后台–外观–小工具 里面添加要显示的工具即可。

先添加文章主题内容列和小工具列。本文是3/4 + 1/4 的两个比例列。

你也可以改成其他比例，胡总二号直接使用百分比来进行分割。

然后在右侧栏区域添加元素“Widget Area”，这个工具在设计元素中，拉到底部就看到了。

小工具部件中字体大小可以根据需求调整，另外下面建议取消小屏幕显示。否则手机排版中右侧栏会挤占一部分，造成主体文章内容过窄。

文章主体区域

主体区域需要添加的元素有：Breadcrumbs面包屑、Meta元数据、Content内容、Separator分隔器、Social Links社交链接、Comments评论、Related Posts相关文章。

面包屑

面包屑中设置大部分都是默认的，我们只需要修改下 链接颜色 和 底部边距5px 即可。

元数据

元数据中需要自己选择显示哪些项目，上面的显示 下面的不显示，可显示项目有很多，自己选择即可。

Layout布局不要选择堆叠，建议选择全宽浮动Floated。

其他设置全部默认。

内容

内容的显示设置我们修改一下边距：
顶部：15px
右侧：10px
底部：5px
左侧：10px

具体的数值可以边调整便查看是否合适。特别是左右的边距，太小了会有种内容过宽的感觉。

字体大小，字体大小本文使用的全局默认设置18px 。

分隔器

分隔器样式选择：单边框实体
上下边距：10px

社交链接

社交链接你想显示哪些图标就在哪一个后面填入链接即可。

图标大小18px，盒装风格样式选择yes，Border Color边框颜色透明。

评论

评论里面设置全部默认即可。其中评论框和评论列表可以上下拖动来选择显示顺序。

相关文章

相关文章设置：

布局 Layout ：图片下方显示标题 Title below image
图片尺寸 Image Size ：固定 Fixed

到这里关于文章页面排版模板就做好了。具体的细节调整可以自己研究下。

效果截图

截图较长。