Custom Email Module - Drag and Drop

SOLVE
atiq97
Participant

Hey Community, Hope you all are doing good. 

 

I am new to hubspot and want to create a custom editable email module. Layout is attached. Can I achieve it? ( I am expereinced in HTML + CSS ) However I want it to be easily editable by my client. 

 

I've watched several videos on youtube, and searched old posts but I am still confused. 

 

I'll be highly thankful, if someone can help me, or give me a direction regarding hubspot. 

 

Regards 

 

Layout: icons.png

0 Upvotes
3 Accepted solutions

Accepted Solutions
miljkovicmisa
Solution
Top Contributor | Gold Partner

Hello @atiq97 an thanks for writing in the forum about your issue.

The reality is that emails are a painful experience even for seasoned developers 😛
The thing is that css is pretty limited and inlined, layout is based on tables and generally behaves very differently accross email clients.
HubSpot has provided us with the email template in the design manager so I would recommend going through the below steps to create the email layout and inside it define the various components you'd like your client to change. I've made some screenshots and will be posting some explanations. I'm not going through the details of css styling of all the things as you are probably confident writing css. In any case, should you need more assistance don't hesitate to ask for some more help.

1. From the design tools you go to File > New File > Drag and drop > Select Email from the dropdown and give it a name like in the screenshot.

miljkovicmisa_1-1627149011980.png

 

2. Then you and your client are going to be able to use the drag and drop area to design and manage the content of the email. In the screenshot I have used the components from the right side panel to create the layout you are after (without css). Just to showcase you how would that composition look like.

miljkovicmisa_2-1627149176373.png

 

Finally when you create the email choose the template you created from the custom templates panel and you and your client are going to be able to easily edit the template content like in the screenshot below:

miljkovicmisa_3-1627149383687.png

 

 

That's all the steps to creating a custom email template with drag and drop that is both easy to design and manage.

 

Below I am linking to various steps that are documented.
1. creating drag and drop templates.

2. creating email templates (even hubspot promotes the use of drag and drop as you can see in the first paragraph).

3. creating emails with drag and drop. (This is an alternate way to achieve what I explained).

 

Hope I helped put you in some direction regarding your request, If my answer was any helpfult please mark it as a solution to help the community!

View solution in original post

miljkovicmisa
Solution
Top Contributor | Gold Partner

You can check the row you want to add background color to with the developer tools of your browser and inspect the element so you can see its id or class name, then in the design tools in hubspot where you created the email template you can add some markup in the head of the template.
I changed the background color of the entire table that contains the body of the email in the below screenshot. Notice I'm using !important rule to override the default background color, you can use this for any other element you find with the inspector (the default colors for the email can be changed in the email settings menu LINK HERE. This is probably what you need, if you change the body color you will have the effect you want). Also notice that if you go to any module/element you will have the ability to add additional custom css for each one (my second screenshot).

mail-template.jpg

 

Screenshot 2:

email-css.jpg

View solution in original post

0 Upvotes
miljkovicmisa
Solution
Top Contributor | Gold Partner

Exellent question! 

It actually forced me to look into something I hadn't thought of!
You can actually duplicate the button module from the @hubspot folder, the steps are the following:
1. In the design tools and in the @hubspot folder locate the `button.module` module right click on it and select `clone module`.

miljkovicmisa_0-1627378599058.png

 

2. a tab opens on the right with the module elements, you only need to click on the "Page, Blog post, Blog listing" link in the upper right of the module window like in the screenshot:

module.png

 

3. a popup opens and you can select the module to be available in email as well, check the mark besides "Emails"!

miljkovicmisa_1-1627378894983.png

 

4. after that dont't forget to click in the upper right corner of the window the "Publish changes" button.

module.png


Now you will have the button module available in your template on the right panel!

module.png

 

DONE!

 

I'm glad I helped you, maybe you should consider marking multiple answers as solutions 😛 !



 

 

View solution in original post

12 Replies 12
atiq97
Participant

Currently I am readying this KB, 

https://developers.hubspot.com/docs/cms/building-blocks/modules/files

 

and still confused, where to start. 

 

I've made module like this , Is this a right approach?

Screenshot at Jul 24 20-35-28.png

0 Upvotes
miljkovicmisa
Solution
Top Contributor | Gold Partner

Hello @atiq97 an thanks for writing in the forum about your issue.

The reality is that emails are a painful experience even for seasoned developers 😛
The thing is that css is pretty limited and inlined, layout is based on tables and generally behaves very differently accross email clients.
HubSpot has provided us with the email template in the design manager so I would recommend going through the below steps to create the email layout and inside it define the various components you'd like your client to change. I've made some screenshots and will be posting some explanations. I'm not going through the details of css styling of all the things as you are probably confident writing css. In any case, should you need more assistance don't hesitate to ask for some more help.

1. From the design tools you go to File > New File > Drag and drop > Select Email from the dropdown and give it a name like in the screenshot.

miljkovicmisa_1-1627149011980.png

 

2. Then you and your client are going to be able to use the drag and drop area to design and manage the content of the email. In the screenshot I have used the components from the right side panel to create the layout you are after (without css). Just to showcase you how would that composition look like.

