CMS Development

shoeglue
Participant

Custom CSS in Drag & Drop editor

SOLVE

 

I'm looking for a way to have the ability to create borders around a particular group of modules when crafting a drag & drop email.

For my newsletter emails, sometimes I'll have 2 stories I want to share, sometimes its 5, but I want to be able to have the story, a CTA, and then the social share options in each "bubble" (or whatever you want to call it). Then, be able to add as many of these "bubbles" as I want in relevance to how many stories I want to share in that week's newsletter.

I can't for the life of me figure out how to do this. Creating a module in a standard email template doesn't work because I can't add additional modules to the email after the template is live, and I can't edit the CSS of drag & drop style emails in Hubspot.

 

(basically, I want to be able to copy this style/format/layout: https://www.morningbrew.com/daily/issues/2021/01/18)

{border-radius: 10px; border: 2px solid #888888; padding: 20px; box-shadow: 5px 10px 18px #888888;}

0 Upvotes
1 Accepted solution
amwilie
Solution
Key Advisor | Elite Partner
Key Advisor | Elite Partner

Custom CSS in Drag & Drop editor

SOLVE

@shoeglue 


Yea, as @dennisedson said, a repeater in a custom module is what you would want for a standard email template. What I've done before is create a custom module with a select dropdown for Section Type that dictates what content to show and how to lay it out. The whole content group is a repeater so the user can add however many sections they want.

 

repeatersection-01.pngrepeatersection-02.pngrepeatersection-03.png

 

For Drag and Drop you can just create custom modules for each of the different sections and style them how you want. If you want to add that border when putting the custom module into the email just add the background and border within the module itself then set the section around it in the email to have 0 padding and the same background color as the email background. Inline styling would be best but you can also add style blocks into the module (Hubspot will throw a warning when creating the email but it doesn't stop you from saving or sending the email).

 

Hope this helps.

 

If this answer solved your question, please mark it as the solution!

border

Alyssa Wilie

Web Developer at LyntonWeb

Kickstart your success on HubSpot's CMS with a theme by the HubSpot experts at Lynton


View solution in original post

2 Replies 2
amwilie
Solution
Key Advisor | Elite Partner
Key Advisor | Elite Partner

Custom CSS in Drag & Drop editor

SOLVE

@shoeglue 


Yea, as @dennisedson said, a repeater in a custom module is what you would want for a standard email template. What I've done before is create a custom module with a select dropdown for Section Type that dictates what content to show and how to lay it out. The whole content group is a repeater so the user can add however many sections they want.

 

repeatersection-01.pngrepeatersection-02.pngrepeatersection-03.png

 

For Drag and Drop you can just create custom modules for each of the different sections and style them how you want. If you want to add that border when putting the custom module into the email just add the background and border within the module itself then set the section around it in the email to have 0 padding and the same background color as the email background. Inline styling would be best but you can also add style blocks into the module (Hubspot will throw a warning when creating the email but it doesn't stop you from saving or sending the email).

 

Hope this helps.

 

If this answer solved your question, please mark it as the solution!

border

Alyssa Wilie

Web Developer at LyntonWeb

Kickstart your success on HubSpot's CMS with a theme by the HubSpot experts at Lynton


dennisedson
Community Manager
Community Manager

Custom CSS in Drag & Drop editor

SOLVE

Hello @shoeglue

I believe you are looking for the repeater group

@amwilie is a wiz with email so want to get her eyes on this just in case I am wrong 😀

Thanks,

Dennis




HubSpot Community Developer ShowMake sure to subscribe to our YouTube channel
where you can find the HubSpot Community Developer Show
0 Upvotes