Beginner's Guide to Using Elementor in WordPress

What is Elementor?

Elementor is a drag and drop page builder for WordPress. The plugin helps you create beautiful pages using a visual editor. It is designed for creating dynamic websites quickly.

This WordPress plugin is an all-in-one tool that makes website design easy and efficient. For a more dynamic website, there is a rich selection of fonts, beautiful background images, all of which can be used at will to create a website that fits perfectly with your brand's image.

图片[1]-在 WordPress 中使用 Elementor 的初学者指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

Why use Elementor

Elementor is for all types of professionals on your team. If you're not tech-savvy, the visual editor gives you the flexibility to drag and drop any of the 90+ widgets to create content such as buttons, star ratings, and progress bars. For WordPress developers, it's still the platform of choice with script optimization, custom properties, and rollback versions.

"This is a restaurant website edited using Elementor."

图片[2]-在 WordPress 中使用 Elementor 的初学者指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

Is Elementor free?

Elementor offers a free version and several paid packages. The free version includes all the features you need to create a powerful user experience on your website, including a drag-and-drop editor, over 40 basic widgets, and over 30 templates. For more advanced features, such as adding forms and custom CSS, you can upgrade to the Professional (Pro) version.Elementor's tiered pricing is listed below:

59 dollars per year for 1 site.

99 per year for 3 sites.

199 dollars per year for 25 sitesThe

399 per year for 1,000 sites

How to install Elementor

consultations with otherWordPress PluginSame. Installation. Elementor It's both quick and easy. There are two methods:

Install Elementor via Elementor.com

1. VisitsElementor.comand click on "Start"

图片[3]-在 WordPress 中使用 Elementor 的初学者指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

2. Fill in the e-mail address and password to create an account.

图片[4]-在 WordPress 中使用 Elementor 的初学者指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

3. answer some questions about who the site is aimed at and how much experience there is in building websites

图片[5]-在 WordPress 中使用 Elementor 的初学者指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

4. Choose how you want to build the site

The Elementor Pro plugin can be purchased or a bundle that includes the plugin as well as WordPress installation and hosting. Also check out other paid packages or start with the basic free version. For this demo, we'll just go with the free one:

图片[6]-在 WordPress 中使用 Elementor 的初学者指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

5. Since Elementor requires an active WordPress website, you need to enter the website domain name in its inspector.

图片[7]-在 WordPress 中使用 Elementor 的初学者指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

6. After confirming site compatibility, click Install Elementor.

图片[8]-在 WordPress 中使用 Elementor 的初学者指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

7. If you are directed to the site's administrator login page, continue logging in. If you are already logged in, you will be directed to the Elementor plugin page. Click Install Now in the bottom right corner.

图片[9]-在 WordPress 中使用 Elementor 的初学者指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

8. You will then see a page with a confirmation message. Click on theActivation PluginThe

图片[10]-在 WordPress 中使用 Elementor 的初学者指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

Once you've done that, you're ready to start using the Elementor page editor.

Installing Elementor via the WordPress Dashboard

Step 1: In the Dashboard, clickplug-in (software component)>Add New PluginThe

Step 2: In the search field, type in Elementor and find theElementor Website BuilderThe

图片[11]-在 WordPress 中使用 Elementor 的初学者指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

Step 3: ClickInstallation. Installationpost-completionClickactivateThe

图片[12]-在 WordPress 中使用 Elementor 的初学者指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

The Page Builder will be automatically added to the sidebar. However, this sidebar menu item can only be used to access Elementor's backend settings, not to edit pages.

图片[13]-在 WordPress 中使用 Elementor 的初学者指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

How to use Elementor in WordPress

With Elementor, it's possible to bring your design ideas to life. With real-time editing, you can view each element during the design process, making it easy to complete the design process. Let's take a look at how to use the Elementor editor.

Elementor Tutorials

Elementor provides users with an intuitive design that allows them to learn the basics of the editor in a relatively short period of time.

1. First, create a new page or post and click Edit with Elementor.

图片[14]-在 WordPress 中使用 Elementor 的初学者指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

Step 2: You will be taken to the Elementor Page Editor. This is what the page will look like.

图片[15]-在 WordPress 中使用 Elementor 的初学者指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

