Example of using MailTheme with MailChimp

Play Video
Integration with MailChimp Templates
To use the modules, you must install Master Template
Lorem ipsum

# Title

<!-- TITLE -->
  <table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
    <tbody>
      <tr>
        <td align="center">
          <table bgcolor="#f5f5f5" class="table600" width="700" cellspacing="0" cellpadding="0" border="0">
            <tbody>
              <tr>
                <td style="font-family: 'arial', sans-serif; font-size: 18px; font-weight: normal; color: #111111; line-height: 23px; padding: 30px 30px 25px;" spellcheck="true" data-medium-editor-element="true" class="medium-editor-element text-center-mobile" role="textbox" aria-multiline="true" data-placeholder="Type your text" align="left">
                  Lorem ipsum
                </td>
              </tr>
              </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
  <!-- END TITLE -->
Icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
Icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
Icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

# Article Right

<!-- ARTICLE RIGHT -->
	<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
    <tbody>
      <tr>
        <td align="center">
          <table bgcolor="#ffffff" class="table600" width="700" cellspacing="0" cellpadding="0" border="0">
            <tbody>
          
              <tr>
                <td style="font-size: 1px; line-height: 20px;" height="20">
                </td>
              </tr>
              
              <tr>
                <td style="padding: 0 30px;">
                  <table class="full-width" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="32" cellspacing="0" cellpadding="0" border="0" align="left">
                    <tr>
                      <td align="center" style="padding-top: 3px;">
                        <img class="" src="http://mailtheme.ru/cdn/files/https-mailer.alpari.com-images-arrow-32x32.png" alt="Icon" width="32" height="32">
                      </td>
                    </tr>
                  </table>
                  
                  <!-- SPACE -->
                  <table class="full-width" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="1" cellspacing="0" cellpadding="0" border="0" align="left">
                    <tr>
                      <td style="font-size: 30px; line-height: 30px;" width="1" height="30">
                      </td>
                    </tr>
                  </table>
                  <!-- END SPACE -->

                  <table class="full-width" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="580" cellspacing="0" cellpadding="0" border="0" align="right">
      
                    <tr>
                      <td style="font-family: 'arial', sans-serif; font-size: 15px; color: #111111; line-height: 20px;" class="medium-editor-element">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
              <tr>
                <td style="font-size: 1px; line-height: 20px;" height="20">
                </td>
              </tr>
              
				    </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table> 
	<!-- END ARTICLE RIGHT -->
  
  <!-- SPACE -->
	<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
    <tbody>
      <tr>
        <td align="center">
          <table class="table600" width="700" cellspacing="0" cellpadding="0" border="0">
            <tbody>
              <tr>
                <td style="font-size: 1px; line-height: 2px;" height="2"> </td>
              </tr>
				    </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
  <!-- END HEADER -->
  
  <!-- ARTICLE RIGHT -->
	<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
    <tbody>
      <tr>
        <td align="center">
          <table bgcolor="#ffffff" class="table600" width="700" cellspacing="0" cellpadding="0" border="0">
            <tbody>
          
              <tr>
                <td style="font-size: 1px; line-height: 20px;" height="20">
                </td>
              </tr>
              
              <tr>
                <td style="padding: 0 30px;">
                  <table class="full-width" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="32" cellspacing="0" cellpadding="0" border="0" align="left">
                    <tr>
                      <td align="center" style="padding-top: 3px;">
                        <img class="" src="http://mailtheme.ru/cdn/files/https-mailer.alpari.com-images-arrow-32x32.png" alt="Icon" width="32" height="32">
                      </td>
                    </tr>
                  </table>
                  
                  <!-- SPACE -->
                  <table class="full-width" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="1" cellspacing="0" cellpadding="0" border="0" align="left">
                    <tr>
                      <td style="font-size: 30px; line-height: 30px;" width="1" height="30">
                      </td>
                    </tr>
                  </table>
                  <!-- END SPACE -->

                  <table class="full-width" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="580" cellspacing="0" cellpadding="0" border="0" align="right">
                    <tr>
                      <td style="font-family: 'arial', sans-serif; font-size: 15px; color: #111111; line-height: 20px;" class="medium-editor-element">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
              <tr>
                <td style="font-size: 1px; line-height: 20px;" height="20">
                </td>
              </tr>
              
				    </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table> 
	<!-- END ARTICLE RIGHT -->
  
  <!-- SPACE -->
	<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
    <tbody>
      <tr>
        <td align="center">
          <table class="table600" width="700" cellspacing="0" cellpadding="0" border="0">
            <tbody>
              <tr>
                <td style="font-size: 1px; line-height: 2px;" height="2"> </td>
              </tr>
				    </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
  <!-- END HEADER -->
  
  <!-- ARTICLE RIGHT -->
	<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
    <tbody>
      <tr>
        <td align="center">
          <table bgcolor="#ffffff" class="table600" width="700" cellspacing="0" cellpadding="0" border="0">
            <tbody>
          
              <tr>
                <td style="font-size: 1px; line-height: 20px;" height="20">
                </td>
              </tr>
              
              <tr>
                <td style="padding: 0 30px;">
                  <table class="full-width" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="32" cellspacing="0" cellpadding="0" border="0" align="left">
                    <tr>
                      <td align="center" style="padding-top: 3px;">
                        <img class="" src="http://mailtheme.ru/cdn/files/https-mailer.alpari.com-images-arrow-32x32.png" alt="Icon" width="32" height="32">
                      </td>
                    </tr>
                  </table>
                  
                  <!-- SPACE -->
                  <table class="full-width" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="1" cellspacing="0" cellpadding="0" border="0" align="left">
                    <tr>
                      <td style="font-size: 30px; line-height: 30px;" width="1" height="30">
                      </td>
                    </tr>
                  </table>
                  <!-- END SPACE -->

                  <table class="full-width" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="580" cellspacing="0" cellpadding="0" border="0" align="right">
                    <tr>
                      <td style="font-family: 'arial', sans-serif; font-size: 15px; color: #111111; line-height: 20px;" class="medium-editor-element">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
              <tr>
                <td style="font-size: 1px; line-height: 20px;" height="20">
                </td>
              </tr>
              
			</tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table> 
	<!-- END ARTICLE RIGHT -->
Icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

# Article Right Icon

загрузка...
Lorem ipsum
dolor sit amet
загрузка...
Lorem ipsum
dolor sit amet

# 2 Block

<!-- 2 BLOCK -->
<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
    <tbody>
      <tr>
        <td align="center">
          <table bgcolor="#ffffff" class="table600" width="700" cellspacing="0" cellpadding="0" border="0">
            <tbody>
              <tr>
                <td style="padding: 0">
                  

                  <table class="full-width border-2" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="50%" cellspacing="0" cellpadding="0" border="0" align="left">
                  <tr>
                <td style="font-size: 1px; line-height: 30px;" height="30"></td>
              </tr>
			  <tr>
                     <td align="center" style="padding-bottom: 15px;">
                        <img class="" src="http://mailtheme.ru/cdn/files/mail-icon-120.png" alt="загрузка..." width="100" height="100">
                      </td>
					</tr>
                    <tr>
                      <td valign="middle" style="font-family: 'arial', sans-serif; font-size: 18px; color: #88b825; text-transform: uppercase; line-height: 23px; font-weight: bold; padding-top: 5px; text-align: center;" class="medium-editor-element">
                       Lorem ipsum
                      </td>
                    </tr>
                    <tr>
                      <td valign="middle" style="font-family: 'arial', sans-serif; font-size: 15px; color: #111111; line-height: 20px; font-weight: normal; padding-top: 5px; text-align: center;" class="medium-editor-element">
                       dolor sit amet
                      </td>
                    </tr>
                    <tr>
                <td style="font-size: 1px; line-height: 30px;" height="30"></td>
              </tr>
                  </table>
                  
                  <table class="full-width" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="50%" cellspacing="0" cellpadding="0" border="0" align="left">
                  <tr>
                <td style="font-size: 1px; line-height: 30px;" height="30"></td>
              </tr>
			  <tr>
                      <td align="center" style="padding-bottom: 15px;">
                        <img class="" src="http://mailtheme.ru/cdn/files/mail-icon-120.png" alt="загрузка..." width="100" height="100">
                      </td>
					</tr>
                    <tr>
                      <td valign="middle" style="font-family: 'arial', sans-serif; font-size: 18px; color: #88b825; text-transform: uppercase; line-height: 23px; font-weight: bold; padding-top: 5px; text-align: center;" class="medium-editor-element">
                       Lorem ipsum
                      </td>
                    </tr>
                    <tr>
                      <td valign="middle" style="font-family: 'arial', sans-serif; font-size: 15px; color: #111111; line-height: 20px; font-weight: normal; padding-top: 5px; text-align: center;" class="medium-editor-element">
                       dolor sit amet
                      </td>
                    </tr>
                    <tr>
                <td style="font-size: 1px; line-height: 30px;" height="30"></td>
              </tr>
                  </table>
                  
                  
                </td>
              </tr>
			  </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
