CSS email

[JThyrestam]

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 

[Anton · Accepted solution]

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

[webdew]

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:- https://knowledge.hubspot.com/design-manager/create-and-edit-modules
https://developers.hubspot.com/docs/cms/building-blocks/templates/email-template-markup

Hope this helps!

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

Thanks and Regard.

[Teun]

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.