How To Use Elementor In WordPress — Basic Steps For DIY Fans

Elementor is a popular WordPress plugin — a page builder that helps you set up your entire website through an intuitive drag-and-drop editor. Still, because of so many features it includes, the learning curve isn’t as easy as one may imagine — for that reason, we’ve prepared a no-nonsense guide to help you navigate Elementor’s many complexities. 

Step 1: Install Elementor

First, let’s download the completely free Elementor plugin on your WordPress site — assuming you have the WordPress installation long behind you. 

To do that, log in to your website and select the “Plugins” tab on the left sidebar of your WordPress dashboard. On the new page, select the “Add new plugin” button right at the top and enter “Elementor” in the search bar that will appear on the right side. Then, simply select the “Install now” button that’s right besides the plugin you want (in our case, that’s “Elementor Website Builder — More than Just a Page Builder”).

Once the installation is complete, the “Install now” button will turn into “Activate” — select it to make Elementor an integral part of your website.

How To Install Elementor Pro

If you have some money to splurge, you might consider going for the Elementor Pro instead of the free version.

Main benefits to the paid version, which comes in four different plans, include: custom CSS and fonts, more than 300 templates and blocks, popup builders and extra widgets (such as call to action widget or a social proof widget), dynamic content, more advanced theme builder that includes headers, footers, 404 pages, and more.

To get started with Elementor Pro, you need to buy it on the Elementor website and save it as a .ZIP file. Then, by going to your WordPress dashboard and selecting the “Add new plugin” button, you’ll find the “Upload Plugin” button in the very same place. This will prompt a new field to appear, where you can browse your files and select the Elementor Pro .ZIP file to be uploaded.

Step 2: Create A New Post

With Elementor set in place, we can proceed to create our brand new page. To do that, select the “Posts” tab from the left sidebar and then select the “Add new post” button right at the top of the new page.

You’ll be taken to the WordPress editor. Right at the top, you should see the “Edit with Elementor” button — select it to start your Elementor journey!

Step 3: Add Containers

Containers help you divide your space into sections and create a satisfactory page layout. This way, you can spice things up by including videos or images around the paragraphs.

To add a container, select the plus icon at the center of the page. Alternatively, you can select the “Container” from the Elementor sidebar under the “Layout” section and drag-and-drop it to the page.

Next, you’ll be asked to choose between two different layouts: flexbox or grid.

• Flexbox is used for layouts that are in a single row or column, where items adjust their size and position automatically to fit the space and respond to interface changes.

• Grid is used for layouts that include both rows and columns, and you want to fix the items in one place so that they won’t move without your say so.

Then, you’ll have to pick a structure, which defines the exact number and sizes of rows and columns.

Having made your choice, you’ll see the structure on your page, ready to be filled with widgets!

Step 4: Add Widgets

All your available widgets are listed on the left sidebar under different sections, such as “Basic”, “Pro” (if you opted for the paid version), “General”, and more. You can find there: buttons, image carousels, headings, videos, divider, icons, and plain text editors, among others.

To use them, simply drag-and-drop the chosen widget onto your page.

When you add a widget, the sidebar will show extra options pertaining to the specific widget. For example, when you add a text block, you’ll find the space to type in your paragraph, set columns, adjust sizes, fonts, colors, and positions. Similarly, when you pick an image, you’ll be able to adjust alignment, set opacity, borders, margins & paddings, and more.

Just be careful — Elementor is a little too intuitive. This means that it’s incredibly easy to move one widget under the other, which may break the whole structure, forcing you to start over.

Once you’re done setting your widgets on the chosen structure, you can drag-and-drop new ones to create more sections. 

Step 5: Preview & Test The Page

Once your WordPress website is ready, you might feel like it’s time to hit the “Publish” button — but not just yet! First, you need to step into your clients’ shoes and see if everything works as it should. 

To preview your work, select the eye icon at the bottom of the sidebar, right next to the “Publish” button, which is highlighted for your convenience.

Here’s what you should be watching out for on your previewed page:

• Do links and buttons work correctly? If you created a wonderful and eye-catchy Call To Action (CTA), but the button is broken, you might lose many good leads.

• Do any forms or pop-ups work correctly? In the same vein, if you have any forms, pop-ups, or any other interactive elements, test them out to see if they work as designed.

• Do all images load correctly? If they take their sweet time, they’re probably too large. Make sure to optimize them all for better user experience. You can learn more about image optimization in this article.

• Is your site SEO optimized? While you might have focused on adjusting the height and width of all your sections, you might have forgotten to include meta title or meta description of your website. Optimize your page properly to make sure it ranks high in the Google Search results!

