Learn How to Use Elementor Kit for Your WordPress Website

More than five million WordPress websites use the visual, drag-and-drop Elementor website builder to create content and designs.

This introduction will go over everything you need to know about Elementor and how it helps you construct better WordPress sites in order to help you understand more about it and why it’s the most popular WordPress website builder and page builder plugin at WordPress.org.

What is Elementor for WordPress?

The best drag-and-drop WordPress editor, Elementor, is free and enables you to make stunning WordPress websites as quickly and easily as possible. Simple blog articles can be written using the normal WordPress editor, but there aren’t many design options available, and you can’t see how your design will actually appear until you click the preview button.

No prior knowledge of CSS or HTML is necessary with Elementor, which offers complete drag-and-drop design versatility with a live, visual builder. You may easily make any necessary changes to your design because you see it exactly as your visitors will when you’re constructing it.

Numerous pre-built content widgets for everything from buttons to forms, sliders, pricing tables, and more are available in Elementor along with limitless design options. You can use Elementor to create your complete WordPress theme, including your header, footer, and everything in between, in addition to designing specific posts and pages.

You’ll discover more about the various features Elementor offers as you continue reading this article.

How Does Elementor Page Builder Work?

With Elementor, a visual WordPress website builder, you can construct complicated layouts graphically and design your website live without having to switch between the editor and preview mode. And this happens by replacing the default WordPress editor with a live frontend editor.

With Elementor, you can make stunning and useful designs without using code or CSS or asking developers for assistance. And since you have a responsive design, it’s automatically going to look good on all mobile devices, desktops, and tablets. And thanks to Elementor’s intuitive and user-friendly UI, you can start with the whole process right away. To save time, insert one of the many well-created templates. You can then quickly adjust it using the provided controls.

The Elementor interface was created using the most up-to-date technologies to provide a quick, lag-free design experience. Because of this, you can design faster and won’t have lag or problems. To assist you in building a site that loads quickly, we are also constantly enhancing front-end performance. One example is the release of a variety of new performance enhancements in Elementor 3.0.

How Much Does Elementor Cost?

The core Elementor plugin is accessible on WordPress.org for free. By purchasing Elementor Pro, which starts at just $49 for usage on a single site, you can expand the free core plugin’s capabilities and features.

Let’s discuss the key distinctions between Elementor free and Pro and discuss which version is best for you.

• Elementor Free Version

You can already design your content using the visual, drag-and-drop editor, a large selection of widgets, and a variety of style options with simply the free edition of Elementor. Simply open the Elementor editor while editing a post or page to start using it to design individual blog posts and pages.

Generally speaking, if all you want to do is create some straightforward landing pages or add some flair to your blog articles, the free edition of Elementor can be plenty for you. However, you’ll probably need the potent additional tools, design choices, and template in Elementor Pro if you want to utilize it to construct your full website.

• Elementor Pro

If you have a WooCommerce store, Elementor WooCommerce Builder gives you the same flexibility for your shop and single product layouts. In addition to using Elementor Popup Builder to build your theme, you can use it to construct any type of popup that you can target and activate based on your needs.

With the help of Elementor Pro, you can use the tool to design every area of your website and also have access to the amazing and strong new capabilities that can be used in all of your designs. Here are some major additions that you receive with Elementor Pro:

• A form builder with visuals.
• You get access to a lot of new widgets such as portfolios, sliders, pricing tables, post lists, and more.
• New design features like configurable placement and scrolls effect.
• You also get support for various plugins such as Toolset, dynamic content pods, advanced custom fields, and more.

And above all else, you get access to a large number of brand-new pre-built templates that helps you save a lot of time.

How to Install Elementor?

You may download the free version of Elementor from WordPress.org and install it right from your WordPress dashboard. Start by searching for “Elementor” in the plugins menu’s Add New section. Once the plugin installation procedure is complete, click the button to activate it.

When you open the editor for a post or page after activating Elementor, you should see a new Edit with Elementor button; we’ll explain how to utilize it in the following section.

You must first get a copy of Elementor Pro if you wish to add it in order to access even more potent design tools. After making your purchase, click Download Zip in your Elementor Dashboard to access a copy of Elementor Pro for download.

