控件设置相对位置_惊人的Divi转换控件!

Divi的变换控件释放了许多新的设计可能你可以使用一系列新设计选项来执行惊人的设计,而到目前为止,只有在诸如Photoshop之类的图形设计程序中才可以这样操作。Divi引入了一项全新功能,该功能允许在Divi Builder中进行惊人的徒手设计,使你能够以通常仅在Photoshop和Sketch等图形设计程序中才能实现的方式来转换页面上的元素。 你可以轻松移动元素,缩放元素,在三个不同的轴上旋转,倾斜和调整变换原点。 所有这些操作都是通过一个新的超级界面完成的,该界面使每个转换都易于执行。惊人的新视觉界面使转换元素变得容易Divi花了很多时间来构建Transforms界面,以确保它足够直观。终于创造出一组易于使用且功能强大的选项。令人惊叹的用户界面使用新的“变换”控件,你可以使用新设置的组合轻松地调整任何模块,行或部分的外观。 

6f068445229091bff453feaeea5702d8.gif

构建Transforms界面是为了对设计进行视觉控制。Divi不需要一长串模糊的滑块,而是为你提供了直观的控件,这些控件以可视的方式描述了每个转换。 当你观看元素在眼前变换时,这会即时更新在页面上。这个确实很有趣,但更重要的是,它释放了大量新设计的可能。缩放使用“缩放”控件,你可以快速调整任何内容的大小。只需移动一下鼠标,即可上下扩展整个模块。 

f529da064b3495410eb82c4272e7c59b.gif

调整元素的大小时,整个元素和所有子元素都会被同时调整。 默认情况下,缩放元素将保持原始的宽高比,但是你也可以不同步高度和宽度设置并独立调整它们。位置你可以使用“位置”控件来调整元素的位置。可以在任何方向上移动元素,而不必担心页面的周围部分。

7470be7087572bbfa12d3b46716e6434.gif

移动元素时,它独立于其周围的元素和父元素移动。这类似于在CSS中使用绝对定位,不同之处在于该位置基于元素的内联位置而不是其父相对元素的位置。旋转你还可以使用“旋转”控件旋转项目,该控件使你可以在三个不同的轴上旋转以进行全方位的三维旋转。

66f9f21941cc2995e6bf50e3d3dcb843.gif

你可以组合不同的旋转来创建一些非常酷的效果,并节省大量的设计时间。例如,你无需在Photoshop中打开图像并使用模型模板来创建一些3d图像效果,而只需在Divi中打开平面图像并在构建器中对其进行变换即可。如果你需要替换图片,则无需在Photoshop中再次对其进行编辑!倾斜你可以倾斜元素以创建引人入胜的深度效果。与“缩放”控件非常相似,你可以使用锁定的宽高比倾斜元素,也可以解锁每侧并独立调整它们。

6ab4d03af334d02ae7be8e97f0e36974.gif

将“倾斜”和“旋转”结合使用会产生一些令人惊叹的3d效果,从而增加页面的深度和复杂性。转换原点最后,你可以调整变换原点,这将影响一次添加到任何元素的所有变换。

aeac86e0d796cbd421832c164db97767.gif

此选项使你可以更改变换后的元素的位置。可以在x和y轴上调整二维变换。悬停效果惊人这些转换也可以在悬停时进行动画处理,使你可以创建一些以前从未实现过的简单而惊人的悬停效果。

f189a91c05c1af5cae5af01422b75339.gif

结合Divi已经拥有的所有出色的设计功能,创作可能性是非常令人难以置信的。设计自由变换元素时,不会破坏周围的元素。你可以将元素堆叠在一起,并使用不同的模块创建漂亮的拼贴。

23d0a726c7d45ecf796ee34510b06c54.gif

这使你可以轻松地从其父级列或行中“自由地”获得元素,从而实现模块叠加效果,可以为任何设计增添趣味性。如果你对创建网站有兴趣欢迎来撩爱极致小哥哥哦~

ef4dd375ba928ee1845cedea25216e9b.gif

75c8f7bea3c7f1250b029a2b1830130b.png

长按关注,有更多干货哦~▼▼▼

2cd7cfca3530fe0fe72b3be49e15baee.png

- End -

f8561cc1484f5f6f02904f78a1aef228.png

点个赞,证明你还爱我

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/514846.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第三代英特尔至强可扩展处理器,英特尔数据中心的“芯法宝”

作者 | 宋 慧 出品 | CSDN云计算 头图 | 付费下载于东方IC 距离英特尔发布第三代至强可扩展处理器Ice Lake的全系列产品,已经过去一个多月了。全新一代的至强处理器除了核数增加、性能提升与架构升级以外,还首次将SGX英特尔软件防护扩展技术&#xff08…

谈谈我对零售云在云原生总结与思考

简介: 云原生是零售云的最重要的技术底座,云原生是什么,会走向哪里,在零售2B交付的场景上该如何应用,怎么能够结合帮助建设零售云系列产品体系,值得我们的思考和探索,也将有效指导我们接下来几年…

oracle查看编码

select * from nls_database_parameters where parameter NLS_CHARACTERSET;

类选择器遍历赋值_利用反射实现配置表数据到类对象数据的转换

在游戏开发中,配置表是不可少的。通常我们将一个类,做成一个配置表,将配置表每列的索引都和类的字段名严格对应起来。先实例化一个类的对象,然后通过反射来遍历类中的字段,通过field.SetValue()给类的对象赋值。但是配…

人工智能如何提升大数据存储与管理效率?

简介: 通过使用AI数据存储,供应商和企业可以将存储管理提升到一个新的水平。而且,存储管理员可以找到他们目前正在努力管理的指标的解决方案。 随着大数据的大量来源以及企业可用数据量的增加,存储容量规划已成为存储管理员的问题…

