fbpx

How to Make the Switch to Elementor

Over the past year or two the Elementor page builder has exploded with popularity, quickly becoming the most used page builder in WordPress. With WordPress powering nearly 40% of the websites online today, more and …

switch to elementor

Kyle Van Deusen

Over the past year or two the Elementor page builder has exploded with popularity, quickly becoming the most used page builder in WordPress.

With WordPress powering nearly 40% of the websites online today, more and more websites are making the switch from old, outdated page builders to Elementor in order to take advantage of its powerful tools and unmatched capability.

Sadly there is no way to automatically convert a site to Elementor— it has to be done manually.

If you’re up to the challenge— it’s time to roll up your sleeves and get to work! This article is going to take you step-by-step on how to convert your existing website into an Elementor powered website.

Don’t worry, if you get stuck you can always reach out. Through my completely done-for-you Elementor website conversion service I’ve rebuilt countless websites, including ones built with WPBakery, Divi, BeaverBuilder, and even Wix, into powerful and easy to use Elementor websites.

Through all of those creations I’ve created a workflow that ensures you save time and get the job done right.

This is aimed at people who are already familiar with the WordPress ecosystem, and who have some experience with Elementor.

Ready? Let’s go!

Make a Clone of Your Existing Website

If you already have a website on WordPress, then the safest way to get started is to make a clone of your site and do the conversion on what’s called a “staging site”.

This keeps your live website from being disturbed while you rebuild with Elementor.

By using this method you’ll experience little or no downtime for your website when you make the switch to Elementor.

How to Make a Clone of Your Website

Hosting companies, like Cloudways, allow you to easily make a clone of a website with one click. If you have this capability, go ahead and clone the website you want to convert to Elementor and skip to the next section; “Decide on a Theme to Pair with Elementor”.

If your hosting company does not have that capability— that’s okay. Like everything in WordPress, there are plugins that can help you achieve this.

From the backend of your existing website, go to ‘Plugins’ > ‘Add New’ and do a search for All-in-One WP Migration. This plugin will allow you to download a copy of your website that you can upload to a fresh installation of WordPress.

Once you’ve installed and activated the All-in-One WP Migration plugin follow the instructions to download a copy of your website.

YouTube video

Now that you’ve downloaded a copy of your website, you need to create a fresh installation of WordPress on your server.

Follow the same steps to install the All-in-One WP Migration plugin. Then follow the instructions to import the copy of your website you just downloaded onto your hard drive.

YouTube video

Now you should have an exact clone of your website that you can use to do your conversion.

From this point forward we will refer to the cloned version of your website as the “development site”, as that will be what you are using to develop your site with Elementor.

Decide on a Theme to Pair With Elementor

There are thousands upon thousands of WordPress themes to choose from— which can be both confusing and overwhelming.

However, if you want to get the most out of Elementor there are two themes that stand head and shoulders above the rest and will be more than enough to get the job done.

Hello Theme

Hello Theme by Elementor

The Hello theme was developed by Elementor themselves as a stripped down theme that relies heavily on Elementor to do all the heavy lifting.

It’s completely free and can be downloaded from the WordPress repository.

For most website the Hello theme will work fine— but it may not work great for all 3rd party applications.

Many plugins for WordPress rely heavily on the WordPress Customizer for styling elements the plugin adds to your website.

Since the Hello theme has a stripped down Customizer, you may end up needing to do a lot of CSS in order to style elements from 3rd party plugins.

GeneratePress

GeneratePress is perfectly paired with Elementor

If you need all the benefits that come with the Customizer, then look no further than GeneratePress.

The GeneratePress theme, which requires a Pro version to access all its features, is one of the fastest and lightweight themes on the market.

Not only does it pair perfectly with Elementor, but it will also give you all the Customizer controls to style elements added by 3rd party plugins.

I typically opt for GeneratePress on most websites because it’s as fast as the Hello theme but gives me the extra controls I almost always end up using.

The free version of GeneratePress (found in the WordPress repository) works fine, but for just $44, the Pro add-on is worth its weight in gold and allows you to use the theme on up to 500 websites.

Theme Installation

Once you’ve made a decision on which theme you want to use, you’ll need to install and activate your theme.

At this point you’ll notice your website will likely look drastically different— if not completely broken.

Changing themes can have a dramatic effect on the look and functionality of your website. But don’t worry— that’s why we’re working with a clone of the live site, not on the live site itself.

If you’ve opted to use the Pro version of GeneratePress, you’ll need to install the Pro add-on, which comes in the form of a plugin.

After you purchase GeneratePress Pro, go to the back end of your development site and hover over ‘Plugins’, then click “Add New”. Install and activate the plugin file you received from GeneratePress.

You can activate all the individual add-ons that come with the Pro version of GeneratePress by hovering over ‘Appearance’ in the back end of your development site and clicking ‘GeneratePress’.

