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
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
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
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.
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.
Learn more about HubSpot by following me on LinkedIn or YouTube
✅ Did my answer solve your issue? Help the community by marking it as the solution.