Bei unserer Vorlage Nr. 2 ("Striped") haben Header und Footer der E-Mail einen farbigen Hintergund, der Body einen weißen Hintergrund. Das Logo ist mittig im Header und linksbündig im Footer platziert. 

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:12px;} td { line-height:20px; font-size:12px;} 
      .footer-text a {color:#fff !important; text-decoration:none; font-weight:100; font-size:12px;} 
      .footer-text p {text-align: right;} 
      .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;} 
      @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;} }
    </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="#2e3f4f" padding="0" border-radius="5px 5px 0 0">
        <mj-column>
          <mj-image width="250px" align="center" src="https://bilendo.s3.amazonaws.com/uploads/0240b0f3-6c1a-4167-ab38-44c976dbab94/logo/b7951af0-391a-4e42-ac0f-32b491f9b5e0/thumb_Skynet-SAP-1.png"></mj-image>
        </mj-column>
      </mj-section>
      <!-- Section Nr 2: Header für Mobile -->
      <mj-section css-class="header-mobile" background-color="#2e3f4f" padding="0">
        <mj-column>
          <mj-image width="250px" align="center" src="https://bilendo.s3.amazonaws.com/uploads/0240b0f3-6c1a-4167-ab38-44c976dbab94/logo/b7951af0-391a-4e42-ac0f-32b491f9b5e0/thumb_Skynet-SAP-1.png"></mj-image>
        </mj-column>
      </mj-section>
      <!-- Section Nr 3 -->
      <mj-section padding="0" background-color="#fff">
        <mj-column>
          <mj-text css-class="body-text">
            <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="#2e3f4f" border-radius="0 0 5px 5px" padding="0">
        <mj-column>
          <mj-image width="200px" align="left" src="https://bilendo.s3.amazonaws.com/uploads/0240b0f3-6c1a-4167-ab38-44c976dbab94/logo/b7951af0-391a-4e42-ac0f-32b491f9b5e0/thumb_Skynet-SAP-1.png">
          </mj-image>
        </mj-column>
        <mj-column>
          <mj-text css-class="footer-text" line-height="0.8" color="#fff">
            <p>
              <br><a href="https://www.bilendo.de" target="_blank">www.bilendo.de</a></br>
              <br><a href="mailto:enterprise@bilendo.de" target="_blank">enterprise@bilendo.de</a></br>
            </p>
          </mj-text>
        </mj-column>
      </mj-section>
      <!-- Section Nr 5: Footer für Mobile -->
      <mj-section css-class="footer-mobile" padding="0">
        <mj-column background-color="#2e3f4f" padding="0" padding-bottom="20px">
          <mj-text css-class="footer-text-mobile" align="center" line-height="10px">
            <h3>Enterprise Dummy BSP AG</h3>
            <p>Musterstraße 1</p>
            <p>12345 Munich</p>
            <p>Deutschland</p>
            <p>+49 89 244132100</p>
            <a href="https://www.bilendo.de" target="_blank">www.bilendo.de</a>
            <br></br>
            <a href="mailto:enterprise@bilendo.de" target="_blank">enterprise@bilendo.de</a>
          </mj-text>
        </mj-column>
      </mj-section>
    </mj-wrapper>
    <!-- Section Nr 6 -->
    <mj-section css-class="adresse" padding="0">
      <mj-column>
        <mj-text css-class="adresse-text" font-family="Helvetica, sans-serif, sans-serif" font-size="10px" align="center">
          <p><b>Enterprise Dummy BSP AG</b> · Musterstraße 1 · 12345 Munich · Deutschland · +49 89 244132100
          </p>
        </mj-text>
      </mj-column>
    </mj-section>
  </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:12px;} td { line-height:20px; font-size:12px;} 
          .footer-text a {color:#fff !important; text-decoration:none; font-weight:100; font-size:12px;} 
          .footer-text p {text-align: right;} 
          .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;} 
          @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:#2e3f4f;background-color:#2e3f4f;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:#2e3f4f;background-color:#2e3f4f;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:250px;">
																																			<img height="auto" src="https://bilendo.s3.amazonaws.com/uploads/0240b0f3-6c1a-4167-ab38-44c976dbab94/logo/b7951af0-391a-4e42-ac0f-32b491f9b5e0/thumb_Skynet-SAP-1.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="250">
																																			</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:#2e3f4f;background-color:#2e3f4f;margin:0px auto;max-width:600px;">
																					<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#2e3f4f;background-color:#2e3f4f;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:250px;">
																																				<img height="auto" src="https://bilendo.s3.amazonaws.com/uploads/0240b0f3-6c1a-4167-ab38-44c976dbab94/logo/b7951af0-391a-4e42-ac0f-32b491f9b5e0/thumb_Skynet-SAP-1.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="250">
																																				</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;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:#2e3f4f;background-color:#2e3f4f;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:#2e3f4f;background-color:#2e3f4f;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: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;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://bilendo.s3.amazonaws.com/uploads/0240b0f3-6c1a-4167-ab38-44c976dbab94/logo/b7951af0-391a-4e42-ac0f-32b491f9b5e0/thumb_Skynet-SAP-1.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>
																													<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" 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:0.8;text-align:left;color:#ffffff;">
																																			<p>
																																				<br>
																																					<a href="https://www.bilendo.de" target="_blank">www.bilendo.de</a>
																																					<br>
																																						<br>
																																							<a href="mailto:enterprise@bilendo.de" target="_blank">enterprise@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>
																						</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: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" width="100%">
																																				<tbody>
																																					<tr>
																																						<td style="background-color:#2e3f4f;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>Enterprise Dummy BSP AG</h3>
																																											<p>Musterstraße 1</p>
																																											<p>12345 Munich</p>
																																											<p>Deutschland</p>
																																											<p>+49 89 244132100</p>
																																											<a href="https://www.bilendo.de" target="_blank">www.bilendo.de</a>
																																											<br>
																																												<br>
																																													<a href="mailto:enterprise@bilendo.de" target="_blank">enterprise@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>
																															<b>Enterprise Dummy BSP AG</b> · Musterstraße 1 · 12345 Munich · Deutschland · +49 89 244132100
																														</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/Sy_B1wA7w

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

 

Änderung des Logos: 

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

Wiederholen Sie den Prozess für Zeile 79, um auch das Logo im Footer zu ändern. 

Die Breite des Logos lässt sich anpassen, indem Sie in Zeile 48 und/oder 79 bei width="Pixelanzahl" Ihre gewünschte Pixelanzahl eingeben.  

Logo Anpassungen



Individueller E-Mail-Content:

In Zeile 69 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 Sie auf der Suche nach Formulierungshilfen Ihrer Mahnschreiben sind, können Sie die Texte aus unserem Blogartikel "Kunde oder Zahlung im Fokus? Fertige B2B-Mahntexte perfekt für Ihre Situation" übernehmen.

 

Bilendo E-Mail anpassungen

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 30

  • Header Desktop: Zeile 45

  • Header Mobile: Zeile 55

  • Text/Inhalt/Body: Zeile 66

  • Footer Desktop: Zeile 77

  • Footer Mobile: Zeile 99

 

Textfarbe: 

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

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

  • Footer-Text Mobile: Zeile 16 bis 18 (CSS)

  • Adresse: Zeile 19