说起当下流行的微信朋友圈广告,H5广告可以说是最具有代表性意义的一种。目前H5制作平台有很多,今天主要给他家分享下易企秀H5平台,教你3分钟学会易企秀H5。

我知道大家时间很宝贵,这里我们就长话短说,尽可能更快的让你了解易企秀的相关功能,满足初步的制作需求。

当我们打开易企秀官网,进入H5编辑器后,我们可以看到易企秀的整个编辑界面。

这里我简单将他划分4大区域:操作区>功能区>页面区>模板区

操作区:

用于对图片,文字,视频,动画等素材的编辑操作。

页面区:

主要用来添加或页面,对页面内的图层进行统一管理。

功能区:

主要用来添加H5的相关功能,如音乐,图片,地图,表单等。

模板区:

将现成的文字模板或图片模板进行一键套用,省去自己操作的步骤。

今天我们只针对最常用的功能做系统的剖析,后续还会有进阶版和高级版教程放出。

① 操作区

操作面板正中间的区域,就是我们平时放置素材的地方,只有在这里面放置素材,后期预览转发后,别人才可以看到。

由于市面上手机屏幕尺寸不同,对H5作品浏览时有的机型会出现白边的现象,为了满足各种手机屏幕,我们在编辑H5时,必须将图片和文字等主要内容放在蓝色区域内,可确保浏览者能看到你的信息,红色边框是适配iPhoneX的区域,我们可以将背景图或装饰素材尽可能的放大到此区域,这样别人浏览的时候就不会出现白边了。

② 功能区

最常用的功能有【文本】、【图片】、【背景】、【音乐】、【表单】、【地图组件】

【文本】

当我们点击文本后,会弹出文本组件设置。

每个功能达尔已经做了简短的文字说明,如果你有Word或PPT操作基础,你会发现,这些功能是通用的。

字体:

当我们点击【默认字体】的下拉箭头后,会看到里面有很多字体可以选择,如果没有合适的字体,我们可以点击下方的【更多字体】

字号:

点击字号的下拉箭头,我们可以对文本的字体大小做相关的设置,最小字号为12px,最大字号为256px。

文字颜色:

点击文字颜色的色块,可弹出调色板,对文字的颜色进行调整。

文字背景色:

点击背景色色块,可调整文字背景底色

文本对齐与文字样式:

由左至右依次为:左对齐 - 居中对齐 - 右对齐 - 两端对齐 - 加粗 - 倾斜 - 下划线

边框功能:

主要用于添加文本边框,调整颜色和弧度

阴影功能:

主要用于调整文本框的阴影大小,角度与模糊度。

【图片】

点击图片后,可以在编辑器内上传自己喜爱的图片上传使用,也可以使用系统自带的图片。

背景功能与图片功能类似,这里不做过多的讲解。

【音乐】

点击音乐可以添加自己喜爱的音乐,也可以用系统自带的音乐做为背景音乐使用。

【表单】

点击表单会弹出一套表单系统,点击【联系人】会直接生成一个三联表单。

点击【输入框】可以自由添加表单,但是需要对表单进行属性设置。

为了保险起见,建议在【输入类型】里统一选择文本选项,在文本内容内

键入想要收集的信息,比如姓名、电话、参会意向等文字。

【提交按钮】

当表单制作完成后,一定要添加【提交按钮】,当转发浏览时,别人填写完信息后,只有点击提交,你才可以从后台收到信息。

③ 页面区

页面区由【图层管理】与【页面管理】组成,点击常规页,可直接新增一页,点击长页面,可新增一页长页面。

点击【页面管理】对应页面右边的【 ··· 】可修改页面的名称,做新增、复制或删减操作。

点击【图层管理】,会出现当前页面的所有元素。

点击小眼睛按钮,可显示或隐藏当前图层,点击小锁按钮,可固定当前图层,使图层不可删除或编辑。

小技巧:鼠标点击右侧图层不动,上下拖动,可改变图层的置顶或置底的顺序。

④ 模板区

模板区是平台提供的一个快捷自动套用模板的系统,我们可以在里面直接点击想要使用的模板,进行一键套用。

【元素模板】

元素模板主要是针对文本,艺术字,图片,做一键套用的功能使用。

【单页模板】

单页模板可直接生成一页H5,里面包含文字,图片,动效,我们只需要对当前的套用模板页面做文字和图片的替换即可。

【功能模板】

功能模板相对来说比较鸡肋,用处不是很多,里面包含了一些互动功能,如大转盘,抽奖等。这些功能并不是实际意义上的互动,其计算结果也是提前设定好的,类似于假抽奖,假转盘一样,所以我们尽量不用或者少用吧,要不然又要被客户骂了。

这几大区域的基础功能基本剖析完了,学会这几个功能,我们可以完成85%的易企秀作品,最后就是上动画了。

动画的设置是非常简单的,不管是文字还是图片,当我们点击选中文字或者图片时,会弹出组件设置的对话框,点击【动画】,就可以为其设定新的动画效果了,通过调整【时间】与【延迟】来设定动画的出场时间与顺序。

易企秀的动画效果很多,这里我就不一一列举说明了,大家可以自行尝试。

