新闻详情

灵活运用标签模块做出神奇的切换效果

1
发表时间:2019-10-24 15:33

一、概述


准备好素材,设计好图片,灵活运用横向标签模块即可做出炫酷神奇的切换效果!让您的网站鲜活起来!



二、教程效果


1.png



三、准备工作


   【圣诞老人部分】


1.利用ctrl+alt+A的截图的方法,查看需要放置横向标签模块的区域的宽度,如教程里的图片宽度是870


2.准备好一张和标签模块宽度一致的背景图,如教程里的4格圣诞老人图片。(是一张图片哟!并不是4张哦!)


3.准备好一张背景色为透明,只有粗线内边框的png图片。边框的宽高按2.背景图的格局宽高来进行自定义设置哦~


【文字部分】


1.准备好n张文字背景图,宽度需要和标签模块的宽度一致,而高度则按需求自定义设置。


(设计时请注意指示箭头的位置哦~为什么是n张呢?例如教程是4个模块切换,则需要准备4张文字背景图)




四、详细步骤


1.添加"横向标签"模块


   1.png



2.添加图文展示模块,编辑好文字、不填写标题,点击保存。

1.png

1.png




3.鼠标移到模块上,点击设置样式,设置文字背景图。


1.png




4.按需求添加多个图文展示模块,重复2.3.的操作,并将新加的图文展示模块拖进标签模块。

1.png



5.鼠标放在标签模块上,点击“设置样式”。

1.png



6.选择"标签栏"选项卡,上传设计好的背景图(例如教程里的圣诞老人的图片),并设置导航区高度、透明背景色、隐藏模块边框。

1.png



7.选择标签项选项卡,参考下图设置出鼠标移过的切换效果。

1.png


8.设置好后点击确定,保存。即可查看到效果~



PS:教程里所填写的参数值仅供参考,具体填多少需要根据您的图片实际情况来设置哦~


分享到:
关于优栗
用户服务
产品与服务
商务合作
优栗建站微信
售前咨询热线:
021-60554286
Copyright © 2017-2021 上海优栗网络科技有限公司版权所有 沪ICP备17044774号-6

管理与支持
合规性
服务案例
专家分享
联系我们
热门产品
用户搜索
更多推荐
大数据
区块链技术
云计算
云服务器
云存储
网络加速
企业权益
视频转码
CDN加速
数据安全
短信群发
文字识别
网站监控
优栗代运营
优栗运动
蒙公网安备 15022102000019号
会员登录
获取验证码
登录
登录
其他账号登录:
我的资料
留言
回到顶部