DIY web design: StudioPress themes + Beaver Builder - Kathleen Celmins

DIY web design: StudioPress themes + Beaver Builder

When it comes to your website, design really does matter. A lot more than you might imagine. If you want to do a bit of learning and invest in StudioPress themes + Beaver Builder, you can create an eye-catching WordPress website that will help convert visitors into customers.

It doesn’t matter how great the content of your website is if people who land on it see broken images and black Times New Roman font on a stark white background. You are not going to stick around! We’re all guilty of leaving sites that don’t have an aesthetic appeal. Your site needs to be visually appealing in order to grab the viewer’s attention and keep them on your site.

Maybe you’ve hired a professional web designer or developer to create and design your website in the past. We have. But now, we don’t. Why? Because we discovered the Genesis Framework and StudioPress themes + Beaver Builder. We use a combination of the themes and page builder to create and design our sites. And we think they look great. You don’t need to know code to create a stunning looking site with these tools. Before we go much further, let’s discuss what exactly these tools are and what they do.

Genesis framework & StudioPress explained

StudioPress provides premium WordPress themes, which means you’ll have to pay for them but it’s worth every penny! Compared to hiring a web designer, it’s also a lot cheaper. Even the most expensive themes will only set you back about $150.

You can think of the Genesis framework as the engine of a car and the StudioPress child theme as the body of the car. The framework is what makes your site run and sets up the foundations. The child theme takes care of the style and design. These themes have been designed exclusively for the content management system (CMS) WordPress and are fully optimized for creating and running WordPress sites. There are so many premium WordPress themes out there, but in our opinion, nothing compares to StudioPress.

[earnist ref=”studiopress-by-genesis” id=”339″]

Beaver Builder explained

Beaver Builder is a premium WordPress plugin and can be used in addition to the Genesis framework and StudioPress child themes. Beaver Builder has nothing to do with the site’s theme — instead, it helps you to design the content areas of your pages using columns and rows to create intricate layouts. You can then use the simple yet sophisticated drag and drop interface to add ‘modules’ like text, images, forms and much more, into the layout you’ve created. Beaver Builder doesn’t allow you to change the header, footer or sidebar of a theme. For that, you would need to use Beaver Themer.

Like the Genesis framework and StudioPress child themes, Beaver Builder is a premium WordPress plugin. The basic version of Beaver Builder will only cost you $99 and then $60 every year after to renew your subscription. Again, compared to hiring a professional designer, this is nothing.

[earnist ref=”beaver-builder” id=”362″]

If you’re thinking of going down this route of designing your own site using the StudioPress child themes and Beaver Builder plugin, here are seven things you need to consider:

1. How does it look, straight out of the box?

The main reason we, and so many other people, love the Genesis framework and StudioPress child themes is that they look amazing straight out of the box. Without much fiddling, these themes look GREAT! You can literally have a beautiful and functional site set up in minutes. There are so many themes to choose from so your bound to find something you like. There are themes specifically for eCommerce sites, real estate sites, photography portfolios and pretty much anything you could want a site for.

Because these themes are so popular, we use Beaver Builder in conjunction with the StudioPress child themes to differentiate our sites by creating and designing original content areas for the pages of the sites. The header and footer will remain the same. But Beaver Builder gives us creative freedom and makes our version of one of the StudioPress sites look unique instead of looking like something out-of-the-box.

2. How mobile responsive is it?

To add to how amazing the Genesis framework is, all StudioPress themes are mobile responsive straight out of the box. Any site you create with these themes will look gorgeous on a mobile phone, tablet, laptop, and desktop. Instead of hiring someone to spend hours tinkering with the sites breakpoints, StudioPress has already taken care of this for you.

As well as the entire theme being responsive, there are premade column classes that you can use (if you don’t opt for Beaver Builder) to help you arrange your content and still keep the site looking great across all devices. Nowadays, with more people accessing the internet from mobile devices than desktops, it’s imperative that your site is mobile responsive. Google penalizes sites that aren’t mobile responsive, meaning,

Of course, if you’re using the Beaver Builder plugin with your StudioPress child themes, then you’ve got all bases covered. The layout you create with Beaver Builder is also going to be mobile responsive for the most part. Modules have advanced responsive setting that you can use to hide elements on certain screen sizes to your site can look it absolute best!

3. How much documentation do they provide to make it look like the demo?

