Elementor教程2024：如何使用Elemenor设计页面
Elementor是一款功能强大的网页设计构建器，通过拖拽+调整样式的方式来设计页面，即使是不懂代码的人也可以设计出各种网页布局。当然，如果你想更加灵活的运营Elementor，设计出一个更加专业的网站页面，那么你必须了解和掌握Elementor的使用。
Elementor是最流行的WordPress插件之一，也是目前市面上最受欢迎的Page Builder. 目前在WordPress.org官网显示Elementor下载量超过了500万，也就是说全球有百万用户在使用Elementor来设计自己的网站页面。
为什么选择Elementor page builder?
可视化编辑器：和其它很多Page builder不同的是，Elementor设计区和视图区在同一个页面，通过设置可以实时查看效果，所见即所得，设计效率高。丰富的小部件：ELementor内嵌了40+小部件，其中有文本，图片，按钮，icon,视频等基本元素，还包含了图片box, icon Box, 进度条，客户说，图片集，计数器，选项卡等组合组件，让页面设计更加灵活和轻松。响应式设计：ELementor支持电脑，平板，手机分离式样式设计，可以调整各个终端设备而互不影响。通过对不同客户端的设置，让网站完美展示在各个设备上。
如何安装Elementor
在安装ELementor之前，首先我们要确保我们购买了域名和主机，并且上线了WordPress网站，如果你还没有做这一步，可以查看我之前的教程-购买Hostinger主机，上线WordPress教程。
登录WordPress后台，依次点击Plugin–>add new, 在右侧搜索框内输入ELementor，找到ELementor插件，点击install。
安装成功后，点击active启用插件。
启用插件成功之后，Elementor会自动跳转到Elementor向导。我们可以点击右上角叉号关闭向导，直接进入后台。
我们可以在后台左侧菜单看到Elementor和Template两个选项。
Elementor Flexbox Container
Flexbox Container是现在Elementor最新的布局方式。（之前是Section）Flexbox Container相对于之前的Section更加灵活。不仅允许您创建更复杂的网页设计，还可以帮助您更有效地设计页面布局。
自由度更高：通过容器嵌套子容器，你可以设置更加复杂的布局方式，并且灵活控制小部件的方向，对齐方式，长度和位置。
适灵活应屏幕尺寸：容器使您可以灵活地重新排序网页元素，使它们更容易调整以适应不同的屏幕尺寸。使用容器，您可以确保页面元素以正确的顺序显示，无论屏幕尺寸如何，从而带来更好的用户体验。
Elementor全局设置
如果你想搭建一个专业的页面，那么你要对你的网页的宽度，字体，配色要统一。虽然ELementor默认设置了这些元素。但是如果我们想要自己的样式。我们就要先对我们的ELementor进行全局设置。
在我们进入ELementor编辑区域之后，点击左上角小图标，在下一个界面我们选择site setting。在site setting里面可以设置比较 常见的 三种设置
Global Font(全局字体)
Global Color(全局字体)
Layout(容器宽度，内边距等)
Elementor 小部件介绍
Elementor 小部件是你构建页面的元素，常用的小部件有标题，文本，图像，图标，分割线，按钮等等。通过拖拽这些小部件到容器中，添加小部件内容，然后更改样式，布局来创建漂亮的页面。
当然，ELementor提供的小部件远不止这些，你也可以尝试ELementor Pro来解锁更多小部件，比如，分享按钮，轮播，表单等等。
Elementor样式
当我们把小部件放到容器后，小部件面板将更改为显示“内容”、“样式”和“高级”选项卡。 通过这三个选项我们就可以自定义小部件。
Content：这个选项卡主要就是添加小部件的内容，不如文本小部件，我们可以添加我们的文本，图像小部件我们可以在content里面添加我们的图片。
Style: 这个选项主要可以调整我们小部件的样式，比如文本小部件可以通过style设置字体的大小，颜色，阴影等等；
Advanced: 这个选项卡所有小部件都是相同的，我们可以设置我们小部件的宽度，内边距，外边距等等。
Elementor VS ELementor Pro
在使用ELementor的时候很多小工具，或者模板都会有一个小锁子图标，说明我们需要购买ELementor pro也就是ELementor付费版才能解锁这些小部件。那么我们到底需不需要购买Elmentor pro呢？不着急，我们先来看看ELementor Pro提供了哪些？
Elementor Pro提供了哪些实用小工具 ？
90+ WidgetsTheme BuilderPremium Support300+ Pro Templates & BlocksSliders & CarouselsCustom CSSScrolling EffectsAnimated HeadlinesFlip Box更多功能官网查看这里我总结了几个我们在用Elementor搭建外贸独立站的时候几个实用或者常用的功能：Slide（大图轮播）：首页大图部分是我们网站首页重要的部分，也是吸引用户的关键点，有时候单张不能表达我们的服务优势或者产品优势，我们可以用Slide添加多张图片轮播展示更多信息。Header&Footer: 免费版本的Elementor是不支持页眉和页脚的编辑的。我们只能通过主题自定义来添加页眉和页脚，相对来说，Elementor的设置更加灵活。我们可以做出更多布局的页眉和页脚。Product Page：通常我们搭建独立站都要用到Woocommerce来管理我们的产品，可惜的是，默认情况我们发布的产品会自动生成产品分类页面和产品详情页面，通过自定义修改非常有限。那么Elementor Pro是可以设计产品分类页面和产品详情页面的。那么Elementor Pro到底值不值的买，完全取决于你的需求。
Elementor Pro怎么购买？
点击Elementor Pro官网链接，Elementor Pro提供了四种套餐服务，主要是支持站点数量的区别，根据我们的实际情况，我们选择套餐，然后点击Buy Now
接下来会进入付款界面，在付款之前我们会创建一个账户，如果我们有谷歌或者Facebook账户直接关联登录，如果没有我们可以使用Email创建账号。然后填写你的账单信息，支付即可。（Elementor支持信用卡和PayPal的支付方式）
支付成功后，我们登录Elementor后台去下载Elementor Pro插件。然后通过上传压缩包形式在Wordpress网站后台上传安装并且激活。
然后再License选项关联我们的Elementor账户。这样就成功激活Elementor pro所有功能。
总结
Elementor是目前市场上最高效的网页构建器，但是你要搭建出出色的页面你也是需要灵活掌握Elementor的各个功能。以上是通过各个维度来讲解Elementor的图文教程。希望对你有帮助。