了解网站页面布局结构

>>>了解网站页面布局结构
了解网站页面布局结构2018-01-30T20:10:14+00:00

Project Description

更新日期: 2017-10-09

在具体了解如何使用Avada之前,我们还需要对网页的布局结构做一些了解,对后面理解和使用Avada的Theme Options来做设置会有帮助。

网站通常会包含很多个页面,比如网站首页、产品分类页、产品详情页、关于我们、联系我们、证书等等一系列页面,每一个页面都不相同,但是每一个页面在结构上却又是类似的。

先看图:

这个页面,我们可以划分成5块大的区域(区域6是属于区域5中的一小部分):

  • 区域 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部分,侧边栏通常会放置一些导航内容、联系表单等内容,截图中所示的只是右边的侧边栏(Right Sidebar),Sidebar分左、右两个,可以都显示,也可以都隐藏,也可以只显示一个。根据自己的想法,每个页面的Sidebar都可以设置成不一样。详见后面的文章,关于Sidebar部分的具体介绍。
    这些区域的显示与否,样式等可以在 Theme Options -> Sidebars 中做设置;
    内容的添加,在 Appearance -> Widgets 中。
  • 区域 5:Footer部分,图中的Footer分了3栏,分别放了Contact、Feature Products和XPS Production Guides 3部分内容,实际使用过程中,可以设置1~6栏,通常3~4比较常见。其中区域6是属于Footer的一部分,叫做Copyright Bar。
    样式等设置在  Theme Options -> Footer ;
    Footer中的内容,也和Sidebar一样,在 Appearance -> Widgets 中进行添加修改。

了解了一个页面由哪些部分组成,才能做到心里有数,想要调整相关区域内容和样式的时候,我们才能知道该找到什么地方去做设置。