آموزش استفاده از mjml برای ساخت ایمیلهای واکنشگرا (جلسه 8) - طراحی یک قالب ساده - قسمت 3

‏  11 دقیقه
۰۳ آبان ۱۳۹۵

mjml

در این جلسه با ادامه آموزش mjml در خدمت شما هستیم. همونطور که اطلاع دارید در جلسه قبل ساخت یک قالب ساده ایمیل رو با هم دیگه شروع کردیم و در این جلسه قصد داریم اون رو ادامه بدیم.

در جلسه قبل تا ردیف سوم رو بصورت کامل ساختیم و در این جلسه قصد داریم این قالب رو به پایان برسونیم.

یک ردیف که از دو ستون تشکیل شده و هر کدام محتوی چیزی هستن

این ردیف از دو ستون تشکیل شده. یکی از اونا شامل یک تصویر و دیگری شامل متن می‌باشد. جهت صفحات یا Direction درون mjml بصورت پیش فرض از چپ به راست هست و هر ستونی که در ابتدا قرار بگیره، در سمت چپ قرار میگیره. بصورت زیر دو ستون رو قرار میدیم:

<mj-section background-color="white">

	<!-- Left image -->
	<mj-column>
		
	</mj-column>

	<!-- right paragraph -->
	<mj-column>
		
	</mj-column>
</mj-section>

حالا باید درون ستون اول تصویر مورد نظرمون رو قرار بدیم. برای قرار دادن تصویر از المنت mj-image استفاده میکنیم. چون این المنت هیچ فرزند دیگه ای نداره، لازم نیس که تگ بسته شونده یا closing tag برای اون بکار برد و میشه با قرار دادن / در انتهای اون، کار رو به پایان رسوند. همچنین با استفاده از ویژگی src آدرس تصویر مورد نظر رو مشخص میکنیم و با استفاده از width هم عرض تصویر رو قرار میدیم. بصورت زیر:

<mj-section background-color="white">

	<!-- Left image -->
	<mj-column>
		<mj-image width="200" src="https://designspell.files.wordpress.com/2012/01/sciolino-paris-bw.jpg" />
	</mj-column>

	<!-- right paragraph -->
	<mj-column>
		
	</mj-column>
</mj-section>

میبینید که تصویر مورد نظر قرار گرفته. حالا درون ستون بعدی که در سمت راست قرار میگیره، باید دو تگ mj-text قرار بدیم و یکی از اونا نقش عنوان ستون رو داره و دیگری نقش متن عادی رو بازی میکنه. بصورت زیر:

<mj-section background-color="white">

	<!-- Left image -->
	<mj-column>
		<mj-image width="200" src="https://designspell.files.wordpress.com/2012/01/sciolino-paris-bw.jpg" />
	</mj-column>

	<!-- right paragraph -->
	<mj-column>
		<mj-text font-style="italic" font-size="20" font-family="Helvetica Neue" color="#626262">
			Find amazing places
		</mj-text>

		<mj-text color="#525252">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus.
		</mj-text>
	</mj-column>
</mj-section>

حالا اگر خروجی رو در مرورگر مشاهده کنید، بصورت زیر خواهد بود:mjml basic template 6

میبینید که ردیف 4 هم به راحتی ساخته شد. حالا میریم سراغ ردیف پنجم.

بخش آیکونها

در اینجا شما باید سه ستون قرار بدین و درون هر کدوم آیکون مورد نظر خودتون رو قرار بدین. چون ما برای ستونها بصورت دستی عرضشون رو مشخص نمیکنیم، پس عرض اونا بصورت اتوماتیک و توسط mjml مشخص میشه و مقدار مساوی رو به اونا اختصاص میده:

<mj-section background-color="#fbfbfb">
	<mj-column>
		<mj-image width="100" src="https://up.7learn.com/ms/mjml/icon1.png" />
	</mj-column>

	<mj-column>
		<mj-image width="100" src="https://up.7learn.com/ms/mjml/icon2.png" />
	</mj-column>

	<mj-column>
		<mj-image width="100" src="https://up.7learn.com/ms/mjml/icon3.png" />
	</mj-column>