Take time to visit the GeneratePress documentation to familiarize yourself with all the options.

Install Elementor & Elementor Pro

Now it’s time to set up Elementor and Elementor Pro. You’ll likely need both the free and pro version to accomplish everything you need to do to recreate your website with Elementor.

Installing the Free Elementor Page Builder

To install Elementor, from the backend of your development site go to ‘Plugins’ > ‘Add New’ and do a search for “Elementor”.

Elementor Free Plugin

Install and activate the plugin.

Purchasing and Installing Elementor Pro

If you don’t already have a copy of Elementor, visit the Elementor website and purchase a license to Elementor Pro.

You have the choice to buy a license for 1 site, 3 sites, or 1,000 sites. If you plan on using Elementor for multiple websites you can get quite a discount on the multiple site plans.

Once you’ve made your purchase, upload and activate the Elementor Pro plugin on your development site.

Setup All Your Theme Styles

Even though your site may look in disarray now, soon you’ll start to recognize it again as you start to set the Theme Styles in Elementor.

Elementor gives you the ability to set up global styling for fonts, colors, buttons, forms, and other items on your website.

This is the best place to start, as these settings will apply to every page across your website— which is a lot faster than setting each element individually on a one-by-one basis.

To access Elementor’s theme styles you’ll have to open the Elementor editor on any page. Since you aren’t using Elementor on any pages yet, it may be easiest (and less disruptive) to just create a new “dummy” page so you can access the settings.

From the backend of your development website hover over ‘Pages’, then click ‘Add New’. Name your page something you’ll recognize later as trash (like “Dummy Page” or “Test”) and click the “Edit with Elementor” button.

Edit with Elementor

Once the Elementor interface loads, click the hamburger menu in the top left corner and click on ‘Site Settings’. This will open up all the theme style settings for Elementor.

Design System

Under the design system section there are two options: Global Colors and Global Fonts.

Global Colors

The Global Colors option will allow you to create a customized color palette for your website. You can assign your primary, secondary, text, & accent colors by default.

Match these colors the color on your existing website by giving them the same hex color value.

If you need more than the 4 default colors Elementor supplies, you can click the “Add Color” button to add additional colors to your color palette.

It’s worth investing the time now to scour your website for all the colors you use throughout the site so you’ll have them handy when you start recreating all your pages, posts, and templates.

Global Fonts

Global Fonts gives you the ability to set Primary, Secondary, Text, and Accent colors. In most cases you don’t need to set anything except the Primary global font. More granular controls are easier set in the typography settings— which we’re headed to next.

Theme Style

The Theme Style section is where you’ll spend most of your time inside the Site Settings panel. Here you’ll be able to set all the styling for your typography, buttons, images, and forms.

Typography

Once you’re in the typography settings panel you’ll have control over your body copy typography and colors, paragraph spacing, link typography and colors, and all your headings (H₁ through H₆).

Carefully go through your existing site and match the fonts and colors in each of the typography settings within the Elementor panel.

Buttons, Forms, & Other Styles

Under Theme Styles you’ll also have the ability to control the appearance of your buttons, images, and form fields. Go through each of these, one-by-one making sure to match the styles to your existing website.

Recreate Your Header & Footer

Whew! You’ve already gotten a lot accomplished! A pat on the back is in order before we dive into the real work of getting your website converted to Elementor.

At this point your development site should start to slightly resemble your live website— but do not be alarmed if there are still a lot of issues… We’re going to get to that.

Now that you’ve installed your theme and setup all your theme styling, the first thing you want to create with Elementor is your Header and Footer.

Navigate to the backend dashboard of your website and hover over ‘Templates’ in the left-hand menu (it will be located just below ‘Elementor’).

From the fly out menu, select “Theme Builder”, and click the “Add New” button at the top of the page.

Elementor will prompt you to ask what you want to build.

From the dropdown menu, select Header and name your template “Header” (makes sense, right?).

Create a header with Elementor

Click the “Create Template” button to continue into the Elementor builder.

At this point you’ll want to recreate the header on your website making sure to check responsive views for Desktop, Tablet, and Mobile.

When you’re ready to publish, click the publish button and assign your header appropriately. In most cases you’ll just select “Entire Site” unless you have multiple headers that need to be assigned to different parts of your website.

After you finish with your header, you can repeat the same steps to go to the Theme Builder and build out your footer (selecting “Footer” in the New Template menu instead of header).

Once both your header and footer have been published and correctly assigned to the appropriate pages you can check the front end of the website to make sure they are functioning correctly.

Also, don’t forget to link your logo back to your homepage— and easy thing to overlook that most themes take care of for you by default.

Recreate All Your Stand-Alone Pages

Okay— now it’s time to get ready for the marathon! It’s time to create all your stand-alone pages.

