Divi vs Astra: Here’s How to Pick the Right Theme (Hands-On)

Divi vs Astra: Here’s How to Pick the Right Theme (Hands-On)

Trying to choose between Divi vs Astra for your WordPress theme?

Divi and Astra are two of the most popular multipurpose WordPress themes. And they really are multipurpose — you can use both to create everything from blogs to business websites, eCommerce stores, online courses, and more.

But while they share that similarity, they approach building a WordPress site in slightly different ways, so you’ll want to really think about which theme is right for your needs.

To help you make your decision, we’ve written this in-depth comparison of Divi vs Astra.

In this post, we aim to compare the biggest features that should make a difference in your decision.

To that end, we will:

  • Highlight the difference in approach between Divi and Astra.
  • Show you the user experience of each theme, with an abbreviated look at what it’s like to build a website with each.
  • Run our own performance tests to compare Astra’s vs Divi’s performance.
  • Discuss differences in pricing (there are a lot of permutations!).
  • Give our overall recommendation on who should choose Divi and who should choose Astra.

There’s a lot to cover, so let’s dig in.

Divi vs Astra Introduction: Two Different Approaches

At a high-level, both Divi and Astra are designed to give you full design flexibility with a combination of:

  • Detailed style and layout options in the WordPress Customizer.
  • Visual, drag-and-drop page builders (or the WordPress block editor) to design your content itself.

However, they go about things in different ways.

Divi

Divi WordPress theme

Divi gives you everything in one package. By installing just the Divi theme, you get access to:

  • The visual, drag-and-drop Divi page builder.
  • Visual, drag-and-drop theme building, also via the Divi Builder.
  • Lots of options in the real-time WordPress Customizer.
  • A detailed theme settings area in the WordPress backend.

With the latest version of Divi, you can move into full theme building, which lets you design 100% of your site, including your header, footer, and post/page templates, using the Divi Builder’s visual, drag-and-drop interface.

Basically, Divi is one package that gives you everything you need to design your website.

Of course, that also means that you get everything no matter what. For example, even if you prefer to use the WordPress block editor, you still get the Divi Builder. That’s an important distinction when comparing Divi to Astra.

Key features of Divi:

  • Multipurpose.
  • Built-in visual, drag-and-drop page builder for posts and pages.
  • Built-in visual, drag-and-drop theme building for headers, footers, and templates.
  • Theme settings in the WordPress Customizer (or, you can use Divi to build everything).
  • 164+ importable layout packs (basically pre-built demo websites).
  • WooCommerce compatibility.
  • Built-in A/B testing via the Divi Builder.
  • Comes in both a theme and plugin version.

Astra

Astra theme

Astra, on the other hand, is just a WordPress theme. That is, the developer of Astra does not include its own visual, drag-and-drop page builder.

Instead, Astra is built to play nice with any page builder plugin. The three tightest integrations are for Elementor, Beaver Builder, and Brizy, as Astra comes with importable demo sites built with those page builders.

However, you can use literally any page builder plugin — you could even use the plugin version of Divi if you wanted!

Or, you can just use it with the regular WordPress block editor — you certainly aren’t forced to install a page builder. Astra even includes importable demo sites that are built with just the Gutenberg block editor.

At first glance, it might seem like Divi gives you more features…and that’s certainly true out of the box.

However, if you want to add the same features to Astra, all you need to do is install one of the page builders that Astra pairs so well with.

By giving you the option to choose your own editor, Astra is actually a little more flexible than Divi where your only option is to use the Divi Builder.

Key features of Astra:

  • Multipurpose.
  • Free version at WordPress.org.
  • Lightweight at under 50 KB, with no jQuery dependencies.
  • 280+ importable demo sites built with the block editor, Elementor, Beaver Builder, or Brizy (some demo sites are duplicated across different editors, so the number of unique demos is under 280).
  • Detailed style and layout options in the real-time WordPress Customizer.
  • Page-level controls to help you integrate with page builder plugins.
  • WooCommerce compatibility and special settings.
  • Special integrations for LifterLMS and LearnDash to create online courses.

