Beginner’s Guide To Using Elementor With WordPress

Decades ago, creating websites was for highly skilled individuals. They are capable of writing codes, building frameworks, managing a database system, and all things technical. In short, it is only developers who know how to build websites.

Thanks to the rise of WordPress and page builders, creating a website has become easy, and everyone can do it. Whether you have no idea about coding or any technical stuff you need for building a website, a webpage builder takes care of all that!

Elementor allows you to design a well-functioning site. All you need is the patience and determination to create the design you want with editable templates.

However, using page builders also needs some learning before you can get the hang of it. If you want to use Elementor as a page builder for your website, this article will serve as a guide for you.

What Is Elementor?

Elementor is a page builder for anyone who wants to develop websites rapidly without having to deal with coding. Because of its simple drag and drop feature, it is the most popular page builder on WordPress. To make your design, simply click on any ‘element’ you like and drag it to any portion of your page.

It is popular due to its simplicity and people with no technical background can design their website. Elementor makes it look like it was created by a professional developer. With the easy customization of all parts of the page, you can add or remove elements without using any code.

Any professionals in your team can find Elementor a favourable tool to build a website. There are over 90 widget content, web elements like rating, etc. Even professional developers choose this platform as it’s easy for them to edit and build pages for multiple projects they handle.

Is It Free?

Elementor has a free and paid subscription plan. The free version includes multiple features, a drag-and-drop builder, basic widgets, and templates. However, if you are looking for advanced features and functionality, paid plans are good enough to have them.

• $49/ year (1 Pro site)
• $199/ year (25 Pro site)
• $499/ year (100 Pro)
• $1000/ year (1000 Pro)

How To Use Elementor?

You can create web pages for websites without coding with Elementor. So first, you need to install the plugin on your WordPress site.

There are two ways to install Elementor: via the Elementor website or WordPress dashboard

Elementor Website:

• Go to Elementor.com
• Click Get Started
• Create an account
• Answer the questions about your skills in website building, etc.
• Select the plan you want: free or paid
• Enter website domain. Hence, make sure you have an active web domain on WordPress
• Click Install after the confirmation of your website.
• Log in to your website and click Install Now.
• Then, click the Active Plugin button

WordPress Dashboard:

• Go to your WordPress Dashboard, Plugin > Add New
• Search for Elementor > click Elementor Website Builder
• Click Install Now, then Activate

After installing, there are elements you need to navigate through when working on Elementor:

• Widget
• Column
• Section

• Step 1: Create a New Page or Post by clicking on the Edit with Elementor.
• Step 2: As you enter the Page Editor, you have a blank canvas or space to write content. On the left side, there are elements or features you can use to build the webpage. This is where you’ll find the major features of Elementor: Sections, Columns, and Widgets. The section is the largest building block, and you can add Columns to it. Meanwhile, the Widget is within the Column. The editor will highlight Sections and Columns in the blue box to indicate where you can drag a widget. A widget cannot be dragged into the navigation bar or the heading. The blue box controls the Sections, Columns, and Widgets. To alter the blocks, simply right-click the handle.
• Step 3: Click, hold and drag a widget to the location where you want to add the new component. At the bottom of the page, you’ll be able to drag a widget into a new, free section.
• Step 4: Choose a specific widget for your page. You can also explore different elements to change the appearance of your page. There are multiple headings, image galleries, testimonials, and other design features to add to your page.
• Step 5: On the Site Settings, you can change the colour and style of the fonts you use. There is also a Global table that is used to configure the entire website.
• Step 6: You can check on changes you make by going to the Revision History section. You can also use the Revision tab to switch between new and old versions.

That’s just the basics of using Elementor. Now let’s go into specific details on how to use this page builder.

How To Create A New Page?

• Step 1: Go to the WordPress Dashboard
• Step 2: Click Pages > Add New
• Step 3: Click Edit with Elementor
• Step 4: Start editing the page content. You can add a heading, image, etc.
• Step 5: Drag the elements you want to add to your page. From the left column pick elements like headings, images, etc., and drag them to the page. After which, you can start to edit its content. When done, click the Publish button.
• Step 6: You can preview your design by going to the left panel and clicking the Eye icon. You can choose to do this step first before publishing the page.

