活用装修工具,让普通页面秒变高逼格
2017-07-24 15:41:22 3296浏览
首先需明确,要想要一些丰富的交互效果或是比较智能的显示,就算是高级的后台装修模板,也是需要借助其他工具来使用的,比如倒计时。

一、交互效果的应用

首先需明确,要想要一些丰富的交互效果或是比较智能的显示,就算是高级的后台装修模板,也是需要借助其他工具来使用的,比如倒计时。就需要借助外来工具的使用,接下来就为大家引荐设计师门在装修时会经常用到的工具——盛夏科技在线布局和醉语言编辑器。

活用装修工具,让普通页面秒变高逼格

(一)设置动态倒计时

设置倒计时,一般在大促活动中会用到,可以起到渲染活动紧张氛围的效果。如下图所指,做好倒计时图片,上传图片空间后,进入盛夏科技,把背景和尺寸调整好,再点击“倒计时”图层,调整好下列的属性,最后点击右上角的”生成代码”即可(需注意选择是淘宝店铺还是天猫店铺,因为不同类型的显示尺寸是不一样的)。

活用装修工具,让普通页面秒变高逼格

活用装修工具,让普通页面秒变高逼格

(二)设置搜索框、视频以及旺旺客服

搜索框可调节大小以及不透明度,视频可等比例调节大小,并将视频链接放入即可。旺旺客服可调整显示大图小图。如下图:

活用装修工具,让普通页面秒变高逼格

活用装修工具,让普通页面秒变高逼格

活用装修工具,让普通页面秒变高逼格

活用装修工具,让普通页面秒变高逼格

(三)轮播海报的应用(不用买智能版依然可以用)

海报轮播,对于用默认的专业版模板的店铺,是没有全屏图片轮播的功能的,但买模板的每个月也要承担的很大的费用,当然,针对的一些小商型的店铺。现在解决办法来了,不用购买装修模板也可以实现全屏轮播海报的效果。同理,打开“盛夏科技”,点击右侧的“图片轮播”层,在底部属性里即可添加轮播图片以及链接,导航开关以及箭头可自行选择隐藏,最后直接点击生成代码即可。

活用装修工具,让普通页面秒变高逼格

(四)鼠标经过弹出图层

鼠标经过弹出图层,也就是开关灯效果, 将宝贝图片和鼠标经过的图片依次更新上去,调节好大小生成代码即可,是不是很简单呢。

活用装修工具,让普通页面秒变高逼格

(五)多层固定背景代码

多层固定背景,是交互效果其中一种,在页面上的效果表现是有一层是固定的,另外一层可以在其固定背景上滚动展示。一般运用在分类banner的海报上,图片是固定背景——jpg格式,上面的文字是可以滚动的——png格式。按下图所示,复制图片链接地址,替换红色的文字,对于png的透明图,需要复制代码去替换。然后即可去后台利用自定义模块去编辑即可。

活用装修工具,让普通页面秒变高逼格

二、装修必备桥梁

(一)淘宝天猫店铺优惠券链接转换工具

有装修过后台的人都会知道,pc端的优惠券链接和无线端的优惠券链接是不一样的,在这就给大家献上宝典——淘宝天猫店铺优惠券链接转换工具。

http://www.ahatao.com/pc2wap/

直接复制链接点击生成即可获取无线端的链接地址,是不是很方便呀。

(二)1920尺寸全屏页面生成

你可知道这是什么呢,一般情况下,无论是天猫还是淘宝店铺,页面上的宽度是做1920px的,但你在装修的时候,是否有遇到过这样的情况呢,直接把图片放上去,却不会居中显示,而是偏移了位置,这时候就需要借助这个工具来限制它啦——战国策。http://moban.cn/gongju/index.php?t=quanpin

活用装修工具,让普通页面秒变高逼格

如上图所示,将代码粘贴进选框中,然后点击“生成全屏代码”,复制代码去装修后台即可,此处需要注意的是,在进行第二次生成全屏代码时需要点击左边的“清空代码”,不然会导致生成的是乱码。

(三)如何获取天猫淘宝的主图原图

最后这一招很神奇的哦,不知道你有没有发现,淘宝的主图获取直接右击就可以复制图片了,但这招在天猫却不顶用,那到底可以怎么拿到图片呢,在主图中选择你想要的图片,在小图中右击“在新标签中打开图片”,此时在新窗口里会看到一张小图,只要将红框里的尺寸限制删除,就可以得到主图原图的大小。

活用装修工具,让普通页面秒变高逼格

总结

交互效果的应用,可以给页面增加几分活力,但是,也不是说交互效果越多越好,太多的话反而会扰乱整个页面。特别是对于电商页面,简单的交互效果在页面上呈现会美观活力了很多,但应用过多的话会产生视觉疲劳的。以上所说的交互效果就有:

1.设置倒计时

2.设置搜索框、视频、旺旺客服

3.轮播海报的应用

4.鼠标经过弹出图层

另外,在装修过程中也需要借助一些工具,方便我们工作的进行,例如生成全屏代码,优惠券转换工具,以及日常工作时需要用到的ps快捷键技能,通过一些技巧来提高我们工作的效率与质量。

作者:大麦电商,电商问题交流微信damai-e(备注:卖家网)

原创稿件,转载请注明来源卖家资讯http://www.maijia.com/news/

图文推荐