Originally Posted On: PSD to WordPress Conversion using a Base Theme and a Page Builder (seahawkmedia.com)

 

I want to share with the world how we are changing the game by making PSD to WordPress mainstream leveraging a base theme with the top page builders. We build thousands of custom PSD to WordPress websites every year and overtime have refined the absolute best process for this at scale. We are also proud we continue to employ the best designers throughout Europe to deliver to notch designs at scale. We believe every brand deserves a website that is entirely unique to their brand. Here are the 5 primary options in which we can get Custom UI Designs converted to a WordPress site seamlessly:

1. PSD to Elementor
2. PSD to Divi
3. PSD to Beaver Builder
4. PSD to Gutenberg
5. Converting PSD directly to WordPress theme using Underscores or a similar lightweight theme for creating static templates and using ACF for content from backend.

Having a background in HTML and CSS or prior WordPress experience is required to achieving pixel perfect results. Otherwise there will be limitations with a page builder and no custom code. Below I will cover the standard process for this that can apply to all 5 methods.

What is a Base Theme

According to WordPress.org, a WordPress Theme is a collection of files that work together to produce a graphical interface with an underlying unified design for a website. These files are called template files. A Theme modifies the way the site is displayed, without modifying the underlying software. At Seahawk, we leverage a base theme for all builds we do. Some of the themes we use are:

• Hello by Elementor
• Divi Theme
• Beaver Theme
• Default WordPress Theme
• Underscores
• Custom Theme

All of the above themes mentioned are some of the most popular on the market today! We use these themes because they are well known, lightweight, less clunky, and most of our customers are familiar with them so it is easy for clients to tweak on their own when the website is handed off. The themes also have native page builders that pair very well.

What is a Page Builder

A page builder is a plugin or component of a theme that lets you structure and design pages with minimal effort and time. There are reusable templates and blocks that can be used to generate sections fast. Many of you may already be familiar with the HTML modules in the editor of a page builder.

Process for Custom PSD to WordPress Conversion

Now before I touch on Seahawk’s method for PSD to WordPress Conversion using a Base Theme and a Page Builder, I touch on how people have been doing the PSD to WordPress process for years.

Process: PSD to HTML to WordPress

This most common process is to convert your designs into HTML and then you create a WordPress theme with and use plugins like Advance Custom Fields to create fields in the backend for admins to fill in content that populates in the frontend of the site. There is absolutely nothing wrong with this method! In fact, it’s really beneficial if you have a large project with strict performance requirements, super custom website, big budget, and have talented frontend and WordPress developers in your corner.

PSD to WordPress Conversion using a Base Theme and a Page Builder

The latest and greatest method is what we have established at Seahawk: Converting a Custom Design to WordPress using a Base Theme and a Page Builder. It can be used even if you don’t know how to code, but always best to have a coder in your corner or have knowledge HTML. If you can’t code you will have to be a critical thinker. For developers, this process can accelerate your development speed and save you time 

Process: PSD to WordPress (Direct)

In this method, instead of converting the designs to HTML first you will build the website using a really awesome base theme and a WordPress page builder plugin! I know it may sound crazy and I can understand… This is not the typical method that has been used throughout WordPress history and may seem like a shortcut. I have been in the game for a long time and seen all kinds of themes and builders with awful code, bad designs, etc. The industry has come a long way since the evolution of page builders and companies like Elementor pushing the fold. 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, it has never been easier to build custom WordPress websites leveraging a base theme, a page builder, and some basic HTML/CSS knowledge!

What are the benefits of doing it this way?

1. It is cost effective. The development time decreases considerably using this method as you don’t have to code everything from scratch. You just need a solid frontend developer who knows WordPress.
2. Exceptional code to start your project. The best themes and page builders provide an exceptional starting point to save developers time.
3. Easy to make tweaks to the website. Unlike having everything custom, you have full control over how the website looks and can easily edit the pages and move things around without hassle – using the page builder.

Which theme and page builder to use?

We have done extensive research on what themes and page builders to use. It was important for us to choose the right duo so we can not only build world class websites for our customers, but make the process super efficient. We also strive to make our price points affordable for brands of all sizes as we believe every business deserves a custom site that is truly unique to their brand.After our audits of the top themes and page builders, here’s what we finally ended up choosing:

1. Hello Theme by Elementor: It’s one of the fastest and most customizable themes on the market. Hello Theme is lightweight and allows us to get super custom and also makes things easy for our customers.
2. Elementor Pro Page Builder: There are plenty of excellent page builders out there, but we choose Elementor because it’s not only most compatible with Hello Theme, but it’s very easy to use for our team and when we hand off sites to customers. They can easily make tweaks on their own and there are tons of prebuilt modules that can be leverages to create more sections.

Elementor gives us the power to design, develop, and launch any kind of website with the best process. We use this theme and plugin duo for most of the projects we do now a days with great success. Customers are fully delighted by the websites we build and we are also platform agnostic so can work with most of the WordPress themes and builders too.

Easy Steps to Convert PSD to WordPress

So to start you will need licenses to the following tools:

• Elementor Page Builder: We can use the native modules and custom code to achieve limitless designs within the builder.
• Hello Theme by Elementor (Free): Clean code and a minimal base design, which we can leverage for quality, pixel perfect development identical to the approved custom design.

Here is the brief process outline I have scoped out for Custom Photoshop Design (PSD) to Elementor WordPress:

1. Design Beautiful Homepage Mockup by a professional UI designer (using design brief). Revisions are not done in a live environment because we work in Figma, Photoshop, XD, or Sketch for quick revisions and limitless professional design to execute on the customer vision.
2. Create staging site once design direction and homepage approved for development.
3. Install Hello Theme by Elementor and the Elementor Page Builder plugin then assign your license key.
4. Header and Footer Build according to approved designusing Elementor global header and footer.
5. Page Builder Global Settings Using Approved Design Direction to implement global design settings. Set padding, margins, colors, etc to keep everything super consistent! We recommend to create a Stylepage to keep the brand consistent first!
6. Convert Approved Homepage Mockup Design to WordPress Using Elementor identical to approved design. Some designs contain aspects that you can’t achieve using the page builder so custom code may need to be implemented in some areas using HMTL/CSS modules.
7. Build Subpages once homepage is done, the subpages will follow suit.
8. Launch using extensive Seahawk WordPress Website Launch Checklist.

I can’t share all of our secrets, but hope this helps 

Benefits to our method

• Enhance design quality of work with limitless custom design
• Better experience for the customer with revisions flexibility and peace of mind knowing it’s done by professional, experienced UI designer – designs truly unique to your brand
• You can still easily make tweaks to website in most areas of the builder once project handed off to customer

Conclusion

If you’re not an advanced developer, this is your best bet to create a custom site on your own. With HTML/CSS skills you can certainly get it done flawlessly. I recommend choosing your go-to base theme and page builder as they are easy to learn and you will crush it! If you are a developer, then you will understand most of what I have outlined and can build a process that works for you.If you’re not a DIY kind of person, you can connect with us for our service we can help you convert your designs to WordPress website at revolutionary pricing! I hope you enjoyed the article! Leave your comment below to share your thoughts!