The power of PSD to HubSpot design can make a big difference for your business.
Every template or web page should be built out from a wireframe, no matter what platform or software you are using. This provides you with an organized idea when it comes time to build it out.
However, switching to Photoshop for your HubSpot template design work could be a big game-changer for your company’s efficiency and productivity. It won’t even feel like a major change, especially if you are already working with the program for other tasks.
Using PSDs to Build Your Design in HubSpot
It’s likely that your marketing or in-house team is already using Photoshop to create designs and deliverables for your clients. If so, you can use Photoshop to design HubSpot pages and templates.
You can easily design your website or page in Photoshop and use the PSD file to build that template in HubSpot. This allows you to easily visualize what the template will look like and how it should be set up in Design Manager.
Whether you are building the template yourself or hiring a HubSpot developer to take care of it for you, it’s still a good idea to design your pages this way.
How to Slide PSDs Into HubSpot
Save the header, background image, and footer as separate files and make sure you choose “save for the web” when you are exporting.
Next, go into HubSpot Design Manager and create a new template with the Template Builder. Once you’ve set up and named your new template, you can begin to use the modules. Start with removing the ones you don’t need, and then begin to add the pieces of your design, starting with the header file.
Images and files can be added into text modules, where you are able to insert images. Make sure you name your modules accordingly so you can easily find what you are looking for if it comes time to edit. Custom styling can also be added through CSS within each module.
When uploading your files, you can use the source code to change the design and image sizing to suit your desired layout.
If you still aren’t sure, watch our video tutorial for more information.
Sending Your PSD to Your HubSpot Developer
PSDs are a convenient way to show your HubSpot Developer what you’re looking for in your template design. It will give them the exact idea of what you want, and provide them with a guide that they can replicate through the HubSpot COS code.
Not sure how it works? Talk to your developer and they will walk you through the process, providing you with a clear and concise idea of what you need to do.