<!-- END 2 BLOCK -->
загрузка...
Lorem ipsum
dolor sit amet
загрузка...
Lorem ipsum
dolor sit amet
загрузка...
Lorem ipsum
dolor sit amet

# 3 Block

<!-- 3 BLOCK -->
	<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
    <tbody>
      <tr>
        <td align="center">
          <table bgcolor="#ffffff" class="table600" width="700" cellspacing="0" cellpadding="0" border="0">
            <tbody>
              <tr>
                <td style="padding: 0">
                  
                  
                  <table class="full-width" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="233" cellspacing="0" cellpadding="0" border="0" align="left">
	                  <tr>
                        <td style="font-size: 1px; line-height: 30px;" height="30"></td>
                    </tr>
                    <tr>
                      <td align="center" style="padding-bottom: 15px;">
                        <img class="" src="http://mailtheme.ru/cdn/files/mail-icon-120.png" alt="загрузка..." width="100" height="100">
                      </td>
                    <tr>
	                  <tr>
	                      <td valign="middle" style="font-family: 'arial', sans-serif; font-size: 18px; color: #88b825; line-height: 23px; font-weight: bold; padding-top: 5px; text-align: center;" class="medium-editor-element">
	                       Lorem ipsum
	                      </td>
	                  </tr>
	                  <tr>
	                    <tr>
	                      <td valign="middle" style="font-family: 'arial', sans-serif; font-size: 15px; color: #111111; line-height: 20px; font-weight: normal; padding-top: 5px; text-align: center;" class="medium-editor-element">
	                       dolor sit amet
	                      </td>
	                    </tr>
                    <tr>
                      <td style="font-size: 1px; line-height: 30px;" height="30"></td>
                    </tr>
                  </table>

                  <table class="full-width border-3" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="233" cellspacing="0" cellpadding="0" border="0" align="left">
	                  <tr>
			                <td style="font-size: 1px; line-height: 30px;" height="30"></td>
			              </tr>
										<tr>
                      <td align="center" style="padding-bottom: 15px;">
                        <img class="" src="http://mailtheme.ru/cdn/files/mail-icon-120.png" alt="загрузка..." width="100" height="100">
                      </td>
										</tr>
                    <tr>
                      <td valign="middle" style="font-family: 'arial', sans-serif; font-size: 18px; color: #88b825; line-height: 23px; font-weight: bold; padding-top: 5px; text-align: center;" class="medium-editor-element">
                       Lorem ipsum
                      </td>
                    </tr>
                    <tr>
                      <td valign="middle" style="font-family: 'arial', sans-serif; font-size: 15px; color: #111111; line-height: 20px; font-weight: normal; padding-top: 5px; text-align: center;" class="medium-editor-element">
                       dolor sit amet
                      </td>
                    </tr>
                    <tr>
			                <td style="font-size: 1px; line-height: 30px;" height="30"></td>
			              </tr>
                  </table>
                  
                  <table class="full-width" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="233" cellspacing="0" cellpadding="0" border="0" align="left">
	                  <tr>
			                <td style="font-size: 1px; line-height: 30px;" height="30"></td>
			              </tr>
										<tr>
                      <td align="center" style="padding-bottom: 15px;">
                        <img class="" src="http://mailtheme.ru/cdn/files/mail-icon-120.png" alt="загрузка..." width="100" height="100">
                      </td>
										</tr>
                    <tr>
                      <td valign="middle" style="font-family: 'arial', sans-serif; font-size: 18px; color: #88b825; line-height: 23px; font-weight: bold; padding-top: 5px; text-align: center;" class="medium-editor-element">
                       Lorem ipsum
                      </td>
                    </tr>
                    <tr>
                      <td valign="middle" style="font-family: 'arial', sans-serif; font-size: 15px; color: #111111; line-height: 20px; font-weight: normal; padding-top: 5px; text-align: center;" class="medium-editor-element">
                       dolor sit amet
                      </td>
                    </tr>
                    <tr>
			                <td style="font-size: 1px; line-height: 30px;" height="30"></td>
			              </tr>
                  </table>
                  
                  
                </td>
              </tr>
    				</tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
	<!-- END 3 BLOCK -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

