How to build custom code template

MHussain8 — Sat, 09 Dec 2023 17:31:43 GMT

How to build custom code template with beautiful UI design. If you have ha souce code of any template, please send me.

Re: How to build custom code template

Jnix284 — Sat, 09 Dec 2023 22:45:06 GMT

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).

Re: How to build custom code template

Anton — Tue, 12 Dec 2023 22:10:13 GMT

Hi @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

topic Re: How to build custom code template in CMS Development

How to build custom code template

Re: How to build custom code template

Re: How to build custom code template