第8章让店铺不再虎头蛇尾之页尾模块让店铺不再虎头蛇尾之页尾模块公共区域的页尾模块1页尾让店铺基本信息一目了然2卖家们总以为页头很重要，
往往忽视了店铺页尾模块的设计和利用。页尾模块是一个公用、固定的区域，无论点击哪个页面都会出现页尾模块，好的页尾模块不但可以增加店铺
点击率，还可以起到引导买家快速搜索页面的作用。淘宝店铺页尾模块是首页装修页面的最后一个自定义内容区，卖家可以自行设计相关图文和代码
，布置在店铺页面的最下方。究竟什么是页尾店铺页尾模块究竟什么是页尾淘宝对页尾模块的高度没有限制，个人建议不要超过500像素，天猫页
尾模块的宽度为990像素，C店页尾模块的宽度为950像素。淘宝店铺页尾是一个不可忽视的地方，添加页尾模块的好处在于可以在所有页面显
示，那么，我们应该如何合理利用页尾模块呢？合理利用页尾模块第一：为页尾模块添加买家须知、快递信息等内容，买家看到买家须知，就会减少
向店铺客服咨询的数量。添加买家须知等内容第二：合理利用页尾模块为页尾模块添加客服中心，如果买家浏览到最后，想要咨询卖家，也可以直接
点击客服中心即可咨询，即方便又简洁。添加客服中心第三：合理利用页尾模块为页尾模块添加底部导航信息，提高买家购买率。添加导航第四：合
理利用页尾模块为页尾模块添加二维码，以便及时推送消息，增加客户群体。添加二维码页尾模块可以作为买家访问店铺的快速通道，合理地设置页
尾信息可以使买家方便的从页尾模块跳回首页或分类信息页面，查看店铺的其他商品及信息。因此，提供清晰的页尾模块能够保证更多店铺页面被访
问，使更多的商品被发现，极大地影响店铺的转化率。经过上节的介绍我们对店铺页尾有了初步的了解，那么如何制作一款视觉加营销两者都不缺的
店铺页尾模块呢？利用Photoshop制作店铺页尾页头和页尾相呼应，因为卖家与买家之间是在完全陌生的空间里进行交易，所以视觉沟通尤
为重要，通过页头和页尾的呼应，能够让买家感觉到这是一家店铺的设计风格，而不是两个设计理念。要合理地运用页尾模块，掌握好设计的度，不
要把所有信息都添加到页尾模块上，做到运筹帷幄才是最关键的。首先其次尾页效果操作步骤利用Photoshop制作店铺页尾步骤1?执行【
文件】丨【新建】命令，新建一个名称为店铺页尾，尺寸为950×190像素的空白文档，然后为背景图像填充颜色，色值为【#041540】
。新建文档并填充颜色操作步骤利用Photoshop制作店铺页尾步骤2?在【图层】面板中创建新图层，在工具箱中设置前景色的色值为【#
1f3f91】。选择【画笔工具】，在工具选项栏中设置画笔【大小】为【20】，【硬度】为【0】，然后在图像上点击鼠标左键画一个点。绘
制圆点操作步骤利用Photoshop制作店铺页尾步骤3?执行【编辑】丨【自由变换】命令，快捷键为【Ctrl+T】，显示自由变换框，
分别在左侧和右侧中间的控制点上拖动鼠标，变换图像。步骤4?调整满意后，按【Enter】键确定变换图像，然后将图像移动到文档的上方，
露出变化图像的下半部。操作步骤利用Photoshop制作店铺页尾步骤5?在【图层】面板中创建新图层，在工具箱中设置前景色的色值为【
#567cdd】，利用步骤2～4中的操作方法，制作如下图所示的图像。制作发光图像操作步骤利用Photoshop制作店铺页尾步骤6?
在工具箱中选择【直线工具】，在工具选项栏中设置填充颜色值为【#a2bcff】，【粗细】为【1像素】，然后在图像上按住【Shift】
键的同时拖动鼠标，绘制1条直线。绘制直线操作步骤利用Photoshop制作店铺页尾步骤7?在【图层】面板中点击【添加图层蒙版】按钮
，为直线所在的【形状1】图层添加蒙版。添加图层蒙版操作步骤利用Photoshop制作店铺页尾步骤8?在工具箱中选择
【渐变工具】，点击工具选项栏中的按钮，在弹出的【渐变编辑器】对话框中设置颜色属性，
完成后点击【确定】按钮。#000000#000000#ffffff操作步骤利用Photoshop制作店铺页尾步骤9?在图像上按住【
Shift】键的同时由直线起点向直线终点拖动鼠标，为直线添加渐变效果。绘制渐变效果操作步骤利用Photoshop制作店铺页尾步骤1
0?将渐变后的直线移动到图像最顶端，并利用【横排文字工具】输入文字信息。字体：DidotHIFM64Medium；大小：18
点字体：方正兰亭黑；大小：14点输入文字字体：宋体；大小：12点操作步骤利用Photoshop制作店铺页尾步骤11?在工具箱中选择
【直线工具】，利用步骤6～9中的操作方法，绘制2条垂直渐变直线，为文字做隔断。绘制垂直渐变直线操作步骤利用Photoshop制作店
铺页尾步骤12?打开本书配套素材【1.jpg】文件，将其中的二维码图像拖动到【店铺页尾.psd】图像窗口中。复制素材文件操作步骤利
用Photoshop制作店铺页尾步骤13?在工具箱中选择【直线工具】，在工具选项栏中设置填充颜色的色值为【#08f6ff】，【粗细
】为【1像素】，然后在图像上绘制8条直线。绘制直线操作步骤利用Photoshop制作店铺页尾步骤14?在工具箱中选择【横排文字工具
】，在二维码图像下输入【扫扫有惊喜】文字内容，完成最终效果。最后按【Ctrl+Shift+S】组合键，将文件为JPEG格式。输入文
字店铺页尾模块已经制作好了，接下来要利用Dreamweaver软件制作店铺页尾模块的代码？为页尾模块制作代码具体操作步骤如下：操
作步骤新建文件为页尾模块制作代码步骤1?打开Dreamweaver软件，在【文件】面板中新建文件，并重命名为【店尾.html】。
步骤2?双击打开【店尾.html】文件，点击【代码】按钮，并删除代码区域内所有代码。删除全部代码操作步骤为页尾模块制作代码步骤3?
点击【设计】按钮，回到Dreamweaver软件设计操作页面，点击【表格】按钮，在弹出的【表格】对话框中设置属性，点击【确定】按钮
创建表格。创建表格操作步骤为页尾模块制作代码步骤3?点击【设计】按钮，回到Dreamweaver软件设计操作页面，点击【表格】按钮
，在弹出的【表格】对话框中设置属性，点击【确定】按钮创建表格。插入图像操作步骤为页尾模块制作代码步骤5?点击【设计】按钮，回到Dr
eamweaver软件设计操作页面，点击【表格】按钮，在弹出的【表格】对话框中设置属性，点击【确定】按钮创建表格。更换图片地址为页
尾模块制作代码因为该页尾模块不涉及到文字需要添加超链接的内容，所以只需要更换页尾模块图片的地址即可。页尾模块代码已经制作好了，那
么如何将页尾模块展示给买家呢？将页尾模块放入店铺展示具体操作步骤如下：操作步骤将页尾模块放入店铺展示步骤1?在淘宝网中进入【店铺装
修】页面，在页面最底端的【店尾】内容区域内，新建【自定义内容区】模块，点击该模块中的【编辑】按钮。操作步骤将页尾模块放入店铺展示步
骤2?在弹出的【自定义内容区】对话框中设置【显示标题】为【不显示】，点击【源码】按钮，并将Dreamweaver软件【店尾】文件内
的所有代码进行复制，然后粘贴到【自定义内容区】代码编辑区域内，点击【确定】按钮。操作步骤将页尾模块放入店铺展示步骤3?在【店铺装修】页面左上角点击【发布】按钮，将店铺页尾模块展示给买家。店铺页尾模块发布后的效果将页尾模块放入店铺展示页尾模块一定要添加到最底端的【店尾】内容区域内，这样才能在所有页面显示。 |
|
