Artikel Inhalt
17. November 2020 Florian Kappert
Mahnwesen für Buchhalter 11 Min.
Die Vorlage Nr. 3 ("Branded") verdeutlicht, wie gut sich die Vorlagen an das Corporate Design Ihres Unternehmens anpassen lassen. Die Wahl der Farben und Grafiken spiegelt das Corporate Design von Bilendo wider.
Diese kurze Filmsequenz veranschaulicht die (responsive) Darstellung dieser Mahnung per Email.
<mjml>
<mj-head>
<mj-style>
.wrapper-shadow {box-shadow: -5px 0px 10px -10px #ccc, 5px 0px 10px -10px #ccc, 0px 5px 10px -5px #ccc, 0px -5px 10px -10px #ccc; }
.body-text p {line-height:20px; font-size:13px;} td { line-height:20px; font-size:12px; }
.footer-text-desktop a {color:#fff !important; text-decoration:none; font-weight:100; font- size:12px; }
.footer-text-desktop p {text-align: right; font-weight:700; }
.footer-text-mobile h3 {color:#fff; font-size: 14px; padding-top: 15px; padding-bottom:5px;} .footer-text-mobile p {text-align:center; color:#fff; font-family:Helvetica, sans-serif !important; font-size:12px;font-weight:100; }
.footer-text-mobile a {color:#fff; font-weight:100 !important; font-size:12px; line-height:10px ; }
.adresse-text p {color: #fff; line-height: 10px; letter-spacing: 0.2px; font-size: 12px;}
.adresse-text a {color: #fff; line-height: 10px; text-decoration: none; letter-spacing: 0.2px; font-size: 12px; }
@media (max-width: 500px) { .footer-text p {text-align: center;} .adresse {display:
none;} .header-desktop {display: none;} .footer-desktop {display: none;} }
@media (min-width: 500px) { .footer-mobile {display: none;} .header-mobile {display: none;} }
</mj-style>
</mj-head>
<mj-body background-color="#E6E6E6">
<mj-section padding="0">
<mj-column>
<mj-spacer>
</mj-spacer>
</mj-column>
</mj-section>
<!-- Hier beginnt der Wrapper -->
<mj-wrapper css-class="wrapper-shadow" padding="0">
<!-- Section Nr 1: Header für Desktop -->
<mj-section css-class="header-desktop" background-color="#151833" padding="0" border-radius="5px 5px 0 0">
<mj-column>
<mj-image width="200px" align="center" padding-top="19px" src="https://ci3.googleusercontent.com/proxy/r3ZfK2CC8YfoNXKjuQg0NMc32lmNeQBdPz_E1LTnah4cxLdgDutPQ21qe9mJen79sloOMUlcNbuxXmTU7fdriihWw2qZMjNrODIpgETCAxQfn7M=s0-d-e1-ft#https://app.bilendo.de/static/v1/bilendo_logo_horizontal_new.png"></mj-image>
</mj-column>
</mj-section>
<!-- Section Nr 2: Header für Mobile -->
<mj-section css-class="header-mobile" background-color="#151833" padding="0">
<mj-column>
<mj-image width="150px" align="center" src="https://ci3.googleusercontent.com/proxy/r3ZfK2CC8YfoNXKjuQg0NMc32lmNeQBdPz_E1LTnah4cxLdgDutPQ21qe9mJen79sloOMUlcNbuxXmTU7fdriihWw2qZMjNrODIpgETCAxQfn7M=s0-d-e1-ft#https://app.bilendo.de/static/v1/bilendo_logo_horizontal_new.png"></mj-image>
</mj-column>
</mj-section>
<!-- Section Nr 3 -->
<mj-section padding="0" css-class="body" background-color="#f5f8fc">
<mj-column>
<mj-text css-class="body-text" padding-top="20px">
<p>[EMAIL_CONTENT]
</p>
</mj-text>
</mj-column>
</mj-section>
<!-- Section Nr 4: Footer für Desktop -->
<mj-section css-class="footer-desktop" background-color="#f5f8fc" padding="0px">
<mj-column>
<mj-image padding="0" align="left" src="https://bilendo-marketing.s3.amazonaws.com/media/cms_images/1572/Bildschirmfoto_2020-08-24_um_10.14.35.png">
</mj-image>
</mj-column>
</mj-section>
<!-- Section Nr 5: Footer für Mobile -->
<mj-section css-class="footer-mobile" padding="0px">
<mj-column>
<mj-image padding="0" align="left" src="https://bilendo-marketing.s3.amazonaws.com/media/cms_images/1573/Bildschirmfoto_2020-08-24_um_10.16.51.png">
</mj-image>
</mj-column>
</mj-section>
<mj-section css-class="footer-mobile" padding="0px">
<mj-column background-color="#151833" padding="0" padding-bottom="20px">
<mj-text css-class="footer-text-mobile" align="center" line-height="10px">
<h3>Bilendo GmbH</h3>
<p>Sendlinger Straße 27</p>
<p>D-80331 München</p>
<a href="https://www.bilendo.de" target="_blank">www.bilendo.de</a>
</mj-text>
</mj-column>
</mj-section>
<!-- Section Nr 6 -->
<mj-section css-class="adresse" padding="0" background-color="#151833" border-radius="0 0 5px 5px">
<mj-column>
<mj-text css-class="adresse-text" font-family="Helvetica, sans-serif, sans-serif" align="center">
<p>
Bilendo GmbH · Sendlinger Straße 27 · D-80331 München ·
<a href="https://www.bilendo.de" target="_blank">www.bilendo.de</a>
</p>
</mj-text>
</mj-column>
</mj-section>
</mj-wrapper>
</mj-body>
</mjml>
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title></title><!--[if !mso]><!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style type="text/css">
#outlook a { padding:0; }
body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }
table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }
img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }
p { display:block;margin:13px 0; }</style><!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]--><!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]--><!--[if !mso]><!--><link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
<style type="text/css">@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);</style><!--<![endif]-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-100 { width:100% !important; max-width: 100%; }
}
</style>
<style type="text/css">
@media only screen and (max-width:480px) {
table.mj-full-width-mobile { width: 100% !important; }
td.mj-full-width-mobile { width: auto !important; }
}
</style>
<style type="text/css">
.wrapper-shadow {box-shadow: -5px 0px 10px -10px #ccc, 5px 0px 10px -10px #ccc, 0px 5px 10px -5px #ccc, 0px -5px 10px -10px #ccc; }
.body-text p {line-height:20px; font-size:13px;} td { line-height:20px; font-size:12px; }
.footer-text-desktop a {color:#fff !important; text-decoration:none; font-weight:100; font- size:12px; }
.footer-text-desktop p {text-align: right; font-weight:700; }
.footer-text-mobile h3 {color:#fff; font-size: 14px; padding-top: 15px; padding-bottom:5px;} .footer-text-mobile p {text-align:center; color:#fff; font-family:Helvetica, sans-serif !important; font-size:12px;font-weight:100; }
.footer-text-mobile a {color:#fff; font-weight:100 !important; font-size:12px; line-height:10px ; }
.adresse-text p {color: #fff; line-height: 10px; letter-spacing: 0.2px; font-size: 12px;}
.adresse-text a {color: #fff; line-height: 10px; text-decoration: none; letter-spacing: 0.2px; font-size: 12px; }
@media (max-width: 500px) {
.footer-text p {text-align: center;} .adresse {display: none;} .header-desktop {display: none;} .footer-desktop {display: none;}
}
@media (min-width: 500px) {
.footer-mobile {display: none;} .header-mobile {display: none;}
}
</style>
</head>
<body style="background-color:#E6E6E6;">
<div style="background-color:#E6E6E6;">
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" >
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="" style="vertical-align:top;width:600px;" >
<![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td style="font-size:0px;word-break:break-word;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20" style="vertical-align:top;height:20px;">
<![endif]-->
<div style="height:20px;"> </div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
<!-- Hier beginnt der Wrapper -->
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper-shadow-outlook" style="width:600px;" width="600" >
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div class="wrapper-shadow" style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<![endif]-->
<!-- Section Nr 1: Header für Desktop -->
<!--[if mso | IE]>
<tr>
<td class="header-desktop-outlook" width="600px" >
<table align="center" border="0" cellpadding="0" cellspacing="0" class="header-desktop-outlook" style="width:600px;" width="600" >
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div class="header-desktop" style="background:#151833;background-color:#151833;margin:0px auto;border-radius:5px 5px 0 0;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#151833;background-color:#151833;width:100%;border-radius:5px 5px 0 0;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="" style="vertical-align:top;width:600px;" >
<![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="center" style="font-size:0px;padding:10px 25px;padding-top:19px;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td style="width:200px;">
<img height="auto" src="https://ci3.googleusercontent.com/proxy/r3ZfK2CC8YfoNXKjuQg0NMc32lmNeQBdPz_E1LTnah4cxLdgDutPQ21qe9mJen79sloOMUlcNbuxXmTU7fdriihWw2qZMjNrODIpgETCAxQfn7M=s0-d-e1-ft#https://app.bilendo.de/static/v1/bilendo_logo_horizontal_new.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="200">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
</td>
</tr>
<![endif]-->
<!-- Section Nr 2: Header für Mobile -->
<!--[if mso | IE]>
<tr>
<td class="header-mobile-outlook" width="600px" >
<table align="center" border="0" cellpadding="0" cellspacing="0" class="header-mobile-outlook" style="width:600px;" width="600" >
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div class="header-mobile" style="background:#151833;background-color:#151833;margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#151833;background-color:#151833;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="" style="vertical-align:top;width:600px;" >
<![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td style="width:150px;">
<img height="auto" src="https://ci3.googleusercontent.com/proxy/r3ZfK2CC8YfoNXKjuQg0NMc32lmNeQBdPz_E1LTnah4cxLdgDutPQ21qe9mJen79sloOMUlcNbuxXmTU7fdriihWw2qZMjNrODIpgETCAxQfn7M=s0-d-e1-ft#https://app.bilendo.de/static/v1/bilendo_logo_horizontal_new.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="150">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
</td>
</tr>
<![endif]-->
<!-- Section Nr 3 -->
<!--[if mso | IE]>
<tr>
<td class="body-outlook" width="600px" >
<table align="center" border="0" cellpadding="0" cellspacing="0" class="body-outlook" style="width:600px;" width="600" >
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div class="body" style="background:#f5f8fc;background-color:#f5f8fc;margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#f5f8fc;background-color:#f5f8fc;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="" style="vertical-align:top;width:600px;" >
<![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="left" class="body-text" style="font-size:0px;padding:10px 25px;padding-top:20px;word-break:break-word;">
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">
<p>[EMAIL_CONTENT]</p>
</div>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
</td>
</tr>
<![endif]-->
<!-- Section Nr 4: Footer für Desktop -->
<!--[if mso | IE]>
<tr>
<td class="footer-desktop-outlook" width="600px" >
<table align="center" border="0" cellpadding="0" cellspacing="0" class="footer-desktop-outlook" style="width:600px;" width="600" >
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div class="footer-desktop" style="background:#f5f8fc;background-color:#f5f8fc;margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#f5f8fc;background-color:#f5f8fc;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0px;text-align:center;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="" style="vertical-align:top;width:600px;" >
<![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="left" style="font-size:0px;padding:0;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td style="width:600px;">
<img height="auto" src="https://bilendo-marketing.s3.amazonaws.com/media/cms_images/1572/Bildschirmfoto_2020-08-24_um_10.14.35.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="600">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
</td>
</tr>
<![endif]-->
<!-- Section Nr 5: Footer für Mobile -->
<!--[if mso | IE]>
<tr>
<td class="footer-mobile-outlook" width="600px" >
<table align="center" border="0" cellpadding="0" cellspacing="0" class="footer-mobile-outlook" style="width:600px;" width="600" >
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div class="footer-mobile" style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0px;text-align:center;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="" style="vertical-align:top;width:600px;" >
<![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="left" style="font-size:0px;padding:0;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td style="width:600px;">
<img height="auto" src="https://bilendo-marketing.s3.amazonaws.com/media/cms_images/1573/Bildschirmfoto_2020-08-24_um_10.16.51.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="600">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="footer-mobile-outlook" width="600px" >
<table align="center" border="0" cellpadding="0" cellspacing="0" class="footer-mobile-outlook" style="width:600px;" width="600" >
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div class="footer-mobile" style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0px;text-align:center;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="" style="vertical-align:top;width:600px;" >
<![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="background-color:#151833;vertical-align:top;padding:0;padding-bottom:20px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td align="center" class="footer-text-mobile" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:10px;text-align:center;color:#000000;">
<h3>Bilendo GmbH</h3>
<p>Sendlinger Straße 27</p>
<p>D-80331 München</p>
<a href="https://www.bilendo.de" target="_blank">www.bilendo.de</a>
</div>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
</td>
</tr>
<![endif]-->
<!-- Section Nr 6 -->
<!--[if mso | IE]>
<tr>
<td class="adresse-outlook" width="600px" >
<table align="center" border="0" cellpadding="0" cellspacing="0" class="adresse-outlook" style="width:600px;" width="600" >
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div class="adresse" style="background:#151833;background-color:#151833;margin:0px auto;border-radius:0 0 5px 5px;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#151833;background-color:#151833;width:100%;border-radius:0 0 5px 5px;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="" style="vertical-align:top;width:600px;" >
<![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="center" class="adresse-text" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Helvetica, sans-serif, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">
<p>Bilendo GmbH · Sendlinger Straße 27 · D-80331 München ·
<a href="https://www.bilendo.de" target="_blank">www.bilendo.de</a>
</p>
</div>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</div>
</body>
</html>
Link zu MJML: https://mjml.io/try-it-live/rJZHdComP
Eine direkte Anpassung im MJML-Code ist der einfachste Weg zur Konfiguration.
Änderung der Grafiken:
Zur Änderung des Logos ersetzen Sie in Zeile 49 den Link bei src="Link" mit der von Ihnen gewünschten Bildadresse. Beispielsweise kopieren Sie die Bildadresse Ihres Logos von Ihrer Website.
Um das Logo in der mobilen Version Ihrer E-Mail anzupassen, wiederholen Sie den Prozess für Zeile 59.
Die Breite Ihrer Logos passen Sie an, indem Sie in Zeile 49 und/oder 59 bei width="Pixelanzahl" Ihre gewünschte Pixelanzahl eingeben.
Bei der zusätzlichen Grafik über dem Footer können Sie wieder so vorgehen, wie es oben zur Änderung des Logos beschrieben wurde. In Zeile 81 können Sie die Grafik in der Desktop-Version ändern oder löschen. Für die Mobile-Version wiederholen Sie den Prozess entsprechend für Zeile 92.
Individueller E-Mail-Content:
In Zeile 70 finden Sie wieder den Platzhalter [EMAIL_CONTENT], den Sie mit Ihrem E-Mail-Text ersetzen sollten.
Die Gestaltung des Texts (Font-Größe, Farbe, Zeilenabstand etc.) können Sie mit einfachem CSS in Zeile 10 anpassen.
Falls es Ihnen schwerfällt, Ihr Mahnschreiben zu formulieren, können Sie die Texte aus unserem Blogartikel "Kunde oder Zahlung im Fokus? Fertige B2B-Mahntexte perfekt für Ihre Situation" übernehmen.
Ihr individueller Text eingefügt in unsere Vorlage
Farben verändern:
Ersetzen Sie dazu bei color="#Farbcode" bzw. color: #Farbcode; den aktuellen Farbcode in den entsprechenden Zeilen.
Hintergrundfarbe:
Global: Zeile 29
Header Desktop: Zeile 46
Header Mobile: Zeile 56
Text/Inhalt/Body: Zeile 67
Footer Desktop: Zeile 125
Footer Mobile: Zeile 102
Textfarbe:
[EMAIL_CONTENT]: Zeile 10 (CSS Code = color: #Farbcode;)
Footer-Text Desktop: Zeile 12 und 13 (CSS)
Footer-Text Mobile: Zeile 15 und 16 (CSS)
Adresse (Footer-Text für Desktop): Zeile 18 und 19
Verwandte Inhalte
KOSTENFREIER GUIDE
✓ Wie Sie an den entscheidenden Stellschrauben drehen und Ihre Zahlen verbessern.