Divi vs Astra: User Experience

Rather than trying to compare every nitty-gritty feature in the abstract, I think it might be more useful to go over what it’s like to build a WordPress website with both Divi and Astra.

Read More:   X – The Ultimate WordPress Theme Review 2020

I’ll keep this section high-level, but it should illustrate the differences in approach.

Divi

There are three main ways in which you work with the Divi theme:

  • Divi Builder – This is the drag-and-drop, visual builder. You can use it to design your content, as well as your header, footer, and other templates. You’ll spend most of your time in the Divi Builder — you can try a demo here to get a feel for it.
  • Theme Customizer – You’ll use the theme-wide Customizer to control the Divi theme. With the advent of Divi Theme Builder, you might not use this as much, instead opting to create your templates with the builder.
  • Divi Theme Options – This is another area where you can control Divi theme options that aren’t in the Customizer. You won’t spend that much time here.

As of Divi 4.0, there are two ways that you can control the basic design of your theme.

First, you can use the WordPress Customizer, which is the “normal” way to control the Divi theme (and how you control most WordPress themes, including Astra).

You’ll get an array of options in the sidebar to control your:

  • Header and navigation
  • Footer
  • Blog layout
  • Buttons
  • Color schemes
  • Mobile styles
  • Etc.

Divi theme Customizer

For some other options, you can use the back-end Divi Theme Options area:

Divi Theme Options

However, as of Divi 4.0, Divi also includes full theme building.

With theme building, you can design your theme’s templates using the visual, drag-and-drop Divi Builder.

If you go to Divi → Theme Builder, you’ll be able to add your own templates to “override” many of the settings from the WordPress Customizer. That is, you could design your own header template that replaces the header that you configured in the Theme Customizer:

Divi theme builder

When you create your header, you can use dedicated modules to insert important elements. For example, the Menu module lets you insert the navigation menu that you set by visiting Appearance → Menus.

Divi Builder

For posts and pages, you can also use the Divi Builder.

Here, you’ll get access to hundreds of Layout Packs, which are essentially sets of themed templates that help you create an entire site. These are basically Divi’s version of importable demo sites.

For example, the layout pack for a gym website would include templates for the:

  • Homepage
  • About page
  • Class list
  • Locations
  • Etc.

Divi layout packs

And there you have it — the very quick version of what it’s like to build a WordPress site with Divi.

Astra

Astra’s user experience is a little bit more streamlined because it doesn’t include its own page builder.

After installing the theme, you can install the companion Starter Templates plugin from WordPress.org to access all of Astra’s demo sites.

You’ll first choose your preferred content editor. All of the content in the demo site will be built with this editor. You have four options:

  • The native WordPress block editor (Gutenberg)
  • Elementor page builder
  • Beaver Builder page builder
  • Brizy page builder

For example, here are all of the demo sites for the WordPress block editor:

Astra starter sites

When you import a demo site, you can either import the entire site and all the Customizer settings. Or, you can import just specific parts of the demo site.

To customize the Astra theme itself, you’ll use the real-time WordPress Customizer:

Astra Customizer options

Astra gives you a ton of options here, especially if you purchase Astra Pro.

Finally, if you imported the demo content, you’ll be able to customize it using the editor that you selected.

For example, if you chose the Gutenberg templates, you can edit everything using the native WordPress block editor.

Again, if you want to add visual drag-and-drop page building and/or theme building to Astra, you would also want to pair it with a separate WordPress page builder plugin.

Divi vs Astra: Performance

As your WordPress site’s foundation, your theme is always going to play a big role in how quickly your site loads.

To that end, let’s dig into a comparison between Astra and Divi’s performance.

First, I’ll test each theme on a brand new WordPress install with just the “Hello world!” post.

I think that this is the fairest way to compare each theme’s out-of-the-box optimization/performance.

However, it’s not a very realistic real-world test because it’s basically an empty site. In the real world, your site will be a lot “busier”.

