CMS Development

JThyrestam
Membro

Insert paddings in email

resolver

Hi, I would like to insert three patterns and still be able to write on top of the text in a drag and drop email. Is there anyone that have a solution on how I can create this? I tried to insert a rich text module and then insert the pattern but I was only able to insert it in the large module not a several rich text modules next to each others.

 

Skärmavbild 2021-09-20 kl. 15.13.44.pngSkärmavbild 2021-09-20 kl. 15.18.13.png

0 Avaliação positiva
1 Solução aceita
Anton
Solução
Especialista reconhecido(a) | Parceiro Diamante
Especialista reconhecido(a) | Parceiro Diamante

Insert paddings in email

resolver

Hi @JThyrestam

as @dennisedson mentioned: Great(and most likely the only) opportunity for creating a custom email module. 🙂 

 

Before you start: Keep in mind, that most email clients have problems with background stylings and SVGs. Also: You'll need to write the module in tables.

 

Something like this should work: 

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr> {% for item in module.column %}
              <td background="{{ item.background_image.src }}" bgcolor="{{ item.fallback_background_color.color }}" valign="middle"> 
                <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:33%;">
  <v:fill type="tile" src="{{item.background_image.src }}" color="{{ item.fallback_background_color.color }}" />
  <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
  <![endif]--> 
                {# start the content of the single column #}
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tbody>
                    <tr>
                      <td>{{item.content}}</td>
                    </tr>
                  </tbody>
                </table>
                {# end the content of the single column #} 
                <!--[if gte mso 9]>
  </v:textbox>
  </v:rect>
  <![endif]--> 
              </td>
              {% endfor %}
              {# the repeater for a single column #} </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

 

Haven't tested it yet but technically it should work

 

 

best, 

Anton

Anton Bujanowski Signature

Exibir solução no post original

8 Respostas 8
jonchim
Orientador(a) | Parceiro Diamante
Orientador(a) | Parceiro Diamante

Insert paddings in email

resolver

😂lol oh yes @dennisedson 






Jon Chim
VP of Design & Development
Hypha HubSpot Development


check Did my post help answer your query? Help the Community by marking it as a solution
0 Avaliação positiva
jonchim
Orientador(a) | Parceiro Diamante
Orientador(a) | Parceiro Diamante

Insert paddings in email

resolver

can't compte with @Anton too fast






Jon Chim
VP of Design & Development
Hypha HubSpot Development


check Did my post help answer your query? Help the Community by marking it as a solution
dennisedson
Equipe de Produto da HubSpot
Equipe de Produto da HubSpot

Insert paddings in email

resolver

You think he cheated, @jonchim ?  I should look into if he should be disqualified.  That @Anton is a shifty character 👀

dennisedson
Equipe de Produto da HubSpot
Equipe de Produto da HubSpot

Insert paddings in email

resolver

@JThyrestam 👋

This seems like an excellent opportunity for creating a custom module!

@Anton , @albertsg , @jonchim  any of you willing to take on the challenge of helping here?

 

 

Anton
Solução
Especialista reconhecido(a) | Parceiro Diamante
Especialista reconhecido(a) | Parceiro Diamante

Insert paddings in email

resolver

Hi @JThyrestam

as @dennisedson mentioned: Great(and most likely the only) opportunity for creating a custom email module. 🙂 

 

Before you start: Keep in mind, that most email clients have problems with background stylings and SVGs. Also: You'll need to write the module in tables.

 

Something like this should work: 

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr> {% for item in module.column %}
              <td background="{{ item.background_image.src }}" bgcolor="{{ item.fallback_background_color.color }}" valign="middle"> 
                <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:33%;">
  <v:fill type="tile" src="{{item.background_image.src }}" color="{{ item.fallback_background_color.color }}" />
  <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
  <![endif]--> 
                {# start the content of the single column #}
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tbody>
                    <tr>
                      <td>{{item.content}}</td>
                    </tr>
                  </tbody>
                </table>
                {# end the content of the single column #} 
                <!--[if gte mso 9]>
  </v:textbox>
  </v:rect>
  <![endif]--> 
              </td>
              {% endfor %}
              {# the repeater for a single column #} </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

 

Haven't tested it yet but technically it should work

 

 

best, 

Anton

Anton Bujanowski Signature
dennisedson
Equipe de Produto da HubSpot
Equipe de Produto da HubSpot

Insert paddings in email

resolver

@Anton ,I totally missed the part about this being for an email 🙄.  

Removed my bonus points from my post 😉

 

0 Avaliação positiva
Anton
Especialista reconhecido(a) | Parceiro Diamante
Especialista reconhecido(a) | Parceiro Diamante

Insert paddings in email

resolver

But I want some bonus points 😁

Anton Bujanowski Signature
dennisedson
Equipe de Produto da HubSpot
Equipe de Produto da HubSpot

Insert paddings in email

resolver

Keep an eye on your mailbox over the next few weeks 😉