Insert paddings in email

JThyrestam
Member

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 Upvotes
8 Replies 8
dennisedson
Community Manager

@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?

 

 

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
Anton
Key Advisor | Diamond Partner

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




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



dennisedson
Community Manager

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

Removed my bonus points from my post 😉

 

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
Anton
Key Advisor | Diamond Partner

But I want some bonus points 😁




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



dennisedson
Community Manager

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

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
jonchim
Guide | Diamond Partner

can't compte with @Anton too fast






Jon Chim
Design Director
Morey Creative Studios


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

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

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
jonchim
Guide | Diamond Partner

😂lol oh yes @dennisedson 






Jon Chim
Design Director
Morey Creative Studios


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