CSS email

Develop, Build & Integrate CMS Development
1

Hi, Does anyone have an idéa on how I can create this in email drag and drop module? I want to have a white backround and the picture and text on top like this picture

Skärmavbild 2021-09-20 kl. 16.41.28.jpg
Skärmavbild 2021-09-20 kl. 16.41.28.jpg715×849 132 KB

2

You should create a custom module for this element. You can add a option to select if the image should be aligned on the left or right side.
If you need help with the code, let me know.

3

Hi @JThyrestam ,
You can develop the custom module or you can use the default module also. one is rich text and the second is the image module. and from the backend, you can easily change the positions.
Reference:- Create and edit modules in the design manager
Email template markup - HubSpot docs

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regard.

4

Hi @JThyrestam,

the “best” way to achieve this is with a custom module BUT keep in mind that most email clients won’t support those kind of overlays or display them properly since you’ll need to write email modules in tables(for best possible support)

Here’s a simple - but great - way to start

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse">
 <tbody>
 <tr>
 <td>
		 <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse">
 <tbody>
 <tr>
 {% if module.image_position == "left"%}
		{# start left column #}
		<td>
		<img src="" width="" height="" class="" style="">
		</td>{# end left column #}
 {# start right column #}<td bgcolor="" style="background-color:#;padding-left:20px;padding-right:20px;padding-top:20px;padding-bottom:20px;">{{ module.content }}</td>{# end right column #}
		{% else %}
		{# start left column #}<td bgcolor="" style="background-color:#;padding-left:20px;padding-right:20px;padding-top:20px;padding-bottom:20px;">{{ module.content }}</td>{# end left column #}
 {# start right column #}
		<td>
		<img src="" width="" height="" class="" style="">
		</td>
		{# end right column #}
		{% endif %}
 </tr>
 </tbody>
</table>
</td>
 </tr>
 </tbody>
</table>

You’ll need:

  • A choice option(“image position”) with “left” and “right” as values
  • Image element (“image”)
  • Content element (can be a text or rich-text;“content”)

Like mentioned this is just a small starting point which you’ll can expand to your needs

best,

Anton