How to build custom code template
SOLVE
2 Accepted solutions
How to build custom code template
SOLVEHi @MHussain8
If you're new to creating templates in HubSpot, I recommend starting with the HubSpot theme boilerplate and definitely checking out the resources available in the developer blog and HubSpot Academy (there are two certifications for CMS developers).
If my reply answered your question please mark it as a solution to make it easier for others to find.
How to build custom code template
SOLVEHi @MHussain8,
building a theme - especially with beautiful UI(it's always up to your preferences) can take up an enourmous amount of time. There are companies that are working for several months/years upon one theme, always optimizing it to the newest standards and user-requirements.
Developing a custom theme can be a great but pricy invest since custom themes can start from 4-5k(depending on the developer and requirements, timeline and briefings).
But this doesn't mean that you can't do it yourself. As @Jnix284 mentioned, HubSpot provides the "theme boilerplate" which gives you a good basis for a custom theme.
But if you really want to do everything by yourself here's my streamlined approach of developing custom themes:
- get all requirements from the client
- let them approve those (double check to minimize the potential scope-creep)
- get all design assets(logo, colors, fonts, icons, everything you need for the design/UI ... )
- create a design in Figma or Adobe XD (while designing think of repetative elements like headlines, cards, images, buttons... so you'll have a consistent design-language while coding)
- get the approval on the design
- start with the bare minimum of a theme fields.json: colors, font settings, buttons, forms, spacings
- create a theme.css file with all those variables and dependend classes
- create custom modules like cards, button, headline-text combos... whatever you need to have in the theme
- drop the custom modules in the templates
- debug
- optimize
- debug
- get approval from client
- get paid
since you want to have it for yourself you can skip the many steps but I highly recommend you to start by designing the theme first since moving pixels is always easier and faster than moving code 🙂
If you want to save time and money - check out the theme marketplace. There are a ton of ready-to-use themes (free & paid) available. Once you've created a child-theme of a downloaded/purchased theme you can customize it to your needs.
hope this helps
best,
Anton
How to build custom code template
SOLVEHi @MHussain8,
building a theme - especially with beautiful UI(it's always up to your preferences) can take up an enourmous amount of time. There are companies that are working for several months/years upon one theme, always optimizing it to the newest standards and user-requirements.
Developing a custom theme can be a great but pricy invest since custom themes can start from 4-5k(depending on the developer and requirements, timeline and briefings).
But this doesn't mean that you can't do it yourself. As @Jnix284 mentioned, HubSpot provides the "theme boilerplate" which gives you a good basis for a custom theme.
But if you really want to do everything by yourself here's my streamlined approach of developing custom themes:
- get all requirements from the client
- let them approve those (double check to minimize the potential scope-creep)
- get all design assets(logo, colors, fonts, icons, everything you need for the design/UI ... )
- create a design in Figma or Adobe XD (while designing think of repetative elements like headlines, cards, images, buttons... so you'll have a consistent design-language while coding)
- get the approval on the design
- start with the bare minimum of a theme fields.json: colors, font settings, buttons, forms, spacings
- create a theme.css file with all those variables and dependend classes
- create custom modules like cards, button, headline-text combos... whatever you need to have in the theme
- drop the custom modules in the templates
- debug
- optimize
- debug
- get approval from client
- get paid
since you want to have it for yourself you can skip the many steps but I highly recommend you to start by designing the theme first since moving pixels is always easier and faster than moving code 🙂
If you want to save time and money - check out the theme marketplace. There are a ton of ready-to-use themes (free & paid) available. Once you've created a child-theme of a downloaded/purchased theme you can customize it to your needs.
hope this helps
best,
Anton
How to build custom code template
SOLVEHi @MHussain8
If you're new to creating templates in HubSpot, I recommend starting with the HubSpot theme boilerplate and definitely checking out the resources available in the developer blog and HubSpot Academy (there are two certifications for CMS developers).
If my reply answered your question please mark it as a solution to make it easier for others to find.
