如何添加区块？

如何添加区块？（区块添加方式）：

第1步：在页面上单击“+”号图标展开添加区块的层，如下截图所示：

第2步：所有的区块都会列在这里，选择要添加的一个区块分类；

第3步：此时页面上可以快速选择区块，页面右侧既可实时预览。选择的这个区块分类下所有的排版版式都会列出来，单击选中其中一个，然后单击点击右上角“应用按钮”，页面立即添加选中的区块。点击右上角“取消”，即取消当前操作。

区块添加后效果如下，直接把以下信息替换为自己的信息就可以。

新增多套页头区块 & Banner区块（2018-12-18更新）

【应用场景】为了让客户网站的首屏更美观，多终端的响应更完美，我们最近重点开发了多套页头区块和Banner区块，应用在网站页头或者页头下方首屏区域是再适合不过了。

【应用效果】应用效果如下截图所示：

新增功能：（2018-12-25更新）

1、新增多套页头区块和banner区块。

【应用场景】为了让客户网站的首屏更美观，多终端的响应更完美，我们最近重点开发了多套页头区块和Banner区块，应用在网站页头或者页头下方首屏区域是再适合不过了。

【应用效果】应用效果如下截图所示：

页头区块效果展示二：

功能优化：（2019-1-15更新）

1、优化证书展示区块，添加默认图片展示，解决了鼠标难以移出区块的问题，使区块交互更加合理；

【应用效果】当浏览该组件时，若鼠标置于区块内部，滚动鼠标滚轮则切换展示证书，若鼠标置于区块外部，滚动鼠标滚轮则继续向下浏览其他内容。应用效果如下截图所示：

新增功能：（2019-1-25更新）

1、新增高级幻灯片组件文字层的打字机效果；

【应用场景】为了满足不同用户的个性化需求，丰富网站的展现效果，我们在高级幻灯片组件的文字层增加了一个“打字机效果”，使得文字可以在幻灯片上逐一展现。

【演示示例】首先添加高级幻灯片组件，添加图片后点击编辑按钮，然后点击添加文字层，在动画效果一栏选择打字机效果，就可以在幻灯片中应用打字机效果了。操作步骤如下：

【应用效果】打字机的应用效果如下：

2、新增一个首屏区块；

【应用场景】为了给用户提供更多样化的选择，我们新增了一个首屏区块用于展示多层级的产品信息，以满足不同用户的需要。

【应用效果】区块左侧展示产品的一级分类，当鼠标划过一级分类时，右侧出现二级分类，当鼠标划过二级分类时，右侧出现三级分类。应用效果如下：

3.新增两个文章展示区块；

【应用场景】此次新增了两个文章展示区块，给用户更加丰富的选择空间，网站建设越来越称心如意。

【应用效果】区块的展示效果如下：

4.新增一个图文展示区块。

【应用场景】增添了一个图文展示区块，区块形式更加多样化。

【应用效果】区块的展示效果如下：

5.新增多个区块：（2019-3-28优化）

【应用场景】为了大家的网站可以有多样化的选择，我们本次又增加了3个区块。

【应用效果】本次新增了两个图文展示区块和一个页脚区块，各区块位置和应用效果如下：

1）图文展示区块一的位置及应用效果如下图所示：

2）图文展示区块二的位置及应用效果如下图所示：

3）页脚区块的位置及应用效果如下图所示：

6.新增自动轮播图文展示区块（2019-4-25优化）

【应用场景】自动轮播图文展示区块采用大图的方式展示产品，使产品细节展示更加到位，同时自动轮播的形式使网页富于活力，更能够吸引用户。

【应用效果】自动轮播图文展示区块的应用效果如图所示：

7、新增图文展示区块；（2019-5-23优化）

【操作方法】点击添加区块按钮后选择“图文区块”,具体新上的两个区块见下图：

【应用效果】新增区块的展示效果分别如下所示：

区块一：

区块二：

  8、区块增加“编号”和“标签”的显示，并支持搜索；（2019-6-25优化）

【应用场景】为了方便客户快速识别区块和搜索区块，给每个区块增加一个“编号”和“标签”，并支持用户进行搜索。

【操作指导】点击新增区块，在左侧区块详情的搜索栏中输入区块“编号”或“标签”就可以搜索到相应的区块，如下图所示：

9、新增查看已有区块ID功能；（2019-7-23优化）

