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

- visibility ۰ mode_comment

mjml

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

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

تگ mj-column

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

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

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

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

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

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

تگ mj-list

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

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

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

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

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

موفق باشید

یا علی

comment دیدگاه کاربران

نیاز به لاگین

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