When it comes to pages, there are two options that you’ll want to consider; Page templates and one-off pages.

If you have multiple pages that use a consent layout, then you may consider building out a Page Template for those pages and applying that template to each of the appropriate pages.

This will save time as you only have to create one template in Elementor and then apply it to multiple pages.

Keep in mind, the unique content in those pages will all have to be done in the classic or Gutenberg editor in the back end of WordPress.

For completely unique, bespoke, or one-off pages you’ll want to create these individually with Elementor.

Either way you work, you’ll want to delete any of the content on your page that was created with your old page builder. If you’re just using the Classic or Gutenberg editor, you can leave that content in place.

Some page builders, like WPBakery, will leave behind nasty shortcodes that are a pain to clean up… If it’s easier, you can delete a page completely and then create it new from scratch. If you end up deleting and starting fresh, I recommend doing this one page at a time so you can pay close attention to the page slug / URL to make sure you name the new page the same as the old so you don’t break any links.

Page Templates

Creating a Page Template is similar to how you created your Header and Footer. From the backend of WordPress, hover over ‘Templates’ and click ‘Theme Builder’. After you click the “Add New” button, select “Single Page” from the dropdown list (where you selected Header or Footer previously).

Give your template a name, and create the layout using Elementor making sure to use the “Post Content” widget wherever you want your page content to show up (forget that there is no continuity between the use of “page” and “post” here— it doesn’t matter).

After you publish your page template, you’ll have the ability to assign the template to whichever pages are appropriate.

You may end up creating several page templates depending on your design.

Page templates are a great way to save time from having to create each page from scratch— specifically if they share the same layout.

Bespoke / Unique / One-Off Pages

For bespoke, unique, or one-off pages (like landing pages) you’ll need to create these individually using the Elementor page builder.

Open each page of your site, one-by-one, and recreate the pages using the tools within Elementor.

By now you should have the hang of creating with Elementor. Though this can be quite monotonous, you should be able to make quick work of it.

Recreate Your Single Post Templates

Much like the Page Templates, your single post templates give you the ability to create one template and apply it to multiple posts. Most commonly this is done for your blog post template, but can also be done for custom post types as well (or even blogs within different categories, tags, or authors).

Recreate your blog post layout (if applicable) and assign it to the appropriate blog posts.

Archives, 404, Search Results, & More

We’re almost done! Just a few more bits to get to!

A few pages that might to come to mind immediately, but are very important, can also be created in Elementor.

Examples would be your archive templates, 404 page, or search results page. Each of these, and a few more templates can all be created in the Theme Builder just like you did for the header, footer, page and post templates.

Setup Any Redirects & Audit Technical SEO

You’re website should now look completely done from the front-end. Congratulations!

Before you publish your website, now is a good time to run a few tests to make sure you haven’t made any mistakes like broken links or invalid markup.

A tool like WebSite Auditor will do a good job of scanning your development site and alerting you to any issues. You can download a free version of WebSite Auditor that will allow you to do everything you need, though it does have limitations on saving reports and a max-page scan size.

In most cases the free version will do the trick.

After you scan your site with WebSite Auditor go clean up any issues to ensure your website is in good shape before publishing.

If you changed the slug or URL to any of your pages, make sure to create the appropriate redirects using a plugin like Redirection.

Publish Your Built With Elementor Website!

Your website is now ready to publish and you’re almost at the finish line!

To publish your website back onto your live site, you’ll want to follow the same steps we used with All-in-One WP Migration. This time you’ll want to download a copy of the development site and import it in your live website installation.

It’s always a good idea to take an additional backup of your live site before you do this just in case anything goes wrong.

Once the new site has been published, and since you already have WebSite Auditor, it’s worth giving the live site a scan just to make sure nothing got disrupted during the transfer.

Sometimes background images set with Elementor don’t always update the file path correctly and you have to give it a gentle nudge by using the URL Replace tool within Elementor.

Now Enjoy Your Elementor Website!

You did it! Congratulations! You now have a beautiful website that is easily updated and managed using Elementor.

All that sweat equity should make you proud!

Need Help Converting Your Website to Elementor?

If converting your website to Elementor is a bit above your ability, or you simply don’t have time, we offer a completely done-for-you Elementor website conversion service.

We’ve gotten the endorsement from Elementor experts Adam Preiser (from the popular WPCrafter YouTube channel) and Dave Foy (creator of the No Stress WordPress course).

This means you can have your website converted to Elementor, by experts, without having to lift a finger— all delivered with near pixel-perfect precision!

Prices start at just $1,000 and most websites can be completed in a week or less.

To learn more or get a quote, visit our Convert to Elementor page.

About the Author

Kyle Van Deusen

Since 2003 I have helped businesses like yours increase their online presence through powerful websites that help you easily, effectively, and affordably grow your business.