01. Select a Base File

The base file is basically the shell that will hold the modules that will contain the actual newsletter content.
Choose a base file from the ones below, then copy the source code in the textarea just beneath it
Save the source code as a new html file directly in the /01.layout-creator folder as it depends on some images contained in the subfolders /01.layout-creator/images and /01.layout-creator/placeholders
Since newsletter coding is so different than website coding and behind the times it might be a good idea to review the section on general newsletter coding tips from the documentation.
If you want to change the color scheme read the documentation on how to do that before moving to step 02.

Base file 1

<html lang="en">
<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Versatile Newsletter v2 - Base File no. 1</title>
	
	<style type="text/css">
		
		/* 
		   NOTE: CSS should be inlined to avoid having it stripped in certain email clients like GMail.
		   Use online tools like http://premailer.dialect.ca/ to inline css easily 
		*/
		
		/* General styling */
		
		body { width:100%; margin:0; padding:0; }
		body, table, p, td, ul, ol{ color:#666666; font-family:Arial, sans-serif; font-size:12px; line-height:20px; }
		
		h1{ font-family:Arial, sans-serif; color:#000000; font-size:22px; }
			h1 span{ color:#000000; } /* Hotmail header color bug fix */
			h1 a{ text-decoration:none; color:#2A5DB0; }
			
		h2{ font-family:Arial, sans-serif; color:#000000; font-size:18px; }
			h2 span{ color:#000000; } /* Hotmail header color bug fix */
			h2 a{ text-decoration:none; color:#2A5DB0; }
			
		h3{ font-family:Arial, sans-serif; color:#000000; font-size:16px; font-weight:bold; }
			h3 span{ color:#000000; } /* Hotmail header color bug fix */
			h3 a{ text-decoration:none; color:#2A5DB0; }
			
		h4{ font-family:Arial, sans-serif; color:#000000; font-size:14px; font-weight:bold; }
			h4 span{ color:#000000; } /* Hotmail header color bug fix */
			h4 a{ text-decoration:none; color:#2A5DB0; }
		
		a{ color:#2A5DB0; }
		b{ color:#333333; }
		i{}
		
		ul{ list-style-type: disc; list-style-position:inside; margin-left:0; padding-left:6px; }
		ol{ list-style-type: decimal; list-style-position:inside; margin-left:0; padding-left:6px; }
		
		/* Custom Classes */
		
		.wrapper{ table-layout:fixed; }	/* Hotmail centering bug fix */
		.block{ display:block; } 		/* Gmail and Hotmail space under images bug fix */
		
		.shout{ color:#FF0000; }
		.silence{ color:#666666; font-weight:400; }
		
		.text-align-center{ text-align:center; }
		.text-align-right{ text-align:right; }
		
		.img-left-aligned{ margin-right:20px; margin-top:5px; }
		.img-right-aligned{ margin-left:20px; margin-top:5px; }
		
		.bordered-bottom{ border-bottom:1px solid #d6d6d6; }
		.bordered-bottom-left{ border-bottom:1px solid #d6d6d6; border-left:1px solid #d6d6d6; }
		
		/* Layout */
		
		.view-mobile-browser{ line-height:14px; font-size:11px; }
			.view-mobile-browser a{ color:#3a3a3a; }
	
		.ourwebsite{ line-height:14px; font-size:11px; }
			.ourwebsite a{ font-weight:bold; }
		
		.logo{}
		
		.menu-or-slogan{}
			.menu-or-slogan a{ color:#3a3a3a; text-decoration:underline; }
		
		.main-content-wrap{ border-width: 1px 1px 1px 1px; border-spacing: 0px; border-style: solid solid solid solid; 
							border-color: #d6d6d6 #d6d6d6 #d6d6d6 #d6d6d6; border-collapse: collapse; background-color: #ffffff; }
		
		.companyinfo{}
			.companyinfo a{}
		
		.subscription{}
			.subscription a{}
		
		.social{ border-top:1px solid #D0D0D0; border-bottom:1px solid #D0D0D0; }
			.social a{ color:#3a3a3a; text-decoration:none; }
		
		.copyright{}
			.copyright a{ color:#565656; text-decoration:none; }
		
	</style>

</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" bgcolor="#E3E3E3" background="images/bg.png">

<!-- wrapper table - needed as some readers strip the <html>, <head> and <body> tags -->	
<table cellpadding="0" cellspacing="0" width="100%"  bgcolor="#E3E3E3" background="images/bg.png" class="wrapper"><tr><td>
<!-- ///////////////////////////////////// Newsletter Content  ///////////////////////////////////// -->
	
	<br>	
		
	<table cellpadding="0" cellspacing="0" width="600" border="0" rules="none" align="center" ><tr><td>
	
	<!-- START HEADER CONTENT -->
	
		<table cellpadding="0" cellspacing="0" width="560" align="center"><tr>
			<td width="352" valign="top" class="view-mobile-browser">

					Mobile version <a href="http://www.site.com/mobile">here</a>.<br>
					To view hosted version click <a href="http://www.site.com/hosted">here</a>.
				
			</td>
			<td width="206" valign="middle" align="right" class="ourwebsite">

					Visit our website
					<br><a href="http://www.site.com/">www.YourWebsite.com</a>
			
			</td>
		</tr></table>
		
		<br><br>
		
		<table cellpadding="0" cellspacing="0" width="560" align="center"><tr>
			<td width="160" valign="top" class="logo">
			
				<a href="http://www.site.com/"><img src="images/logo.jpg" width="182" height="57" border="0" alt=""></a>
	
			</td>
			<td width="400" valign="middle" align="right" class="menu-or-slogan">

					  <a href="http://www.site.com/">Lementu</a> 
					| <a href="http://www.site.com/">Donecos</a> 
					| <a href="http://www.site.com/">Sagittis</a> 
					| <a href="http://www.site.com/">Lorem  & Pellentes</a> 
				
			</td>	
		</tr></table>
		
	<!-- END HEADER CONTENT -->
	
	</td></tr></table>
		
	<br>
		
	<table cellpadding="0" cellspacing="0" width="600" bgcolor="#ffffff" bordercolor="#d6d6d6"   
	border="1" rules="none" frame="border"  align="center" class="main-content-wrap"><tr><td>
	
	<img src="images/module-divider-3.gif" width="600" height="30" alt="" class="block">
	
	<!-- START MAIN CONTENT. ADD MODULES BELOW -->	

			

	<!-- END MAIN CONTENT -->
	<!-- START SOCIAL + COMPANY INFO + SUBSCRIPTION -->				
		
		<img src="images/module-divider-3.gif" width="600" height="40" alt=""  class="block">
		
		<table cellpadding="0" cellspacing="0" bgcolor="#efefef" class="social">
			<tr>
				
				<td width="30"  height="45" valign="middle">&nbsp;</td>
				
				<td width="120" height="45" valign="middle"><b>Connect with us:</b></td>
				
				<td width="25"  height="45" valign="middle">
					<a href="http://www.wordpress.com/" title=""><img src="images/social/wordpress.png" width="24" height="24" border="0" alt=""></a> 	 
				</td>
				<td width="88"  height="45" valign="middle">
					&nbsp;&nbsp;<a href="http://www.wordpress.com/" title="">Our Blog</a>
				</td>
				
				<td width="25"  height="45" valign="middle">
					<a href="http://www.facebook.com/" title=""><img src="images/social/facebook.png" width="24" height="24" border="0" alt="" ></a>	 
				</td>
				<td width="88"  height="45" valign="middle">
					&nbsp;&nbsp;<a href="http://www.facebook.com/" title="">Facebook</a>
				</td>
				
				<td width="25" height="45" valign="middle">
					<a href="http://www.linkedin.com/" title=""><img src="images/social/linkedin.png" width="24" height="24" border="0" alt=""></a>	 
				</td>
				<td width="88" height="45" valign="middle">				 
					&nbsp;&nbsp;<a href="http://www.linkedin.com/" title="">LinkedIn</a>				
				</td>
				
				<td width="25" height="45" valign="middle">
					<a href="http://www.twitter.com/" title=""><img src="images/social/twitter.png" width="24" height="24" border="0" alt=""></a> 	 
				</td>
				<td width="88" height="45" valign="middle">
					&nbsp;&nbsp;<a href="http://www.twitter.com/" title="">Twitter</a>
				</td>
				
			</tr>
		</table>

		<img src="images/module-divider-3.gif" width="600" height="25" alt="" class="block">
		
		<table cellpadding="0" cellspacing="0" width="540" align="center">
			<tr>
			
				<td width="265" valign="top" class="companyinfo">
				
					<p>
						<b>YourCompany</b>, Some Adress
						<br> Some City, XY 305, Some Country
						<br>T: +1 234 567 8910
						<br>E: <a href="mailto:office@yoursite.com">office@yoursite.com</a>
					</p>
		
				</td>
				<td width="20">&nbsp;</td><!-- spacer column -->
				<td width="255" valign="top" align="left" class="subscription">
				
					<p>
					   This newsletter was sent to mail@asite.com
					   <br>from YourCompany because you subscribed
					   <br><a href="http://www.site.com/">Unsubscribe instantly</a> 
					   | <a href="http://www.site.com/">Forward to a friend</a>
					</p>
					
				</td>
				
			</tr>
		</table>
		
		<img src="images/module-divider-3.gif" width="600" height="30" alt="" class="block">
			
	<!-- END SOCIAL + COMPANY INFO + SUBSCRIPTION -->
			
	</td></tr></table>
	
	<br>
	
	<table cellpadding="0" cellspacing="0" width="560" align="center">
	<tr><td valign="top" align="center"  class="copyright">
	
	<!-- START FOOTER CONTENT -->
		
		<p>© 2010 <b>Your Company</b>. All rights reserved.</p>
	
	<!-- END FOOTER CONTENT -->
	
	</td></tr></table>
	
	<br>
		
<!-- ///////////////////////////////////// End Newsletter Content  ///////////////////////////////////// -->
</td></tr></table><!-- end wrapper table-->	

</body>
</html>

Base file 2

<html lang="en">
<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Versatile Newsletter v2 - Base File no. 2</title>
	
	<style type="text/css">
		
		/* 
		   NOTE: CSS should be inlined to avoid having it stripped in certain email clients like GMail.
		   Use online tools like http://premailer.dialect.ca/ to inline css easily 
		*/
		
		/* General styling */
		
		body { width:100%; margin:0; padding:0; }
		body, table, p, td, ul, ol{ color:#666666; font-family:Arial, sans-serif; font-size:12px; line-height:20px; }
		
		h1{ font-family:Arial, sans-serif; color:#000000; font-size:22px; }
			h1 span{ color:#000000; } /* Hotmail header color bug fix */
			h1 a{ text-decoration:none; color:#2A5DB0; }
			
		h2{ font-family:Arial, sans-serif; color:#000000; font-size:18px; }
			h2 span{ color:#000000; } /* Hotmail header color bug fix */
			h2 a{ text-decoration:none; color:#2A5DB0; }
			
		h3{ font-family:Arial, sans-serif; color:#000000; font-size:16px; font-weight:bold; }
			h3 span{ color:#000000; } /* Hotmail header color bug fix */
			h3 a{ text-decoration:none; color:#2A5DB0; }
			
		h4{ font-family:Arial, sans-serif; color:#000000; font-size:14px; font-weight:bold; }
			h4 span{ color:#000000; } /* Hotmail header color bug fix */
			h4 a{ text-decoration:none; color:#2A5DB0; }
		
		a{ color:#2A5DB0; }
		b{ color:#333333; }
		i{}
		
		ul{ list-style-type: disc; list-style-position:inside; margin-left:0; padding-left:6px; }
		ol{ list-style-type: decimal; list-style-position:inside; margin-left:0; padding-left:6px; }
		
		/* Custom Classes */
		
		.wrapper{ table-layout:fixed; }	/* Hotmail centering bug fix */
		.block{ display:block; } 		/* Gmail and Hotmail space under images bug fix */
		
		.shout{ color:#FF0000; }
		.silence{ color:#666666; font-weight:400; }
		
		.text-align-center{ text-align:center; }
		.text-align-right{ text-align:right; }
		
		.img-left-aligned{ margin-right:20px; margin-top:5px; }
		.img-right-aligned{ margin-left:20px; margin-top:5px; }
		
		.bordered-bottom{ border-bottom:1px solid #d6d6d6; }
		.bordered-bottom-left{ border-bottom:1px solid #d6d6d6; border-left:1px solid #d6d6d6; }
		
		/* Layout */
		
		.view-mobile-browser{ line-height:14px; font-size:11px; }
			.view-mobile-browser a{ color:#3a3a3a; }
	
		.ourwebsite{ line-height:14px; font-size:11px; }
			.ourwebsite a{ font-weight:bold; }
		
		.logo{}
		
		.menu-or-slogan{}
			.menu-or-slogan a{ color:#3a3a3a; text-decoration:underline; }
		
		.main-content-wrap{ border-width: 1px 1px 1px 1px; border-spacing: 0px; border-style: solid solid solid solid; 
							border-color: #d6d6d6 #d6d6d6 #d6d6d6 #d6d6d6; border-collapse: collapse; background-color: #ffffff; }
		
		.companyinfo{}
			.companyinfo a{}
		
		.subscription{}
			.subscription a{}
		
		.social{ border-top:1px solid #D0D0D0; border-bottom:1px solid #D0D0D0; }
			.social a{ color:#3a3a3a; text-decoration:none; }
		
		.copyright{}
			.copyright a{ color:#565656; text-decoration:none; }
		
	</style>

</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" bgcolor="#E3E3E3" background="images/bg.png">

<!-- wrapper table - needed as some readers strip the <html>, <head> and <body> tags -->	
<table cellpadding="0" cellspacing="0" width="100%"  bgcolor="#E3E3E3" background="images/bg.png" class="wrapper"><tr><td>
<!-- ///////////////////////////////////// Newsletter Content  ///////////////////////////////////// -->
	
	<br>	
		
	<table cellpadding="0" cellspacing="0" width="600" border="0" rules="none" align="center" ><tr><td>
	
	<!-- START HEADER CONTENT -->
	
		<table cellpadding="0" cellspacing="0" width="560" align="center"><tr>
			<td width="352" valign="top" class="view-mobile-browser">

					Mobile version <a href="http://www.site.com/mobile">here</a>.<br>
					To view hosted version click <a href="http://www.site.com/hosted">here</a>.
				
			</td>
			<td width="206" valign="middle" align="right" class="ourwebsite">

					Visit our website
					<br><a href="http://www.site.com/">www.YourWebsite.com</a>
				
			</td>
		</tr></table>
		
		<br><br>
		
		<table cellpadding="0" cellspacing="0" width="560" align="center"><tr>
			<td width="160" valign="top" class="logo">
			
				<a href="http://www.site.com/"><img src="images/logo.jpg" width="182" height="57" border="0" alt=""></a>
	
			</td>
			<td width="400" valign="middle" align="right" class="menu-or-slogan">

					  <a href="http://www.site.com/">Lementu</a> 
					| <a href="http://www.site.com/">Donecos</a> 
					| <a href="http://www.site.com/">Sagittis</a> 
					| <a href="http://www.site.com/">Lorem  & Pellentes</a> 
				
			</td>	
		</tr></table>
		
	<!-- END HEADER CONTENT -->
	
	</td></tr></table>
		
	<br>
		
	<table cellpadding="0" cellspacing="0" width="600" bgcolor="#ffffff" bordercolor="#d6d6d6"   
	border="1" rules="none" frame="border"  align="center" class="main-content-wrap"><tr><td>
	
	<img src="images/module-divider-3.gif" width="600" height="30" alt=""  class="block">
	
	<!-- START MAIN CONTENT. ADD MODULES BELOW -->	

			

	<!-- END MAIN CONTENT -->
	<!-- START SOCIAL + COMPANY INFO + SUBSCRIPTION -->				
		
		<img src="images/module-divider-3.gif" width="600" height="40" alt=""  class="block">
		
		<table cellpadding="0" cellspacing="0" bgcolor="#efefef" class="social">
			<tr>
				
				<td width="600" height="15">&nbsp;</td>

			</tr>
		</table>

		<img src="images/module-divider-3.gif" width="600" height="25" alt=""  class="block">
		
		<table cellpadding="0" cellspacing="0" width="540" align="center">
			<tr>
			
				<td width="265" valign="top" class="companyinfo">
				
					<p>
						<b>YourCompany</b>, Some Adress
						<br> Some City, XY 305, Some Country
						<br>T: +1 234 567 8910
						<br>E: <a href="mailto:office@yoursite.com">office@yoursite.com</a>
					</p>
		
				</td>
				<td width="20">&nbsp;</td><!-- spacer column -->
				<td width="255" valign="top" align="left" class="subscription">
				
					<p>
					   This newsletter was sent to mail@asite.com
					   <br>from YourCompany because you subscribed
					   <br><a href="http://www.site.com/">Unsubscribe instantly</a> 
					   | <a href="http://www.site.com/">Forward to a friend</a>
					</p>
					
				</td>
				
			</tr>
		</table>
		
		<img src="images/module-divider-3.gif" width="600" height="30" alt="" class="block">
			
	<!-- END SOCIAL + COMPANY INFO + SUBSCRIPTION -->
			
	</td></tr></table>
	
	<br>
	
	<table cellpadding="0" cellspacing="0" width="560" align="center">
	<tr><td valign="top" align="center"  class="copyright">
	
	<!-- START FOOTER CONTENT -->
		
		<p>© 2010 <b>Your Company</b>. All rights reserved.</p>
	
	<!-- END FOOTER CONTENT -->
	
	</td></tr></table>
	
	<br>
		
<!-- ///////////////////////////////////// End Newsletter Content  ///////////////////////////////////// -->
</td></tr></table><!-- end wrapper table-->	

</body>
</html>