Unsere Vorlage Nr. 1 ("Clean") ist relativ schlicht gehalten. Header und Body der E-Mail haben einen weißen Hintergrund. Das Logo ist mittig im Header und linksbündig im Footer platziert. Nur der Footer hat einen farbigen Hintergrund.

Diese kurze Filmsequenz veranschaulicht die (responsive) Darstellung dieser Mahnung per Email.

 

MJML Code

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

 

 

HTML Code

<!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%; }
              .mj-column-per-50 { width:50% !important; max-width: 50%; }
      }
      </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: #999; line-height: 0px;} 
          .adresse-text a {color: #999; line-height: 35px; text-decoration: none; } 
              @media (max-width: 500px) {
                  .footer-text p {text-align: center;} .adresse p {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;">&nbsp;</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:#ffffff;background-color:#ffffff;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:#ffffff;background-color:#ffffff;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;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:75px;">
																																<img height="auto" src="https://ci5.googleusercontent.com/proxy/rkQ53oyCUGkCO_gSwq7DKrhDLrjQ-Czq9e2_wE3-mV-FK_iExfXwOo2SjpvPR2YsPHJN03okoQFd8l37X_VsKi5YrSc3QQugOn5fx8wT3BM=s0-d-e1-ft#https://app.bilendo.de/static/v1/bilendo_logo_stacked_new.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="75">
																																</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:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;">
																		<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;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:75px;">
																																	<img height="auto" src="https://ci5.googleusercontent.com/proxy/rkQ53oyCUGkCO_gSwq7DKrhDLrjQ-Czq9e2_wE3-mV-FK_iExfXwOo2SjpvPR2YsPHJN03okoQFd8l37X_VsKi5YrSc3QQugOn5fx8wT3BM=s0-d-e1-ft#https://app.bilendo.de/static/v1/bilendo_logo_stacked_new.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="75">
																																	</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="" width="600px" >
															<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="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;">
																			<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;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:#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:0px;text-align:center;">
																							<!--[if mso | IE]>
																							<table role="presentation" border="0" cellpadding="0" cellspacing="0">
																								<tr>
																									<td class="" style="vertical-align:top;width:300px;" >
																										<![endif]-->
																										<div class="mj-column-per-50 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:10px 25px;padding-top:20px;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:110px;">
																																		<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="110">
																																		</td>
																																	</tr>
																																</tbody>
																															</table>
																														</td>
																													</tr>
																												</table>
																											</div>
																											<!--[if mso | IE]>
																										</td>
																										<td class="" style="vertical-align:top;width:300px;" >
																											<![endif]-->
																											<div class="mj-column-per-50 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="footer-text-desktop" style="font-size:0px;padding:10px 25px;padding-top:10px;word-break:break-word;">
																															<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:0.8;text-align:left;color:#ffffff;">
																																<p>Risiken absichern.</p>
																																<p>Skalierbar wachsen.</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 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" 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>
													</table>
													<![endif]-->
												</td>
											</tr>
										</tbody>
									</table>
								</div>
								<!--[if mso | IE]>
							</td>
						</tr>
					</table>
					<![endif]-->
					<!-- Section Nr 6 -->
					<!--[if mso | IE]>
					<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="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 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:10px;line-height:1;text-align:center;color:#000000;">
																					<p>Bilendo GmbH · Sendlinger Straße 27 · D-80331 München
																						<br>
																							<a href="https://www.bilendo.de" target="_blank">www.bilendo.de</a>
																							<br>
																							</p>
																						</div>
																					</td>
																				</tr>
																			</table>
																		</div>
																		<!--[if mso | IE]>
																	</td>
																</tr>
															</table>
															<![endif]-->
														</td>
													</tr>
												</tbody>
											</table>
										</div>
										<!--[if mso | IE]>
									</td>
								</tr>
							</table>
							<![endif]-->
						</div>
					</body>
</html>

 

 

Erläuterung zur Konfiguration des Templates

Link zu MJML: https://mjml.io/try-it-live/BynTO0jXD 

Der einfachste Weg zur Konfiguration ist die Anpassung des MJML-Codes. 

 

Änderung des Logos: 

In Zeile 45 können Sie den Link bei src="Link" mit Ihrer gewünschten Bildadresse ersetzen. Beispielsweise kopieren Sie die Bildadresse Ihres Logos von Ihrer Website.

Um das Logo im Footer zu ändern, wiederholen Sie den Prozess für Zeile 76. 

Um die Breite Ihres Logos anzupassen, können Sie in Zeile 45 und/oder 76 bei width="Pixelanzahl" Ihre gewünschte Pixelanzahl eingeben. Vergessen Sie nicht der Zahl die Endung "px" (Beispiel: 12 px) anzuhängen. 

Bilendo Email Logo anpassungen

 

Individueller E-Mail-Content:

In Zeile 66 finden Sie den Platzhalter [EMAIL_CONTENT]. Ersetzen Sie den Platzhalter mit Ihrem E-Mail-Text. 

Die Gestaltung des Texts (Font-Größe, Farbe, Zeilenabstand etc.) können Sie mit einfachem CSS in Zeile 10 verändern.

Falls es Ihnen schwerfällt, Ihr Mahnschreiben zu formulieren, können Sie die Texte aus unserem Artikel "Kunde oder Zahlung im Fokus? Fertige B2B-Mahntexte perfekt für Ihre Situation" übernehmen.



Bilendo E-Mail anpassungen - clean template

Ersetzen Sie den Platzhalter mit Ihrem E-Mail-Text

 

Farben verändern:

Ersetzen Sie dazu bei color="#Farbcode" bzw. color: #Farbcode; den aktuellen Farbcode in den entsprechenden Zeilen.

Hintergrundfarbe: 

  • Global: Zeile 27

  • Header Desktop: Zeile 42

  • Header Mobile: Zeile 52

  • Text/Inhalt/Body: Zeile 63

  • Footer Desktop: Zeile 74

  • Footer Mobile: Zeile 94

Textfarbe: 

  • [EMAIL_CONTENT]: Zeile 10 (CSS Code = color: #Farbcode;)

  • Footer-Text Desktop: Zeile 11 und 12 (CSS)

  • Footer-Text Mobile: Zeile 14 und 15 (CSS)

  • Adresse: Zeile 17 und 18