Then, go to Plugins- Add New- Upload Plugin, and upload the Zip file that you obtained from the Elementor dashboard. As soon as the upload is finished, make sure to turn on Elementor Pro.

Go to Elementor License in your WordPress dashboard to activate your Elementor Pro license on your site to complete the process and activate all of the premium features.

WordPress Elementor Use Guide

Let’s discuss how to utilize Elementor to develop your initial design and build your website now that you have installed it. Click the Edit with Elementor button to open the Elementor editor after creating a new post or page.

Now, in addition to the Elementor sidebar on the left, you ought to see a live preview of your design on the right. By selecting the library icon, a ready-made template can be added to save time.

After adding the template, expand the page settings box by clicking the gear symbol in the bottom-right corner and choosing Elementor Full Width from the Page Layout drop-down. This will make the canvas for your page full-width.

You are now prepared to begin editing. You need first to comprehend the fundamental organization of Elementor. Three components make up an Elementor design:

• The page is divided into horizontal rows by sections.
• Sections include columns inside of them that allow you to divide the section into vertical columns.
• The tools you use to actually add content are called widgets. Your widgets can be placed inside a column (and then the column is inside the section).

Simply drag a new widget from the sidebar onto your template to add it. Simply right-click on an existing widget to eliminate it by choosing Delete.

Selecting a widget, column, or section will open its options in the sidebar, allowing you to adjust its settings and appearance. You may view the video below or read our complete tutorial on how to build a WordPress site using Elementor for a more in-depth look at everything we’ve covered here.

How To Use Advanced Features in Elementor

Let’s discuss some of the more sophisticated features that you can utilize to create even better websites with Elementor Pro now that you are familiar with how the fundamentals of the platform function.

• Form Widget

You can avoid using a separate form plugin by using Elementor’s Form widget, which is a versatile form builder. It can be used for a variety of forms, including contact forms, lead generation forms that connect to your preferred CRM or email marketing platform, and much more.

From your WordPress dashboard, you can view form submissions and, if necessary, configure personalized email notifications and confirmation messages. Simply include the Form widget in any Elementor design to create your first form.

• Integrations

By integrating with various third-party technologies you’re already using, Elementor’s built-in integrations enable you to improve your website.

One important application of these integrations—the Form widget—was already highlighted above. You can quickly link the Form widget to services like Mailchimp and HubSpot because of the built-in connections. Additionally, you receive a Zapier integration so that you may link up with the countless apps on Zapier. Elementor interfaces with a ton of other plugins, social networks, and services in addition to those marketing tools.

To set up integrations, go to Elementor → Settings → Integrations

• Theme Builder

You may use Elementor Theme Builder to create your entire website using the visual Elementor editor. You can generate template files specifically for the following areas of your website:

• Header & Footer
• Single (e.g., the template that all or some of your blog articles utilize)
• Archive (e.g., the page that lists your blog postings)

Essentially, since Elementor gives you complete control over your design, you no longer need a theme. We made the free Hello theme for this reason. It serves as a simple foundation on which you may build your website with Elementor Theme Builder.

Elementor also enables you to insert dynamic content from custom fields that you added with plugins like Advanced Custom Fields for more complex custom WordPress sites. To get started with your first Theme Builder template, head to Templates → Theme Builder.

• Global Settings

With the help of Elementor’s Global settings feature you can create and manage the entire design system of your site. It allows you to ensure that there’s consistency across the entire site which also ends up speeding the entire workflow.

In simple terms, the global setting feature gives you access to the area of your site where you can make decisions about defining the different aspects such as buttons, form fields, colors, typography, image settings, and more.

So, whenever there’s a new design created, it is going to inherit the setting from your global settings on its own. Similarly, if there are any changes made in the global settings, it’s going to automatically get reflected across your entire site.

Moreover, these changes are never locked in, which gives you the freedom to make changes on the go and fully customize a design on a page-by-page basis. What global settings does is that gives you the surety that your designs will be consistent across your site and you’ll not have to manually make the changes every time.