</mj-section>

بهمین راحتی. حالا اگر خروجی رو در مرورگر ببینید، بصورت زیر خواهد بود:mjml basic template 7

فقط یک ردیف دیگه باقی مونده تا این قالب ساده به پایان برسه.

بخش شبکه‌های اجتماعی

ما برای قرار دادن شبکه‌های اجتماعی در قالب ایمیل از المنت mj-social استفاده میکنیم که تقریبا همه شبکه‌های اجتماعی معروف رو در خودش جا داده. ما در اینجا از سه شبکه Facebook و Google Plus و Linkedin استفاده میکنیم. کدهای این Section بصورت زیر هستن:

<mj-section background-color="#e7e7e7">
	<mj-column>
		<mj-social display="facebook google linkedin" />
	</mj-column>
</mj-section>

میبینید که درون ویژگی display اسم شبکه‌های اجتماعی مورد نظر رو قرار دادیم و mjml بصورت اتوماتیک آیکون و بقیه چیزای لازم رو قرار میده. این المنت ویژگی‌ها دیگه هم داره که بعدا بصورت دقیق اونا رو بررسی میکنیم. فعلا فقط ظاهرش برامون مهمه. با این کد، این قالب به پایان میرسه. کد کدهای mjml بصورت زیر هستن:

<mjml>
	<mj-body>
		<mj-container>

			<!-- Company Header -->
			<mj-section background-color="#f0f0f0">
				<mj-column>
					<mj-text  align="center" font-style="italic" font-size="20" color="#626262">
						My Company
					</mj-text>
				</mj-column>
			</mj-section>

			<!-- Image Header -->
			<mj-section background-url="https://up.7learn.com/ms/mjml/header.jpg" background-size="cover" background-repeat="no-repeat">
				<mj-column>
					<mj-text  align="center" color="#fff" font-size="40" font-family="Helvetica Neue" padding-top="50"  padding-bottom="100">
						Slogan here
					</mj-text>

					<mj-button background-color="#F63A4D" href="https://7learn.com">
						Promotion
					</mj-button>
				</mj-column>
			</mj-section>

			<!-- Introduction Text -->
			<mj-section background-color="#fafafa">
				<mj-column width="400">
					<mj-text font-style="italic" font-size="20" font-family="Helvetica Neue" color="#626262">
						My Awesome Text
					</mj-text>

					<mj-text color="#525252">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus, sit amet suscipit nibh. Proin nec commodo purus. Sed eget nulla elit. Nulla aliquet mollis faucibus.
					</mj-text>

					<mj-button background-color="#F45E43" href="https://7learn.com">
						Learn more
					</mj-button>
				</mj-column>
			</mj-section>

			<!-- 2 columns section -->
			<mj-section background-color="white">

				<!-- Left image -->
				<mj-column>
					<mj-image width="200" src="https://up.7learn.com/ms/mjml/sciolino-paris-bw.jpg" />
				</mj-column>

				<!-- right paragraph -->
				<mj-column>
					<mj-text font-style="italic" font-size="20" font-family="Helvetica Neue" color="#626262">
						Find amazing places
					</mj-text>

					<mj-text color="#525252">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus.
					</mj-text>
				</mj-column>
			</mj-section>

			<!-- Icons -->
			<mj-section background-color="#fbfbfb">
				<mj-column>
					<mj-image width="100" src="https://up.7learn.com/ms/mjml/icon1.png" />
				</mj-column>

				<mj-column>
					<mj-image width="100" src="https://up.7learn.com/ms/mjml/icon2.png" />
				</mj-column>

				<mj-column>
					<mj-image width="100" src="https://up.7learn.com/ms/mjml/icon3.png" />
				</mj-column>
			</mj-section>

			<!-- Social icons -->
			<mj-section background-color="#e7e7e7">
				<mj-column>
					<mj-social display="facebook google linkedin" />
				</mj-column>
			</mj-section>


		</mj-container>
	</mj-body>
