Elementor 很适合用来客制化网页设计，因为它的功能实在强大！
不论是套用内建的美观模板，或是使用内建多种元素功能，它都能轻而易举建构出独一无二的网页，因此受到众多站长喜爱与推荐。
这一篇教程文章要来教大家，使用 Elementor Pro，建立出特别的页首与页尾，打造出一个定制网站！
- 1. Elementor 是什么？
- 2. 如何制作页首？
- 3. 如何制作页尾？
- 4. 如何移除或更换页首/页尾？
- 常见问题
- WordPress 学习资源
1. Elementor 是什么？
Elementor 是全球知名的 WordPress 页面编辑器，全球已经有 500w+ 次插件下载量，基本上与所有主题兼容。 可参考 Elementor 插件教程。
你不需会任何程序基础，只要用区块拖曳方式，就能定制形象网站设计。
有关任何的页面布局、新增区块功能、编辑区块内容等 ..，都将变得更加简单。
Elementor 有多种功能区块，是建置网站的好帮手，当你心中简单构图完成，接下来只要拖放区块，并放置在网页上即可完成设计。
Elementor 有多种区块模板和网站样板，点击按钮就可套用，再从中进行修改自己喜欢的设计，可节省大量的建置网站时间。
购物网站盛行的时期，或许你想搭建购物网站，Elementor 对于 WooCommerce 电商插件，有良好的支持。
并为此开发了 WooCommerce Builder（购物网站编辑器），除了一般的页面设计，你也能设计定制化的购物网站页面。
像是添加购物车按钮、产品价格、产品图片和说明、相关产品列表、产品库存提醒等 .. ，如下图。
方案评论
Elementor 有免费版方案可使用，如果感觉不错用且有更多设计上的需求，再升级为进阶版即可。 完整 Elementor Pro 进阶教程。
Elementor 高级版，有额外 50 多个专业元素功能、300 多种高级模板、主题编辑器、表单编辑器、弹出式广告编辑器、WooCommerce Builder（购物网站编辑器）等 ..，有更多功能可以使用。
Elementor 进阶版方案，分为个人用、公司用的两大类型，里面又有不同的方案，但能使用的功能几乎都一样，最大的差别是「使用的网站数量」。
如果你只有一个网站会使用，只需购买最低的方案即可，依此类推。
产品定价
Elementor 个人用，起手价格是 $ 59 美元 / 年（约 $1，800 人民币 / 年），算是满平价的费用，可应用在一个网站上，并享用它的全部功能。
2. 如何制作页首？
我们先从页首开始教起，之后再到页尾！
这一章节是要告诉大家，如何简单、快速地客制化网站的页首，让造型整个焕然一新！
STEP 1. 开启 Elementor Pro 主题建构器
只要更改网站的页面外观，一律都是开启「使用 Elementor 编辑」中的「主题建构器」，点入后我们就会进入到主题编辑器的后台。
STEP 2. 添加页首编辑界面
进入主题建构器的后台里，里面会有各种页面的版型（如：页首、页尾、文章列表等等）可以编辑，我们在众多的页面区块中，找出页首的造型区块并新增它，然后就会进入挑选外观造型的环节。
STEP 3. 挑选页首样式
在「区块」里，我们挑选出一个喜欢的外观造型，然后套入使用。
而在挑选造型样本时，我们可以透过预览图知道页首外观长怎样，挑选出一个喜欢的样式并点击它，系统就会进行运作，之后就进入到页面编辑的画面。
除了挑选样本外观这个方式，如果不满意编辑器里的样式，我们可以在「我的版型」，上传自己喜欢的模板样式使用。
STEP 4. 编辑页首
关于页首的编辑界面，我们可以编辑标题或选项的文字颜色，也能增加图片美化，调整文字之间的高度与宽度，还可以设定文字的动画效果。
除此之外，我们可以上下移动页首在页面的区块位置，调整到理想的页面位置中（一般都置顶在网页最上方）。
STEP 5. 储存套用
我们编辑完毕后，就在左下角，选择「Display Conditions」，之后会进入一个窗口，按下 Add Condition，会出现一个选项，我们选择「包含（include）」、「整个网页」，并储存关闭。
回到前台观看，页首就换上我们刚刚设定的造型（如下图）。
以上是编辑页首的教程，下一章节我们要谈如何编辑页尾，步骤一样很简单！
3. 如何制作页尾？
其实设定页尾的步骤跟页首一模一样，但我们这边再详细说明一次！
STEP 1. 开启 Elementor Pro 主题建构器
这步骤跟页首一样，开启主题建构器，只要做任何的页面或是网页区块，都是从主题建构器打开，进入后台。
STEP 2. 添加页尾编辑界面
在多个页面版型里，我们选择页尾的的造型区块，这步骤跟上一章节相同，只不过我们要进行页尾的编辑流程。
STEP 3. 挑选页尾样式
在「区块」里，我们挑选出一个喜欢的外观造型，并套用到页尾; 除了挑选样本外观这个做法，如果想要造型更具有个人特色，我们可以自行上传喜欢的样式。
套用外观后，接着进行修改页尾设定的流程！
STEP 4. 编辑页尾
在页尾的编辑界面，我们除了编辑页尾的联系信息内容，可以修改选项的文字颜色，调整文字大小、文字之间的高度与宽度，还能设置文字的动画效果。
而且我们可以增加许多社群分享按钮，通过它们有效帮助我们宣传网站！
STEP 5. 储存套用
这步骤跟上一章节相同，我们编辑完毕后，在左下角选择「Display Conditions」，会进入一个窗口画面，按下 Add Condition，会出现一个选项，我们选择「包含（include）」、「整个网页」，并储存关闭。
回到前台观看，页尾就换上新的外观造型（如下图）。
以上就是页尾的制作步骤，不论是页首还是页尾，只要透过页面专门的版型就能做出来，这就是 Elementor Pro 的优势，对于新手的站长来说，不需要学会程序码，就可以建立出页面的外观。
4. 如何移除或更换首页/页尾？
既然说到了制作页首页尾，当然会有替换或移除版型的时候，假设日后想更换新的样式，或是将样式删除，该怎么做呢？
替换（取消）样式STEP：
我们到主题建构器的后台，里面会有编辑的界面，我们可以发现左上角有个「绿色标记」，那个是版面使用中的状态，只需要把绿色标记变成「灰色标记」，让它变成非使用中的状态。
再将新的版型设定成绿色标记就完成，页面就换上新的版型，让我们来看操作步骤吧！
至于说要如何把“绿色标记”变成“灰色标记”呢？
首先，我们点击要设定的页面版型，左下角会有一个编辑链接，并点击它。
进入编辑链接里面，会有一个字段项目，它是展示页面版型的位置（如：整个页面），我们只要把字段选项按下「X」取消，再按右下角存档。
绿色标记就变成灰色标记，代表该版型是「未使用的状态」，页面区块就不会展示在网页上，这样就完成了！
之后我们再把想使用的页面版型进行设定，左上角出现「绿色标记」，代表成功使用了！
删除样式STEP：
如果有不喜欢的页面版型样式，想删除它，该怎么删除呢？
我们点选要删除的页面版型，在字段的右边会有 3 个点的标记，点开会出现编辑选项，里面有一个叫做「Trash」的垃圾桶图标，那个就是删除选项。
点击删除后，版型就会永久被删除在编辑接口了！
使用 Elementor Pro 建立客制化页首页尾的教程，介绍到这里！
不晓得看完文章后，有没有觉得其实很简单，没有想象中这么复杂！ 如果对于 Elementor Pro 教程 还有兴趣的话，可以阅读相关教程文章，进阶学习。
常见问题
我要如何上传自订版型？
首先，在 Elementor 版库里右上会有一个上传的图标，点击后将自定义范本文档导入。
之后在我的版型里面就会看到上传的文档，选择要用的文档后，按下插入，最后按下右上的存档图标，就换成新的版型样式。
如何判断页面主题是否支持 Elementor？
只要任一种主题有符合 WordPress 开发原则，Elementor 都可以用，所以通常主题商都会在官网或营销文案上，特别标注「有支持 Elementor」，可以根据这方式选择。
推荐哪些主题是对 Elementor 有良好支持？
上述有提到，只要符合「WordPress 开发原则」的主题，Elementor 都可以用，但若是选出最为推荐的，我会推荐使用「Astra 主题」。
因为它是多功能轻量级主题，里面内建许多主风格样板，可以用来建造Blog、企业形象网页和购物平台卖场，这些多元类型的网站。
可以满足多数站长的使用需求，若有兴趣推荐参考 Astra Theme 教程 。
原文链接：https://www.itaoda.cn/blog/9267.html，转载请注明出处。
评论0