To try and approximate that, I’ll then run a second test with an importable demo site from each theme. This test will not be as fair because the demo sites are not identical. However, I will try to pick starter sites that are roughly the same.

For reference, here’s how I’m testing:

  • Using WebPageTest.
  • Running six separate tests and taking the median value.
  • Using a 20/5 Mbps connection, which is around the average speed for the USA as a whole.
Read More:   Amelia Review: An Advanced Booking Plugin for WordPress

Let’s dig into the data.

Test #1: Empty Theme and “Hello world!”

Page SizeHTTP RequestsMedian Page Load
Divi395 KB200.848 s
Astra42 KB80.427 s

As the data shows, Astra is quite a bit more lightweight out of the box when it comes to both page size and HTTP requests (as well as load times).

Overall, Astra clearly wins test #1 — there’s no competition.

Test #2: Imported Starter Sites

Now, it’s time for the more realistic scenario.

I imported an agency-focused homepage template for each theme to test how a full website might load.

To try to make this as fair as possible, I used Elementor for the Astra starter site. This way, you’ll have “equal” design flexibility (and equal page builder weight) between both sites.

However, if you wanted to make Astra a little lighter, you could opt to use one of the block editor starter sites instead.

Page SizeHTTP RequestsMedian Page Load
Divi1.452 MB271.472 s
Astra w/ Elementor1.520 MB601.507 s

Note that Divi has some built-in script optimization, which is one reason why its HTTP requests are so much lower. You could achieve something similar with Astra if you use the free Autoptimize plugin.

As you can see, Divi and Astra are nearly equal when you bring a starter site from Elementor into the mix. So, depending on how you use Astra, you might not realize as big of a performance improvement as the first test indicated, at least on your core pages.

However, if I were to import an Astra starter site that’s built with the block editor instead of Elementor, you can see how Astra pulls ahead again:

Page SizeHTTP RequestsMedian Page Load
Divi1.452 MB271.472 s
Astra1.092 MB331.004 s

Performance Conclusions

Overall, I think it’s fair to say that Astra is better than Divi when it comes to out-of-the-box performance.

However, the difference might not necessarily be as large depending on how you use Astra.

If you’re planning to pair Astra with a page builder, which would be what you need to do to match Divi’s design flexibility, then you might find that your site performs at a similar level, at least on pages where you use the page builder.

This isn’t because Astra suddenly got less performance-optimized — it’s just the added weight from whichever page builder plugin you choose. To a certain extent, Divi has this weight built-in, which is why you saw such a big difference in the first test.

However, if you’re fine to stick with one of Astra’s block editor starter sites, then Astra is back to being the clear winner when it comes to performance.

Additionally, even if you use a page builder to design the core pages for your Astra site, you would still benefit from Astra’s more lightweight foundation when it comes to content where you use the native WordPress editor, such as your blog posts.

Overall, when it comes to performance, Astra is definitely the winner.

Just remember that if you use a page builder for a lot of your Astra site’s content, you will be negating some of that advantage.

Pricing

First off, there’s one key pricing difference between Astra vs Divi. Astra has a free version at WordPress.org, whereas Divi only comes in a premium version.

If you want to extend the free core theme with more features and customization options, you can purchase Astra Pro (which is technically a plugin).

When it comes to pricing for Astra’s premium option, Astra is still more affordable if you’re only looking for a theme. There are some quirks to that but bear with us for a second.

Both Divi and Astra allow usage on unlimited websites. Both also give you the option of choosing between a one-year license and a lifetime license.

Here’s how the pricing shakes out:

One YearLifetime
Divi$89$249
Astra$59$249

So, the lifetime licenses are identical, while Astra’s yearly license is a little cheaper.

However, Divi’s price is actually for the Elegant Themes membership, which also gets you access to all of the other Elegant Themes plugins/themes, such as Bloom (email opt-ins), Monarch (social sharing), and Extra (magazine theme).

If you think that you’ll use those tools, that might tip things back in Divi’s favor.

But…

Brainstorm Force, the developer behind Astra, also offers its own membership/bundle.

