CSS email

JThyrestam
Member

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.png

0 Upvotes
3 Replies 3
Teun
Guide | Diamond Partner
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.
Did my answer solve your issue? Help the community by marking it as the solution.
webdew
Top Contributor | Diamond Partner

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.

0 Upvotes
Anton
Key Advisor | Diamond Partner

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




check
Did my post help answer your query? Help the Community by marking it as a solution