使用Elementor创建wordpress网站首页
教程总目录：菜鸟建站进阶篇–使用Elementor设计wordpress网站页面
终于到了我们此系列最关键的一篇教程，使用Elementor创建wordpress网站首页。
首页的创建基本不是能一次完成的，本站首页连续改了好多天。每次发现不妥之处就改一下，一直改到了现在这个样子。
教程演示的页面丑爆了。
1.创建首页页面
首页页面和我们的所有文章页面差不多，他也是一个独立的页面。我们要做的是首先在wordpress后台创建它，然后修改它的排版。
创建时标题和固定连接都无所谓。我们设置首页后他的标题和固定链接都没了用处。
创建后我们直接点击那个“使用Elementor编辑”
2.构想首页大致排版
在更改之前首先你要对于你的首页有一个大致的排版规划。
首页要放哪些内容？他们的布局如何规划？等等
这里我放一张图
这是当时我设想的首页结构，然后在每一块里面去填充内容即可。
本文示例我就不搞这么麻烦了，就简单的用下面的结构做一个页面。
另外是网站的整体配色要统一，如果走暗色调，就规划好文字背景颜色、文字颜色、按钮颜色、图片颜色（可通过覆盖层调整）等等。
看个人审美吧，而且前期规划好之后后期几乎99%还要改。
3.填充首页内容
在这里开始之前首先需要跟大家交待几点。
1是因为屏幕大小分辨率不同，我们首页所有元素宽度都要选择全宽度并且拉伸，防止到大屏幕访问时候首页元素在屏幕中央显示窄窄的一块。
2.首页元素所使用的图片都要尽可能的压缩体积，否则因为用的图片较多，一个首页加载下来要好几M。
这里推荐两个图片压缩的工具
一个是腾讯智图https://zhitu.isux.us/
一个是博主自己用的图片转换工具https://api.cheshirex.com/webp2jpg-online/
图片建议转为webp格式，体积更小。而且图片清晰度好，体积压缩率非常高！
3.图片素材全部使用1920X1080及以上的大图，在大屏幕上如果你图片太小或者是图片清晰度过低，到时候看着就糊了。
3.1首屏图片和搜索
首先添加首屏图片和搜索框。
在页面添加1栏，背景图就是我们首屏的图片。
图片位置我这里截图是居中，实际建议选择默认。
因为这一栏里我们还没添加内容，也没设置高度。所以就看见一点顶部。后面会设置。
也可以使用多张图轮播的样式，自己选择即可。
3.1.1设置高度为400（默认）
3.1.2添加搜索按钮
点击栏目中央，然后在左侧找到搜索按钮拖过去。也可以直接搜索search
搜索按钮详细设置：
内容
占位符：默认是英文，改为中文
样式
背景颜色：设置一个颜色，然后调整下他的透明度。具体根据你图片来调。
边界半径：设为20
按钮颜色：这里不再调整，想改的自己调。
调整搜索按钮宽度，现在他是满屏的，不太好看。
高级设置
外距：这里外距设置我们首先要将的 链接图片取消掉，单独设置左右外距。
数值选择百分比。具体值的大小自己看着改。
到这里饿哦们首屏基本完成。
3.2添加艺术字隔离区域
隔离区域不一定要搞什么艺术字，这里只是举例。
首先添加一个单栏。单栏属性同样是全宽度+拉伸
然后我们也给他搞个背景图，但是随着我们网页下拉这个图片是固定位置的。
然后在这一栏添加一个透明图片（艺术字），艺术字自己去PS搞一个。
再添加一段文字，文字颜色一般来说适合白色，具体根据你页面色调决定。
这一段实际上就完成了。
但是我们预览看一下，丑的一批。这一段背景是个图片，跟首屏大图直接无缝接到了一起。中间还是适合加一些其他的空白元素。
抱歉抱歉，这个文章太长了。我这里就随便加一段空白区域吧。加了还是丑。
3.3添加所有文章区域
所有文章这里还是先添加一个单栏的区块，这个区块还是要全宽度+拉伸
然后将posts小工具拖入。
修改下posts小工具的属性
这里我们让他只显示图片和文章标题，显示多了会看着比较杂乱。
然后默认文章列表两侧是顶到边上的，我们给他向内缩一点距离。
到这里首页就搞完了！
丑爆了，不过这个文章只是给大家做一个教程引导作用。就这吧。
4.WP后台设置首页
页面搞完了，我们发布下。然后在wordpress后台设置里吧这个页面设为首页。
看下效果
