WordPress页面编辑器插件--Elementor
内容摘要:
Elementor安装
Elementor中关于块/section和栏/Column的设置
Elementor页面构建组件使用和设置举例
Elementor页面编辑器插件是当前被广泛应用并广受好评的WordPress页面构建插件,Elementor以它丰富的页面构造组件和灵活拖拽式的部署方式,进一步降低了WordPress构建网站页面的难度。
本教程将从Elementor插件的安装开始,尽可能直观详尽地讲解如何使用Elementor这个页面构建工具。
Elementor安装
- 进入WordPress后台插件安装界面
- 在搜索框输入“Elementor”
- 点击“立即安装”
- 点击“启用”激活插件
Elementor中关于块/section和栏/Column的设置
创建一个新页面,为演示Elementor插件做准备
- 在WordPress仪表盘菜单中,选择页面--->新建页面
- 使用Elementor编辑器进入页面编辑区
- 点击“+”,为页面选择第一个结构
这里选择第一种结构
- 结构添加后,在结构上看到关于块(Section)和栏(Column)的编辑界面激活点,下图左侧显示的内容是点击“块”设置界面激活点后得到的界面(布局界面)。“块”和“栏”的设置界面和内容基本一致,两者都是从布局/Layout、样式/Style和高级/Advanced这3个模块进行相应设置,下面以“块/section”的设置界面作为操作演示对象,分别对这3个模块做详细讲解。
a. “块”的布局/Layout设置界面
b. “块”的样式/Style设置界面
背景/Background
背景覆盖/Background Overlay
边框/Border
形状分隔线/Shape Divider
排版/Typography
c. “块”的高级/Advanced设置界面
高级/Advanced
动画效果/Motion Effects
终端响应/Responsive
“块/section”的设置讲解结束。
Elementor页面构建组件使用和设置举例
- 将图片/Image组件拖动到结构区中
这时可以看到关于图片组件的3个预定义模块:内容/content、样式/style和高级样式和响应/Advanced出现在左侧编辑区
2. 为选中的图片设置“内容/content”模块下的相关选项
3. 为选中的图片设置“样式/style”模块下的相关选项
a.常规显示设置
b.光标悬浮样式设置
c.图片标题样式设置
4. 为选中的图片设置“高级/Advanced”模块下的相关选项
a. 布局/Layout
说明:把图片所在的区域称作块(装图片的盒子)
Margin/外四周边距:代表这个块和另一个/些处在它四周的块(其他任何块都可以)的间距,它的值不会影响块和块中内容的显示尺寸。
Padding/内四周边距:Padding代表图片本身的四周和这个块之间的留白间距,它的值会改变块中内容的显示尺寸(比如图片的尺寸)
b. 动画效果/Motion effects
动画延迟时间:代表进入动画后,延迟多长时间开始执行动画
c. 变换/Transform
i) 常规变换
锚点:变换参照的固定点
ii) 光标悬浮变换
d. 背景/Background
常规显示/Normal
e. 光标悬浮/Hover
设置方式和常规显示基本一致,可参考上一步操作
- 边框/Border
常规显示/Normal
光标悬浮/Hover的设置方式和常规显示基本一致,可参考上一步操作
f. 遮罩/Mask
g. 终端响应/Responsive
设置当前区域在不同终端的响应方式(显示或隐藏)
到这里,Elementor插件中对于Image组件的使用和设置方法的讲解完成,由于Elementor对组件的定义都是基于内容/content、样式/style和高级样式/Advanced这3个模块,所以各个组件的使用和设置基本一致,这里不赘述,不断的实践是掌握用Elementor构建自己的页面的最佳途径。
WordPress页面编辑器插件--Elementor相关推荐
- wordpress文章编辑器,wp文章图片排版关键词水印插件
wordpress文章编辑器插件是我们很多站长在wordpress文章打造时,经常用到的辅助软件.wordpress文章编辑器可以帮助我们检查文章质量,文章排版检查,分析关键词密度和添加水印等,让我们 ...
- 4.个性化自己的WordPress网站 | Astra主题Elementor插件
4. 个性化自己的网站 在前面的文章中,我们从服务器.域名,到安装Wordpress博客网站,到发布博客文章,进行了一系列介绍.目前,我们已经可以访问自己的网站.但是现在的网站页面是WordPress ...
- wordpress编辑插件_如何使用Tabify编辑屏幕插件减少WordPress帖子编辑器屏幕的拥挤
wordpress编辑插件 Most of the WordPress users tend to create meta boxes to add custom piece of data to t ...
- 【wordpress】文章编辑器插件
最新版的WordPress文章编辑器使用起来实在是有点头大,不习惯,现在下载一个插件即可搞定这个问题 在后台插件中搜索下载:Classic Editor
- 7个最佳WordPress视频库插件
试图将一组视频放到您的WordPress网站上? 尽管WordPress的内置功能可以很好地处理图片库,并且可以很好地显示单个视频,但是对于普通的WordPress安装而言,拥有成熟的视频库仍然是遥不 ...
- WordPress必装插件推荐
如果你是新手,还不会安装WP插件,那么先参考上面的视频教程学习一下,然后再从下面挑选你需要使用的插件吧. WordPress必装插件推荐 每一个网站的主题和使用场景不一样,所以必须要安装的插件也不一样 ...
- 使用WordPress的Elements插件创建主页
没有合适的工具,即使对于有经验的Web开发人员来说,也很难为WordPress网站创建具有专业外观的静态页面. 它涉及诸如设计响应式布局,找到合适的创意资产以及获取使用它们的正确许可之类的任务. 如果 ...
- 如何使用新的WordPress区块编辑器(Gutenberg教程)
在WordPress 5.0中,经典的内容编辑器已替换为全新的块编辑器,称为Gutenberg. WordPress区块编辑器是在WordPress中创建内容的全新方法.在本教程中,我们将向您展示如何 ...
- wordpress页面_查看#1 WordPress页面构建器
wordpress页面 This article was created in partnership with BAWMedia. Thank you for supporting the part ...
最新文章
- 我的个人博客搭建记录
- OpenGL纹理上下颠倒翻转的三种解决办法(转)
- Linux Java连接MySQL数据库
- 23种设计模式之《单例模式》
- 了解jQuery并掌握jQuery对象和DOM对象的区别
- 全面解读php-流程控制
- C++静态库与动态库(转)
- Android UI开发第三十二篇——Creating a Navigation Drawer
- Java网络编程进阶:通过JSSE创建安全的数据通信
- 智能合约审计之整形溢出攻击
- bat操作ftp上传下载命令
- mysql ibd文件清理_MYSQL .ibd文件数据恢复
- 医学影像开源数据集汇总
- 一杯清茶nbsp;几许相思
- React、Vue等前端项目彻底卸载ServiceWorker,亲测有效
- 如何阅读Smalltalk程序
- 【计算机毕业设计】Java ssm高校英语四六级报名系统
- Ubuntu 18.04安装openJDK7编译安卓6.0.0_r1
- python索引取值_对pandas的层次索引与取值的新方法详解
- 7-zip安装与使用
热门文章
- 手机自动化测试IDE ----- 手把手教你用Airtest模拟器来连接手机
- Bootstrap-table 的使用
- 三星android p公测,三星独占时间到,Android平台《堡垒之夜》开放公测
- 开篇--基于Android的小巫新闻客户端开发
- 【ROS真车篇】激光雷达SLAM建图+自主导航+RGB深度相机
- vue已知商家位置调用高德、百度和腾讯地图显示商家位置和导航(a标签href在url后拼接参数)
- android pie华为更新,华为P10国际版开始接收EMUI 9.0更新:基于安卓9 Pie
- 快手抖音如何快速涨粉丝的途径
- 闲来话“小年”:它的日期为啥会有不同?
- excel 区间人数柱状图_Excel图表教程:区间柱状图