wildfly10 (JBoss)如何部署SSL证书

文章目录1. 证书下载2. 证书配置2. 效果验证项目用的wildfly-10.1.0.Final。需要用到SSL证书,把部署过程记录下来,以供参考。1. 证书下载 本文的证书申请都来自阿里云。 1.首先把你的域名做好解析。 2.从阿里云上下载申请的SSL证书,类型选择…

奇点云集聚数据中台优势,加速企业数智化升级

作者 | 寇雪芹 出品 | CSDN云计算 头图 | 下载于视觉中国 近日,以“应云而生 原力觉醒”为主题的 StartDT Day 数据技术大会在杭州举办。会上,奇点云发布了最新的数据技术战略“跨平台、云原生、自主可控”、云原生数据中台 DataSimba R3.0、消费者数字…

2020-10-29

简介: 世上没有免费的午餐,微服务技术让 IT 系统变得更敏捷、更健壮、更高性能的同时,也带来了架构复杂度的提升。对于开发者而言,要想更好的驾驭微服务架构,需要解决持续集成、服务发现、应用通信、配置管理、流量防护…

状态码202_至少 10 个 HTTP 状态码

HTTP状态码(英语:HTTP Status Code)是用以表示网页服务器超文本传输协议响应状态的3位数字代码。HTTP状态码 HTTP状态码总的分为五类:1开头:信息状态码2开头:成功状态码3开头:重定向状态码4开头…

玩转 IntelliJ IDEA 2020

文章目录一、基础软件集成配置系列1. 常用快捷键2. IDEA 配置JDK项目应用 JDK3. IDEA 配置 Maven4. IDEA 配置 TOMCAT5. IDEA配置 Git6. IDEA配置的导入导出7. IDEA控制台输出乱码8. IDEA注释模板9. IDEA xml模板10. IDEA 高效开发11. SpringBoot 集成 MyBatisPlus 模板12. Spr…

CSDN 独家对话阿里云贾扬清、华先胜等大咖,剧透阿里云原生技术密码

新一轮科技革命和产业变革正重塑全球发展格局,以云计算为代表的新一代信息技术相互渗透,成为数字经济智能和创新发展新引擎。过去 12 年,人们对云计算的讨论从原来的“为什么上云”,到“为什么不上云”,再到如今探索“…

持续定义Saas模式云数据仓库+实时搜索

简介: 本文由阿里云计算平台事业部 MaxCompute 产品经理孟硕为大家带来《持续定义Saas模式云数据仓库实时搜索》的相关分享。以下是视频内容精华整理,主要包括以下三个部分:1.Why:概述与价值;2.What:应用场…

弹窗进度条_QQ 大更新!语音进度条来了,还有这 5 个新变化

4 月 13 日,QQ 迎来了 8.0.0 for iOS 的更新。在其 App Store 的更新描述中可以看到,本次更新不仅升级了 QQ 的界面、优化了多人语音和转发消息的体验,语音消息还支持暂停和进度拖动了。知晓君第一时间对新版本 QQ 进行了一番体验&#xff0c…

接入阿里巴巴商业操作系统,麦当劳中国双11发力数字化

简介: 此次麦当劳中国与阿里巴巴的深度合作,对于双方和整个餐饮行业都具有重要意义。 早上8点出门前,你可以打开支付宝搜索麦当劳,点击“优惠预点”订餐,在你去办公室途中,热腾腾的麦当劳早餐就为你准备好…

Jepsen:分布式系统最早的混沌框架

来源 | 混沌工程实践作者 | 罗冈庭头图 | 下载于ICphotoJepsen测试框架的工作模式和混沌工程的思想是一脉相承的。Jepsen测试框架可以在分布式系统上注入众多混沌事件,例如引入网络问题、杀死节点和生成随机负载等等,然后通过执行预先定义的测试操作&…

Linux 命令操作手册

文章目录一、Boot项目前后台二、进程三、防火墙四、查看系统版本五、权限赋予六、远程同步文件七、目录八、文件九、解/压缩十 、大文件分割方案十一、查看文件中关键词出现的次数十二、添加/删除/修改/查看用户和用户组十三、寻找文件十四、清空文件内容十五、磁盘占用删除包含…

天猫国际通过Hologres进行排行榜的实时交互式分析

简介: 本文将会为您分享天猫国际如何通过Hologres实现计算、存储、服务统一的实时交互式分析。 作者:景闻 阿里巴巴数据技术及产品部数据技术专家 一.业务背景 天猫国际营销活动分析实时排行榜是在大促中帮助业务快速的分析商家或者品牌的交易和流量的…

b2b优势与劣势_在Amazon Business平台销售的优点和缺点,B2B卖家清楚吗?

Amazon Business是一个B2B平台,拥有45000多个活跃卖家和1000多万产品,提供批发和各类商业折扣。很多卖家不确定是否要在Amazon Business销售,因此本文将详细解说Amazon Business的优点和缺点:优点1、直面大规模消费者很多人通过亚…

Docker 操作手册

文章目录一、docker 基础篇1. 常用命令2. 镜像操作3. 容器操作4. 文件拷贝5. 目录挂载6. Docker镜像备份与迁移二、实战应用篇CentOS Dockerdocker Oracledocker Jenkinsdocker mysqldocker Gitlab-cedocker NEXUS3docker Redisdocker RabbitMQdocker elasticsearchdocker kiba…

官宣!《新程序员·开发者黄金十年》正式发布

“在互联网还不发达的时代,就是《程序员》伴我成长的。”“怀念啊,曾经《程序员》的日子。”“我是看着《程序员》长大的,大二时买了创刊号。”“这可是我们这一代人大学时候满满的回忆,也是当时寝室中传阅最多的书。”“每年的《…