Solved

How to create a "callout" (text with colored background box) in the email editor?

divinetomedy

Hi,

I’m trying to create a typical “callout” block within the drag-and-drop email editor. (This is what Mailchimp calls the boxed text content block.)

Basically it has a different color background and ideally allows rounded corners, perfect for callouts like, “Don’t forget, the conference is just two weeks away” or “Your credit card is going to expire soon - update it here” or whatever.

Anyone know how to implement this with Customer.IO using the drag-and-drop editor? I tried a column approach, using 3 columns with the middle column having a separate background color (and turning off stacking on mobile), but a) that doesn’t support rounded corners, and b) it feels a little clunky, like it’s not supposed to be used this way.

Thanks!
TOM

icon

Best answer by Felix 5 May 2023, 11:02

View original

6 replies

R
Userlevel 2

Hi TOM,

Hope you’re doing well today! I’m not a Mailchimp user, so I’m not sure exactly how the boxed text feature works there, however this is what I was able to create in our drag-and-drop editor:

 

 

As you can tell, I’m not a designer 😅 but hopefully this is close to what you’re looking for. I created this with a row and a paragraph placed within it. I edited the row settings to give the content area a background colour, rounded corners, a border and a little bit of padding.

If you wanted this type of callout to be smaller, you could definitely use your option of rows with multiple columns.

Is this how you would set this up or are you looking for something different? Would love to hear your thoughts and see a screenshot of what you’ve worked on!

Thanks,

Ryan

divinetomedy

Ryan - that’s awesome, thanks! I actually don’t think it will work for my purposes - see below - but in any case I really appreciate you helping.

Our email template puts the main content on white, with a gray background (so, a vertical scrolling white container on gray). For that reason, I need to make the row background color GRAY and the row content color WHITE. But for the callout, I need an additional colored box on top of the white (I guess this would sorta be a third layer).

Here’s what I’m aiming for:

 

I got decently close using the column approach, but couldn’t get the rounded corners, nor could I control the exact width of the box (would prefer it to match the text padding):

 

Does that make sense? Thanks again!

TOM

Felix
Userlevel 4

Hey Tom,

as I see it with the editor you can sepcify margins (only padding), which you would need (I think) to get same space left and right to make Ryan’s solution work. What you can try:

  1. Export the email as HTML, work on the part yourself outside the editor and reimport it by pasting the HTML code into an HTML block
  2. Use another tool like Stripo to create the block or even Mailchimp and export the HTML from there (make sure you have the CSS inlined!) and import it by pasting the HTML code into an HTML block

Make sure to doublecheck if the box is shown correctly in the inboxes, though.

 

Felix

More questions? Shoot me a message by clicking on my name. We are a certified customer.io agency. Happy to help!
divinetomedy

Felix - great ideas, thank you! I will try both of those suggestions.

R

Hi @divinetomedy just curious if you ever found a solution that worked well for you? I’m trying to do a callout that looks exactly like your rounded corner example above (rounded color box, with white row content, with gray background color) - and I’m struggling. So just thought I’d check. Thanks!

divinetomedy

Hey @rachaelromeo no, didn’t get anything working beyond what I showed in the screenshots. I think the HTML option is the best bet, that Felix mentioned. Sorry couldn’t help more!

Reply


Terms & ConditionsCookie settings
Product
Resources
Industry
Company

Privacy PolicyTerms of ServiceStatus© Peaberry Software, Inc.