本期的《易企秀操作基础篇》就分享到这里了,后期还有进阶篇,与高级篇为大家分享,欢迎大家关注本人的公众号,获取更多制作教程吧。

· END ·

h5 表单居中_3分钟学会易企秀H5操作(基础篇)相关推荐

  1. 易企秀H5 json配置文件解密分析

    最近需要参考下易企秀H5的json配置文件,发现已经做了加密,其实前端的加密分析起来只是麻烦点. 抓包分析 先看一个H5: https://h5.eqxiu.com/s/XvEn30op F12可以看 ...

  2. html5互动场景制作系统,春哥技术博客高仿易企秀H5场景应用制作平台源码V1.0正式版发布...

    经过一个月的艰苦努力,春哥团队最新作品即将与大家见面了,<2015年6月春哥技术博客高仿易企秀H5场景应用制作平台源码V1.0正式版>即将来临, 现在春哥接受预定啦,春哥技术博客依然走价格 ...

  3. 最新易企秀h5场景秀制作源码 含几百套模板+详细搭建教程

    分享一个最新易企秀h5场景秀制作源码,含几百套模板和详细搭建教程,开发语言是PHP+MySQL,H5页面适合在微信朋友圈传播,传播能力较强. 企业及个人运用各种H5页面进行营销,用H5搭建的站点与应用 ...

  4. 如何搭建易企秀H5平台?

    导读 易企秀如何开启伪静态支持? 一秀如何开启伪静态? 下载易企秀源码 oschina: http://git.oschina.net/jsper/html5Editor Windows下搭建环境 安 ...

  5. h5 表单居中_div居中的几个方法 - 跛豪丶

    一.div居中的几个方法 display:flex 是一种布局方式.它即可以应用于容器中,也可以应用于行内元素.是W3C提出的一种新的方案,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了 ...

  6. h5 nan_易企秀资深前端架构师袁飞:移动H5开发如何避坑

    2020年10月24日,正值程序员节,第二届全球移动开发技术峰会在北京隆重举行.易企秀资深前端架构师袁飞应邀出席峰会,并分享了移动H5开发技术要点和避坑指南. 本次峰会,来自微软.阿里巴巴.小米.腾讯 ...

  7. 易企秀资深前端架构师袁飞分享:移动H5开发如何避坑?

    2020年10月24日,正值程序员节,第二届全球移动开发技术峰会在北京隆重举行.易企秀资深前端架构师袁飞应邀出席峰会,并分享了移动H5开发技术要点和避坑指南. 本次峰会,来自微软.阿里巴巴.小米.腾讯 ...

  8. 如何实现类似易企秀的可视化 H5 编辑器?

    易企秀H5项目架构梳理 现有一款 可视化的 H5 编辑器 (类似易企秀, 使用 React 开发) 提供私有化部署, 绑定域名, 定制开发, 源码售卖培训 等服务 主要面向 对数据要求高, 需要私有化 ...

  9. 易企秀更换模板里的音乐_易企秀黄金:探索中国 SaaS 企业走向成功的路径

    天气炎热的午后,远离了水泥墙壁和反光玻璃,在一间视角开阔且满视野幽深僻静的会议室里,易企秀创始人兼 CEO 黄金为这次媒体交流会打开了话匣子-- 01 征"名"夺"利&q ...

最新文章

  1. 什么是‘YTowOnt9‘?
  2. IOS-input元素光标偏移乱跑,是什么原因
  3. CMake 学习笔记 —— 进阶
  4. python事件循环_简单了解一下事件循环(Event Loop)
  5. 2006年,谁是我们的博客之星?
  6. 计算机用户注册表修改,如何通过注册表修改桌面计算机/用户文档图标
  7. 人大金仓数据库迁移工具
  8. hadoop组件---数据仓库---hive简介
  9. Qt 中使用librdkafka librdkafka++ 创建消费者
  10. wps——ppt中的视频提取
  11. python实现压缩,解压文件,使用密码解压文件。
  12. web前端期末大作业 基于HTML+CSS家乡主题毕业设计源码
  13. pg库和mysql的优缺点_PostgreSQL的优缺点
  14. vant vant-list碰到的坑
  15. 大二上学期 学习计划
  16. 了解MVP(最小可行产品) - 以及为什么我更喜欢最早的可测试/可用/可爱
  17. 简单的视频剪辑入门制作软件,适合新手哦,快快收藏
  18. 【Linux】U-Boot启动文件start.S详解(超详细讲解,上篇)
  19. 算法设计与分析:分治法输出数字旋转方阵
  20. 量子力学顺口溜_数学的幽默打油诗

热门文章

  1. Get shell By Powershell
  2. 智慧城市建设亟待突破大数据瓶颈
  3. docker探索-windows10 docker 使用 mysql(二)
  4. JavaScript基础学习--数据类型
  5. BCM_I2C函数更改
  6. 前辈学习C语言的四种方法,实际上不管学什么语言,都行之有效!
  7. zip4j -- Java处理zip压缩文件
  8. 零基础零代码,也能一周学会动态报表?这个方法很多人都不知道
  9. 【原创】FlashFXP_4.0.0.1510 值得研究
  10. C++是一种糟糕的语言 Linux之父炮轰C++