荷塘月色_淘宝抖音跨境电商卖家论坛社区

标题: 双十一淘宝店招轮播图超链接怎么做 [打印本页]

作者: 【sean】    时间: 2016-11-6 16:42
标题: 双十一淘宝店招轮播图超链接怎么做
店铺装修首页中的轮播海报已经不是什么新鲜的事情了,那么你知道店铺店招里面的小轮播是怎么插入进去的吗?
: n7 ~; C: g/ v/ b7 L% Z; l) H8 ]双十一就快到了,今天手把手教大家在任意位置插入小轮播,让店铺动起来,希望大家双十一大卖。
6 S6 ~$ W- S4 |! a学会它可以在任意图片位置插入轮播模块,而且不限制轮播数量,不限制轮播尺寸,真的很实用。
4 Z: c% c, _; b  a* {% R# u
2 x4 |* A# m8 u4 _下面以店招插入轮播为例给大家讲解
! e7 P! ^2 m2 \$ W9 v( D- ?1 M% ^首先,我们需要根据具体要实现的效果,做设计图,用ps将设计好的图片切片,注意将箭头也分别切出来;
6 t" t, b6 K4 X& g ! v) F: s) E; V5 `
9 [: j6 O9 i8 m: s
切片之后保存的时候我们选择保存为【html和图像】,即网页代码和图片。* d6 }8 H1 q! W- j5 h
8 s- x- a% W* E
, x6 B0 x+ K+ e2 ?

: ?/ X. F3 R+ T' A* n: W保存完,出现一个图片文件,和一个网页文件,网页文件就是我们需要的代码。可以打开网页文件,点击下,看下效果。* B; O+ H; Q0 r9 Q3 [. o
同时我们将所有图片上传到淘宝图片空间方便后面使用。
! J3 x5 V9 s, ?$ M) r
3 j( ?  A$ h3 W" r9 L% g' \( I
. a, V& ~8 `% Q7 X$ q; M! }接下来我们用DW(Dreamweaver)工具打开我们导出的html文件:& X7 y  Z7 D, k' M5 ^: y
在DW设计模式下可以预览效果:8 r; ]5 |9 |$ E

1 {4 a. M3 x# c" a, R. O, ]( J
: q0 ~& d# y- @# m, D' c下面的步骤很重要,别掉队哦~
& I9 \1 b1 a  U% t) {' }! h接下来我们要在dw中讲设计的轮播部分删除,具体的方法是选中轮播部分按 delete 或者删除键都可以:4 {0 T0 b6 e5 \
' K  J) u/ r% N) Q  g5 ~$ @

$ a, q* K0 C  w- x' R) S- H删除之后我们选择单元格,合并单元格,方便我们以后插入代码,方法是按键盘上的Ctrl同时选中三个单元格,
4 o5 z9 ]. H1 _) k) G% |8 e/ U2 s右键:
+ n2 A$ Q9 @0 e2 i$ Z
3 O! L- {4 E& a- g' S
8 |6 o. [, ~4 c: c" J. K/ [4 ~. z
合并完成之后只有一个单元格如图:  j6 z2 C" R$ \6 U( J' K5 c* ~

# A- _/ Z/ @0 y8 H7 U$ A8 p. K* a- A( }! u" t: Z
接下来我们开始制作轮播,代码将制作好的轮播代码插入到这个布局中即可,这里我们需要利用一款装修代码生成器。他可以一键生成我们需要的轮播代码,而且可以自定义轮播图片数量,不限制轮播图片大小。同时可以将生成的轮播代码插入到任意的模块里面。
1 X( m: X7 F* `2 A9 E2 u
0 R1 }/ ~& R5 y) u7 X" N7 V( v

( Z, p' z6 q: H( v4 X. |9 K打开软件找到【工具】――【高级工具】――【箭头轮播】:
$ n9 ?- m8 S  T" ]$ E/ Y4 M . n6 Q/ l7 w( k' E

/ L0 ^. J, [$ {; u7 ~
+ F5 }& p1 h8 \# G- Z; J4 r2 k, y这里就是我们需要配置的轮播参数,几乎是可视化的编辑界面:上面填写我们设计好的轮播模块的尺寸,下面输入我们在淘宝空间中上传好的轮播图片地址,左侧的组是根据我们设计的轮播图片数量添加的,如果我们设置的三张图片轮播,那么这里就添加三个组,同时右边就可以输入三个轮播图片的地址,并且三个图片可以插入不同的宝贝链接。  
  I5 Q% a3 A* v1 w. E% k; m这里填写参数问题应该不大,做过店铺装修的朋友都知道,插入图片地址即可, 填写完成之后 我们直接点击右下角的 【生成并复制】按钮。
8 p% y( u9 g  o: r2 i/ a% _当软件提交复制代码成功,此时我们要去dw软件中 插入我们生成好的轮播代码:
; ~& h* t% x3 q' O  j% k
, V& u! j1 u  g9 ~ + y' I8 J/ `% |4 |9 o+ O. g8 m

% N4 o% J$ T" z& _注意,这里要删除默认的尖括号,再粘贴我们软件生成的代码即可。一定要删除尖括号哦。 粘贴完成之后再空白处点击一下:
* l0 O# m9 U# t, g- f; ?我可以看到预先设置好的效果了:" F; }5 S% O$ H( y1 C+ W, ~1 N

0 M# S# ^* j0 L& K1 P) }1 K+ f" [
" k& g4 p% T8 C' R, D# j$ Y& M
此时我们的轮播代码已经插入到了店招中,别忘了,除了轮播模块内的图片我们已经替换为图片空间的图片地址了,其他的图片还是我们本地的哦,所以我们需要将其他图片的地址也替换为图片空间的图片地址,如果图片不多的话直接复制图片空间的图片地址在dw中替换即可,如果图片多可以使用【淘宝美工助理】――【工具】――【批量换图】:
/ I: H3 R1 M3 @# P8 @& M& Q 0 B  x$ m- p) g/ |, I) P

# O9 }! l, }- P/ {这个功能可以将本地的图片一次批量替换为图片空间的图片,很方便。具体的操作大家有软件的话 可以看软件里面的教程,这里不做过多赘述。
9 O$ D$ P8 f& m: N! W至此,所有的步骤我们都完成了,最后只需要将dw中设计好的代码全选复制之后粘贴到淘宝店招里面即可:
2 V  ~- p% W/ E  O4 s! p5 B
' U' c* m& g2 a: K5 t; Y3 I& k! O: m: n. e- b5 F
利用此方法,可以在任意位置,任意的模块里面插入轮播模块,比如店招,首页海报等图片中都可以,有兴趣的卖家朋友可以亲自尝试;
2 j4 i! \0 K  B% t
5 b) O0 ^2 r( }6 |1 Q1 m
% m9 K6 }5 w; L" t) {6 n
作者: yuan2625658123    时间: 2016-11-6 19:24
很好的帖子 学习l4 N" c; i( h( l! c" `1 G. v

作者: a8405907    时间: 2016-11-9 11:42
挺不错的···学习学习
- g$ I# A# T. m2 q9 O' a; _2 F
作者: rrstive    时间: 2016-11-12 21:08
还得购买吗6 N9 p: \7 \  q% b0 h1 u

5 \$ U8 V. A$ Q" c3 |




欢迎光临 荷塘月色_淘宝抖音跨境电商卖家论坛社区 (https://htys123.com/) Powered by Discuz! X3.2