illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

0 127 ۲۹ مهر ۹۵

mjml

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

این قالب یک ایمیل واکنشگرا هست:mjml structure

شبیه به یک قالب HTML عادی، ما میتونیم ایمیلهامون رو Grid بندی کنیم. محتوای ایمیل در mjml درون تگ mjml-container قرار میگیره و همه المنتهای دیگه درون اون قرار میگیره. پس mjml-container رو اگه بخایم درون عکس نمایش بدیم، بصورت زیر هست:mjml structure 2

شما میتونین درون mjml-container تگهای mjml-section قرار بدین که درون عکس بصورت زیر هست:mjml structure 3

درون هر mjml-section، تعدادی mjml-column قرار میگیره که هر کدوم از اونا یک ستون رو درون ردیف بوجود میاره. بصورت زیر:mjml structure 4

Column ها همون بخشی هستن که ایمیل ما رو واکنشگرا میکنن. اونا بصورت اتوماتیک مکان خودشون رو تغییر میدن تا درون هر دستگاهی اعم از Mobile و Desktop بخوبی نمایش داده بشن.

برای زیبایی بیشتر درون mjml فقط میتونین از 4 ستون درون یک ردیف استفاده کنید و بیشتر از 4 تا مجاز نیستید.

در اینجا مواردی که باید با اونا برای ادامه کار آشنایی داشته باشید رو خدمتتون بیان میکنم.

Column Sizing یا مشخص کردن اندازه ستونها

سایزبندی اتوماتیک:

همونطور که در بالا اشاره کردیم، درون هر Section یا ردیف، تعدادی Column یا ستون قرار میگیره. (حداکثر 4 ستون)

رفتار پیش فرضی که موتور تبدیل کننده mjml از اون تبعیت میکنه، اینه که فضای هر Section رو بین همه ستونهایی که درون اون قرار میدید، پخش میکنه. حداکثر Width هر ردیف یا Section میتونه 600 پیکسل باشه. هر المنتی که درون هر ردیف قرار میگیره، عرضش به اندازه عرض همون ردیف میشه و width اون برابر با 100  درصد هست.

فرض کنید که ما چنین کدی داریم:

چون درون ردیف یا section بالا، دو تا Column قرار دادیم، پس موتور mjml برای هر کدوم از ستون ها عرض برابر با 50 درصد یا همون 300 پیکسل رو قرار میده. اگه بجای دو تا ستون از 3 تا ستون استفاده کنیم بجای 50 درصد، عرض هر کدوم 33 درصد میشه و اگر 4 تا ستون بزاریم، عرض هر کدوم 25 درصد میشه.

سایزبندی دستی یا Manual:

اگر شما قصد داشته باشید که بیشتر از 4 ستون درون هر ردیف قرار بدین و یا اینکه عرض هر کدوم رو بصورت دستی تغییر بدین، میتونین اون رو بصورت دستی انجام بدین ولی دیگه موتور mjml اون رو بصورت اتوماتیک انجام نمیده.

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

همونطور که در کد بالا میبینید، عرض یا width ستون اول رو برابر با 300 پیکسل قرار دادیم. شاید شما فرض کنید که ستون دوم هم 300 پیکسل باشه ولی اینطور نیست. اگر شما width یکی از ستونها رو بصورت دستی انتخاب کنید، دیگه باید همه رو بصورت دستی مشخص کنید و این کار دیگه بصورت اتوماتیک انجام نمیشه. همیشه این رو در نظر داشته باشید که عرض یا width هر ردیف بیشتر از 600 پیکسل نمیشه.

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

موفق باشید

یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram