The Beginner's Guide to Using Elementor in WordPress

A couple of decades ago, creating a website involved a lot of back and forth between developers, copywriters, and project managers. It took months just to get a few simple changes updated on your website.

Nowadays, knowing如何编码建立引人入胜的网站不是必需的。页面建设者喜欢Elementor使非编码者非常容易创建任何WordPress网站they want.

在本指南中，您将了解Elementor及其如何帮助您构建令人惊叹的网站。

此WordPress插件是一个多合一的解决方案 - 让您在一个平台中控制网站设计的每个部分。您可以自定义网站，以适应您的品牌，具有运动效果，多个字体和增强的背景图像。

为什么您应该使用Elementor

Elementor works for all types of professionals on your team. If you’re not tech savvy, the visual editor gives you the flexibility to drag any of the 90+ widgets to create content, like纽扣, star ratings, and progress bars. ForWordPress developers, it’s still a top-choice platform with script optimization, custom attributes, and rollback versions.

您可以与Elementor构建什么？

Elementor是构建任何东西的有效工具 - 从整个网站到特定的着陆页。您可以设计销售页面，促销页面，甚至定制表格。如果您可以想象，此平台可以帮助您设计它。

查看与Elementor建造的餐厅网站。

图片Source

Elementor价格

Elementor提供免费计划以及多个付费订阅计划。免费版本带有您在网站上创建强大用户体验所需的所有功能，包括拖放编辑器，40多个基本小部件和30多个模板。

如果要访问更高级功能，例如添加表单和自定义CSS的功能，则可以升级到Pro版本. Here’s the pricing structure:

• $49/year对于1个站点
• $99/year对于3个站点
• $199/yearfor 1,000 sites

Undecided? Elementor has compiled a detailed, easy-to-scan list ofPro与免费功能.

如何安装Elementor

像其他WordPress plugins，安装Elementor快速而简单。您可以通过两种方式做到这一点。

Installing via Elementor.com

• Go toElementor.com然后单击开始.
• Since Elementor requires you to have one, you’ll be asked whether you have an active WordPress site. If you do, click是的继续。如果没有，请不要担心！Elementor将引导您完成创建一个过程。注意：为此，为此，我们单击“是”。

• Next, select the Elementor plan you’d like to sign up for. For this demo, we’ll pick the Free plan.

• Enter your website’s domain into their checker to make sure your site is on the WordPress platform.

• After your site’s compatibility is confirmed, clickInstall Elementor.

• If you’re directed to your website’s admin login page, go ahead and log in. If you’re already logged in, you’ll be taken directly to the Elementor plugin page. ClickInstall Now在右下角。

• After, you’ll arrive to a page with a confirmation message. ClickActivate Plugin.

• 完成的！您都可以随时开始使用Elementor Page编辑器。

Installing via WordPress Dashboard

• 从仪表板中，单击Plugins>添新.
• In the search field, enter Elementor and locate Elementor Page Builder.

• ClickInstall Now. After installation, clickActivate.

您将被带到欢迎页面，并且页面构建器将自动添加到您的侧边栏中。但是，此侧栏菜单项仅用于在后端访问Elementor的设置，而不是用于编辑页面。

How to Use Elementor in WordPress

With Elementor, you can take your design vision and turn it into reality. Live editing makes the process painless by allowing you to view each element as you design it. Let’s explore the Elementor editor.

快速参观Elementor编辑器

Elementor offers an intuitive design for users. So, you can learn the basics of the editor in a couple of minutes.

要开始，创建一个新页面或帖子，然后单击Edit with Elementor.

You’ll enter the Elementor page editor. This is what your page will look like:

On the left side, you’ll see the Elementor sidebar with all the drag-and-drop features you can use to build your web page. Simply click, hold, and drag a widget to the place where you’d like to add the new module.

The Elementor editor consists of three main building blocks: Sections, Columns, and Widgets. Sections are the largest building blocks. Within Sections, you can add groups of Columns, and Widgets are housed within Columns.

编辑器将告诉您可以通过在蓝色框中突出显示部分和列来拖动小部件。请注意，您不能将小部件拖到导航栏或标题中。

您可以使用蓝色手柄控制部分，列和小部件。只需右键单击句柄即可编辑块。

When you scroll to the bottom of the page, you’ll have the option to drag a widget into a new, empty area.

You can search for specific widgets to customize your pages. Choose from basic elements, like a heading or image gallery, or explore more advanced elements, like animated headlines and testimonial carousels.

In theSite Settings菜单，您可以为您的页面设置默认颜色和字体。您还可以在Elementor上为整个网站配置全局设置。

Elementor comes with a built-in Revision History section. Under the Actions tab, you can trace your changes, moving back and forth between each action. Under the Revisions tab, you can switch between your revisions and revert back to any previous version.

How to Build Your First Page in Elementor

