Avada主题是目前很流行的国外建站主题,我们在学习 avada主题建站初期有必要先了解网页基本结构和页面布局情况,这样对后面使用 avada主题建站,了解 avada主题Theme Options设置有很大帮助。Theme Options也叫主题选项,在 avada主题的网页布局中包括了很多设置项目,可以说网页中你看到的很多结构形式都是在 theme options中设置好的。
安装国外主题前提条件
1、如果你是学习的话,选择 1核2g配置的服务器起步,如果用 avada主题建站要使用 2核4g配置,这样才能运行流畅。 国内服务器:阿里云、腾讯云(都有代金券,付款时抵用省钱) 国外服务器:点我登陆 Vultr 主机 不知道如何选择地域、配置请在页面右侧+老魏的联系方式,我们一起研究。 2、如果是学习国外主题,那么也可以不用域名,直接用服务器IP当做网站域名使用。 如果是用来建站,那么就要注册域名了。主要用户是老外的话(外贸网站、B2C/C2C等),建议在国外注册,不要在国内注册。打开namesilo官网,在搜索框里输入要注册的域名,选择好之后注册,付费之前记得使用优惠码省钱。优惠码点击国外域名商Namesilo域名注册教程获取。 3、Avada主题 是themeforest中销量第一的wordpress主题,感兴趣可以点我去看看,那里面有上万个国外主题销售。目前在 themeforest上面这款主题是一次付款终身使用,和别的主题一年一付费的情况相比还是蛮划算的。付费后拿到注册密钥留用。 4、建站面板。老魏在本文中使用了宝塔面板,点我领取宝塔官方赠送 3188元优惠券礼包。新用户可享受0.99元体验1个月专业版,多亏宝塔的可视化操作界面部署avada主题才这么快速。 5、Siteground虚拟主机是 wordpress官方推荐的主机,与 wordpress是天生一对。老魏在实际使用当中发现 siteground虚拟主机上面的 wordpress网站速度、稳定性都很棒,而且在国外测试评分网站的得分也很高,如果你打算长期运行外贸网站,老魏强烈建议选择 siteground虚拟主机。 如果你要做外贸网站,点我打开 siteground去注册一个新账号,开始你的外贸建站之旅吧。 关于 siteground建站:siteground专题外贸产品主要页面介绍
外贸产品网站包含多个不同含义的页面,比如网站首页、公司介绍页、产品分类页、产品详情页、国际证书页、联系我们等一系列围绕着企业和产品的页面。虽然每个页面内容不同,不过你仔细观察后会发现每一个页面在“天”“地”“左”“右”的布局上是比较相似的。比如魏艾斯笔记这种博客类型就很容易能分辨出页头、页尾,内容区域和侧边栏。
如下图所示是 avada主题经典DEMO的一个产品详情页,按照不同功能我们分为 6个区域,各自有各自的功能。

avada主题经典DEMO页面布局结构
- 区块1:Header也叫页头、页眉、网站头部,这部分区域包含:Logo、导航栏、顶部联系方式、SNS图标等。在Avada主题 Theme Options -> Header。Header 中的Logo和Menu分别在 Theme Options > Logo 和 Theme Options > Menu 设置;
- 区块2:Page Title Bar也叫页面标题,还有面包屑的相关设置在 Theme Options > Page Title Bar 中找到。
- 区块3:Content 是网页正文内容,在编辑每个页面(Page、Portfolio、Post)时在Fusion Builder 中设置布局、添加和修改内容。这里是网页中动态变化的部分(每个产品页面、每个新闻页面内容都不同)。
- 区块4:Sidebar 是侧边栏,平时常见于网站右侧。存放产品分类、新闻标题、联系表单等。Sidebar分左、右两种,根据需要设置都显示、都隐藏或只显示一个,比如上图中的 right Sidebar,每个页面的 Sidebar 可以设置不同样式。Sidebar 内容在 Appearance > Widgets 添加;Sidebar 样式在 Theme Options > Sidebars 设置。
- 区块5:Footer又叫页脚/网站尾部。根据需要能设置1栏~6栏,常见的是3栏、4栏。比如本文图中的 Footer分成 4栏,包括about us,you may interested, contact info, search。内容和Sidebar一样在 Appearance > Widgets 中进行添加修改。
- 区域6也叫Copyright Bar,是 Footer的一部分。样式等在 Theme Options > Footer中设置。

Avada主题 Theme Options > Header
以上几个区块中涉及到具体页面时部分参数可以在开启 fusion builder后,在页面下面的 fusion page options 中找到。
本文内容不仅适合 avada主题初学了解,所有的网站主题内容也都是由这些区域组成的。只要你想搭建网站就有必要先了解网页基本构成、页面布局这些基础知识。在学习 avada主题初期搞清楚页面由哪些部分组成,然后想调整某个区域内容和样式时就知道该去哪里设置了。即使以后你不用 avada主题建站,了解了这些网页基础知识也可以很好的用于其他建站主题当中。
这是本专题38篇文章中的第16篇: Avada
- Avada主题LayerSlider幻灯片如何设置?
- WordPress+Avada主题/Elementor主题主机环境详细介绍
- Avada主题页面编辑器 Fusion Builder详细讲解
- Avada主题如何设置Sidebar侧边栏
- Avada主题产品详情页/产品分类页/产品页创建详细图文教程
- Avada主题Contact页面制作详细图文教程
- 申请Google Analytics谷歌分析代码并部署到 avada主题的详细图文教程
- Avada主题要安装哪些依赖插件和DEMO对应插件
- Avada主题如何设置 mega超级菜单
- 如何在themeforest购买wordpress主题_主题森林购买Avada主题
- 2020年themeforest黑五活动_主题森林5折优惠
- 如何从themeforest下载avada主题并部署到服务器和虚拟主机上
- Avada主题密钥激活正版使用权限的详细教程
- Avada主题激活密钥Invalid Token无效令牌如何解决
- Avada主题Mega Menu宽度如何调整
- 通过Avada主题了解网页基本结构和页面布局
- Avada 主题导入 improt failed 和 wp_remote_get 怎么解决?
- Avada模板在阿里云虚拟主机提示php最大时间限制的解决过程记录
- Avada主题Demo演示导入教程 快速搭建美观大气的网站
- Avada主题网站favicon图标设置详细图文教程
- 企业上云wordpress+Avada主题如何选择服务器配置及机型?
- Avada主题创建设置menu导航菜单
- Avada 主题 The7 主题在线留言邮件无法发送的解决过程
- Avada主题首页home详细制作过程
- 如何用 Avada 建设 html5 网站
- Avada主题全局设置Global Options详细介绍
- Avada主题DEMO建站的心得体会
- Avada主题导航菜单icon图标如何添加?
- Avada主题安装教程_如何部署Avada主题到wordpress程序?
- Avada主题页脚Footer设置过程详细讲解
- 记一次给 newspaper模板网站加速的过程
- WordPress+Avada主题建站详细流程
- Avada主题密钥注册报错 cURL error 35和无效令牌的解决过程
- Avada主题新建/编辑页面没有Fusion Builder编辑器的解决办法
- Fusion Builder编辑器无法正常显示_Fusion Builder编辑器走形的解决过程
- 解答Avada主题安装部署建站相关问题
- BeTheme主题无法安装附带插件和Demo演示站 报错cURL error 28
- Avada主题制作header页头/页眉详细过程