So you have PSD designs with you and you want to convert it to a nice and clean looking WordPress website?
This article would help you do just that in the easiest and quickest way I know.
You see, I’ve been a WordPress developer since 2012 and run a WordPress agency called Fantastech Solutions. Since mid-2018 we niched down our services to work exclusively on Design to WordPress projects.
We work on a ton of PSD to WordPress project every week, so what I’m going to share here is a short version of how we do it in-house for our clients.
The Old Way of PSD to WordPress Conversion
Now before jump into the new way, I want to talk about how people have been doing PSD to WordPress development for over a decade now.
It’s this: PSD > HTML > WordPress
In this you basically convert your designs into HTML files and then you make a WordPress theme out of it and use plugins like Advance Custom Fields to create fields in the backend for the admin to fill in their details that show up in the fronted.
Now nothing bad with this and it’s probably the best way to do it if your project is big, you have big budget and have really good front end and WordPress developers with you.
But for 90% of website projects, I think it’s a bit overkill as it’s susceptible to a lot of downfalls and issues.
Some of them are…
- It increases project cost. The development time increases because multiple steps and multiple developers are required to build the website (frontend developer for HTML and WordPress developer for theme)
- It’s prone to bugs and code issues. As the website is built from scratch, there’s a greater chance for the code to go wrong and have bugs in it.
- Website is difficult to manage. When a website is built this way, everything is hardcoded into the theme template and a non-coder user can’t modify the page without knowing how to code even if all they want to do is a tiny change.
- It locks you in with your developer. Now every time you need to make a change you have to go to your developer and they make more money from new.
Again, it’s not a bad way to do it if you have a big project, a good budget and have exceptionally good developers, but for most cases you should not go that route.
There’s another more efficient and cost-effective way of doing it.
The New Way of PSD to WordPress Conversion
Now the new way is pretty easy and quick and it can be used even if you don’t know how to code.
If you’re a developer this way can accelerate your development speed and taking up more projects and still working less.
It’s this: PSD > WordPress
So how it works is, instead of converting the designs to HTML file first, you skip that middle step and build the website directly using a really good base theme and a page builder plugin.
Now some of you might have rolled your eyes after reading this and I can understand what you feel.
I’ve been in the industry for long enough and seen pretty much all kinds of themes and page builders out there. I know it can be extremely messy with horrible code and bad UX, to say the least.
But we’ve come a long way.
WordPress is now more than 15 years old and the themes and page builders have matured to become really robust and we are in a way better position than ever before to use them.
Today, you can build more than 90% of the usual websites, just using a core theme, a page builder and basic coding knowledge.
What are the benefits of doing it this way?
- It keeps the project cost low. The development time decreases considerably as you don’t have to code from scratch and just one developer can build the whole thing on him/her own.
- Exceptional code out of the box. As the website is built using a theme and page builder that has been around for years and used by thousands of people it becomes rock solid in base.
- Easy to manage website. Unlike the old way, you have full control over how the website look and can easily edit the pages and move things around without hassle.
- No more recurring developer changes. As you have full control over the website layout, you don’t need to pay your developer to make small changes on the website which saves you a ton of time.
Which theme and page builder to use?
When we were thinking of niching down our WordPress services around mid-2018 to become an exclusive Design to WordPress agency, we did a full 1-month of thorough research to find the best suitable theme and page builder plugin that we could use for such projects.
Now it was very important for us to choose the right combination so that we can not only build world class websites for our clients on a code level but also make the development extremely fast and cheap for our clients.
After going through dozens of popular themes and page builders, here’s what we finally choose:
- Astra Theme: It’s the fastest and one of the most flexible theme we found in the market. There were a lot of other good ones but we personally loved it. It’s very bare bones and does not bloated code that helps us build pretty much any kind of website.
- Beaver Builder page builder: There are a lot of pretty good page builders out there like Elementor and Divi builder, but we chose this because it’s very clean and gets out of the way when you’re building a page. Also it’s highly extensible so everything we need to build a specific kind of module that’s not present in it by default we build it.
Both of them come with Free and Paid versions. But the paid versions are where things get interesting and that’s what give us the power to build and deploy websites fast.
Easy Steps to Convert PSD to WordPress
Below I’ve written the steps to build site using Astra Pro and Beaver Builder. If you want you can any other theme and page builder combination, that’s totally fine. The following steps will still be relevant.
1. Install Astra theme and Beaver Builder plugin on your site.
2. Install Astra Pro plugin and enable the module you want to use on your website.
3. Start with customizer and set all the global settings like page layout, typography, colors, logo and everything else. Go through each tab and make sure we’ve setup everything perfectly.
4. Configure the Beaver Builder settings according to your designs.
5. Start with making the header. Use customizer to make the header if it’s simple. If it’s complex use Custom Layouts in Astra Pro to create one using Beaver Builder.
6. Then build the footer. Follow the same procedure as above.
7. Then build the homepage. Create various components of the page using the different modules in Beaver Builder. You’ll be able to create pretty much any kind of structure using the columns and modules in Beaver Builder.
But please note that you might get stuck if the designs are not straightforward. You may need to use your development skills to build a new module or if you’re not a developer, this is when you might have to think of hiring someone to build it for you.
8. And then build the inner pages. One by one, build all the internal pages.
If you’re a developer, then this should give you a good base to learn the theme and page builder of your choice to it’s full extent and then using it build websites quickly. When code is needed, as it will be in most cases, use your development skills to create a new module, a new plugin, custom post types and the other WordPress stuff.
If you’re not a developer and have PSD designs with you, I’d still suggest you take a day or two out and try to learn how to use the theme and page builder mentioned above. You’ll be surprised to see how much you can actually build yourself.
But if you’re not a DIY kind of person, you can connect with us for our done for your PSD to WordPress service.
I hope you enjoyed the article!