Jupiter, one of the most popular WordPress themes in the world, joins the Elementor family and releases its new Jupiter X theme, rebuilt from the ground up using Elementor. Jupiter is one of the most popular premium themes in WordPress, built by Artbees and featuring over 104,228 in sales on ThemeForest.
Short on time?
After months of intensive research and testing, I now whole-heartedly recommend GeneratePress as the very best theme for non-coder graphic designers.
GeneratePress is fast, lightweight, superbly coded, and integrates perfectly with my recommended page builder, Elementor. It’s now at the core of my teaching method.
BONUS: Read on for details of the special custom settings and tweaks I put in place in all my GP+Elementor projects.
Contents:
The search for the perfect WordPress theme for non-coder graphic designers
At Design Build Web I help graphic designers build websites—drag-n-drop, without needing to code.
As a professional web developer, I’ve been informally helping graphic designers (like yourself) build websites for over 14 years now. I know exactly the struggles and pain you experience when developing websites.
What are the options?
‘Pre-designed’ WordPress themes are a big no-no, of course. They’re far too restrictive. You’re a designer, after all!
So you’ve likely been lured into multi-purpose themes like Divi, Avada or X.
I know all about it: I’ve helped cleared up the fallout mess from themes like these more times than I care to count.
These themes certainly seem like attractive solutions for designers—at first. They promise visual builders, unfettered design control and supreme ease of use.
I mean… look at those beautiful demos! Oooooooh!
The broken dreams of multi-purpose themes
The problem:my inbox is full of complaints about themes like these.
- These themes are heavy, bloated and slooooooooowwwwwww. Pages take 7–10 seconds to load, not 1–2 seconds.
- They include a ton of settings and features you don’t even need… AND you still end up having to pile on additional plugins to compound the mess.
- You end up having to write CSS and javascript code anyway (or paying someone else to do so). These themes are NOT as flexible as promised.
- Your websites all look very similar— these themes still ultimately have limited built-in styling options.
And that’s just the tip of the iceberg.
There has to be a better way…
When I decided I wanted to teach more non-coder graphic designers how to build websites easily and quickly, I knew I had to find an answer.
I needed a rock-solid platform that:
- I could have confidence in teaching and…
- That met my strict criteria (more on that in a moment).
I spent 4 months trialling various combinations of themes and plugins.
In the past I’ve built sites with Avada, X and Divi.
The first 2 were off the table immediately. Urgh.
Divi, I did actually briefly consider. I soon came to my senses.
I’m done with bloated mega-themes.
I soon realised that the answer lay far from do-it-all multi-purpose themes.
In fact: the opposite.
The (counter-intuitive) solution
I realised that actually, the answer was the opposite of the path most graphic designers take.
Here it is:
- Use a very simple theme as a solid foundation and…
- Pair it with a separate page builder (like the incredible Elementor).
I’ll explain the HUGE advantages of this approach in a future post – sign-up and I’ll let you know.
But for now, just know that I’ve tested it with lots of non-coder graphic designers, as well as on my own projects. It’s working incredibly well.
Think of it like this:
- The theme is the ‘picture frame’.
- The page builder is the ‘canvas’.
The separation of the two allows you to use the best tools for the job.
No comparison
If you’re interested, other themes I tested were:
This post won’t be comparing GeneratePress with the other themes I trialled though. If you’re looking for a feature comparison, you’re out of luck.
GeneratePress is the only theme that met every single one of my criteria, and then some.
It’s now the only theme I use and 100% recommend with confidence. It’s at the core of my teaching method.
Discover the settings and extra code I put in place in ALL my GeneratePress + Elementor projects, for optimal performance.
What is GeneratePress?
Before we get stuck into my criteria for a theme, let’s cover some basics:
- It’s a WordPress theme. Dur.
- Purposefully fast, lightweight and simple—the opposite of heavyweight bloated multi-purpose themes.
- Made by Tom Usborne, a developer from British Columbia.
- Price: the basic theme is free. The Premium version adds extra features and styling controls for an extremely reasonable $49.95 for unlimited websites.
- 30 day money back guarantee.
- Support and updates for 1 year.
After a year, you can renew your license again (with a 40% discount) to continue to receive support and updates. If you decide not to: no harm. The theme carries on working just fine.
You won’t be charged again after a year, unless you actively pay for a renewed license again.
Yes, you will need the Premium version to follow along with my training. I’m delighted to pay developers like Tom so they can continue making awesome software like GeneratePress.
This review presumes the use of GP Premium. I won’t be comparing the free and Premium versions.
(Aside: While the license fee is for unlimited websites, I personally choose to pay the license fee per-website anyway. I want GeneratePress to be around for a very long time. It’s a trivial price to pay, easily rolled into a client’s quote.)
My 12 criteria for the best WordPress theme for non-coder graphic designers
Let’s dig into what I was looking for in a theme.
You might want to grab your favourite beverage… ?
I had 12 criteria.
I didn’t mess around. If a theme I trialled failed to meet even just one of these requirements, it was off the table.
Harsh, but fair.
Not on your radar?
Note: it’s no accident that a lot of the requirements on this list wouldn’t naturally be on the radar of your typical non-coder designer. Most of it is stuff you don’t care about…
And that’s the point. This is all the stuff you don’t even know you need, but will make your life easier in the long run.
1. Lightweight and fast
Speed is massively important, even if you don’t personally care.
The success of your clients’ businesses depend on fast loading websites. Their visitors want a fast experience. And Google reward fast websites with higher rankings.
Tom has clearly considered maximum speed at every single turn, and he constantly tweaks things to squeeze out further performance.
Take a look at the size of GeneratePress’s code, vs Avada and Divi:
- Avada: 19.4MB
- Divi: 26.5MB
- GeneratePress: 1.9MB
(These figures are the basic theme files, uncompressed, at the time of writing.)
Avada is over 10x the size. Divi nearly 14x the size!
Now, the size of a theme’s codebase aren’t the only consideration, of course.
But also, multi-purpose themes also have so many bells and whistles, they need to include a heap of redundant code to power all those features you likely won’t even use. And they’re typically inefficiently coded too.
It all adds up to slow, slow, slow.
This isn’t an in-depth page speed review or benchmarked comparison. I may do one in future.
But what I can tell you is that, in my experience, websites built with GeneratePress load in 1–2 seconds, while sites built in Divi or Avada load in more like 5–8 seconds.
These are sites with the same caching and speed tweaks applied, and with similar content. It’s like night and day.
GeneratePress is super-fast and light as a feather.
2. Simplicity
I realised early on in my search that the perfect theme needs to know its place and do its job. I needed a theme that was the opposite of the big, bloated, multi-purpose, do-it-all heavyweights.
I needed a theme without an enormous feature list. The perfect ‘picture frame’ to the page builder‘canvas’.
GeneratePress meets this requirement square on. It’s a simple, rock-solid foundation for you to express your own unique design vision.
Tom wisely adds the Premium features as a separate plugin. And even then, you can turn on only the additional features you need. This keeps things simple and lightweight.
You won’t find a ton of fancy features. This is on purpose. The developer believes—as do I—that specialist features should be provided by plugins, added only as and when you need them, as the project demands.
I found with Divi, for example, that you still usually needed additional plugins to achieve what you wanted. This piled on a further weight of code, much of which you don’t even need.
In GeneratePress, you won’t find mega menus, or testimonials, or related posts, or…
GP keeps functionality that shouldn’t be in a theme, out of the theme.
3. Logical, comprehensive styling controls
With my teaching method, you set your basic styles in the theme.
Just like you might do with InDesign styles: set rules for typography, colours and layout in one central place, then let those rules automatically ‘cascade’ down (like a waterfall) throughout your website.
You wouldn’t believe how messily and inconsistently most themes handle this.
GeneratePress’s styling customisation tools are super logical. They’re in the WordPress Customizer—which is where they belong— not in a theme’s own custom-baked options panel. This makes customisation easy and quick.
Just how logical?
- Need to tweak a colour? It’s under Colours.
- Switch a font, or increase the size of text? It’s under Typography.
- Alter a layout? Yep, it’s under Layout.
And because GP uses the Customizer, you get the benefit of live updates too: see your changes live on your site, before you save.
4. Well-coded to WordPress best practice
As a graphic designer, you quite likely don’t give 2 hoots about code quality. And why should you?
But…
This is exactly why it matters how well coded your theme is. You shouldn’t have to think about it.
The fact is:
Well-coded themes work properly, don’t cause issues, and get out of your way.
whereas…
Poorly coded themesalways come to bite you on the ass eventually… whether you care about the quality of its code or not!
GeneratePress is built with clean, efficient code. It follows WordPress’s own development best practice to the letter.
There are thoughtful development decisions everywhere you look.
Some examples:
- The Customizer loads only the fonts you need.
- Premium features are added as a plugin, allowing you turn on only those features you need.
- A range of hooks and filters are provided to extend functionality quickly and easily.
- Template HTML and CSS is clean, efficient and well-organised.
- The theme is fully schema.org microdata integrated, which enhances SEO.
Tom clearly cares about doing it right.
And while you might not appreciate it, or care too much, believe me when I tell you that it does matter and it will make your life easier in the long run.
Update: just after I first published this post, Tom the developer posted on the GeneratePress Facebook group:
“I’ve hired one of the lead WordPress developers/security experts to review every line of GP to harden security even more and make it perform even better :)”
5. Full page builder integration
As I’ve explained, the core of the method I teach relies on separating the theme (i.e. the ‘picture frame’) and the page builder (i.e. the ‘canvas’).
For this to work though, the theme needs to support my favourite WordPress page builder plugin.
What does this mean?
For me, it’s essential that the theme:
- Provides a ‘full width’ template: typically you need the full width of the browser window for modern page design.
- The ability to hide various page elements (e.g. header, navigation, footer) – perfect for creating unique landing pages.
- Various sidebar layouts – including no sidebar at all.
GeneratePress nails this.
The edit screen for each page has simple options panels. These allow you to set things up exactly as you need it, on a per page basis.
Make page full width:
Hide various page elements:
Custom sidebar layouts:
You can easily set your preferred defaults globally in the Customizer for:
- Sidebar Layout for pages
- Sidebar Layout for your blog listing page
- Sidebar Layout for your individual blog post pages
Want to design a special landing page for your client’s Facebook ads, with a totally custom design?
Easy. Just disable all page elements, make the page full width, and use Elementor to design the entire page.
Want most pages to include a sidebar, but some not?
Simple. Set your preferred default of ‘Content/Sidebar’ in ‘Customizer > Layout > Sidebars’, then set it to ‘Content (no sidebars)’ on the pages that are the exception to the rule.
Want to custom design your own footer with Elementor, and hide the theme’s footer completely?
A doddle.
- Disable the footer globally in ‘Customizer > Layout > Footer’.
- Create your footer in Elementor.
- Then use the Hooks options panel to pop the shortcode for it in all parts of your site.
This is exactly what I do here on Design Build Web, in fact…
6. A great-looking, well-designed blog
While you can technically create a blog with a page builder like Elementor, there are lots of good reasons to let your theme handle your blog posts.
This isn’t the place to go deep into why… something for another post (ask me if you want to know in the meantime).
But just know that, for me, the chosen theme’s blogging functionality and design had to be rock-solid.
GeneratePress’s blog is superb.
The options for controlling blog post functionality, styling and layouts are excellent.
The actual posts look top-notch too.
7. ALL the header styles
(What’s the header? It’s the area containing your logo and navigation, at the top of your websites.)
Even the big heavy multi-purpose themes like Divi and Avada only provide relatively limited styling options for headers.
I remember needing to place the nav full width underneath the logo in Divi once and it was a major undertaking. I’ve been developing websites for 14 years and I still had to hire another developer!
GeneratePress has all the possible header layout permutations covered.
You can easily change the options in the Customizer and see the results live on your page.
There are controls for styling dropdown menus, navigation, alignment of the logo and the navigation, plus a useful header widgets area. There isn’t a header layout I haven’t been able to easily achieve.
8. Comprehensive features and functionality
I’ve already argued that a great deal of features and functionality should be handled with plugins, separate to the theme.
This is true… But there are certain features that should be in the theme.
These are the sort of things that could be considered part of the ‘picture frame’—global features that are a key part of every page.
When I was trialling themes, what sort of things did I have in mind?
(A reminder that most of these features require a Premium license.)
Things like:
Transparent page header
Where the logo and navigation are placed over the top of the page header.
I actually do this—subtly—on the Design Build Web home page.
GeneratePress handles this nicely. On a per-page basis you can set the header area to overlay the content underneath it, as well as make the navigation transparent and change the colour of the site title, tagline and navigation links.
And it works just great with page headers created in Elementor too.
Different header for mobile
Often you want a different header area when on mobile, to make better use of the screen real estate.
GeneratePress allows you to have a different header design layout on mobile, optionally with its own custom logo too.
Sticky header and navigation
I’ve yet to see a designer who doesn’t want a sticky header. This is where the header area ‘sticks’ to the top of the screen when you scroll down the page.
GeneratePress provides simple, effective options for sticky headers – on desktop only, mobile only, or both.
You have the choice of a slide-in or fade effect, or no animation effect at all. And again, like the mobile header, you can opt to switch the logo from the usual one to something more appropriate.
Slide-out menu
Where you have a navigation menu better suited to being vertical, but you only want it to slide in when required.
GeneratePress implements this really nicely. You can decide to use it on desktop, mobile, or both. And you have 100% custom control of what appears in this menu.
See these features in action:
A secondary nav
You have the ability to add a second navigation element, with all the same options as the primary navigation.
And you can put it anywhere you like:
- A top bar above the header (either full width or contained)
- Below the header
- To the right of the header
- In the sidebar
- Left-aligned, right-aligned, or centred.
See it in action:
Only 2 features spring to mind that aren’t included that have cropped up for me and my students:
- Top bar: ability to create a custom bar that runs across the top of the site, typically containing its own separate navigation and social media icons. Tom tells me this feature is ready to go in the very next update. It’s also very easy to create in Elementor and place (with the ease of GP’s Hooks feature) at the top of every page.
- Full screen nav: where the navigation fills the full screen. Check out examples. Apparently on its way too, according to a recent post on the GP Facebook group.
9. Rave reviews
It’s great to know that all my feature requirements were covered. But I also wanted to see what experience others have had with the theme.
I’d already heard plenty of people saying how great they thought GeneratePress was, and how they were finding it ideal for use with page builders like Beaver Builder and Elementor. I also wanted to check out the reviews on WordPress.org.
Well… see for yourself.
At the time of writing there are 433 reviews. 429 of those are 5 stars. Wow.
The reviews are impressive! But what impressed me the most was seeing how Tom (the developer) handles them.
There are only 2 poor reviews, both of which were due to misunderstandings on the reviewer’s part. He replies in a friendly way to try to resolve their concerns, with patience and professionalism.
Not only that, but Tom replies to each and every review to thank the reviewer and personally address the points raised.
Big plus.
10. Stellar support
As with any software, it’s usually not a matter of if you’ll need support, but when.
It’s very important to me to see at least a decent level of support. I don’t want to be left hanging for hours when a quick, helpful answer would get me on my way.
I’ve only had knock-me-down-impressed online customer support a handful of times online. Take a bow Clook and SiteGround.
I’ve now added GeneratePress to that list.
Customer support is provided via a clean, easy-to-read, searchable support forum.
Other themes I trialled had only one-to-one email support, which means you can’t search for your question that someone else has already had answered.
Tom’s support response time is superb. Replies usually come from Tom himself, or one of his small support team.
Replies are always friendly and helpful. You get the feeling that nothing is too much trouble. He doesn’t make you feel like an idiot, even when you’ve asked a daft question.
And it’s clear he’s actually read and understood what you asked. He takes the trouble to answer your question in detail, step-by-step. He often goes to the trouble to provide a custom solution to solve your own specific requirement.
Tom also goes the extra mile to hang out regularly on several Facebook groups (e.g. GeneratePress, Elementor). It’s common for Tom to chip in and reply to threads, as well as take on board feature requests and ask for people’s opinions on new features—not even on his own group.
The documentation is also clear, detailed and easy to understand.
11. Ongoing development
If I’m going to 100% recommend and use one (and only one) theme for teaching non-coder graphic designers, I need to know that my chosen theme is in active development and around for the long haul. Nothing worse than software that’s not updated, abandoned to become obsolete.
With GeneratePress, I needn’t worry.
Development is clearly ongoing.
As mentioned, Tom is very active on the support forum and Facebook groups, always with an ear open to new feature requests or announcing improvements to the theme.
And he’s most definitely in it for the long haul.
One of the things I love about GeneratePress is that it’s not bloated with features. So, as open as Tom is to feature requests, I also respect that he’s not afraid to say no, when the request doesn’t meet his vision for the direction and quality of the theme.
And, in my opinion, it’s always a good call. He usually suggests a great alternative (for example: using a good quality plugin to achieve the same functionality, that won’t bloat the theme for the majority of users who don’t need it).
12. Developer friendly
Wooaah, hang on… I’m recommending the best theme for non-coder graphic designers… and one of my criteria is how friendly it is for developers?!
It’s important. Trust me.
I agree: you don’t want to get your hands messy with code. No-one wants that.
But if your client asks you to pop a bit of Google Analytics or Facebook advertising tracking code in the right place on their site…
Or you build a beautiful custom footer in Elementor and you need to place the little shortcode for it so it appears on every page of your site…
Other themes that make jobs like this tricky--if not impossible—for non-coders. GeneratePress makes stuff like this very easy.
Every single part of the theme’s built-in templates has a ‘hook’ built in. And in the WordPress control panel, there’s a box corresponding to each one of those hooks.
This means you can add whatever you like to every one of those areas of the site. Without getting your hands dirty.
Just some examples:
- Before the header
- After the header
- Before the main content
- After the main content
- Before the footer
Full list of all 32 current hooks here:
GeneratePress also includes a large list of filters. Again, developers will really appreciate these, making future custom development quick and easy.
It’s re-assuring to know the whole architecture of the theme is well thought-out and carefully considered—even if it doesn’t directly affect you as a graphic designer.
Discover the settings and extra code I put in place in ALL my GeneratePress + Elementor projects, for optimal performance.
Tour of GeneratePress
The install process
Installation couldn’t be easier.
First install the free theme:
- In WordPress, navigate to Appearance > Themes.
- Search ‘GeneratePress’.
- Install. Activate
Then install the Premium plugin:
- Download the plugin zip file you purchased at the GeneratePress site.
- In WordPress, navigate to Plugins > Add New.
- Upload the zip file.
- Install. Activate.
The theme options
The basic settings are clear and obvious.
Appearance > GeneratePress
Here you can:
- Activate or deactivate premium features.
- Add license key for updates.
- Import or Export Customizer settings.
Appearance > GP Hooks
This is a screen with a series of blank text boxes. Each box corresponds to a ‘hook’, as I mentioned earlier.
In the screenshot below, see how I’ve copy-pasted the 2 snippets of code provided by Google Tag Manager into 2 separate boxes. Google ask that the 1st one be placed in the
<head>
of the page, the 2nd just after the opening <body>
tag of the page.- wp_head – this will place this code snippet in the
<head>
of all pages. - Before Header – this will place this code snippet just after the opening
<body>
tag of all pages.
The GP Hooks settings page makes accomplishing things like this SO easy. I also use it to paste the shortcode for my Elementor-designed footer, so it appears in the footer of all pages too.
Styling options
Styling options are in the WordPress Customizer, which is the right way to do it.
As I mentioned earlier, these are logically organised. You have complete control of all aspects of the theme’s styling, ready for using your favourite page builder.
Widget areas
If you don’t know, WordPress widget areas as parts of the theme, provided by the theme developer, that allow you to drag-n-drop bits of functionality into your site.
Appearance > Widgets
The available areas are:
- Right sidebar
- Left sidebar
- Header
- Footer Widgets (5 of these)
- Footer bar
Is there anything I don’t like?
I’ve mentioned already that GeneratePress 100% met my own criteria, and then some.
I’ve hardly encountered any issues. I’ve noticed people occasionally requesting features that are missing, that I’ve thought would be useful for my audience of non-coder graphic designers. Tom’s usually on with it (for instance, the option for full screen nav menus).
I’ve also added a little bit of custom CSS code to my WordPress install, to help GeneratePress play optimally with Elementor. I use this for all my website builds using GP + Elementor now. Grab it here:
Discover the settings and extra code I put in place in ALL my GeneratePress + Elementor projects, for optimal performance.
Wrapping it up
I’ve been developing websites for fun since 1998, and professionally since 2003. I’ve been using WordPress since 2010. I haven’t used a WordPress theme that comes close to the quality of GeneratePress, nor one that meets my criteria quite so perfectly.
It’s fast, lightweight, well-coded, flexible, easy-to-use and well-supported by a developer who clearly cares about his product.
It plays perfectly with my favourite page builder: Elementor.
And while the basic version is free, the price of $49.95 for all the features, for unlimited websites, is ridiculous.
I’m delighted, after months of dedicated searching, I’ve found a theme I can confidently recommend to my graphic designer students.
Check out GeneratePress. Give it a whirl. And let me know what you think in the comments below.
(This review includes affiliate links. If you buy, I get a small commission, but you don’t pay any extra. Rest assured, I’d 100% recommend GeneratePress regardless.)
Check these posts out too...
Today we'll be comparing Elementor vs Themify, to ultimately help you decide which is the best solution for you. The information below is based on real data from our community of real business owners, employees and hobbyist like you, giving you a truly unbiased comparison. In the collection '+ Best Drag And Drop WordPress Theme Builders (2019 Compared)' Elementor is ranked 4th while Themify is ranked 6th.
Elementor dominates with an overall user/editors rating of 4.4/5 stars with 2 reviews, Themify user/editors rating is 3.3/5 stars with 4 reviews. This data is calculated in real-time from verified user reviews or editors rating if there isn't enough data for user rating.
If for whatever reason by the end of this comparison you are unable to choose between Elementor or Themify, we have included a few useful alternatives like Divi Theme based on our community recommendations.
As far as Value for money goes, Elementor wins by 4.8 marks and Elementor is also voted as the easiest solution to use
Without further ado, let's look at a detailed breakdown of Elementor vs Themify