Working On Templates:

Elementor includes pre-designed templates for pages and blocks that can help you create designs for your WordPress site. The Page is a complete content layout and Blocks are sections with pre-built widgets.

You can search for a specific template if you need one. They are arranged in page type, template name, etc. It’s done by inserting the template into the page with a single click.

• Step 1: In the Elementor Editor, go to Add Widget Here > click the white folder
• Step 2: A template library will appear and you can click on the image to see the template.
• Step 3: If you have decided what template you want, click the green Insert button.
• Step 4: Register or sign in on Elementor to connect to the template library
• Step 5: Return to the page you were editing and click Insert. However, if you have already logged in to your Elementor account, there is no need to follow step 4.
• Step 6: Now you’re ready to customize your templates.

Different templates in Elementor:

• Page
• Section
• Popup
• Header
• Single product
• Archive
• Footer
• Product archive

Advanced Features Of Elementor:

If you subscribe to the paid version of Elementor, you get advanced features for your WordPress website. It means you can create more page designs, pop-ups, etc., for your site.

Create Pop-Up Forms

Pop-up forms are essential for getting leads through email addresses. A good-looking pop-up with an enticing design can convince your target audiences to sign-up for whatever you offer.

Elementor will help you create pop-up forms that will help you in capturing leads. It’s not as complicated as you may think.

• Step 1: Go to Dashboard in WordPress, find Templates > Popups > Add New
• Step 2: Name your template > click Create Template
• Step 3: You can create your design or choose among the ready-made templates
• Step 4: After creating your design, click Publish > Save > Close
• Step 5: Open a new Elementor page
• Step 6: Drag a button widget
• Step 7: Go to layout > Link > Dynamic > Actions > Popups
• Step 8: Popup > Open Popup > select the popup you’ve created
• Step 9: Go to live page
• Step 10: Check and see if the popup you have created will appear.

How To Create A Product Page For Woocommerce Via Elementor Website:

If you have an online shop or eCommerce, you can use Elementor to help you create enticing product pages. WooCommerce can be integrated with WordPress, and you can edit the product pages with Elementor.

First, Install and activate WooCommerce in your WordPress account. After connecting your WooCommerce, it’s time to edit your product pages.

• Step 1: Create a single product page with a template. This is done by going to the Dashboard > Elementor > My Templates. Then, click the Add New button. Choose the Single Product template > click Template.
• Step 2: The Elementor template library will show up with dozens of pre-designed templates. Choose among the ones available or start from scratch. You can easily customize the templates with the designs you want.
• Step 3: Design the product page that you want. You can add or remove widgets or elements on it.
• Step 4: After making your product page, click on the eye icon (lower left panel) to have a preview of the page. You can make more edits if desired or add products on display by going to the setting. When you’re done, click the green Publish button.

Outsourcing Your Templates:

If you don’t want the templates available, you can always use one from a third-party source. You can export templates into external files in JSON format.

Import Templates from JSON Files

There are two ways to achieve this process:

Using Template Library:

• Open the template folder> click the arrow icon > select the file button to choose the JSON file to import.
• The imported templates are saved in the My Template tab. If it doesn’t appear, reload the icon.
• Click the Insert button to add the template to your design.

Using Template Manager:

• Go to dashboard > Templates > Saved Templates
• Click the Import Templates > Choose File button and select the JSON files
• Click Import Now

Conclusion:

Elementor is a basic plugin software you can use to help you simplify the process of building a webpage. However, it’s not only for creating appealing pages but to aid in making pop-up pages for better lead-generation marketing, product pages, etc. It comes with different templates and widget designs that will impress whoever lands on your website.

About the Author:

Vanessa Venugopal is a passionate content writer. With four years of experience, she mastered the art of writing in various styles and topics. She is currently writing for Softvire Australia – the leading software eCommerce company in Australia and Softvire New Zealand.

Find Me On Facebook | LinkedIn