</mjml>

اگر این کدهارو به HTML تبدیل کنیم، بصورت زیر خواهند شد:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
  #outlook a { padding: 0; }
  .ReadMsgBody { width: 100%; }
  .ExternalClass { width: 100%; }
  .ExternalClass * { line-height:100%; }
  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]><!-->
<style type="text/css">
  @media only screen and (max-width:480px) {
    @-ms-viewport { width:320px; }
    @viewport { width:320px; }
  }
</style>
<!--<![endif]-->
<!--[if mso]>
<xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml>
<![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, * [aria-labelledby="mj-column-per-100"] { width:100%!important; }
.mj-column-per-50, * [aria-labelledby="mj-column-per-50"] { width:50%!important; }
.mj-column-per-33, * [aria-labelledby="mj-column-per-33"] { width:33.333333333333336%!important; }
.mj-column-px-400, * [aria-labelledby="mj-column-px-400"] { width:400px!important; }
  }
</style>
</head>
<body>
  <div><!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
        <tr>
          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
      <![endif]--><div style="margin:0 auto;max-width:600px;background:#f0f0f0;"><table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#f0f0f0;" align="center" border="0"><tbody><tr><td style="text-align:center;vertical-align:top;font-size:0px;padding:20px 0px;"><!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
      <![endif]--><div aria-labelledby="mj-column-per-100" class="mj-column-per-100" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;"><table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"><tbody><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="center"><div style="cursor:auto;color:#626262;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:20px;font-style:italic;line-height:22px;">
						My Company
					</div></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]--></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]-->
      <!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
        <tr>
          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
      <![endif]--><div style="margin:0 auto;max-width:600px;background:url(https://up.7learn.com/ms/mjml/header.jpg) top center / cover no-repeat;"><!--[if mso | IE]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">
        <v:fill origin="0.5, 0" position="0.5,0" type="tile" src="https://up.7learn.com/ms/mjml/header.jpg" />
        <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
      <![endif]--><table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:url(https://up.7learn.com/ms/mjml/header.jpg) top center / cover no-repeat;" align="center" border="0" background="https://up.7learn.com/ms/mjml/header.jpg"><tbody><tr><td style="text-align:center;vertical-align:top;font-size:0px;padding:20px 0px;"><!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
      <![endif]--><div aria-labelledby="mj-column-per-100" class="mj-column-per-100" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;"><table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"><tbody><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;padding-top:50px;padding-bottom:100px;" align="center"><div style="cursor:auto;color:#fff;font-family:Helvetica Neue;font-size:40px;line-height:22px;">
						Slogan here
					</div></td></tr><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="center"><table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0"><tbody><tr><td style="border-radius:3px;color:#ffffff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#F63A4D"><a href="https://7learn.com" style="display:inline-block;text-decoration:none;background:#F63A4D;color:#ffffff;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;margin:0px;" target="_blank">
						Promotion
					</a></td></tr></tbody></table></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]--></td></tr></tbody></table><!--[if mso | IE]>
        </v:textbox>
      </v:rect>
      <![endif]--></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]-->
      <!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
        <tr>
          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
      <![endif]--><div style="margin:0 auto;max-width:600px;background:#fafafa;"><table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#fafafa;" align="center" border="0"><tbody><tr><td style="text-align:center;vertical-align:top;font-size:0px;padding:20px 0px;"><!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:400px;">
      <![endif]--><div aria-labelledby="mj-column-px-400" class="mj-column-px-400" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;"><table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"><tbody><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="left"><div style="cursor:auto;color:#626262;font-family:Helvetica Neue;font-size:20px;font-style:italic;line-height:22px;">
						My Awesome Text
					</div></td></tr><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="left"><div style="cursor:auto;color:#525252;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus, sit amet suscipit nibh. Proin nec commodo purus. Sed eget nulla elit. Nulla aliquet mollis faucibus.
					</div></td></tr><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="center"><table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0"><tbody><tr><td style="border-radius:3px;color:#ffffff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#F45E43"><a href="https://7learn.com" style="display:inline-block;text-decoration:none;background:#F45E43;color:#ffffff;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;margin:0px;" target="_blank">
						Learn more
					</a></td></tr></tbody></table></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]--></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]-->
      <!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
        <tr>
          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
      <![endif]--><div style="margin:0 auto;max-width:600px;background:white;"><table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:white;" align="center" border="0"><tbody><tr><td style="text-align:center;vertical-align:top;font-size:0px;padding:20px 0px;"><!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:300px;">
      <![endif]--><div aria-labelledby="mj-column-per-50" class="mj-column-per-50" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;"><table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"><tbody><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="center"><table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="center" border="0"><tbody><tr><td style="width:200px;"><img alt="" title="" height="auto" src="https://up.7learn.com/ms/mjml/sciolino-paris-bw.jpg" style="border:none;border-radius:;display:block;outline:none;text-decoration:none;width:100%;height:auto;" width="200"></td></tr></tbody></table></td></tr></tbody></table></div><!--[if mso | IE]>
      </td><td style="vertical-align:top;width:300px;">
      <![endif]--><div aria-labelledby="mj-column-per-50" class="mj-column-per-50" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;"><table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"><tbody><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="left"><div style="cursor:auto;color:#626262;font-family:Helvetica Neue;font-size:20px;font-style:italic;line-height:22px;">
						Find amazing places
					</div></td></tr><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="left"><div style="cursor:auto;color:#525252;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus.
					</div></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]--></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]-->
      <!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
        <tr>
          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
      <![endif]--><div style="margin:0 auto;max-width:600px;background:#fbfbfb;"><table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#fbfbfb;" align="center" border="0"><tbody><tr><td style="text-align:center;vertical-align:top;font-size:0px;padding:20px 0px;"><!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:200px;">
      <![endif]--><div aria-labelledby="mj-column-per-33" class="mj-column-per-33" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;"><table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"><tbody><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="center"><table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="center" border="0"><tbody><tr><td style="width:100px;"><img alt="" title="" height="auto" src="https://up.7learn.com/ms/mjml/icon1.png" style="border:none;border-radius:;display:block;outline:none;text-decoration:none;width:100%;height:auto;" width="100"></td></tr></tbody></table></td></tr></tbody></table></div><!--[if mso | IE]>
      </td><td style="vertical-align:top;width:200px;">
      <![endif]--><div aria-labelledby="mj-column-per-33" class="mj-column-per-33" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;"><table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"><tbody><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="center"><table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="center" border="0"><tbody><tr><td style="width:100px;"><img alt="" title="" height="auto" src="https://up.7learn.com/ms/mjml/icon2.png" style="border:none;border-radius:;display:block;outline:none;text-decoration:none;width:100%;height:auto;" width="100"></td></tr></tbody></table></td></tr></tbody></table></div><!--[if mso | IE]>
      </td><td style="vertical-align:top;width:200px;">
      <![endif]--><div aria-labelledby="mj-column-per-33" class="mj-column-per-33" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;"><table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"><tbody><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="center"><table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="center" border="0"><tbody><tr><td style="width:100px;"><img alt="" title="" height="auto" src="https://up.7learn.com/ms/mjml/icon3.png" style="border:none;border-radius:;display:block;outline:none;text-decoration:none;width:100%;height:auto;" width="100"></td></tr></tbody></table></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]--></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]-->
      <!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
        <tr>
          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
      <![endif]--><div style="margin:0 auto;max-width:600px;background:#e7e7e7;"><table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#e7e7e7;" align="center" border="0"><tbody><tr><td style="text-align:center;vertical-align:top;font-size:0px;padding:20px 0px;"><!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
      <![endif]--><div aria-labelledby="mj-column-per-100" class="mj-column-per-100" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;"><table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"><tbody><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="center"><div><!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0" align="undefined"><tr><td>
      <![endif]--><table role="presentation" cellpadding="0" cellspacing="0" style="float:none;display:inline-table;" align="center" border="0"><tbody><tr><td style="padding:4px;vertical-align:middle;"><table role="presentation" cellpadding="0" cellspacing="0" style="background:#3b5998;border-radius:3px;width:20px;" border="0"><tbody><tr><td style="vertical-align:middle;width:20px;height:20px;"><a href="https://www.facebook.com/sharer/sharer.php?u=[[SHORT_PERMALINK]]"><img alt="facebook" height="20" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/facebook.png" style="display:block;border-radius:3px;" width="20"></a></td></tr></tbody></table></td><td style="padding:4px 4px 4px 0;vertical-align:middle;"><a href="https://www.facebook.com/sharer/sharer.php?u=[[SHORT_PERMALINK]]" style="text-decoration:none;text-align:left;display:block;border-radius:3px;color:#333333;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;">Share</a></td></tr></tbody></table><!--[if mso | IE]>
      </td><td>
      <![endif]--><table role="presentation" cellpadding="0" cellspacing="0" style="float:none;display:inline-table;" align="center" border="0"><tbody><tr><td style="padding:4px;vertical-align:middle;"><table role="presentation" cellpadding="0" cellspacing="0" style="background:#dc4e41;border-radius:3px;width:20px;" border="0"><tbody><tr><td style="vertical-align:middle;width:20px;height:20px;"><a href="https://plus.google.com/share?url=[[SHORT_PERMALINK]]"><img alt="google" height="20" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/google-plus.png" style="display:block;border-radius:3px;" width="20"></a></td></tr></tbody></table></td><td style="padding:4px 4px 4px 0;vertical-align:middle;"><a href="https://plus.google.com/share?url=[[SHORT_PERMALINK]]" style="text-decoration:none;text-align:left;display:block;border-radius:3px;color:#333333;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;">+1</a></td></tr></tbody></table><!--[if mso | IE]>
      </td><td>
      <![endif]--><table role="presentation" cellpadding="0" cellspacing="0" style="float:none;display:inline-table;" align="center" border="0"><tbody><tr><td style="padding:4px;vertical-align:middle;"><table role="presentation" cellpadding="0" cellspacing="0" style="background:#0077b5;border-radius:3px;width:20px;" border="0"><tbody><tr><td style="vertical-align:middle;width:20px;height:20px;"><a href="https://www.linkedin.com/shareArticle?mini=true&ampurl=[[SHORT_PERMALINK]]&amptitle=&ampsummary=&ampsource="><img alt="linkedin" height="20" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/linkedin.png" style="display:block;border-radius:3px;" width="20"></a></td></tr></tbody></table></td><td style="padding:4px 4px 4px 0;vertical-align:middle;"><a href="https://www.linkedin.com/shareArticle?mini=true&ampurl=[[SHORT_PERMALINK]]&amptitle=&ampsummary=&ampsource=" style="text-decoration:none;text-align:left;display:block;border-radius:3px;color:#333333;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;">Share</a></td></tr></tbody></table><!--[if mso | IE]>
      </td></tr></table>
      <![endif]--></div></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]--></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]--></div>
</body>
</html>

میبینید که کدها چقد پیچیده هستن و mjml همه این کارهای سخت رو برای ما انجام داده. خروجی در مرورگر بصورت زیر هست:mjml basic template 8

میبینید که چقد زیبا این قالب نمایش داده میشه. اگه یادتون باشه گفتم که mjml یکی از مزیتهاش واکنشگرا یا Responsive بودنش هست. حالا اگر سایز مرورگر رو کم کنیم و اون رو ببینیم، خروجی بصورت زیر هست:mjml basic template 9

میبینید که بخوبی واکنشگرا شده و المنتها تغییر مکان میدن.

امیدوارم از این جلسه خوشتون اومده باشه.

موفق باشید

یا علی

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !