How To Combine GeneratePress and Elementor

In our first post on GeneratePress and Elementor, we wrote how we use these two tools here on freshvanroot.com in one specific setting, in this post we gonna explore additional ways on how to combine GeneratePress and Elementor.

We will start out with a basic introduction of GeneratePress and Elementor before we dive into a few potential scenarios you could apply to your WordPress project and add a few more things to consider.

Overview & Introduction

GeneratePress and Elementor are very powerful tools that fulfill different needs. GeneratePress is a theme, and by default offers all the stuff a typical website needs. You can import one of the available demo sites and you are ready to start working on your content and design.

All basic design customization in GeneratePress can be done via the classic WordPress customizer. All content editing will be done via the WordPress editor, and all site-related settings are managed in the WordPress dashboard.

Elementor is a page builder. It is added as a plugin and can be used to both create a design for your site and edit content. Elementor loads a separate editing experience that has no similarities with WordPress, dashboard or the classic editor. Elementor is a WYSIWYG (“What You See Is What You Get”) design tool and less a tool for daily content editing.

It is not only a powerful tool to create single pages but you can even create your own theme with it. To get Elementor working you need a theme activated. Elementor does not make the need for a theme obsolete. (New to Elementor? Check our Getting Started post)

To illustrate the different results you can get: left is a template provided by GeneratePress, the page on the right is running an Elementor template.

The point I am trying to make is that if your goal is to create a fancy looking page with a very individual design (and lots of cool scrolling effects, animated headlines and so on), you will rely on Elementor more to accomplish that task. Not that you couldn’t create a fancy page with GeneratePress, it would just involve a lot of custom CSS and coding. By using Elementor, you can design the page you want in your browser but will need way more (web) design skills.

But lets take a look at different scenarios on how to combine GeneratePress and Elementor.

GeneratePress for overall site, Elementor for landing page only

In this scenario, you will use GeneratePress for most of the pages and posts on your site, and Elementor is only used for a special marketing or sales page, or simply your front page.

Potential use case: You quickly need to get a good enough page online for your startup idea, your new business adventure, your project showcase or simply your blog. You do not want to learn all the nitty gritty details of how Elementor works right now. You can figure that out later, but you know that GeneratePress and Elementor will work perfectly together.

How to get started?

Install GeneratePress, import one of the available (no page builder) templates that suits your needs. Use the classic WordPress customizer to apply your brand.

Then install Elementor and create your front page, publish it and set it as homepage in the WordPress dashboard.

GeneratePress for Blogging, Elementor for all pages

With this setting, you create all static business pages with Elementor, and all blog posts are rendered by GeneratePress theme. How can you get this scenario started:

• Import the GeneratePress template with a blog design you like
• Delete all pages created using GeneratePress
• Create and publish a start page with Elementor
• Edit the navigation: Set your newly created Elementor page as the start page and keep the blog page created by GeneratePress

GeneratePress for Header & Footer, Elementor for everything else

That is the setting we are running here on freshvanroot.com. We manage header and footer of our site via WordPress customizer, everything in between is done via Elementor.

Our

• frontpage, workshop page, portfolio – the design of these pages are built using Elementor
• post single template is created using the Elementor theme feature.

This set up works well if you create between 5 to 20 pages. I haven’t seen large sites with hundreds of pages built in Elementor. Elementor has powerful tools to re-use components, but it would still be a monstrous task to create more than 50 pages with it.

GeneratePress only under the hood and Elementor for overall site

You might ask what you need GeneratePress for anyway if you want to design your site entirely in Elementor. If you need only a theme because Elementor requires one, you can install any theme, right?

That is only partially true because with GeneratePress you get a powerful feature called “Elements” (that is confusing because it has nothing to do with Elementor).

GeneratePress Elements can be used to create

• custom headers,
• add hooks (code of any kind),
• or create layouts for specific areas of your site

A few examples from our site here. We use the GP elements feature to add Google Analytics code, customize the header for our front page (making the navigation transparent), create a basic layout for all newly created pages and so on.

GP Elements is only one feature I am pointing out here because it adds lots of flexibility to your site that is not covered by default in many other themes (or in Elementor). With less flexible themes you often end up installing plugins to add functionality that is covered in GP by default. Check out the other premium features of GeneratePress.

GeneratePress is constantly developed and maintained, right now a new version is under development which brings a lot of cool new features.

Mix & Match

This is of course not a definite list of scenarios, the beauty of combining GP theme and Elementor page builder is that you can customize everything to perfectly match your sites needs when your business grows.