• Did any typos sneak in? Use Grammarly or LanguageTool to make sure all your sentences reflect the level of professionalism you want to uphold.

Step 6: Hit Publish!

When you’re satisfied with the results, you can at last hit the “Publish” button at the bottom of your sidebar. But it doesn’t mean your work here is done!

Check the page speed of your website to see if there’s anything unnecessarily slowing it down or if there are any other glaring issues. If your entire site loads too slowly, there’s a chance people will return to Google Search results and find a better-performing site.

Additionally, make sure to make backups of your website. You can use one of the popular WordPress plugins such as UpdraftPlus, BackupBuddy, or VaultPress. This way, if anything happens to your website or specific pages, you can always restore them to the previous version. Because of that, it’s best to set up daily automatic backups. 

Step 7: Reiterate

You might have created the most perfect and aesthetically pleasing site with the most compelling and persuasive copy, but trends and best practices change all the time. Stay on your toes and keep adjusting your website, making sure all information is up-to-date and no links are broken. 

Your competition just waits for you to slip, after all!

Tips & Tricks

Save And Reuse Templates

If you know that your newly created section will be reused in other places, you can save it as a template. To do that, hover over the chosen section until a set of three icons will appear at the top: a plus sign, six dots, and a cross. Select the six dots icon by right-clicking on it and select “Save as template” from the drop down menu.

And when you want to save the whole page as a template — for example, you’re planning to build a series of similar landing pages — find the “Publish” button at the bottom of the sidebar and select the arrow pointing down icon. Then, you should see a drop-down menu with the option to save the page as a template. 

Whenever you want to reuse it, access the template library by finding the “Drag widget here” field and selecting the folder icon. 

That’s how you can save a lot of time on building your website. Keep that in mind when building your sections — the more universal you make them, the better chance of finding them useful on other parts of your WordPress site.

Use Global Settings

To make your life even more easier, you can ensure consistency across all your content by using the global settings. But before we can do just that, we need to handle one thing: disabling Elementor’s default settings. 

To do that, go to your WordPress dashboard and select “Elementor” from the left sidebar. Then, select “Settings” from the drop-down menu. On the new page, untick the “Disable Default Colors” and “Disable Default Fonts” boxes that can be found in the “General” tab. 

Once we take care of that, you can go back to the Elementor editor. There, select the hamburger menu located in the top left corner of the sidebar and then select the “Site settings” tab.

With the help of the new sidebar, you’ll be able to set up: 

• Global colors, which will stand for your color palette. Divided into system and custom colors, the former will be applied on each and every web page, while the latter is to be used individually and manually. The purpose of the custom colors is to have your brand palette within easy access when working on the pages.

• Global fonts, where you can pick your fonts and the size, weight, and line height for all the headings and the body text. Similarly to colors, here you also have fonts are divided into system (primary, secondary, text, accent) and custom ones.

• Buttons, where you can play around with text and box shadows, border types, colors & paddings, width and radius, and more.

• Images, to decide if all your images should have a specific border, shadow, or be semi-transparent for consistency.

• Form fields, in case you use them, make sure they all look the same by setting up their colors, typography, borders, padding, and more.

Optimize For Mobile

According to the study made by Statcounter, 50.48% of web traffic comes from mobile devices, meaning there’s a pretty high chance many of your visitors will look up your website on their phones. But if it’s not optimized properly — the images are distorted, the text badly aligned, and you have to scroll horizontally to see everything — the users will quickly take their leave. 

And while WordPress will try its best to make your pages mobile-friendly, you’ll have to do some manual adjustments for the best possible user experience.

To do that, select the devices icon (called Responsive Mode) at the bottom of the sidebar and then switch between different views at the freshly arrived top panel: you can choose between desktop, laptop, mobile, and tablet. The live preview will show you exactly how your site is going to look like on selected devices, and you can make any changes the same way you did outside of the Responsive Mode. 

How To Use Elementor In WordPress: Final Words

With the help of the Elementor page builder, you can build simple websites for your personal and business needs. If you’re tech-savvy, this can be a nice challenge — if not, you might stumble into some challenges or issues that can be time-consuming to solve. Still, the internet is vast in resources, from down to earth Reddit posts to complex guides and YouTube tutorials.

If you’d like to delve into more advanced features, Elementor Pro has the option to include custom CSS, which can be a game-changer for you in terms of possibilities. This also makes the website creation process more difficult, so if you’re pressed for time, looking up WordPress professionals to do the work for you might be a good idea.

WP Kraken is a company specializing in WordPress projects, from developing custom plugins and maintaining the site to creating complex websites worthy of creative agencies. Get in touch to learn more about pricing and available options!