miljkovicmisa_2-1627149176373.png

 

Finally when you create the email choose the template you created from the custom templates panel and you and your client are going to be able to easily edit the template content like in the screenshot below:

miljkovicmisa_3-1627149383687.png

 

 

That's all the steps to creating a custom email template with drag and drop that is both easy to design and manage.

 

Below I am linking to various steps that are documented.
1. creating drag and drop templates.

2. creating email templates (even hubspot promotes the use of drag and drop as you can see in the first paragraph).

3. creating emails with drag and drop. (This is an alternate way to achieve what I explained).

 

Hope I helped put you in some direction regarding your request, If my answer was any helpfult please mark it as a solution to help the community!

View solution in original post

atiq97
Participant

Thanks alot for your guidance and time. I tried to do it. Here's a one problem I am facing. 

 

How to add background color to complete row? I tried background to column but that's still leaving some white area. 

 

Screenshot at Jul 25 06-07-16.png

miljkovicmisa
Solution
Top Contributor | Gold Partner

You can check the row you want to add background color to with the developer tools of your browser and inspect the element so you can see its id or class name, then in the design tools in hubspot where you created the email template you can add some markup in the head of the template.
I changed the background color of the entire table that contains the body of the email in the below screenshot. Notice I'm using !important rule to override the default background color, you can use this for any other element you find with the inspector (the default colors for the email can be changed in the email settings menu LINK HERE. This is probably what you need, if you change the body color you will have the effect you want). Also notice that if you go to any module/element you will have the ability to add additional custom css for each one (my second screenshot).

mail-template.jpg

 

Screenshot 2:

email-css.jpg

View solution in original post

0 Upvotes
atiq97
Participant

Thankyou so much for all help. Wants to know last thing.

 

I need to make a simple button. How I do that? 

 

I can make a href in heading field but that's not a professional approach. Can you guide me please in this regard? Thanks alot again. 

0 Upvotes
miljkovicmisa
Top Contributor | Gold Partner

Hello! I'm glad I helped, regarding the button, in my opinion the best practice would be a cta. Hubspot offers great functionality for call to action buttons and you can find all the info you need here.
In my first screenshot you can see that the last element in the module group is a cta, you can find it in the right panel under the "add" tab.
In the link I shared here you can see also how to style the cta, you have two options. 1. add a custom class on the cta and style it in the head of the html like I showed you for the background previously. 2. just add custom css directly on the cta when you create it in the panel. You will probably have to play around a little bit but it is fairly easy to style ctas.
In the screen below on number two you can select "Link (No Style)" so you can edit completly the cta, otherwise you can play around with the settings to get your result.

miljkovicmisa_0-1627303053584.png

 

Again in the link you will find all you need to create a cta.


Notice: The cta panel you see in the link I shared is located in the editor of the email. So you just add the cta in the drag and drop and then in your email you will be able to add the cta link, etc...

If I was helpful don't forget to mark my answer as solution so others can find easily the information!

0 Upvotes
atiq97
Participant

Thankyou very much. I looked details in CTA, However It requires alot of editing. Can we add our button? Where client can just add link in a field on right side? Rather then clicking on edit button and then go through a new process?

 

Thans so much again. 

0 Upvotes
miljkovicmisa
Top Contributor | Gold Partner

For this matter you shoud be able to use this default module. It is a button that is supported in emails but I wasn't able to find it anywhere in the "add" section of the modules and it's not in the root folder of @hubspot either. ( @dennisedson is it possible that the documentation page is outdated? ).

Your best chance would be to add a rich text area and inside it use the html editor to add custom html with your button, but it's not going to be easy for content editors to change it, your client will probably have to mess with html.

0 Upvotes
dennisedson
Community Manager

@miljkovicmisa , you are missing a link to that default module 😬.  Mind adding and I will look into it!

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
miljkovicmisa
Top Contributor | Gold Partner

@dennisedson Ooopsie! here it is (i also updated it in the answer)

0 Upvotes
atiq97
Participant

You're helping alot. Last question. 

 

How can I create my own heading / or button module? 

0 Upvotes
miljkovicmisa
Solution
Top Contributor | Gold Partner

Exellent question! 

It actually forced me to look into something I hadn't thought of!
You can actually duplicate the button module from the @hubspot folder, the steps are the following:
1. In the design tools and in the @hubspot folder locate the `button.module` module right click on it and select `clone module`.

miljkovicmisa_0-1627378599058.png

 

2. a tab opens on the right with the module elements, you only need to click on the "Page, Blog post, Blog listing" link in the upper right of the module window like in the screenshot:

module.png

 

3. a popup opens and you can select the module to be available in email as well, check the mark besides "Emails"!

miljkovicmisa_1-1627378894983.png

 

4. after that dont't forget to click in the upper right corner of the window the "Publish changes" button.

module.png


Now you will have the button module available in your template on the right panel!

module.png

 

DONE!

 

I'm glad I helped you, maybe you should consider marking multiple answers as solutions 😛 !



 

 

View solution in original post