Avadaテーマのホームページレイアウトとコンテナ設定のヒントを総合的に分析 (04)

在使用Avada主题时，很多新手可能会对其首页排版感到困惑，尤其是在容器和模块的选择与设置上。相比其他页面构建器如Elementor和WPBakery Page Builder，Avada主题内置的编辑器提供了更加直观和高效的排版方式。在本篇文章中，我们将详细讲解如何在Avada中进行首页排版，帮助你快速上手并掌握容器和模块的设置技巧。

步骤：网站前端→Edit Live→ADD COLUMNS

在首页我们能看到中间和右侧都有这个放在添加的符号，那么我们该怎么选择呢

如果你是要添加你现在这一行，请点击中间的添加

如果你要添加是下面的，请点击右侧的添加符号

如果你要设置当前这列的容器的设置，请选择右侧笔符号

然后会有对应的一个容器设置，比如宽度啊，样式啊，间距啊还有什么设备显示啊等等

如上图，Avada主题自带的编辑器，对于外框和内框的调整他是可视化的，对于elmentor和WPBakery Page Builder编辑器来说，还需要点击后再高级里面设置，可方便太多了

途中蓝色是内框，紫色是外框，是直接可以拉动的，不管是上下还是两侧都是可以的，这点还是做的很好

然后添加后，会弹出一个选择容器样式（如下图）

我觉得这也是一个很好的设计，他不允许模块单独存在，必须一个容器控制着模块，但elmentor和WPBakery Page Builder编辑器是可以让模块单独存在的

样式基本上覆盖了，不需要手动再去设置排列了，好处就是无需担心自己的容器会有不好的排列效果，我说的是如果超过四列以上的，在这里基本上覆盖了，就不需要去手动设置容器了，但elmentor和WPBakery Page Builder编辑器是可以自己去添加更多的容器，当然也就有更多不可控制性，比如排列扭曲或者前端展示不整齐，当然这种自定义的空间更高

如上图，我们添加是1/1容器，也是就一个容器布局，然后我们再点击添加模块，（如下图）

是不是觉得模块太多了，那么如果你是有一定熟练度的，可以试下右上角的搜索，当然新手建议还是在这页面找，多操作

这是文本块，也就是文本模块，也是用的最多的

点击中间的笔符号（编辑）注意所有侧边的都是容器的设置，如果是模块点击中间的即可

步骤：网站前端→Edit Live→ADD COLUMNS→Text Block

然后有一些设置，文本内容，文本位置，以及设备展示

这个不建议弄，可能会破坏布局

点击问号也会有对应的解释，如果你要弄一列多个，直接用容器的多列布局就行了，这样更兼容，不会出现前端设置不兼容的情况

当然在Design(设计）也会有颜色背景和内距的设置，根据你是实际情况来

按钮模块

步骤：网站前端→Edit Live→ADD COLUMNS→Button

然后我们在左侧可以设置按钮的一些信息，比如链接，按钮文本，以及按钮跳转是格式等等（如下图）

如果不懂每一个设置什么意思，可以查看对应的问号都有解释，这就是好的主题的细节

Design（设计）这里能设置按钮的风格，以及图标，按钮大小等等

步骤：网站前端→Edit Live→ADD COLUMNS→image

图片模块

点击编辑，然后更换图片，在媒体库或者本地上传，在加入链接即可，完成基本的图片跳转

在Design(设计）处理可以调整最大宽度还有位置等等，还有一个可以设置图片的外面，你可以理解为一个容器控制图片，就是面具，还是挺有意思的

还可以设置这个面具的位置，尺寸，以及图片是否重复等等

Caption（标题），你还可以帮图片设计标题

有很多类型，标题位置不一样，你根据你实际情况选择

红色是因为背景色设置成红色

如上图，可以更改的

所有的模块的动画效果都在最后一个设置（Extras）

下面这个是可以不用管，有些模块是没有这个的

概要

通过这篇教程，相信你已经对Avada主题的首页排版有了更加深入的了解。从容器的选择到模块的设置，我们看到了Avada编辑器如何简化了布局操作。如果你觉得这期内容对你有帮助，欢迎继续关注我们，下一期我们将继续讲解更多关于Avada主题的技巧与方法，帮助你更加灵活地打造专业网站。