To access the global setting, you can click on the hamburger menu in the top-left corner of the Elementor sidebar and select Site Settings.

• Popup Builder

Popups can be very helpful for navigation, user experience, marketing, and other purposes. Thanks to Elementor Popup Builder, you can use Elementor Pro instead of a separate popup plugin.

You can create the following things with Elementor\’s visual, drag-and-drop editor:

• Pop-up Lightboxes
• Bars of Notification
• Complete-screen fills
• Slide-ins

You will have complete control over the popup’s canvas and placement, and you may incorporate any Elementor Widget into your creations. Want to design a pop-up email capture form? Just incorporate the form widget and link it to your email advertising platform. Want to design a pop-up login form? Add the login widget only. Want to make a statement? Simply include some text and perhaps a button.

Once the design is complete, you can utilize targeting rules to decide where and who should see your popup. You will also continue to receive sophisticated trigger rules, such as exit intent. Simply navigate to Templates Popups in your WordPress dashboard to begin designing your first popup. Popups can be created from scratch or from a variety of pre-made templates.

Learn How to Use Elementor Template Kits

In this article, you’ll discover how to use a template kit as the foundation for all the crucial elements of your website before connecting them together to produce a unified website.

There will be several important sections on your website, such as-

• Homepage
• About Us
• Services
• Clients Page
• News Blogs Page
• Contact Us Page

Furthermore, it will have themed template components for dynamic content. For instance, the single post and blog post archive templates will immediately match the standalone sites. You can modify your header, footer, and 404 pages as well.

1. The Hello Elementor Theme should be installed and activated.

You don’t need to seek any design elements in your active WordPress theme because you’ll be designing the full website utilizing Elementor Theme Builder and your template kit.

The Hello Elementor theme offers simply the lightest, most performant base, which is what you really need. Start by searching for “Hello Elementor” in Appearance > Themes > Add New. Install and then turn on the theme.

2. Set Up Your Core Static Pages

To construct the essential standalone pages for your site, go to Pages Add New next. Create a page called “Home” first, then start Elementor by clicking the Edit with Elementor button.

Open the Page Settings and adjust the Page Layout so that it is equal to the full width of Elementor. Then, go to the Elementor template library and look under Pages for “Digital Agency”.

A list of page templates from the template kit ought to appear. From the list of templates, insert the home Page template. The homepage of the digital agency should now be fully visible. Currently, the heading appears a little odd, but don’t worry, we’ll correct that right away.

Next, you can add a new page to be used as your “About” page using the Elementor Finder. Change the Page Layout to Elementor Full Width as before. Then, insert the About template from the digital agency template kit by opening the template library.

Just use the same procedure to generate all of your other important standalone pages, such as:

• Services
• Clients
• Contact Us

Concerning the News page don’t worry just yet. The News page is an archive rather than a static page like the others. Because of this, you’ll design it using a different technique (which we’ll go over in more detail later in this article).

You must instruct your WordPress installation to use a static homepage in order to complete setting up your static pages. Doing this…

• Go to Reading in Settings.
• Under the Your homepage shows setting, select A static page.
• Pick the kit’s homepage template from the list of pages. 

Create Theme Template Parts

You are now prepared to use Elementor Theme Builder to build the remaining components of your website. Elementor Theme Builder is distinctive in that it allows you to do more than just create static pages (like you did above).

You may also create the theme for your website using Elementor Theme Builder.

• Header
• Footer
• Archive Page
• Single Page
• 404 Page

You can import pre-made templates for each of these components that already match the static pages you produced in the previous stage due to the Elementor template kit.

Go to Templates Theme Builder to access Elementor Theme Builder. For access to Theme Builder, you must have Elementor Pro installed. Designing your theme pieces is now necessary.

• Header

Start by clicking Add New Header under the Header tab in the Theme Builder interface. Give it a name on the following screen, and then click Create Template. In the Elementor library, you\’ll then see a selection of ready-made designs. Search for “Digital Agency” like you would with static sites, and then insert the header template from the package for digital agencies.

You should now see a visual representation of your header and a blank area for your navigation menu. You haven’t yet established a menu, thus there is nothing on the navigation menu at the moment. To design your menu.