Since you’re doing it yourself, make sure you’re comfortable with the installation documentation. All the StudioPress child themes, even the third party ones, come with a wealth of documentation to help you get started. With each theme, there are set up instructions to help you design the home page’s widget areas to look exactly like the theme’s demo — you can even import all the demo content.

StudioPress also provides code snippets that you can just copy and paste to help you customize your site. If you need to change the footer credits, there’s a snippet for that. All you need to do is change the credits to what you want them to be.

As well as all this setup documentation, there’s a healthy Q & A section on the StudioPress site to help you find answers to your questions. And just so you don’t feel alone, there are Facebook groups full of Genesis users and lovers. If you can’t find an answer to your question anywhere else, try reaching out in one of those groups. I’m sure someone will be willing to help.

As for Beaver Builder, there is a knowledge base and tutorials archive as well as recommended resources to help you on your way to designing the site of your dreams.

4. Is the underlying framework secure?

The Genesis framework is rock solid. Some of the best WordPress minds came together to create it. They understand that a lot of time and effort goes into creating your site and it’s vital for your online business. The wonderful people at StudioPress have made sure that the Genesis framework will give your site the best possible and strongest security foundations.

In terms of security, WordPress is pretty vulnerable to attacks. It’s an open source platform so loads of people are forever contributing to it and making it better. However, the drawback of an open source platform is that it’s comparatively easy to hack. Unfortunately, there are people out there with malicious intentions to bring down and corrupt sites.

For StudioPress, making sure your site has secure foundations is one of their top priorities. Having your site hacked can be time-consuming, expensive and not to mention it can damage your reputation. StudioPress said “We brought security expert and core WordPress developer Mark Jaquith in to make sure the Genesis Framework has the best security possible. With his guidance, we built our framework to follow all WordPress security best practices.”

5. Do the foundations cover the basics of SEO?

StudioPress boasts that the Genesis framework creates amazing SEO foundations for your site. They understand that you want and need to be discovered by new clients and customers. Your business depends on it.

The underlying code in both the Genesis framework and all the StudioPress themes is incredibly clean. Search engines see sites differently to how we do. They read the code to determine rankings, and they (probably, maybe) give higher rankings to sites without code bloat.

StudioPress says “The Genesis Framework has always handled the basics of good SEO for you, like lightweight code for fast performance, and now it’s even better. Our themes have been fully search engine optimized by Greg Boser, search engine optimization pioneer, and industry expert. With automatic updates to the Genesis Framework, you never have to think about it again. Your code will always be up to date and fully optimized.”

6. Is it relatively inexpensive to swap out?

It’s inevitable that one day you might want to change the look of your site or even rebrand entirely. This could mean changing your site’s theme and design. Looking ahead to the future, you don’t want this to cost you a fortune.

All things considered, the Genesis framework, StudioPress child themes, and Beaver Builder are pretty inexpensive. A single StudioPress child theme (including the framework) will cost you from $50 — $150. However, if you want to prepare for every eventuality, you can purchase ALL the StudioPress child themes, the Genesis framework and the exclusive StudioPress plugins for a one-off payment of $499.95 on the Pro Plus package.

Beaver Builder has three tiered plans, but you only really need the standard plan. This is $99 for the first year and then $60 to renew the plan every year after.

So, all things considered, having these two tools to build and design your site will cost only a fraction of what hiring a professional web designer would. And if you ever want to change the theme or the design, you don’t need to rely on (or pay) someone else to do this. You can do it yourself and create the site that you envisioned.

7. Will the theme slow down your site?

Speed is really important. How many times have you left a site because it was taking a frustratingly long time to load? If your site is slower than your competitors, chances are, potential customers will go to your competition. People want information at their fingertips in seconds.

Some themes are really code heavy and will slow your site down. But not the StudioPress child themes. StudioPress says, “Nothing slows down a site like bloated code, but we obsess about making Genesis cleaner and more lightweight. Web page load times are usually discussed in seconds, but page load times for sites built on Genesis can often be measured and discussed in milliseconds. And today, that’s an essential difference.”

In Conclusion

There’s obviously a market for professional web developers and designers.

But professional designers and developer can charge a pretty penny, and if you want to roll up your sleeves and learn some light tech, designing your own website is a great place to start.

We LOVE the results we’ve achieved for our websites and others using this combination of the solid framework foundation of StudioPress themes and the Beaver Builder plugin to make sites distinctive.

What have you tried?

Scroll to Top