Elementor Blog

How to Use Elementor with WordPress (A Complete Guide)

Overview: Using Elementor is one of the easiest tools for WordPress page builder — and this is how to use it

Elementor is a WordPress page builder that many website owners, developers, and designers use to customize pages. Is Elementor the right page builder for your newborn WordPress website, and is it worth the risk?

Let’s consider different ways you can use Elementor with WordPress to build a fully customized website for your business.

How to install Elementor with your WordPress?

We’re not knocking the default WordPress tool — it’s actually fine, but it doesn’t offer as many design options as Elementor’s Drag & Drop editor tool that allows you to create a personalized web page in a matter of minutes.

Elementor also offers a live visual builder with no CSS or HTML knowledge needed. When creating a design, you’ll see exactly how the visitors will see it instead of clicking the preview to adjust the desired changes.

We know everyone likes free, so there’s also a free version of Elementor is available on WordPress.org and can be installed directly from the dashboard.

To begin,

» go to Plugins

» Add New, and search for Elementor.

» Click the button to install it after the installation process finishes. After activating the Elementor,

» you’ll find Edit with Elementor button when you open it for a post.

If you purchase Elementor Pro for unique features and vibrant designs, you’ll Download Zip from the Elementor dashboard.

To install Elementor Pro,

» go to Plugins

» Add New and Upload Plugin to Upload the zip file you gained access to from the Elementor dashboard.

>> Related Article: Is Elementor Pro worth getting in 2022? 

What Widgets are Included?

Generally, Elementor is a drag-and-drop system that accommodates three sections simultaneously: Sections, Columns, and Widgets.

  • Sections contains columns and widgets

  • Columns contains widgets

  • Widgets contain individual elements.

About Widgets:

Widgets are categories that allow you to customize the WordPress pages. With the accessible (free) version of Elementor, the essential elements are at a hand distance. Here’s the list of basic widgets that you may use often:

  • Heading

  • Text editor

  • Divider

Image

  • Video

  • Button

  • Spacer

  • Icon

  • Google Maps

With nearly 30 core elements offered to design and produce a functional webpage, it’s simple to drag a piece to the webpage and customize it to your needs/desires.

If you feel that these elements aren’t enough to satisfy your aesthetic, upgrade to Elementor Pro for more features!

Building Elementor's Free Page Builder:

The page builder works with both custom posts and ready-made templates to choose from. Let’s see what it looks like to start.

Step 1: Create New Page or Post

Go to your WordPress website dashboard, and click “Add New” under the Pages.

Step 2: Edit with Elementor:

Once the screen is up, choose to edit the page with the default ~ WordPress editor. To use Elementor, click the Edit with Elementor button.

Step 3: Drag Elements to the Main Page:

Do this You’ll find this page empty initially; however, you can create a  new heading for the page by picking and dragging elements from the Elemtor sidebar.

Click on the box that says Heading and hold down the mouse arrow to add Heading. It will give you the option of Drag Widget here. Press the – or + button to customize the section of your page.

Once you click the + button, another option will open up – with the title of Select Your Structure. (The setting of arranging the alphabet size, color, and other Heading will be placed on the left side of the screen.) You can choose ~ add/ choose ~ and drag the content of your choice. The margins, padding, responsiveness, or content style are what you decide. If you’re adding the written content, make sure that you highlight the keywords.

Although it sounds overwhelming, it actually is pretty simple. All you need to do is open the left side of the document and follow along.

Publish Your Page:

Once you’re satisfied with the page setting, it’s time to review the finished project.

Here is the best thing about the Elementor. Once you have edited the Main Heading, sub-headers, and outlines, you’re ready to rock your freshly installed WordPress website. Every change you make to the website goes live, and you can see/edit the changes accordingly.

Using Elementor Theme Builder:

Available in the Elementor Pro version, the theme-builder is the cherry on the top for those familiar with page builders (don’t worry… you are familiar with page builders now because we just taught you about it).

Elementor does a great job at offering website owners the options to create footers, custom headers, and other dynamic content for your website. The theme builder in Elementor even allows you to override aspects and make changes you want!

But why would I need dynamic content?

Well, sometimes, you may have a sales page with no standard headers or sidebars – or a blog post template/layout that you use every time you add a new post.

From creating a Page to adjusting the header, footer, blog archive, and product pages, there are endless possibilities while you’re working with Elementor. You can check the Saved Templates under the Templates category in the side menu and enjoy writing/adding to your blog.

In Summary:

Although this was pretty brief and quick, we tried our best to make it sound the simplest – and it’s not difficult either.

The bottom line here is that you don’t need to be a pro at website designing to design a website of your own. Go with the flow, follow the steps mentioned above, and you’re all set to do what pleases you!

In the times of humble beginnings of WordPress, people couldn’t add or subtract things from their own. With Elementor, things are handy and pretty doable. With so many video tutorials available online, all you need to do is follow the steps guided to you, and we’re sure that you’ll beat your competitor.

Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email
Thank You!

Use the discount code THANKSGIVING2021 at the checkout and receive 20% OFF ANY PLAN!