With these bundles, you’ll get access to 55+ additional Astra starter websites, as well as some/all of Brainstorm Force’s other plugins (depending on which bundle you choose).

Read More:   9 Best OptinMonster Alternatives 2019

Personally, I find Brainstorm Force’s plugin lineup to be stronger than Elegant Themes’ lineup. For example:

With that being said, Brainstorm Force’s bundles are significantly more expensive than the Elegant Themes membership, so you’ll need to decide whether those advantages are worth the price.

Here are the prices for a one-year license:

Elegant Themes Membership$89
Brainstorm Force Mini Agency$276
Brainstorm Force Full Agency$523

What About a Page Builder With Astra?

There’s one final hitch to comparing Divi vs Astra pricing!

What about a page builder plugin?

Divi’s price includes the full Divi Builder, whereas Astra’s price only includes the theme.

So, do you need to purchase a page builder plugin on top of Astra?

First off, all of Astra’s page builder starter sites are built using the free versions of the page builder.

That means you don’t necessarily need to budget for a page builder if you’re using Astra.

However, if you want full feature parity with what you can do with the Divi Builder, you might need to crack open your wallet. For example, Divi Theme Builder lets you use a visual, drag-and-drop interface to design your header, footer, and post templates.

To achieve that same thing with Astra, you’d need to purchase something like Elementor Pro as well, which starts at $49. That would push things back in Divi’s favor when it comes to pricing.

But in general, I would say that most Astra users will not need to purchase a premium page builder plugin, so Astra will still end up being cheaper.

Final Thoughts on Divi vs Astra

Overall, it’s hard to pick a clear winner because Divi and Astra have different philosophies.

Divi is more of the all-in-one option. You get your theme and page builder bundled together right out of the box and you can design everything using Divi’s visual, drag-and-drop builder, even your theme templates.

Astra is a little more versatile. It’s lightweight and customizable with just the theme. And if you want drag-and-drop visual editing like Divi, Astra is built to pair with your favorite page builder plugin, such as Elementor, Brizy, or Beaver Builder.

The Case for Divi

When comparing Divi vs Astra by itself (no paired page builder), Divi is obviously a lot more flexible. However, it’s important to remember that most people pair Astra with a page builder plugin, which offers more 1:1 feature parity.

Out-of-the-box, Astra is much more lightweight and performance-optimized than Divi. However, if you pair Astra with a page builder, the performance difference is not as dramatic because of the extra weight of the page builder…at least, on the pages where you’re using a page builder.

Overall, because of its all-in-one approach, I think Divi can be a little bit better if you’re just getting started with WordPress. For example, if you’re building your first WordPress site, Divi’s all-in-one approach makes it a bit simpler to set everything up and understand how everything connects.

With that being said, Astra’s pre-built starter templates also make it easy to quickly get up and running. The only thing that complicates the process a little bit is that you’ll also need to learn/rely on third-party plugins more than if you were using Divi.

The Case for Astra

Overall, experienced WordPress users might prefer Astra for its more open approach. With Astra, you still get detailed customization options, but you aren’t locked into a single page builder like you are with Divi. You can choose between Elementor, Beaver Builder, Brizy, and more, according to your preferences.

Additionally, because Astra is more lightweight, it’s easier to create a fast-loading website.

Even if you use a page builder to design the core pages for your Astra website, your blog posts and other native editor content would still load faster with Astra because of Astra’s more lightweight foundation.

Additionally, the core Astra theme is free, which is a big point in Astra’s favor all by itself. With just the free theme and the pre-built starter sites, you can already create a great-looking website. Divi doesn’t offer a free version, so people on a tight budget will likely want to stick with Astra.

Personally, as someone who spends all day working with WordPress, I prefer Astra’s approach. I like that I can choose my own page builder…or decide not to use a page builder at all, depending on the site.

I also value Astra’s performance optimizations, as page speed is important to me on all the sites that I build.

Still have any questions about choosing between Divi vs Astra? Have your own thoughts to add to the mix? Let us know in the comments!

Related Posts

Visit here for more information.

Spread the knowledge
Next PostRead more articles