Text and CTA over Background Image

Occasional Contributor

Ok. I am trying to add a rich text field over an image in a drag and drop email. I have looked in the community and tried everything I can find and nothing seems to work. I am not very savvy at CSS and HTML but I can figure some things out. The less code explanation I can get the better. Please someone help me!

Reply
0 Upvotes
3 Replies 3
Regular Contributor

Hi @kleblanc,

 

I am not sure that's possible at the moment. As far as I understand, you can't access the templates for drag and drop emails, and by default I would expect the module to go abovee or below the image. 

 

Reply
0 Upvotes
New Contributor

Hi @kleblanc 

 

I think I may have found a way to do this:

 

Drag and drop a box from the layout section

Before putting any other content into this section click on it to open the Layout settings box. 

Click on 'select a pattern' 

Under 'custom image' click on 'select on a pattern'

You can then insert an image of your choice

Click on stretch

You can then drag and drop any of the content buttons on top of your layout box

 

I hope this works for you

 

Cheers


Zoe 

Esteemed Advisor | Partner

Hi @kleblanc ,

 

you can add a background image to the container holding your rich text module, in the template. 

 

Click on the wrapper (you can do this directly on the rich text module as well) and you will find a custom inline css text field in the right side tool bar.

 

In the css field for the wrapper, you can enter something like:

background: url(url_for_image.png) center center no-repeat; background-size: cover;

replace the placeholder url for the image, above, with the image url for the image you want to use. 

 

If it needs to be editable, you can also use a hubl tag in place of a hard coded url. You can use the image src tag  where the url goes, like this:

background: url({% image_src 'executve_image_src' src='placeholder_img_url.jpg', no_wrapper=True %}) center center no-repeat; background-size: cover;

I would call this the "old school" method for setting an editable background image in a Hubspot drag-and-drop template, but it works as well as it always has. If you go the hubl route, you will find an image module that will allow you to change the image, in the email editor. 

 

backround imag support in email clients is pretty good across the board, from what I have seen.

 

Let me know if this helps.

 

Need help? Hire Us Here