آموزش استفاده از mjml برای ساخت ایمیلهای واکنشگرا (جلسه 14) - آموزش Column و list

دسته بندی: آموزش
زمان مطالعه: 4 دقیقه
۱۵ آبان ۱۳۹۵

mjml

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

در جلسه گذشته در مورد دو تگ mj-container و mj-section کردیم. در این جلسه قصد داریم در مورد تگهای mj-column و mj-list صحبت کنیم.

تگ mj-column

تگ mj-column به شما اجازه میده که section‌ها یا ردیفها رو بصورت افقی تقسیم بندی و مدیریت کنید. این تگ فقط بعنوان فرزند mj-section قرار میگیره و در غیر اینصورت موتور mjml اون رو نخواهد شناخت. برای اینکه Column‌ها قراره واکنشگرا و Responsive باشن، پس عرضها رو بصورت درصدی یا Percentage قرار میدیم. محتوای مورد نظر شما درون column یا ستونها قرار میگیره. المنتی که درون ستونها قرار میگیره، عرضش 100% میشه و کل عرض ستون رو میگیره.

ستونها بصورت زیر قرار داده میشن:

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <!-- Your first column -->
        </mj-column>
        <mj-column>
          <!-- Your second column -->
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

همونطور که میبینید، درون Section یا ردیف بالا، دو ستون قرار گرفته. موتور mjml بصورت اتوماتیک، کل عرض section رو به دو قسمت مساوی بین ستونها تقسیم میکنه. حالا میتونین درون ستونها، محتویات مورد نظرتون رو قرار بدین. ویژگی‌های زیر برای این المنت قابل استفاده هست:

  • width : این ویژگی عرض ستون رو مشخص میکنه که واحد اون پیکسل یا درصد هست. مقدار پیش فرض این ویژگی بر اساس کل ردیف یا section محاسبه میشه. برای اینکار 100 تقسیم بر تعداد ستونها میشه. هر ستون به اندازه این مقدار، از ردیف درصد دارن.
  • vertical-align : این ویژگی ترازبندی عمودی رو مشخص میکنه و سه مقدار top و bottom و middle رو قبول میکنه. مقدار پیش فرض اون، Top هست.
  • background-color : رنگ پس زمینه ستون رو مشخص میکنه

کد زیر رو در نظر بگیرید:

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column width="25%" background-color="#00f">
	        <mj-text>
	        	Left Column
	        </mj-text>
        </mj-column>
        <mj-column width="75%" background-color="#0f0">
          <mj-text>
	        	Left Column
	        </mj-text>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

خروجی اون در مرورگر بصورت زیر هست:mj-column

تگ mj-list

شما با استفاده از تگ mj-list میتونین به راحتی لیستهای نامرتب یا unordered list بسازید و درون ایمیل خودتون قرار بدین. کد زیر رو در نظر بگیرید:

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
	        <mj-list>
            <li>Go to the store</li>
            <li>sleep</li>
            <li>eat</li>
            <li>sleep again</li>
          </mj-list>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

میبینید که آیتمهای منو درون li قرار گرفتن و درون تگ mj-list گذاشته شدن. خروجی در مرورگر بصورت زیر خواهد بود:mj-list

این تگ ویژگی‌های زیر رو میگیره:

  • color : رنگ متن رو مشخص میکنه. بصورت پیش فرض مشکی هست
  • font-family : فونت متن رو مشخص میکنه.
  • font-size : سایز متن رو مشخص میکنه و بصورت پیش فرض 13 پیکسل هست
  • line-height : فضای بین خطوط رو مشخص میکنه. مقدار پیش فرض اون 22 پیکسل هست
  • padding : فضای خالی نسبت به اطراف لیست به وجود میاورد. مقدار پیش فرض اون 10px 25px هست

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

موفق باشید

یا علی

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

جلسات دوره

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

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

نیاز به لاگین

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