Elementor stands out from its competitors because of its ease of use. Try it for yourself by building your first page in the platform — no coding skills required.

• Go to your WordPress dashboard.
• Click页面， 然后添新.
• ClickEdit with Elementorto enter the page builder.
• Elementor will load to look like this:

• Next, add aHeading,Text Editor, and图片widget.

• 一旦将其拖动到位，您就可以为您的内心内容编辑每个小部件。单击绿色发布button, and done! You’ve built your first page in Elementor.

When you’re finished designing your page, you can preview and then publish it. Here’s how to do that:

• 转到Elementor编辑器左侧的面板。
• To preview your page, click the眼睛图标.
• To publish, click the green发布button.

Elementor Templates

模板是预先设计的页面和块，可帮助您设计WordPress网站。页面是完整的内容布局，而块是带有预先构建的小部件的部分，例如页脚，标头和常见问题解答。

Elementor gives you full license to use any of the templates for your business. There’s a field to search for specific templates by page type, template name, or tag. Plus, all templates are mobile responsive. You can insert them into any page with just one click.

• 在Elementor编辑器内部，导航到页面底部，其中有一个部分说在这里添加小部件. Click on the white folder.

• A library will load. To preview a template, click the magnifying glass icon or on the image.

• 单击绿色Insertbutton.
• 如果您尚未连接到Elementor的模板库，它将提示您这样做。Elementor将自动将您重定向到其网站，您可以在其中注册或登录。
• After you register or sign in, your connection will be confirmed.
• Return to the page you were editing andInsertyour desired template.

完成的！Your template is all loaded and ready for customization.

How to Use Advanced Features in Elementor

Elementor’s pro version offers advanced features to take your WordPress website to the next level. You get access to more widgets, a theme builder, pop-up builder, and custom field capabilities.

如何在Elementor中创建弹出窗口

Pop-up formshelp you capture email addresses from leads. Elementor makes creating these forms easier with its pop-up builder. Follow these instructions to create your own popup.

• In your WordPress dashboard, go toTemplates>Popups>添新.
• Name your template and clickCreate Template.
• Choose a template from the Library or create your own design.
• Click发布，然后s大街和关闭.
• Open a new page in Elementor (CTRL + E for PC users; Command + E for Mac users).
• Drag in a button widget.
• 在布局下，选择Link>动态的>动作>Popup.
• Go toPopup>打开弹出窗口and select the popup you created.
• Go to the live page.
• Then, click on the button and see the popup appear.

Here’s how it might look:

图片Source

如何在Elementor中自定义WooCommerce产品页面

WooCommerceis a popular e-commerce platform to help you build an online store for your business. Together with Elementor, you create custom product pages to boost your sales.

之前你可以定制你的产品页面, you’ll need to install and activate WooCommerce and Elementor to your WordPress dashboard. You’ll also want to add a few products to your website. You can learn aboutWooCommerce setup here.

设置后，您现在可以设计您的产品页面。按着这些次序。

• In your WordPress dashboard, go toElementor>My Templates.
• Click on the添新button.
• Choose单产品当您的模板类型并单击Create Template.
• The Elementor Library will load.
• Next, choose a pre-designed product page template, or build one from scratch.

图片Source

• In the template, add different product widgets to customize your page. You can find the在此处完成列表.

图片Source

• 准备预览页面时，请单击左下面板的眼睛图标。
• Click设置， 然后choose the product you want to display.

It might look like this:

图片Source

• To publish your page, click the green发布button on the bottom left panel.

Frequently Asked Questions About Elementor

Do you still have questions about Elementor? No problem. Here are a few frequently asked questions about the plugin along with the answers.

Does Elementor work with all themes?

是的,它适用于所有跟随WordPres主题s’ coding standards.

Does Elementor slow down your website?

Elementor是最快的页面构建器之一。但是，某些网站可能会导致加载时间缓慢，但是Elementor为指南提供了指南如何解决网站速度问题.

Is Elementor good or bad for SEO?

Elementor could be bad forSEO如果它会减慢您的网站，但是通过遵循最佳实践，例如压缩图像和限制过多的脚本，即使安装了Elementor，您也可以拥有一个快速的网站。

The verdict is that Elementor, like any greatWordPress页面构建器, is good for SEO. By helping you create a beautiful, responsive website, this page builder allows you to keep users on your page. As visitors engage with your content, search engine algorithms will understand that your website is valuable, boosting your rankings and improving your SEO.

使用Elementor构建您的WordPress网站

Elementor is aWordPress plugin专门为帮助您设计业务的自定义网站而构建。它的用户友好界面使其成为非编码器的有效平台。如果您想吸引和培养更多线索，请安装Elementor和HubSpot WordPress插件以增加转换。

Editor's note: This post was originally published in August 2019 and has been updated for comprehensiveness.