Avada主题教程 3:网站Footer页脚元素设计
教程总目录:Avada主题详细教程:从0开始创建一个网站
前面我们制作了网站顶部导航栏的样式。本文接着就把底部页脚部分做好吧,后期在进行中间主题内容的制作。
因为目前整个网站还在制作过程中,所以说顶部导航和底部页脚,可能和其他元素不搭配。后期我们需要再次进行调整,本文仅作为页脚制作步骤展示。
制作思路
全局底部页脚的制作跟顶部导航其实区别不大。一般来说底部元素不宜过多,不太适合做的花里胡哨。这里就选择官方站点的一个页脚来说下步骤。
页脚预览截图如下:
底色随便选择,实际过程建议改成其他纯色或是带有一层遮罩的背景图片。
全局页脚制作
在开始添加页脚元素前和顶部导航一样,我们需要在布局设置里点加号创建并添加一个页脚显示单元。
然后直接点击编辑这个底部显示单元“Footer”。
添加容器
添加容器并编辑设置。
容器填充 Padding :上 50px,下 50px 。
容器内链接颜色 Container Link Color: 根据你底色决定,他和下面元素内文字颜色建议统一,本文#0d244c。
容器链接悬停颜色 Container Link Hover Color :本文棕黄 #e2c36c 。
容器边框颜色Container Border Color :本文颜色1 纯白 #ffffff 。
容器背景颜色Container Background Color :本文 #f8f5ef 。
添加列
然后添加四列元素区域。宽度:25%、20%、20%、35%。
宽度设置默认是比例设置,我们点击可以自定义百分比宽度。
所有列设置中外边距Margin宽度 0px。其他设置默认。
添加元素
下面我们编辑各列内的元素。
第一列
第一列我们内容放一些网站简短介绍和几个媒体分享图标。
Title
第一个我们加一个标题Title元素。里面填上关于我们,或是其他类似文字,比如公司名称。
文字使用H3标题,字号19,其他默认。
Text Block
下面就是简短介绍的文本块Text Block元素。填入介绍,其他设置默认,字体颜色根据你的底色决定。本文因为是偏向粉色的底色,所以使用了#0d244c颜色。
Separator
在上面简短介绍和媒体分享图标之间,我们加一个小的分隔器。分隔器底部15px,其他设置默认(分隔器默认是不显示样式风格的)。
Social Links
下面就是媒体分享图标了。里面可选的基本都是国外的网站图标,这里建议不要选太多,显示够1行即可。
图标大小 :Font Size 15px 。
图标颜色 Icon Color :根据你底色决定,本文 #0d244c 。
背景颜色 Background Color:透明 rgba(0,0,0,0) 。
边框颜色Border Color :透明 rgba(0,0,0,0) 。
有可能你的设置中不显示背景颜色 Background Color 这一项。无需理会
第二列
第二列我们放一竖排商店的链接列表。
Title
先添加一个标题元素。使用H3标题,字号19,其他默认。
Menu
商店下面的几个链接,我们使用菜单进行展示,当然你也可以使用其他元素,比如按钮,文本块等。
菜单展开方向 Direction :垂直 Vertical
主菜单项间距 Main Menu Item Spacing : 10px。
主菜单图标 Main Menu Icon Position :右边。
主菜单文本颜色 Main Menu Item Text Color :根据你的底色决定,本文默认 #0d244c 。
主菜单项图标颜色 Main Menu Item Icon Color :透明 rgba(0,0,0,0) 。
子菜单展开方向 Submenu Expand Transition :向上 Slide Up 。
移动端折叠方式 Collapse to Mobile Breakpoint :不折叠 Never 。
这个菜单元素,我们还需要指定显示一个菜单,菜单内容就是你要添加的商店链接。
我们直接创建一个菜单即可,菜单不需要指定显示位置。
示例:
菜单保存后,你在菜单元素里发现看不到那个菜单,只需要将页面更新一下就可以了。
第三列
第三列和第二列,使用的元素以及设置一样。这里就不讲了。把里面文字和关联的菜单替换一下就可以了。
快捷方法,可以直接复制元素拖过来。
第四列
第四列是我们的邮件订阅以及一个图片显示元素。
Title
添加一个Title元素,使用H3标题,字号19,其他默认。
为了排版好看点,文字里我填入的是英文。
Text Block
然后是一个使用文本块Text Block写的简短订阅说明。
字体颜色Font Color 根据你的底色决定,本文默认 #0d244c 。
Avada Form
下面就是一个订阅提交表单工具Avada Form。这个元素不需要特别设置。我们添加元素后,需要创建一个订阅表单。
订阅表单因为设置项过多,内容比较长。我将其单独发布了一个文章,可以查看:
Image
支付方式图片工具
这个图片可以自己改成其他的,大小合适,背景透明。你也可以直接下载下面这个图。
对齐方式 Alignment :居中 Center
其他设置默认。
搞完之后看一下效果:
可以看到第四列的订阅表单和上面说明之间间隙有点大,我们给订阅表单改一下外边距 Margin。
现在的效果:
已经可以接受了。
底部版权区域
下面是最底部我们添加一些版权说明的文字区域。这个区域也可以放备案号。
在下面新添加一个横排1/1整列。
Separator
先加一个分隔器,分割一下视觉区域,这样好看一些。
样式 Style :单边框实体 Single Border Solid
外边距 Margin :上下都是20px
Text Block
接着我们添加一个文本块Text Block。
文本块内可以调用动态内容 Content 。里面下拉选择Other分组里面的日期date。
日期格式 Format :Y(仅显示年)
日期前文字 Before :© Copyright 2022 –
日期后文字 After :版权所有
日期前的文字里面”年“写你的建站日期。
对齐方式 Alignment :居中 Center
字号:14
完成后效果如图:
底部空白有点大,我们改一下底部那一列的底部外边距。
最终效果
最终效果如下图,想要和你的网站搭配只需要调整一下配色基本就可以使用了。