3. On the left, you'll see the Elementor sidebar with all the drag-and-drop functionality you can use to build web pages

Before you start dragging and dropping widgets, it's important to understand that the Elementor editor consists of three main building blocks: sections, columns, and widgets. Sections are the largest building block.

The editor will highlight sections and columns with blue boxes to show you where you can drag parts.Attention.Widgets cannot be dragged into the navigation bar or header.

图片[16]-在 WordPress 中使用 Elementor 的初学者指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

Blocks, columns and widgets can be controlled using the blue handles. Blocks can be edited by simply right-clicking on the handle.

图片[17]-在 WordPress 中使用 Elementor 的初学者指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

4. When ready, simply click, hold and drag the widget to the location where you want to add the new module.

For example, when scrolling to the bottom of the page, you can choose to drag the widget into a new blank area.

图片[18]-在 WordPress 中使用 Elementor 的初学者指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

5. "You can search for specific widgets to customize the page. Choose from basic elements such as headers or image galleries, or explore more advanced elements such as animated headers and recommendation rotations.

图片[19]-在 WordPress 中使用 Elementor 的初学者指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

6. Click the button in the upper left corner and then click "Website Setup". In this menu, you can set the default colors and fonts for the page. It is also possible to configure global settings for the entire site on Elementor.

图片[20]-在 WordPress 中使用 Elementor 的初学者指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

7. Finally, you can click on the bottom of the panel "History" icon(math.) genusAccessing Elementor's built-in "Revision History" section. Under the "Actions" tab, you can track your changes, moving back and forth between each action. Under the "amendment " tab, you can switch between revisions and return to any previous version.

图片[21]-在 WordPress 中使用 Elementor 的初学者指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

How to Build Your Home Page in Elementor

Elementor stands out from its competitors with its ease of use. Create your first page on this platform without any coding skills and try it for yourself.

1. Go to the WordPress panel.

2. Clickweb pageAnd thenAdd new contentThe

3. ClickUsing Elementor Editors, go to Page Builder.

4. Elementor will load the following.

图片[22]-在 WordPress 中使用 Elementor 的初学者指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

5. "Next, addcaption,text editorrespond in singingImage WidgetThe

图片[23]-在 WordPress 中使用 Elementor 的初学者指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

Once dragged into place, you can edit each widget to your heart's content. Click on the green "post " button, done! Just created the first page in Elementor.

7. Once you have completed the page design, you can preview it and then publish it. First, go to the left panel of the Elementor editor.

8. To preview the page click on the eye icon.

9. Just click the green Publish button when publishing.

Elementor Templates

Templates are pre-designed pages and blocks that help you design your WordPress website. Pages are complete content layouts, while blocks are sections with pre-built widgets such as footers, headers, and FAQs. Specific templates can be searched by page type, template name or tags. In addition, all templates are mobile responsive. They can be inserted into any page with just one click.

1. In the Elementor editor, navigate to the bottom of the page, where a section displays Add Widget Here. Click the white folder.

图片[24]-在 WordPress 中使用 Elementor 的初学者指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

2. A library will be loaded. To preview the templates, click the magnifying glass icon on the image or just hover your mouse over one of them.

图片[25]-在 WordPress 中使用 Elementor 的初学者指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

3. Click the green "stick"Buttons."

4. If you are not connected to Elementor's template repository, you will be prompted to connect. Elementor automatically redirects you to its website, where you can register or log in.

图片[26]-在 WordPress 中使用 Elementor 的初学者指南-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

5. After registering or logging in, the connection is confirmed.

6. Return to the page you are editing andstickThe required template.

The above is a guide to using Elementor in WordPress; this time we are using the free version of Elementor to do the demo, later we will share with you "How to use the advanced features in Elementor".


Contact Us
Can't read the article? Contact us for free answers! Free help for personal, small business sites!
Tel: 020-2206-9892
QQ咨询:1025174874
(iii) E-mail: info@361sale.com
Working hours: Monday to Friday, 9:30-18:30, holidays off
© Reprint statement
This article was written by Harry
THE END
If you like it, support it.
kudos0 share (joys, benefits, privileges etc) with others
commentaries sofa-buying

Please log in to post a comment

    No comments