CMS Development

JThyrestam
Member

CSS email

SOLVE

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
1 Accepted solution
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

CSS email

SOLVE

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

Anton Bujanowski Signature

View solution in original post

3 Replies 3
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

CSS email

SOLVE

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

Anton Bujanowski Signature
webdew
Guide | Diamond Partner
Guide | Diamond Partner

CSS email

SOLVE

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
Teun
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

CSS email

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