Examples would be:

• Add shop functionality with WooCommerce
• Connect your email list with Mailchimp or MailerLite
• Make your site available in different languages
• Hire a designer to create a more advanced design later and apply it with Elementor
• …

Does Elementor only work with a specific set of themes?

No, not really. You can try installing Elementor alongside any theme you want and see how it works. After installing Elementor you can choose a page template when creating a new page. You can try “Elementor canvas“, that should remove everything that would otherwise be rendered by the underlying theme. You could even try installing it next to Enfold (which comes with it’s own layout editor), but I do not recommend it.

GeneratePress is just one of the themes working very well with Elementor. Astra is also very popular at the moment.

You can also browse the “sites of the month” post series on Elementor blog to check out other themes used with Elementor.

What are GeneratePress Elementor templates?

This can be a bit confusing. When GeneratePress started out Elementor wasn’t on the market, so it came with it’s own page templates to install (like thousands of other themes do). But the team at GeneratePress also wants to cover audience using Elementor with GeneratePress, so they created their own templates powering Elementor.

That is just one more sign that GeneratePress is on a mission to support Elementor on the long run, and wants their product to perfectly work together with Elementor. GeneratePress templates are a premium feature.

When you browse the site demos on GeneratePress.com you can switch between page builder powered demos and all.

What is the difference between GP templates and Elementor Templates?

The importable demo sites by GeneratePress cover – as it says – your complete site. You can start quickly customizing it to your needs. It imports demo content, a header with navigation, footer, all the stuff a site should have.

That is different with Elementor. If you browse the site library you will see that you get one specific page imported, but not a complete site. Each importable page from library is meant to cover one specific need. It is up to you to build the wholte site around it!

Note: Page templates and blocks are a pro feature in Elementor!

Other questions to consider

• Your pages or posts relying on GeneratePress and Elementor may look completely different. Invest some time to adjust the design
• Migrating all your content to a new site will be much easier if your content is created usingGeneratePress. Why? If you deactivate Elementor on a site it leaves you with to edit your content you will move away it looks like this [screenshot Elementor turned off]
• The more you rely on a default template from GeneratePress, the more you will focus on content. The more you rely on Elementor, the more focus is on the design of your website.

The downside of using Elementor and GeneratePress

After writing about all the beauty of such a set up, lets talk about the downsides.

Depending on which scenario you use, you will have two different editing experiences for your site. That is not a good thing if you have multiple editors creating and editing content. It is not a problem if the editors only work on content that is managed in only one tool.

One way of running a mixed set up is that you use the WordPress editor for writing blog posts, and all pages and the design of your site is managed in Elementor. Pages are normally less often created from scratch compared to posts, so your lesser skilled editors will edit content the known way, and do not have to worry about learning Elementor at all.

Two more things about Elementor.

Making a responsive design perfect in Elementor is a bit tricky. All the cool and fancy elements that make your site unique might look not so well on mobile (like animated headlines, background, section dividers, motion effects and so on). If the audience you want to reach will check out your site mostly on mobile, design for mobile from the beginning. When using GeneratePress, you only have a few settings available to customize the responsive behavior, but the theme is pretty good in covering all screen sizes by default.

Theme creators are normally good in answering support questions. That is different with Elementor. It is a page builder, a design tool, and you won’t get help from the Elementor team. It’s up to us bloggers, agencies, freelancers to provider Elementor support. Think of it this way: Ask Microsoft to help you understand how to use Windows Explorer, or Adobe how to use Adobe Photoshop.

Support from the GeneratePress team is excellent, I have mentioned that in my other post including a list of all support requests I opened on the forum.

Summary

GeneratePress and Elementor are powerful tools to customize and design your WordPress website. Once you invested the time (in your role as an entrepreneur, marketer, startup founder) to get your head around the possibilities you will be very fast in realizing your ideas.

GeneratePress will get you a “good enough” site within hours to go live. It may not look very fancy right after installing, but lots of its flexibility is under the hood in the WordPress dashboard (elements/hooks/layouts and extensibility). GeneratePress does also load very fast and does not require any additional plugins to run properly (like many other themes do).

Elementor brings design freedom to your WordPress site, but will also slow you down as it requires you to learn how to use new design software in your browser. You can fasten things up by starting with a template from its library, but it will take some time until you applied your business brand to it.

Even if you are not in the role of creating a website from start to finish, learning how to prototype a website project with these tools can help you to better understand the opportunities of the WordPress platform.

---