【应用场景】为了解决在网站编辑页面中难以查看已添加区块ID的问题，我们将每个区块的ID展示出来，方便用户快速定位区块ID；
【操作指导】在网站编辑页面中点击某一区块，将光标移动到右侧出现的“ID”图标上即可展示区块ID，如下图所示：

10、网站的区块增加切换版本的按钮；（2019-8-6优化）

【应用场景】为了减少新版本的区块上线时对用户网站页面的影响，我们在旧版本区块上增加了切换新版本的按钮，用户可以选择是否切换为最新的版本的区块；

【应用效果】如下图所示：

11、新增图文展示区块（2019-11-07优化）

新增若干区块，以“图文展示”区块（ID：5649）为例演示。

【操作指导】进入“编辑网站”界面，点击添加区块，输入本区块ID5649，点击“应用”区块，如下图所示：

点击区块图片中央的“编辑”按钮，可进行区块内容编辑，如下图所示：

在弹出的区块编辑界面中，可进行添加／删除图片集操作，也可针对每个图片进行更换图片、设置图片标题、编辑图片描述、添加图片链接等操作，如下图所示：

【应用效果】如下图所示：

12、新增图文展示区块（2019-11-28优化）

新增若干区块，以“图文展示”区块（ID：6009）为例演示。

【操作指导】进入“编辑网站”界面，点击添加区块，输入本区块ID6009，点击“应用”区块，如下图所示：

点击区块图片中央的“编辑”按钮，可进行区块图文编辑，如下图所示：

在弹出的区块编辑界面中，可进行添加／删除图片集操作，也可针对每个图片进行替换图片、编辑图片、编辑图片描述、图片标题、添加图片链接等操作，如下图所示：

【应用效果】如下图所示：

13、新增图文展示区块（2020-1-2优化）

新增若干区块，本次以“产品展示”区块（ID：7869）和“首屏模块”区块（ID：7939）为例演示。

1）“产品展示”区块（ID：7869）

【操作指导】进入“编辑网站”界面，点击添加区块，输入本区块ID7869，点击“应用”区块，如下图所示：

点击区块图片中央的“编辑”按钮，可进行区块产品分类选择，如下图所示：

【应用效果】如下图所示：

2）“首屏模块”区块（ID：7939）

【操作指导】进入“编辑网站”界面，点击添加区块，输入本区块ID7939，点击“应用”区块，如下图所示：

点击区块图片中央的“编辑”按钮，可进行区块图文编辑，如下图所示：

在弹出的区块编辑界面中，可进行添加／删除图片集操作，也可针对每个图片进行替换图片、编辑图片、编辑图片描述、图片标题、添加图片链接等操作，如下图所示：

【应用效果】如下图所示：

14、新增功能：

1）全站移动端优化提速

【应用场景】网站访问速度是一个很重要的指标，不仅影响用户浏览体验，更重要的是会影响网站的搜索引擎排名，特别是外贸网站。

【速度优化】维看本次针对响应式网站，通过图片智能压缩、异步js/css文件加载、移动端智能计算首屏内容、Google字体本地化、网页静态化缓存、混合CDN（境内使用阿里云CDN、境外使用AWS CDN）、全球五大洲自建CDN边缘节点200+（保证网站首次访问速度）等多种技术进行全站优化提速，大幅提升网站访问速度，提高Google测速评分，优化效果如下图所示：

2、新增移动端组件&区块隐藏功能

【操作指导】移动端隐藏功能，可自定义隐藏移动端组件&区块，提高网页加载速度，打造精美移动端网站。进入“编辑网站”界面，点击“手机”图标进入移动端编辑，如下图所示：

在移动端编辑页面，鼠标悬停在页面各组件上，显示“编辑”功能，如下图所示：

点击“编辑”按钮进行该组件编辑，可修改该组件在移动端的“显示／隐藏”状态（此处以隐藏“高级幻灯片”组件为例），如下图所示：

注：在移动端进行的编辑操作，仅会在移动端生效，并不会影响PC端的显示效果。

隐藏后的组件在移动端前台将不会显示（PC端正常显示），如下图所示：

【功能预告】接下来，我们将会开发适合移动端的专属新区块、新组件，并全站支持AMP，逐步完成对移动端及AMP端的速度优化和美观的优化，最终达到移动端和AMP端的又快又美。