Elementor教程
WordPress上面有很多优秀的可视化网页设计工具（Website Builder），而Elementor更是这些页面构建器中的佼佼者，本文奶爸建站笔记将为大家介绍如何一步一步使用Elementor来设计网站。
什么是Elementor？
Elementor是WordPress平台上的一款可视化页面构建器插件，你可以不需要具有专业的编程能力，就可以通过Elementor拖拽式设计和生成网页，例如你看到的这篇Elementor教程，就是通过Elementor设计和制作出来的。
Elementor版本区别
Elementor分为免费版和高级版，高级版也就是付费版，价格为59美元/网站/年起，Pro（高级）版拥有更多的小部件、网页模板、设计素材，并且支持生成WooCommerce页面，能更加完全的定制网站外观和功能。（具体区别）
如果对网站设计要求不高，免费版的elementor就够用了，奶爸建站笔记目前使用的是elementor免费版+Ultimate Addons For Elementor 设计的。
你是否需要用到Elementor？
elementor只是众多页面构建器的其中之一，如果你还没有使用过其他的页面构建器，那么直接从elementor入手是一个不错的选择。如果你自己有对网站设计的想法，但是不会写代码，那么elementor就是你所需要的工具。
Elementor Pro破解版靠谱吗？
网上有Elementor破解版下载，在确保破解资源干净的情况下，是可以使用的。不过elementor pro激活是采用在线激活模式，破解版的elementor也只能使用元素小工具，并不能使用在线的素材，所以真的有需要，建议购买正版。Elementor Pro正版购买地址。（如果官方的售价你觉得太贵了，可以直接找奶爸购买，仅售99元/年/站点，正版保证。）
Elementor安装教程
使用Elementor的前提是你已经有了一个WordPress网站，如果还没有，请参见奶爸之间的WordPress安装教程，先搭建一个WordPress网站。
进入WordPress后台，选择插件，安装，然后搜索elementor，找到截图中的这个图标，安装并且激活。（或者从这里下载安装包后上传到网站上安装。）
安装完毕后点击激活（Activate）按钮，会出现下图。
提示你创建一个Elementor账号，免费版的话创建了也没什么意义，直接跳过就好。
如果你想要购买高级版，可以到奶爸这里购买。
让你使用它们的hello主题，这个主题是一个完全空白的主题，任何东西都要你通过elementor去设计，不建议新手使用，自己没设计功底做出来的网站会很丑。推荐使用astra这种简单的主题。
让你上传网站LOGO，如果还没准备好，也可以后面再传。
直接跳过。
激活成功后，在你网站后台左边的菜单里面，就可以看到Elementor对应的菜单入口。
提示：如果你购买了elementor Pro，那么还需要手动上传pro的安装包到插件界面安装，然后激活才能使用Pro的功能。
Elementor使用教程
安装完毕Elementor，接下来我们就一起来看看怎么使用Elementor进行网站界面设计。WordPress默认主题对于普通用户来说，想要调整的美观是比较难的事情，所以我们这里推荐大家安装Astra这款免费小巧的主题。
创建第一个elementor页面
1、在WordPress后台，选择新建，页面。
2、点击最顶上的使用Elementor编辑按钮，出现的界面就是Elementor的工作界面。
3、Elementor工作区介绍，在打开的页面最左边的，就是Elementor的小工具，带锁的就是Pro版本的功能，需要付费购买。右边就是你网站页面的可视化编辑区。
使用Elementor设计页面教程
接下来奶爸教大家如何使用Elementor来设计页面，当然，设计的前提是你知道自己要把这个页面设计成什么样子，你可以先画一个草图，然后慢慢用elementor设计出来。
使用Elementor设计页面有两种方法：1、完全自己设计；2、导入设计好的模板修改。
最基础的elementor使用方法如下：
①、在左边的这些元素，你需要使用什么，就按住直接拖动到右边的可视化编辑区域。
②、这个加号可以新增段，你可以理解成新增加一块内容区域，和上一块内容分开。
③、这里是添加模板，点击后你会发现里面分为：模块、网页、我的模板。
这些模板库里面，带有Pro标志的，就是意味着要Elementor Pro才能使用，我们这里随便导入一个网页来作为演示。
点击插入，然后需要你使用elementor账号进行连接，没有elementor账号的点击这里注册一个。
成功导入后，就如上图的样子。
我们需要修改什么地方，就点击那个区域，然后左边就会出现对应的元素设置窗口。
如果碰到不想要的部分，直接右键点击删除就可以了。
如果需要新增内容，就点击加号，然后选择段，再把要添加的内容拖进去，例如图片、文本、标题、视频这些内容。
使用现有模板库里面的页面进行设计相对来说更加简单，便于新手学习和研究，当一切就绪后，点击发布/更新按钮，就可以完成这一个页面的设计了。
免费Elementor功能增强教程
Elementor Pro的价格你觉得太贵不值得购买（找奶爸可以99元购买哟），奶爸教你几招免费获得elementor功能增强的技巧。
进入WordPress后台插件安装界面，搜索elementor之后，你会发现有很多标题带有elementor的插件，如下图：
例如我们安装Essential Addons和Premium Addons后，在使用elementor编辑器设计页面的时候，左侧的元素区域就会多出很多本身没有的功能。
一些elementor Pro上的功能，通过安装第三方Addons也可以实现，不过不建议安装太多的扩展插件，因为不同的插件会包含不同的js和css等文件，容易引起网站打开速度变慢。
Elementor Pro高级功能使用教程
虽然通过第三方插件可以扩展免费版elementor的功能，不过一些高级的功能还是没有办法替代的，这里奶爸就教大家如何使用elementor pro的一些高级功能。
使用elementor pro你可以完全从头规划你网站的各种配置，例如主题颜色、文字、排版、按钮的样式，如下图：
设置好全局样式之后，可以回到主题构建器，自己拼凑一个想要的网站设计。
可以看到，你可以自己设计网站的header、footer、Single Post、Single page等页面，如果你安装了WooCommerce电子商务插件的，那么电商页面也可以自己设计。
例如我们选择一个Header，点击创建，然后会弹出一个模板库，里面所有的预制header模板你都可以直接导入使用，不满意也可以自己手动设计。
设计好了之后，点击发布，会出现选择在哪些页面显示的选项，如下图。
你可以设置整个网站（entire site）都显示，或者只是部分页面显示这个头部布局，其他的页面也类似，这就为你网站自定义提供了很大的自定义空间。
在elementor pro的在线模板库里面包含了很多的预制模板，包括整个网站的，或者某一个部分功能的模板，使用pro都可以直接导入使用，也可以导入后自己修改。对于新手来说，无疑这是一个很强大的功能。
Elementor使用常见问答
如果你安装了专业的幻灯片插件，例如Slider Revolution这种，那么直接在编辑页面的时候，选择简码，然后把幻灯片的短代码粘贴进去就可以了。
如果你没有安装任何Slider插件，那么也可以使用elementor pro的Slider元素创建。
elementor上面的文字颜色和大小都可以单独设置，首先，找到你需要修改的文字元素，例如文本编辑器，然后选择样式标签页，就可以看到设置文字颜色和大小的地方了。
外贸网站建设上，网站的询盘表单是必备的一个需求和功能，怎么使用elementor制作联系表单呢？
首先，你需要安装一个联系表单插件，直接在后台插件库搜索contact就会出来很多免费的联系插件，安装好之后，创建一个询盘表单，然后复制短代码到Elementor里面添加简码元素即可。
页面上的跳转效果专业术语叫做锚点，这里涉及到一点html基础知识，例如这篇elementor教程的目录功能点击后可以跳转。奶爸这里使用的是文章目录插件。
不过我们也可以手动使用elementor创建锚点。点击你想要跳转到的元素或者段，然后高级里面输入一个唯一的id值。
然后在需要跳转的按钮或者连接上，输入当前文章的网址#id就可以了（id为你自己设置的那个，截图上为jump1）
网站头部和底部内容默认使用elementor是没有办法修改的，我们需要另外安装一个插件：Elementor – Header, Footer & Blocks Template，安装并且激活插件，接着就可以在主题菜单的内容区块处看到。
在elementor的左侧工具栏最底下，点击电脑图标，切换到手机端，就可以编辑网页在手机上的显示效果了。
更多elementor教程
如果有没能解答你elementor使用问题的教程，可以在本文末尾留言，我会适当更新相关操作说明到本文。
奶爸您好，我的后台页面添加了一个页面模板修改后。出去看我的页面缺三少四且背景颜色也不对。后台确实没问题的求指教
可能是缓存插件问题，也可能是CDN的缓存问题。
最好出个视频教程一步一步的操作各个部件，看了很多教程没有一个有用的，全部是英文，而且讲的都一样，没一个我遇到的问题。
都是免费教程，谁有精力做那么细致啊。
我在插件商店下载了这个编辑器后，去使用它创建新页面时，那个工具根本拖动不了。上面教程也写了把标题直接按住拖到里面，但是我的脱不出来。这个有办法解决吗
你这种问题大概率是你哪里操作失误导致的，不眼睛看着你操作一遍判断不出来问题。
谢谢呀 其实我第三天重新用这个插件的时候可以正常使用了。第一天安装之后 死活用不了，尝试好多次卸载—安装—卸载
写的真好，嘻嘻
你好,我不需要element的手机显示模式,怎么才能设置成,手机端入口进入到网页,显示的还是pc模式呢?
选择不是响应式设计的主题或者自己用代码覆盖掉。
elementor免费版和付费的区别在哪里呢？
高级版有更多的小组件，还可以编辑整个网站结构。