• In your WordPress dashboard, select Appearance Menus.
• Give the name of your menu
• Click to Make a menu.

The pages you created in Step #2 can be added to your navigation menu after you’ve constructed a menu. Save your menu after you’ve finished adding menu items, then return to the Elementor interface’s header template.

Once published, use the display conditions to have your header template shown across your entire site. If you desired, you could even make distinct headers for various sorts of content by utilizing the display conditions.

Now, all you need to do is hit Save and Close.

• Footer

It’s now time to design the footer for your website:

• Return to the Theme Builder screen.
• Select the “Footer” tab.
• Click the Add New Footer button.
• Give your footer a name in the box and select Create Template.

As with your header, you should now see a choice of footer template options. Insert the footer template from the digital agency template kit after searching for “Digital Agency”. You should see a live preview of your footer after inserting the footer template (you can also see how your site is now using your custom header).

After that, publish your footer template and utilize the display conditions to have it appear on every page of your website.

• Archive News Page

Your site ‘s news page is an “archive” page, as opposed to the static pages you made in Step #2. Basically, this implies that it dynamically displays the freshest material from your site (blog articles in this example) (and blog posts in this case).

A user will be directed to a page that only contains the content of the particular entry they clicked on on the news page. The single page is what it is called. All of your material will have the same fundamental style thanks to your single design; the only thing that changes is the content itself (like the post title, body, featured image, etc.).

Instead of using WordPress’ built-in Page or Post sections, you must utilize Elementor Theme Builder to generate archive and single templates.

• Launch the Theme Builder window
• Select the Archive tab.
• To add a new archive, click.
• Name it, then click & make a template

You’ll see a list of archive templates, similar to the ones for your header and footer. Insert the “Digital Agency” template by searching for it.

The default “Hello World!” post from WordPress will be the sole content on your news page at this point, but you should now see the basic layout.

Publish your archive page and set it to appear on All Archives are the only things you need to do right now. The next step is to create new blog posts in WordPress’ standard Posts section. Each article should be placed in the “Beyond News” category.

Now, all of those new entries ought to appear automatically when you visit your archive page.

• News Single Page

Your news archive page looks fantastic right now. However, the style of a particular blog post is different from the rest of your website when you click on it.

To correct this, use Elementor Theme Builder to build a “single” template.

• Launch the Theme Builder window
• Select the Single tab.
• Add New Single button

The pop-up for the new template:

• Give it a name and choose Post from the list of Post Types.
• Indicating your intention to use this template for your blog entries using this tells Elementor (as opposed to Pages or another custom post type that you might be using)

You\’ll once more see the Elementor template collection. Insert the single post template that you found in the digital agency template kit. You can customize the appearance of your page if you\’d like by using one of the many dynamic post data widgets.

You can edit the information by going to the Post Info Widget and controlling the metadata appearance such as:

• Author
• Publish Date
• Comments

Click Publish once you are satisfied with your single post template. Then, you can make use of the display choices to limit the use of this particular template to posts that fall under the “Beyond News” category:

• Select In Category
• Select the Beyond news category

Hit Save & Close after that. All of your blog entries should now have a layout that blends in with the rest of your website.

Go to Appearance Menus and add your news archive page to your navigation menu to complete the process. You can accomplish this by including a link in the Categories section to the Beyond News category.

• 404 Page

The 404 page for your website must be made last. Visitors to your website who click on a broken link or attempt to access a page that doesn’t exist will encounter a 404 page.

Use the Theme Builder to add another single template to create your 404 page. Use the Select Post Type drop-down only now to choose 404 Page. Insert the 404-page template from the template package for digital agencies. To finalize your website, publish your template after that.

Conclusion

The fantastic features you see above may all be applied to your WooCommerce store if you’re developing an e-commerce site using Elementor WooCommerce Builder. Your single product page templates and store archive pages can be created using Elementor’s drag-and-drop interface (the pages that list all of your products or the products in a certain category). You’ll get specialized WooCommerce widgets that you may use to insert WooCommerce content wherever on your site in addition to customizing the themes for your store.