当前位置:主页 > 淘宝运营 >

淘宝装修从入门到高级:8.装修异形店招

最近又有几位朋友关注了秀色可灿,所以我这儿再次温馨提示下:本公众号是灿灿给电商规划小白写的免费教程,更新时间是每周五晚上。如遇到身体状况或者突发状况,周五未见更新,咱们直接跳到下周五即可。不必等候。毕竟我是个真实人,不想浪费咱们的时间。

好了。上周咱们现已知道了怎么热门装饰店招,那么这周呢,咱们再了解下怎么装饰异形店招。

所谓异形店招呢,便是跟一般的、咱们常见的店招不太相同。咱们常见的店招呢,高度一般都是120p+30px,如下图所示那样:

那么这周呢,咱们来尝试另一种店招的装饰方法:

废话不多说,先预备一个异形店招(我随便找了个给咱们做演示):以淘宝店肆店招为例:

首要,第一步,导出整张店招,保存到桌面。

途径:PS菜单栏“文件”——“导出”——“存储为Web所用格局(旧版)”——存储到桌面——存储为JPEG即可(也能够按快捷键:三键“Ctrl”+“Shift”+“Alt”+S存储)。

第二步,新建两条参考线。

“视图”——“新建参考线”——挑选“笔直”——输入“485px”;相同的方法,再新建一条参考线,输入“1435px”。至于为什么是这两个数值呢,上周的教程里我有写,不懂的能够点开下面的链接看下。这儿我就不做重复。

然后PS现在是这个样子的:

挑选裁剪东西,裁剪到参考线的方位。

裁好后,如下图。中间应该是950px。(检查方式:点击菜单栏“图画”——“图画大小”检查)。我现在是以淘宝为例,那么宽度是950px没错的。

接着挑选东西。(咱们是用切片去增加链接,而不是热门。)

框选店招切片。(用切片东西框选要特别注意,不要交织,不要在中间留下缝隙)

导出,并且保存为“HTML和图画”。

“文件”——“导出”——“存储为web所用格局”——“存储”——存储方位挑选桌面——格局挑选“HTML和图画”——点击“保存”。

这时候,桌面上就有这两个了。

切完之后检查下!(这个很重要!)

切好之后翻开images文件夹是这样子的:

没切好(来个过错的演示),下图便是切片没切好,留下了一堆缝隙,咱们千万要注意!(在images文件夹里检查)

接着登录淘宝。

翻开淘宝后台,进入图片空间,新建一个文件夹“秀色可灿全屏店招”,将“images”文件夹里的图片上传到图片空间。

回到桌面。直接把秀色可灿这个图标拖到DW软件里。

然后DW现在是这样的。点击拆分。

然后找到“table”这个英文。(这个单词是盒子的意思)咱们先看前面,咱们找到这个“table”,然后把“table”之前的代码(不包含"table")悉数删去。

接着咱们滑动到最下面,相同找到“table”这个英文,然后把“table”之后的代码(不包含"table")悉数删去。

接着点击选中第一张切片。

然后进入淘宝后台图片空间,这张切片的网址。(第2个按钮便是仿制链接)

回到DW,删去如图所示红框内一切文字,一定要删去洁净!

然后张贴咱们刚刚仿制的代码

接着点击选中第二张切片。

然后进入淘宝后台图片空间,仿制这张切片的网址。(第2个按钮便是仿制链接)

回到DW,删去如图所示红框内一切文字,一定要删去洁净!

然后张贴咱们刚刚仿制的代码

其他的切片都是相同的方法,这儿我不过多的重复说明晰。

现在我悉数完了。(你们渐渐换,嘿嘿!

接着选中切片,咱们分别给对应的切片增加链接(便是点了这个切片后跳转的网络链接地址)。比如,我选中“回来主页”,那么我就要仿制店肆主页的链接:

店肆主页链接的获取途径:淘宝后台——店肆办理——检查淘宝店肆——翻开网页后仿制这个地址即可

进入DW,在如图所示“链接”这个框内张贴刚刚仿制的网址,目标挑选_blank:

接下来是其他需求增加链接的切片,你需求给哪个切片,就挑选哪个切片,然后在DW下发“链接”一栏里张贴对应的链接网址。这儿我就不重复烦琐了,咱们自己去操作即可。

咱们做店招增加的链接,往往是许多的(由于有的店肆导航分类许多),有时候乃至比主页需求增加的链接都要多,这儿需求咱们多多耐心与仔细。

链接悉数增加完成后挨个点击下增加了链接的切片,看是否有漏掉挑选“_blank”。然后全选一切的代码(快捷键Ctrl+A),然后仿制一切的代码(Ctrl+C)。

然后进入淘宝装饰后台——店肆办理——店肆装饰——PC端——主页——装饰页面——找到店招的方位——编辑。

相片类型挑选“自定义招牌”,再挑选源码符号,再张贴刚刚仿制好的代码,高度输入“150px”最后点“保存”即可。

咱们看到,保存后,咱们看到的店招中间是有缝隙的,那怎么解决这个问题呢?

DW里 按 ctrl+F 查找: alt=""

替换成:alt="" 即可!

替换好后,咱们看下,代码是不是就替换好了。接着挑选悉数代码,然后再仿制(复制)代码,然后进入淘宝店招的代码区域,张贴咱们的代码,再点保存。

现在能够看到,中间的缝隙没有了。

然后点击左边的“页头”,页头背景色不显示(别打勾就行),页头下边距10像素挑选“关闭”,然后点击“更换图”(找到咱们保存到桌面上的那整张店招:1920*150px的替换即可),然后挑选“平铺”,挑选“居中”,然后“应用到一切的页面”。

然后预览下,挨个点击下你增加链接的当地,没什么问题,再点发布即可。

好了,到这儿咱们的《装饰异形店招》就完美结束了。你是否Get到了呢?

以下是之前写的淘宝装饰干货,咱们按自己的需求点击观看,拿走不谢。

下周呢,先给咱们做个预告:咱们讲讲怎么用代码装饰动画店招。等待吗?

喜欢记住关注我哦!也能够打赏灿灿,毕竟免费给咱们写教程不容易呢~~下周五晚再会落!么么哒!

  • 关注微信
标签:

猜你喜欢