Wordpress可视化编辑插件Elementor

Elementor是一款免费的wordpress可视化页面编辑器，只需要简单安装插件就可以使用它来可视化的编辑wordpress文章或者页面，而且现在已经支持中文，使用起来非常简单

 

开始使用Elementor

首先我们需要安装Elementor插件，直接在官网下载即可，Elementor免费下载，安装好之后我们就会在文章或者页面看到一个 "使用 Elementor 编辑" 的按钮，点击它就会进入到Elementor可视化编辑器

但是默认情况下会沿用主题的布局，如果你想要定制的话，一般会使用Elementor的布局

你可以在文章的右侧页面属性中设置，这里面有三种选择：

• 默认模版：主题自带的模版，一般会带有主题的元素，常用在文章
• Elementor全宽：将内容部分设置为100%宽度，保留原主题头部和底部
• Elementor画布：纯Elementor的模版，不包含任何其他元素，适合做专题页面

注意布局要保存之后再开启Elementor才会生效

 

Elementor界面和元素

在Elementor编辑器中，默认情况下在左侧是各种元素和设置项，有图片、文字块、标题、进度条、图文列表之类的元素，这些都是网页设计中常见的组件，我们将用这些元素拼成最终的网站页面

右侧是网站的实际效果，基本上和真实的网页相差不大，每当添加或者改变一个元素，都是实时的展现，你可以通过最下方的按钮创建行和列，这里确定了你的网站页面结构

把元素拖到右侧的列中，就可以详细的编辑元素了，不同的元素会有不同的选项，比如你添加了一个相册，那么对应的选项就是图片挑选、大小设置、灯箱效果等设置

但是选中一个文字或者标题，左侧则展现文字编辑框、链接、字体等设置

 

Elementor中的实用工具

段和栏

段和栏就是网页的框架，如果你之前使用过Visual Composer的话，就会发现这就是原来的行和列，列包含在行中，所以在Elementor中，你只需要记住栏包含在段中就可以了，你可以用鼠标拖动改变它们的位置，通过不同的组合配置自己的网页

在栏和段中也有具体的编辑设置，用来设置边距等明显的位置，非常方便

 

方便的右键菜单

和其他编辑器不同，Elementor将复制和删除2个重要的功能集成到了右键菜单中，这样极大的精简了工具条，避免了误操作，如果说是什么让我选择Elementor，那一定是右键菜单

 

Elementor实时编辑

细心的朋友可能会发现，在Elementor中是可以实时编辑文字的，也就是你可以在右侧的预览界面直接修改文字，这样非常方便，极大的提高了页面构建的效率

不过有一点需要改进的就是点击文本元素之后，光标会默认显示在最后，需要点击2次才能到达想要修改的地方，当然了在左侧修改也是可以的

 

 

Elementor设置元素样式

除了基本的设置外，还有很多其他的设置，比如样式，如果你选择的元素时图片，那么你可以通过样式面板调整图片的大小、透明度、动画，而选择文字元素则有一些文字颜色、字体等选项，但是各种元素的高级选项里面都差不多的，主要是边距、背景、边框，这些个性化的设置让网页更加多样。

 

 

Elementor页面设置

在Elementor的底部，是页面的全局设置，在这里你可以设置页面的样式，比如设置Fullwidth全屏或者设置Elementor Canvas，那么整个网页都会使用Elementor编辑

然后第二个是响应式设计，你可以随时查看各个类型屏幕下网页的样式是否美观，第三个是历史记录，Elementor支持回退，避免了错误

 

Elementor导入模板

还有要说的一点就是导入模板功能，点击Add Template即可，能在原有的基础上继续添加，而且之前的不会被覆盖，当然他也支持自己保存，在工具条上有一个保存按钮，可以直接保存

 

总体来说，免费的软件能做出这样已经非常不错，Elementor给人的感觉是非常的轻量易用，压缩包下载下来只有不到2M的大小，而且制作页面的时候非常的快速，如果你的网站文章经常需要排版或者添加一些简单的元素的话，那么就尝试一下Elementor吧

原文地址：https://themeforwp.net/archives/wordpress-visual-editing-plug-in-elementor/