图片元件|进阶分页

4.CHS_______________.png

当增加/编辑进阶分页时,可以透过增加「图片元素」(下称为元素),来为您的分页加入图片,并且可以自行拖曳放置在指定的版面位置,也可以设定成多张图片做轮播呈现,或者设为全宽图片来增加关注及画面冲击感。

  • 添加新元件操作
  • 新增图片元件
  • 图片建议规格
  • 延伸阅读


一、添加新元件操作

设定步骤

步骤一:添加元件
在左方的设计选单,有多个功能元件,您可以拖拉希望加入的元件到您喜欢的位置

 

步骤二:拖拉元件到您喜欢的位置

拖拉元件到编辑工作区时,会以绿色区块显示元件能够放下的位置

Drag_Drop_Chinese_.gif

二、新增图片元件

1.增加图片

您可以添加一幅图片或以轮播形式展示多幅图片,在拖动的选项上方上传新的图片并按预期排序。

mceclip0.png

上传图片后,可以再点选手机版的“上传图片”来传输其他图片,就会覆盖到原本的横图,如果要更换已上传的图片,再次点选对应装置的“上传图片”即可,或是可以点选「x」来可移除对应装置的图片,例如可移除手机版的图片,这样手机版就会自动套用台式机版的图片。

mceclip1.png

 

若上传了多张图片,会以轮播的方式显示。拖拉图片区块左上角的十字图标,可更改图片轮播顺序,最上方为第一张显示的图片。

mceclip2.png

2.为图片加入连结与Alt属性

您可以为每张图片设置不同的到达页面连结,当用户点选图片的时候就会自动打开到达您设定的连结页面。同时也可以为每张图片加入Alt属性,对您的商店SEO有正向的帮助也有助于图片出现在“图片”的搜寻结果页面,想要了解更多请参考:图片Alt属性

mceclip3.png

 

3.设置全宽图片模式

点选图片 >> 左边选单点选「设定」>> 于图片设定勾选「显示全宽图片模式」,不勾选则变回原来大小。

mceclip4.png

 

以下是分别上传台式机版和手机版图片在网店上呈现的效果

台式机版

image_widget_desktop.gif

手机版 

 image_widget_mobile.gif

 

 

三,图片建议规格

电脑版图片:建议规格可按这里阅读文章
手机版图片:若想呈现全屏图,创建布满屏幕的冲击感,建议图片比例为16:9,尺寸为1080px(宽)x 1920px(长);若想引导顾客继续往下浏览,建议图片比例为4:3,尺寸为1080px(宽)x 1440px(长)

 

 

四、延伸阅读

常见问题—进阶分页

还有其它问题?提交请求

评论