# 2 BLOCK MOBILE

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
Button
 

# Read More

Master Template

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
	<title>Alpari</title>
	<style type="text/css">
    .ReadMsgBody { width: 100%; background-color: #e5e8eb; }
    .ExternalClass { width: 100%; background-color: #e5e8eb; }
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
    html { width: 100%; }
    body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; margin: 0; padding: 0; }
    table { border-spacing: 0; border-collapse: collapse; }
    table td { border-collapse: collapse; }
    .yshortcuts a { border-bottom: none !important; }
    img { display: block !important; }
    a { text-decoration: none; color: #a0cf50; }
    .visible_m {display: none !important;}
    .hidden{visibility: hidden;}
    .border-2 {border-right: 1px solid #cccccc;}
    .border-3 {border-left: 1px solid #cccccc; border-right: 1px solid #cccccc;}
    .hidden_m {visibility: visible;}
    
    /* Media Queries */    
    @media only screen and (max-width: 640px) {
      body { width: auto !important; }
      table[class="table600"] { width: 450px !important; }
      table[class="table-container"] { width: 90% !important; }
      table[class="container2-2"] { width: 47% !important; text-align: left !important; }
      table[class="full-width"] { width: 100% !important; text-align: center !important; }
      table[class="text-center-mobile"] { width: 100% !important; text-align: center !important; }
      img[class="img-full"] { width: 100% !important; height: auto !important; }
      .text-center-mobile { width: 100% !important; text-align: center !important; }
      .visible_m {display: block !important;}
      .hidden{visibility: visible !important;}
      .border-2 {width: 100%; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; border-left: none; border-right: none;}
      .border-3 {width: 100%; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; border-left: none; border-right: none;}
      .hidden_m {display: none; !important;}
      .padding-right-mobile {padding-right: 30px !important;}
    }

    @media only screen and (max-width: 479px) {
      body { width: auto !important; }
      table[class="table600"] { width: 359px !important; }
      table[class="table-container"] { width: 82% !important; }
      table[class="container2-2"] { width: 100% !important; text-align: left !important; }
      table[class="full-width"] { width: 100% !important; text-align: center !important; }
      img[class="img-full"] { width: 100% !important; }
      .visible_m {display: block !important;}
      .hidden{visibility: visible !important;}
      .title-small {font-size: 20px !important; line-height: 25px !important; padding: 30px 0 !important;}
      .padding-small {padding: 0 15px !important;}
      .padding-xsmall {padding: 0 5px !important;}
      .small-text {font-size: 15px !important; line-height: 20px !important;}
      .border-2 {width: 100%; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; border-left: none; border-right: none;}
      .border-3 {width: 100%; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; border-left: none; border-right: none;}
      .hidden_m {display: none; !important;}
      .padding-right-mobile {padding-right: 30px !important;}
    }
    
    @media only screen and (max-width: 320px) {
    table[class="table600"] { width: 300px !important; }
    .border-3 {width: 100%; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; border-left: none; border-right: none;}
    .hidden_m {display: none; !important;}
    .padding-right-mobile {padding-right: 30px !important;}
  }
  </style>
</head>
<body bgcolor="#e5e8eb" marginwidth="0" marginheight="0" fubon="fubon.pro" style="margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;" offset="0" topmargin="0" leftmargin="0">
<table bgcolor="#e5e8eb" cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse:collapse;"><tr><td>

	<!--------------------------------------------
		Сюда добавляются модульные блоки письма
	--------------------------------------------->

</td></tr></table>
</body>
</html>